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.

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

3. Introductions

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…

6. What we do
In other words..
›Everything!

7. Some of our clients

8. MSN Video Portal (Win7 Slate)

9. CBC Elections Map (iPad)

10. McCain Menu Advantage (PlayBook)

11. › What do these apps have
in common?
Ans. __________

12. › What do these apps have
in common?
Ans. HTML5/CSS3

13. HTML5/CSS3

14. HTML5/CSS3

15. Enter: Sencha Touch

16. Why Sencha Touch?
Cross-platform
Faster, cheaper, easier
Highly customizable

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…)

18. index.html

19. App.js

20. Sencha Touch Libs and CSS

21. Demo Application
http://github.com/Digiflare/foosbrawl

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

24. View/Control Creation
Ext.create Shorthand equivalent

25. View/Control Definition

26. View/Control Customization

27. Layout Types
fit card

28. Card-based Controls
TabPanel Carousel

29. Layout Types – cont’d
vbox hbox

30. Vbox & Hbox Layouts - Flex
flex config config defaults

31. Method Overrides

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)

33. Data Models

34. Data Stores

35. Manipulating Data
Model Creation Model Update

36. Manipulating Stores – Filtering

37. Binding Data

38. Sencha Touch Theming

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

48. Sass Example: Nested Rules

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

52. Sass Example: Putting it all Together

53. Sass Example: Putting it all Together

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

63. Q/A
Mukul Seth: Nathaniel Bagnell:
mukul.seth@digiflare.com nathaniel.bagnell@digiflare.com
@m_seth @nathaniel401