building a mobile app with sencha touch
DESCRIPTION
TRANSCRIPT
![Page 1: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/1.jpg)
Sencha Touch@ jamespearce
![Page 2: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/2.jpg)
A JavaScript frameworkfor building
rich mobile appswith web standards
![Page 3: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/3.jpg)
http://sencha.com/touch
![Page 4: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/4.jpg)
Components
![Page 5: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/5.jpg)
Data access & MVC
![Page 6: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/6.jpg)
Forms
![Page 7: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/7.jpg)
Scrolling
![Page 8: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/8.jpg)
Touch Events
![Page 9: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/9.jpg)
Theming
![Page 10: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/10.jpg)
Charts
![Page 11: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/11.jpg)
Kitchen Sink
http://sencha.com/x/5e
![Page 12: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/12.jpg)
![Page 13: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/13.jpg)
![Page 14: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/14.jpg)
<!DOCTYPE html><html> <head> <title>Hello World</title>
<script src="lib/touch/sencha-‐touch.js"></script> <script src="app/app.js"></script> <link href="lib/touch/resources/css/sencha-‐touch.css" rel="stylesheet" type="text/css" /> </head> <body></body></html>
![Page 15: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/15.jpg)
new Ext.Application({
launch: function() {
new Ext.Panel({ fullscreen: true, dockedItems: [{xtype:'toolbar', title:'My First App'}], layout: 'fit', styleHtmlContent: true, html: '<h2>Hello World!</h2>I did it!' });
}
});
![Page 16: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/16.jpg)
![Page 17: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/17.jpg)
Lists
var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true});
![Page 18: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/18.jpg)
Nested Lists
var list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..}});
![Page 19: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/19.jpg)
Carousels
var carousel = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ]});
![Page 20: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/20.jpg)
Sheets
var sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ]});
sheet.show();
![Page 21: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/21.jpg)
Common patterns1
var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true});
var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [list]});
![Page 22: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/22.jpg)
Common patterns2
var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [{ xtype: 'list', store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true }]});
![Page 23: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/23.jpg)
Let’s code
![Page 24: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/24.jpg)
Further thoughts...
![Page 25: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/25.jpg)
Embrace hybrid
![Page 26: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/26.jpg)
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
Hybridapps
![Page 27: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/27.jpg)
Embrace the device
![Page 28: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/28.jpg)
http://sencha.com/x/cy http://sencha.com/x/de
![Page 29: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/29.jpg)
Embrace the tools
![Page 30: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/30.jpg)
http://phonegap.github.com/weinre
![Page 31: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/31.jpg)
Embrace responsiveness
![Page 32: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/32.jpg)
http://sencha.com/x/cv
![Page 33: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/33.jpg)
Embrace o!ine
![Page 34: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/34.jpg)
$> phantomjs confess.js http://mysite.com/
CACHE MANIFEST
# This manifest was created by confess.js# Time: Wed Sep 14 2011 10:14:45 GMT-‐0700 (PDT)# User-‐agent: Mozilla/5.0 ...
CACHE:app/app.jsapp/yelp.jshttp://cdn.sencha.io/touch/1.1.0/sencha-‐touch.jshttp://maps.google.com/maps/api/js?sensor=truehttp://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.jstheming/app.css
NETWORK:*
http://github.com/jamesgpearce/confess
![Page 35: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/35.jpg)
Embrace mobile
![Page 36: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/36.jpg)
Mobile Apps vs Web Technologybuilt with
![Page 37: Building a Mobile App with Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051514/5482595cb079596a0c8b4785/html5/thumbnails/37.jpg)
James Pearce @ jamespearce