Using the Sencha Touch for Building Cross-Platform HTML5 Mobile

Applications

Presented By:Mukul Seth

Agenda

› Who we are and what we do› The Current HTML5/CSS3 Landscape› Why Sencha Touch?

› Getting Started › Working with Views – Demo› Working with Data – Demo

› Q/A

Who we are

Our Expertise

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

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, easier

Highly customizable

Cross-platform

Kitchen Sink Example

Sample Apps

API Documentation

Skinning Engine

LET’S GET READY TO…Demo Application

LET’S GET READY TO…

FOOSBRAWL!Demo Application

Demo Application

http://github.com/Digiflare/foosbrawl

FOOSBRAWLIN’

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

Working with Views

› Sencha Touch UI Controls› UI Control Creation› UI Control Definitions› UI Control Customization› Container Layout Types› Method and property overrides› Sencha Touch Kitchen Sink

› One of your best friends. ;)

Sencha Touch UI 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› and more….

UI Control Creation

Ext.create Shorthand equivalent

UI 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 Classes

› Model – Used to define data types› Store – Used to store and manipulate

collections of models› Proxy – Data service layer – connects to a

persistence data layer

Data Models

Data Stores

Manipulating Data

Model Creation Model Update

Manipulating Stores – Filtering

Binding Data

DEMO!

Q/A

?Mukul Seth

mukul.seth@digiflare.com@m_seth

USER POLL

Future HTML5 Presentation Topics?

› Theming/Skinning Sencha Touch Apps› Metro Style Apps for Windows 8› jQuery Mobile App Development› …› Any other ideas?