Upload
mukul-seth
View
2.265
Download
0
Tags:
Embed Size (px)
Citation preview
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!
USER POLL
Future HTML5 Presentation Topics?
› Theming/Skinning Sencha Touch Apps› Metro Style Apps for Windows 8› jQuery Mobile App Development› …› Any other ideas?