Using the Sencha Touch for Building Cross-Platform HTML5 Mobile
Applications
Presenters:Mukul Seth
Nathaniel Bagnell
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
Introductions
Who we are
Mukul Seth Nathaniel Bagnell
Interactive Developer, Digiflare Inc.
Interactive Developer, Digiflare Inc.
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…
What we do
In other words..
›Everything!
Some of our clients
MSN Video Portal (Win7 Slate)
CBC Elections Map (iPad)
McCain Menu Advantage (PlayBook)
›What do these apps have in common?
Ans. __________
›What do these apps have in common?
Ans. HTML5/CSS3
HTML5/CSS3
HTML5/CSS3
Enter: Sencha Touch
Why Sencha Touch?
Cross-platformFaster, cheaper, easierHighly customizable
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…)
index.html
App.js
Sencha Touch Libs and CSS
Demo Application
http://github.com/Digiflare/foosbrawl
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
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
View/Control Creation
Ext.create Shorthand equivalent
View/Control Definition
View/Control Customization
Layout Types
fit card
Card-based Controls
TabPanel Carousel
Layout Types – cont’d
vbox hbox
Vbox & Hbox Layouts - Flex
flex config config defaults
Method Overrides
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)
Data Models
Data Stores
Manipulating Data
Model Creation Model Update
Manipulating Stores – Filtering
Binding Data
Sencha Touch Theming
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
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
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/
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
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
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
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
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
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
Sass Example: Nested Rules
Sass Example: Nested Rules Continued
› You can also nest same-type properties as you may have noticed a few slides back
Sass Example: Expressions
› Sass can parse expressions that you may need
› Yet another flashback, take a look at the ‘size’ attribute
Sass Example: Control Structures
› You can define four types of control structures within your Sass document.
› They are @if, @for, @each, and @while
Sass Example: Putting it all Together
Sass Example: Putting it all Together
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
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
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
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.
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
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
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
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
Where to go from here?
› Sencha Project Homepage› http://www.sencha.com/
› API Docs/Samples/Help/Tutorials› http://docs.sencha.com/touch/2-0/
› Sass Homepage› http://www.sass-lang.com/
› Compass Homepage› http://www.compass-style.org/
› Digiflare Homepage› http://www.digiflare.com
› Digiflare Twitter› @Digiflare