fitc screens 2011 presentation - using sencha touch to build cross-platform html5 apps

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

Q/A

?Mukul Seth:

mukul.seth@digiflare.com@m_seth

Nathaniel Bagnell:nathaniel.bagnell@digiflare.com

@nathaniel401