As HTML5 becomes more and more popular there is a lot of work being done to make the lives of mobile application designers and developers easier by allowing them to build once and target deployment for all popular mobile platforms and browsers. There is now a great HTML5 application framework called Sencha Touch and it allows web designers/developers to use their skills to build compelling native/browser-based applications for all platforms with a shared codebase. This presentation will introduce users to Sencha Touch and its various benefits and walk them through the process of creating a Sencha Touch project and deploying it to multiple mobile platforms.
Using Sencha Touch to build Cross-platform HTML5 Apps - FITC Screens 2011
1. Using the Sencha Touch for Building
Cross-Platform HTML5 Mobile
Applications
Presenters:
Mukul Seth
Nathaniel Bagnell
2. Agenda
› Who we are and what we do
› The Current HTML5/CSS3 Landscape
› Why Sencha Touch?
› Getting Started
› Working with Views and Data- Demo
› Theming in Sencha Touch - Demo
› Q/A
4. Who we are
Mukul Seth Nathaniel Bagnell
Interactive Developer, Interactive Developer,
Digiflare Inc. Digiflare Inc.
5. What we do
› Browser - HTML5, Branded Websites
› iOS – Mobile and Tablet
› Android – Mobile and Tablet
› Windows Phone 7, Windows Tablet
› BB6, BB7, PlayBook, WebKit, AIR, QNX
› Microsoft Xbox Kinect
› Google TV
› more…
17. Getting Started
› What makes a Sencha Touch Application?
› index.html
› App.js
› sencha touch libs (js files)
› sencha touch resources (images/css/etc…)
› Your js/css files and other
assets(images, fonts, etc…)
22. Working with Views
› Basic Sencha Touch Controls
› View/Control Creation
› View/Control Definitions
› View/Control Customization
› Layout Types
› Method overrides
› Sencha Touch Kitchen Sink (Sample App)
› will be one of your best friends
23. Basic Sencha Touch Controls
› Component – Essentially an HTML Container
› Panel – Complex container, supports child items
› List – Most commonly used DataView control
› Button – pretty self-explanatory
› TabPanel – A specialized panel, allows to easily
switch between child items using Tabs
› Carousel – A specialized panel, allows to easily
switch between child items using swipe gestures
32. Working with Data
› Data Models – define data schema
› LocalStorage proxy example
› Data Stores – manage/store data instances
› Manipulating Data and Stores
› Binding data to DataView Controls (i.e. Lists)
39. Introduction to Sass and Compass
› Sencha uses CSS, accompanied by Sass and
Compass to help theme Sencha apps
› Sass and gives you the ability to dynamically
define CSS files, making your code much easier to
maintain
› Compass is a CSS framework for SASS that gives
you set of predefined “mixins” to help make
common CSS (and CSS3) much easier to produce
40. Introduction to Sass and Compass
› Sass allows you to use things like variables,
“mixins” (essentially functions), Nested
Rules, Expressions, and Control Structures
› If this sounds familiar, you may be thinking
about LESS. LESS is very similar to Sass with
just a few differences
41. Getting Started with Sass and Compass
› If you don’t have Ruby and the RubyGems
package manager, download Ruby 1.9.3,
which includes RubyGems
› Ruby comes bundled with the mac, but most likely
not version 1.9.3.
› Windows users can download an installer package
at http://rubyinstaller.org/
42. Getting Started with Sass and Compass
› Run the following commands:
› gem install sass
› gem install compass
› If all goes well, you have Sass and Compass!
› Note: You may need to run your
console/command prompt as an administrator
43. Getting Started with Sass and Compass
› To quickly create a new project, set your console
to the directory you wish to have your stylesheet
assets placed and run the following command:
› compass create
› Compass should have created a directory
structure with some .SCSS and .SCSS files.
› This directory structure nearly replicates the
Sencha Touch directory structure
44. Getting Started with Sass and Compass
› What you want to do is have Compass “watch”
the directory your .SCSS files are in. To do this:
› set your console to the directory with .SCSS files
› Run the command: compass watch
› Compass and Sass will keep “watch” so long as the
console is open
› Once you change a .SCSS file, Compass and Sass
will parse it automatically and place the parsed
.CSS file in the appropriate directory
45. Sass Example: Variables
› Sass variables are declared with a dollar sign ($) and
assigned a value with the colon (:)
› You can then place the variable wherever you
please, it will be parsed and outputted to your .CSS
file accordingly
46. Sass Example: “Mixins”
› A mixin is essentially code that you want to have re-used
throughout the stylesheet
› You define your mixin with the @mixin keyword followed by a name of your choice
› To call a mixin, simply place it in the body of the selection you wish to apply it to
47. Sass Example: “Mixins” Continued
› A mixin can take arguments too! You can define your parameters
within the parentheses
› You can specify default values to make certain parameters optional
49. Sass Example: Nested Rules Continued
› You can also nest same-type properties as you
may have noticed a few slides back
50. Sass Example: Expressions
› Sass can parse expressions that you may need
› Yet another flashback, take a look at the ‘size’
attribute
51. Sass Example: Control Structures
› You can define four types of control structures
within your Sass document.
› They are @if, @for, @each, and @while
54. What’s Compass About Then?
› Compass is a extends Sass with a whole bunch of
additional modules filled with useful mixins and
helper functions
› Generic Helper functions
› Utility mixins
› CSS3 mixins
› Layout mixins
› Reset mixins
› Typography mixins
55. Sass + Compass in Sencha Tocuh
› Sass & Compass are no different in Sencha
Touch
› The directory structure Sencha uses to store
Stylesheet files is nearly identical to what
Compass gives you when you create a
Compass project
56. Sass + Compass in Sencha Tocuh
› The one notable addition
is the themes directory
› This directory contains
the Sencha-specific
assets such as mixins,
icons, base templates,
etc. that are available to
all of your themes
57. How things come together
› sencha-touch.css is a basic theme file that
brings in all the mixins and utilizies their
respective variable values for things like
colours, paddings for buttons, etc.
58. How things come together
› You don’t need to include all of the mixins if you know you’re
not going to use them
› Each mixin will contain base style properties, which you can
override by reassigning the appropriate variable in the
sencha-touch.css file
59. Creating Themes
› Sencha comes with a few themes for you to use, they are an
Apple theme, BlackBerry Theme, Android Theme, and then
their base Sencha theme
› Let’s modify an existing theme to see how easy it is to change
the appearance of your application
60. Creating Themes
› Let’s modify the Apple theme
› In the Apple.scss file, there are several variables that have been
defined. These variables are used in their respective mixin, e.x. the
variable $tabs-dark: #111; will be used in the tabs mixin
› We can change any variable in any mixin that we please, all we
need to do is reassign them with our desired value at the top of our
theme’s .scss file
› If you want to make a global change that will be
applied to any theme that utilizes the respective
mixin, just change the default value in the mixin’s .scss
file
61. Creating Themes
› Creating themes in Sencha is very simple once you
understand the workings of Sass and Compass
› There’s many variables that you can change in Sencha, their
API Documentation contains a list of all the variables and
where they are stored
› In addition to the variables, the documentation also contains
all Sencha-specific mixins available to you as well
62. Where to go from here?
› Sencha Project Homepage › Compass Homepage
› http://www.sencha.com/ › http://www.compass-style.org/
› API Docs/Samples/Help/Tutorials › Digiflare Homepage
› http://docs.sencha.com/touch/2-0/ › http://www.digiflare.com
› Sass Homepage › Digiflare Twitter
› http://www.sass-lang.com/ › @Digiflare
-When people talk about an HTML5 application, it really involves 3 things-HTML5-But it also involves utilizing CSS3 to create some snazzy looking interfaces and using Javascript APIs and libraries to power the interactivity and functionality of the app-In fact a lot of the new HTML5 elements have JavaScript APIs that you need to use in order to harness the power of that element-When you look at what sorts of functionality the HTML5 spec covers, you’ll understand why you need to leverage JavaScript.-The specification is so big that it’s grouped into 8 technology areas
-Performance for things like JavaScript-Semantics for the new attributes and tags to describe your document-Styling which includes things like CSS and typography-Multimedia for elements such as our new Video and Audio-3D effects which are possible through Canvas and SVG elements-Offline and Storage for creating apps that don’t need to be connectived-Connectivity encompasses things like web sockets and server sent requests-Device access which refers to things like geo location, accessing the web cam and microphone-One thing to keep in mind is that this chart represents the intended future state of HTML5-Not all of these features are available now
Show Kitchen Sink
Show Kitchen Sink – with Source Code example
Show Kitchen Sink – with Source Code example
With Sass and Compass, so much is possible to make your lives easier when coding complex CSS. Some examples include variables, mixins (which are essentially functions), nested rules, expression evaluation, namespaces, and control structures, all of which have a scope.These are some of the high level branches of what Sass offers and within those branches are often a respectable amount of capabilities, so much that we cannot cover all of them today.That said, Sass may sound familiar, you may think it sounds like LESS. With Sass Vs. LESS, there's only Minor Syntax Differences and Dynamic Implementation Method. Sass is done Server Side through Ruby, where as LESS is done Client Side through JavaScript. That said though, both can be parsed locally during development. Both can be parsed locally during development.Since we’re dealing with Sencha, and Sencha uses Sass, we’ll only talk about Sass.
Watching can also be done via Sass, but the Compass command is simpler and just as effective.
You define variables in Sass with the dollar and then assign a value with the colon.Supported Data Types include numbers, strings of text (with and without quotes), color values (hex, name, and RGBA), booleans, and a lists of values.
Mixins allow you to define blocks of code that can be re-used. For example, if you were to http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
You can nest rules inside other rules to automatically inherit the parent’s selector. This helps eliminate the repetition of parent selectors to target something within the parent. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules
You can nest rules inside other rules to automatically inherit the parent’s selctor. This helps eliminate the repetition of parent selectors to target something within the parent.http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules
Sass has support for four basic control structures, those being if, for, each and while. If is a conditional control structure, where as the others are loops.http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives
In this example, we utilized everything we looked at individually. This is a mixin called LinkBuilder that will build a set of a tags along with their respective seduo-states.
After we’ve built our mixin, we can “include” it in our CSS document like shown above. The first include will just generate a:* tags, however the second @include is nested in the nav { } block, thus every generated item from our mixin will have the ‘nav’ leading in their selector.
Now that we looked at Sass, you may be asking – Okay, but where’s Compass? Well, Compass is a CSS Authoring Framework that extends Sass and provides a variety of useful modules that contain a wide selection of useful functions (mixins) and Layout helpers include sticky footers, grid backgrounds and stretching boxes. I’ve used a couple already in some previous examples, i.e. in our most recent one I was using the ‘scale-lightness’ helper function.Since there are so many, we can’t look at them all in depth today, however we can look at a few I’ve utilized in the demo page (reset and the border-radius).Also, as a note, there’s other Libraries/Frameworks available for you to utilize that are made to extend Sass, for example there’s one called Zocial (with a Zed) that is utilized to just make CSS3 Social Buttons and Icons. Since you can run these locally during your development if you choose, there’s really no overhead and thus no reason why you shouldn’t give it a shot.http://compass-style.org/reference/compass/DECIDE IF YOU WANT TO MAKE A SLIDE FOR EACH OF THEM.
The only differences are a few additional config files that allow you to control the output for the CSS grade that is being generated (debug/dev and production). Also, there’s a folder called “themes”. In this folder is where all of the
The only differences are a few additional config files that allow you to control the output for the CSS grade that is being generated (debug/dev and production). Also, there’s a folder called “themes”. In this folder is where all of the
You see that in the sencha-touch.css we have an import directive that essentially adds in base CSS code, and then following that we have a handful of mixins, which are appropricately named relative to the actual UI component’s name that Sencha Touch uses.
You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose