Sencha Touch Intro - Toronto HTML5 User Group
-
Upload
mukul-seth -
Category
Technology
-
view
2.267 -
download
0
Transcript of Sencha Touch Intro - Toronto HTML5 User Group
![Page 1: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/1.jpg)
Using the Sencha Touch for Building Cross-Platform HTML5 Mobile
Applications
Presented By:Mukul Seth
![Page 2: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/2.jpg)
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
![Page 3: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/3.jpg)
Who we are
![Page 4: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/4.jpg)
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…
![Page 5: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/5.jpg)
In other words..
›Everything!
![Page 6: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/6.jpg)
Some of our clients
![Page 7: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/7.jpg)
MSN Video Portal (Win7 Slate)
![Page 8: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/8.jpg)
CBC Elections Map (iPad)
![Page 9: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/9.jpg)
McCain Menu Advantage (PlayBook)
![Page 10: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/10.jpg)
›What do these apps have in common?
Ans. __________
![Page 11: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/11.jpg)
›What do these apps have in common?
Ans. HTML5/CSS3
![Page 12: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/12.jpg)
HTML5/CSS3
![Page 13: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/13.jpg)
HTML5/CSS3
![Page 14: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/14.jpg)
Enter: Sencha Touch
![Page 15: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/15.jpg)
Why Sencha Touch?
Cross-platformFaster, cheaper, easier
Highly customizable
![Page 16: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/16.jpg)
Cross-platform
![Page 17: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/17.jpg)
Kitchen Sink Example
![Page 18: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/18.jpg)
Sample Apps
![Page 19: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/19.jpg)
API Documentation
![Page 20: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/20.jpg)
Skinning Engine
![Page 21: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/21.jpg)
LET’S GET READY TO…Demo Application
![Page 22: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/22.jpg)
LET’S GET READY TO…
FOOSBRAWL!Demo Application
![Page 23: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/23.jpg)
Demo Application
http://github.com/Digiflare/foosbrawl
![Page 24: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/24.jpg)
FOOSBRAWLIN’
![Page 25: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/25.jpg)
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…)
![Page 26: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/26.jpg)
index.html
![Page 27: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/27.jpg)
App.js
![Page 28: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/28.jpg)
Sencha Touch Libs and CSS
![Page 29: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/29.jpg)
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. ;)
![Page 30: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/30.jpg)
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….
![Page 31: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/31.jpg)
UI Control Creation
Ext.create Shorthand equivalent
![Page 32: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/32.jpg)
UI Control Definition
![Page 33: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/33.jpg)
View/Control Customization
![Page 34: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/34.jpg)
Layout Types
fit card
![Page 35: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/35.jpg)
Card-based Controls
TabPanel Carousel
![Page 36: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/36.jpg)
Layout Types – cont’d
vbox hbox
![Page 37: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/37.jpg)
Vbox & Hbox Layouts - Flex
flex config config defaults
![Page 38: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/38.jpg)
Method Overrides
![Page 39: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/39.jpg)
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)
![Page 40: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/40.jpg)
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
![Page 41: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/41.jpg)
Data Models
![Page 42: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/42.jpg)
Data Stores
![Page 43: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/43.jpg)
Manipulating Data
Model Creation Model Update
![Page 44: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/44.jpg)
Manipulating Stores – Filtering
![Page 45: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/45.jpg)
Binding Data
![Page 46: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/46.jpg)
DEMO!
![Page 48: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/48.jpg)
USER POLL
![Page 49: Sencha Touch Intro - Toronto HTML5 User Group](https://reader035.fdocuments.in/reader035/viewer/2022062513/5561eff9d8b42a9d068b567a/html5/thumbnails/49.jpg)
Future HTML5 Presentation Topics?
› Theming/Skinning Sencha Touch Apps› Metro Style Apps for Windows 8› jQuery Mobile App Development› …› Any other ideas?