Bd conf sencha touch workshop
-
Upload
james-pearce -
Category
Technology
-
view
3.896 -
download
3
description
Transcript of Bd conf sencha touch workshop
![Page 1: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/1.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]
![Page 2: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/2.jpg)
BuildingMobile Web Apps
with
CSSHTML JS
![Page 3: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/3.jpg)
One PC
Multiple devices
![Page 4: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/4.jpg)
Sedentary usage
Mobile usage
![Page 5: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/5.jpg)
Documents
Applications
![Page 6: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/6.jpg)
Declarative HTML
Programmatic JS
![Page 7: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/7.jpg)
Thin client
Thick client
![Page 8: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/8.jpg)
![Page 9: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/9.jpg)
HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the
issues of those specifications while at the same time enhancing (X)HTML
to more adequately address Web applications.
![Page 10: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/10.jpg)
![Page 11: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/11.jpg)
![Page 12: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/12.jpg)
A New Mobile App Stack
JavaScript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
Worker Parallel
Processing
File SystemsDBs
App Cache
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
More...
![Page 13: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/13.jpg)
Rich Media & StylingFull Resource Access
Parallel ProcessingInter-App Communication
Full O!ine Capability A COMPLETE MODERN RUNTIME
![Page 14: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/14.jpg)
![Page 15: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/15.jpg)
![Page 16: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/16.jpg)
![Page 17: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/17.jpg)
WebKit FOEs
![Page 18: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/18.jpg)
HTML5 SupportIE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb
@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB
![Page 19: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/19.jpg)
Stay on top of diversityCan I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
![Page 20: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/20.jpg)
Capability
Div
ersi
tyPearce’s Universal Law of
Mobile Web Browsers
(for all T)
![Page 21: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/21.jpg)
Capability
Supp
ort
Pearce’s Universal Law of Mobile Web Browsers
(for all T)
![Page 22: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/22.jpg)
Capability
Supp
ort
JavaScript frameworks,polyfills & shims
![Page 23: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/23.jpg)
![Page 24: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/24.jpg)
Evolving the web for mobile
HTML, CSS...
Models
Controllers
Views
![Page 25: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/25.jpg)
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
Evolving the web for mobile
![Page 26: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/26.jpg)
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
Evolving the web for mobile
![Page 27: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/27.jpg)
The classic web stack
Storage
Business logic
User interfacereq/res
Rendering
![Page 28: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/28.jpg)
An alternative web stack
Storage
Security Business logic
User interfacesync
Storage
![Page 29: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/29.jpg)
Write once,run anywhere?
![Page 30: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/30.jpg)
![Page 31: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/31.jpg)
The Mobile Webis not a
320px Web
![Page 32: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/32.jpg)
Proxies
Models
Controllers
Stores
Views Views
json
![Page 33: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/33.jpg)
Thick client, thin server
The shortfall in the cloud
![Page 34: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/34.jpg)
Location Services
Image Serving
AnalyticsAdaptation
Video Serving
Data SyncWeb Fonts
Ad Serving
Commerce$
Network APIs
![Page 35: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/35.jpg)
![Page 36: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/36.jpg)
http://mysite.com/myimage.png
http://src.sencha.io/http://mysite.com/myimage.png
![Page 37: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/37.jpg)
http://www.sencha.com/products/touch
Sencha TouchA JavaScript framework for building
rich mobile apps with web standards
![Page 38: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/38.jpg)
Get Sencha Touch
http://sencha.com/touch
![Page 39: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/39.jpg)
Components
![Page 40: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/40.jpg)
Theming
![Page 41: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/41.jpg)
![Page 42: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/42.jpg)
![Page 43: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/43.jpg)
![Page 44: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/44.jpg)
Forms
![Page 45: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/45.jpg)
Scrolling
![Page 46: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/46.jpg)
Touch Events
![Page 47: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/47.jpg)
Data access & MVC
![Page 48: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/48.jpg)
Charts
![Page 49: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/49.jpg)
Kitchen Sink
http://sencha.com/x/5e
![Page 50: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/50.jpg)
Your First App
<!DOCTYPE html><html>
<head>
<title>Hello World</title>
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> ... </script>
</head>
<body></body>
</html>
![Page 51: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/51.jpg)
Your First Appnew 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 52: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/52.jpg)
Listvar list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true});
![Page 53: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/53.jpg)
Nested Listvar list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..}});
![Page 54: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/54.jpg)
Carouselvar car = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ]});
![Page 55: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/55.jpg)
Sheetsvar sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ]});sheet.show();
![Page 56: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/56.jpg)
![Page 57: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/57.jpg)
Get Started!
http://sencha.com/x/d5
![Page 58: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/58.jpg)
Pre-requisites for todaySencha Touch SDK:
http://sencha.com/products/touch/
Yelp developer API key: http://www.yelp.com/developers/getting_started/
api_overview
Install Sass and Compass: http://sass-lang.com/download.html
http://compass-style.org/install/
![Page 59: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/59.jpg)
The Nashville App
http://sencha.com/x/buhttp://sencha.com/x/dg
![Page 60: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/60.jpg)
![Page 61: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/61.jpg)
http://github.com/jamesgpearce/nashville
![Page 62: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/62.jpg)
Development sequence
1 Structure the app
2 Layout the UI
3 Model the data
4 Load the list
5 Detail page
6 Add a map
7 More data
8 Customize theme
![Page 63: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/63.jpg)
![Page 64: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/64.jpg)
1 Structure the app
![Page 65: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/65.jpg)
index.html
<!doctype html><html> <head> <title>Nashville Guide</title> </head>
<body></body></html>
![Page 66: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/66.jpg)
index.html
<script src="lib/touch/sencha-‐touch.js"></script>
<script src="app/yelp.js"></script><script src="app/app.js"></script>
<link href="lib/touch/resources/css/sencha-‐touch.css" rel="stylesheet" type="text/css" />
![Page 67: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/67.jpg)
app.jsnv = new Ext.Application({
launch: function() {
this.viewport = new Ext.Panel({
layout: 'card', fullscreen: true, html: "Hello world!" });
}
});
![Page 68: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/68.jpg)
![Page 69: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/69.jpg)
nv.viewport
2 Layout the UI
listCard detailCard
toolbar toolbar
dataList
![Page 70: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/70.jpg)
The app...nv = new Ext.Application({ launch: function() {
this.listCard = new Ext.Panel({ html: 'I am the list' });
this.detailCard = new Ext.Panel({ html: 'I am the detail' });
this.viewport = new Ext.Panel({ layout: 'card', fullscreen: true, cardSwitchAnimation: 'slide', items: [this.listCard, this.detailCard] }); }});
![Page 71: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/71.jpg)
![Page 72: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/72.jpg)
listCardthis.listCardToolbar = new Ext.Toolbar({ dock: 'top', title: 'Nashville Guide'});
this.listCardDataList = new Ext.List({ store: null, itemTpl: ''});
this.listCard = new Ext.Panel({ dockedItems: [this.listCardToolbar], items: [this.listCardDataList], layout: 'fit'});
![Page 73: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/73.jpg)
detailCardthis.detailCardToolbar = new Ext.Toolbar({ dock: 'top', title: '...'});
this.detailCard = new Ext.Panel({ dockedItems: [this.detailCardToolbar]});
![Page 74: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/74.jpg)
![Page 75: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/75.jpg)
![Page 76: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/76.jpg)
3 Model the data
http://api.yelp.com/business_review_search?ywsid=YELP_KEY&term=Restaurants&location=Nashville,TN
![Page 77: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/77.jpg)
![Page 78: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/78.jpg)
Apigee console
![Page 79: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/79.jpg)
"businesses": [ { "rating_img_url" : "http://media4.px.yelpcdn.com/...", "country_code" : "US", "id" : "BHpAlynD9dIGIaQDRqHCTA", "is_closed" : false, "city" : "Nashville", "mobile_url" : "http://mobile.yelp.com/biz/...", "review_count" : 50, "zip" : "11231", "state" : "TN", "latitude" : 40.675758, "address1" : "253 Conover St", "address2" : "", "address3" : "", "phone" : "7186258211", "state_code" : "TN", "categories": [ ...", ], ...
![Page 80: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/80.jpg)
A data namespacethis.data = {};
![Page 81: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/81.jpg)
The ‘Business’ modelthis.data.Business = Ext.regModel('', { fields: [ {name: "id", type: "int"}, {name: "name", type: "string"}, {name: "latitude", type: "string"}, {name: "longitude", type: "string"}, {name: "address1", type: "string"}, {name: "address2", type: "string"}, {name: "address3", type: "string"}, {name: "phone", type: "string"}, {name: "state_code", type: "string"}, {name: "mobile_url", type: "string"}, {name: "rating_img_url_small", type: "string"}, {name: "photo_url", type: "string"}, ]});
![Page 82: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/82.jpg)
A store of those modelsthis.data.restaurants = new Ext.data.Store({ model: this.data.Business, autoLoad: true, proxy: { type: 'scripttag', url: 'http://api.yelp.com/business_review_search' + '?ywsid=' + YELP_KEY + '&term=Restaurant' + '&location=Nashville,TN', reader: { type: 'json', root: 'businesses' } }});
![Page 83: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/83.jpg)
![Page 84: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/84.jpg)
4 Load the listthis.listCardDataList = new Ext.List({ store: this.data.restaurants, itemTpl: '{name}'});
![Page 85: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/85.jpg)
![Page 86: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/86.jpg)
![Page 87: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/87.jpg)
A more interesting templateitemTpl: '<img class="photo" src="{photo_url}" width="40" height="40"/>' + '{name}<br/>' + '<img src="{rating_img_url_small}"/> ' + '<small>{address1}</small>'
![Page 88: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/88.jpg)
![Page 89: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/89.jpg)
Hack the style<style> .photo { float:left; margin:0 8px 16px 0; border:1px solid #ccc; -‐webkit-‐box-‐shadow: 0 2px 4px #777; }</style>
![Page 90: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/90.jpg)
Get images resized...
...width="40" height="40" />
![Page 91: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/91.jpg)
...in the cloud
src="http://src.sencha.io/40/{photo_url}" width="40" height="40"/>
![Page 92: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/92.jpg)
5 Detail pagethis.listCardDataList = new Ext.List({ store: this.data.restaurants, itemTpl: ... listeners: { selectionchange: function (selectionModel, records) { if (records[0]) { nv.viewport.setActiveItem(nv.detailCard); nv.detailCardToolbar.setTitle( records[0].get('name') ); } } }});
![Page 93: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/93.jpg)
![Page 94: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/94.jpg)
A back buttonthis.detailCardToolbar = new Ext.Toolbar({ dock: 'top', title: '...', items: [{ text: 'Back', ui: 'back', handler: function () { nv.viewport.setActiveItem( nv.listCard, {type: 'slide', direction: 'right'} ); } }]});
![Page 95: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/95.jpg)
![Page 96: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/96.jpg)
Detail templatethis.detailCard = new Ext.Panel({ dockedItems: [this.detailCardToolbar], styleHtmlContent: true, cls: 'detail', tpl: [ '<img class="photo" src="{photo_url}" width="100" height="100"/>', '<h2>{name}</h2>', '<div class="info">', '{address1}<br/>', '<img src="{rating_img_url_small}"/>', '</div>', '<div class="phone x-‐button">', '<a href="tel:{phone}">{phone}</a>', '</div>', '<div class="link x-‐button">', '<a href="{mobile_url}">Read more</a>', '</div>' ]});
![Page 97: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/97.jpg)
![Page 98: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/98.jpg)
A little styling.x-‐html h2 { margin-‐bottom:0;}.phone, .link { clear:both; font-‐weight:bold; display:block; text-‐align:center; margin-‐top:8px;}
![Page 99: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/99.jpg)
6 Add a map
nv.viewport
listCard detailTabs
toolbar toolbar
dataList dataListdetailCard
![Page 100: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/100.jpg)
6 Add a map
nv.viewport.setActiveItem(nv.detailTabs);
...
this.detailMap = new Ext.Map({});
this.detailTabs = new Ext.TabPanel({ dockedItems: [this.detailCardToolbar], items: [this.detailCard, this.detailMap]});
nv.viewport = new Ext.Panel({ layout: 'card', fullscreen: true, cardSwitchAnimation: 'slide', items: [this.listCard, this.detailTabs]});
![Page 101: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/101.jpg)
![Page 102: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/102.jpg)
Tab titles
this.detailCard = new Ext.Panel({ ... title: 'Info'});
this.detailMap = new Ext.Map({ title: 'Map'});
![Page 103: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/103.jpg)
Google Maps script
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
![Page 104: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/104.jpg)
![Page 105: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/105.jpg)
Update the map locationselectionchange: function (selectionModel, records) { ... var map = nv.detailMap.map;
if (!map.marker) { map.marker = new google.maps.Marker(); map.marker.setMap(map); }
map.setCenter( new google.maps.LatLng( records[0].get('latitude'), records[0].get('longitude') ) );
map.marker.setPosition( map.getCenter() );
![Page 106: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/106.jpg)
Improve the tab barthis.detailTabs = new Ext.TabPanel({ dockedItems: [this.detailCardToolbar], items: [this.detailCard, this.detailMap],
tabBar: { ui: 'light', layout: { pack: 'center' } }
});
![Page 107: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/107.jpg)
![Page 108: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/108.jpg)
7 More?
![Page 109: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/109.jpg)
More data...['hotels', 'bars', 'restaurants'].forEach( function (type) { nv.data[type] = new Ext.data.Store({ model: nv.data.Business, autoLoad: true, proxy: { type: 'scripttag', url: 'http://api.yelp.com/business_review_search' + '?ywsid=' + YELP_KEY + '&term=' + type + '&location=Nashville,TN', reader: { type: 'json', root: 'businesses' } } });});
![Page 110: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/110.jpg)
Make list into a ‘class’this.ListCardDataList = Ext.extend(Ext.List, { store: null, itemTpl: '<img class="photo" ...
![Page 111: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/111.jpg)
Instantiate that 3 timesthis.stayCardDataList = new this.ListCardDataList({ store: this.data.hotels});
this.eatCardDataList = new this.ListCardDataList({ store: this.data.restaurants});
this.drinkCardDataList = new this.ListCardDataList({ store: this.data.bars});
Consider lazy-loading...
![Page 112: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/112.jpg)
Turn container into tabs toothis.listCard = new Ext.TabPanel({ items: [ this.stayCardDataList, this.eatCardDataList, this.drinkCardDataList ], tabBar: { ui: 'light', layout: { pack: 'center' }, dock: 'bottom' }, cardSwitchAnimation: 'flip',...
![Page 113: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/113.jpg)
And add titles & iconsthis.stayCardDataList = new this.ListCardDataList({ store: this.data.hotels, title: 'Stay', iconCls: 'home'});
this.eatCardDataList = new this.ListCardDataList({ store: this.data.restaurants, title: 'Eat', iconCls: 'locate'});
this.drinkCardDataList = new this.ListCardDataList({ store: this.data.bars, title: 'Drink', iconCls: 'star'});
![Page 114: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/114.jpg)
![Page 115: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/115.jpg)
Pull-to-refreshthis.ListCardDataList = Ext.extend(Ext.List, { ... plugins: [{ ptype: 'pullrefresh' }]});
![Page 116: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/116.jpg)
8 Customize theme
![Page 117: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/117.jpg)
http://sass-lang.com/
![Page 118: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/118.jpg)
/* SCSS */
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
Variables
![Page 119: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/119.jpg)
$> sudo gem install compass
http://rubyinstaller.org/
![Page 120: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/120.jpg)
$> compass -v
Compass 0.11.1 (Antares)Copyright (c) 2008-2011 Chris EppsteinReleased under the MIT License.
$> sass -v
Sass 3.1.1 (Brainy Betty)
![Page 121: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/121.jpg)
Start by copying sencha-touch.scss
![Page 122: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/122.jpg)
config.rbdir = File.dirname(__FILE__)
load File.join(dir, '..', 'lib', 'touch', 'resources', 'themes')
# Compass configurationssass_path = dircss_path = direnvironment = :productionoutput_style = :compressed
# or :nested, :expanded, :compact
![Page 123: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/123.jpg)
Compile...$> cd theming
$> compass compile nashville.scss create nashville.css
$> compass compile nashville.scss identical nashville.css
[edit file]$> compass compile nashville.scss overwrite nashville.css
$> compass watch nashville.scss >>> Change detected to: nashville.scss overwrite nashville.css
![Page 124: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/124.jpg)
Link...<link href="theming/nashville.css" rel="stylesheet" type="text/css" />
![Page 125: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/125.jpg)
nashville.scss@import 'sencha-‐touch/default/all';
@include sencha-‐panel;@include sencha-‐buttons;@include sencha-‐sheet;@include sencha-‐tabs;@include sencha-‐toolbar;@include sencha-‐list;@include sencha-‐list-‐pullrefresh;@include sencha-‐layout;@include sencha-‐loading-‐spinner;...
![Page 126: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/126.jpg)
nashville.scss$base-‐color: #849;
@import 'sencha-‐touch/default/all';
@include sencha-‐panel;@include sencha-‐buttons;@include sencha-‐sheet;@include sencha-‐tabs;@include sencha-‐toolbar;@include sencha-‐list;@include sencha-‐list-‐pullrefresh;@include sencha-‐layout;@include sencha-‐loading-‐spinner;
![Page 127: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/127.jpg)
![Page 128: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/128.jpg)
Choose own icons$base-‐color: #849;$include-‐default-‐icons: false;
@import 'sencha-‐touch/default/all';
@include sencha-‐panel;@include sencha-‐buttons;...
@include pictos-‐iconmask('briefcase1');@include pictos-‐iconmask('heart');@include pictos-‐iconmask('music1');
![Page 129: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/129.jpg)
Specify iconClsthis.stayCardDataList = new this.ListCardDataList({ store: this.data.hotels, title: 'Stay', iconCls: 'briefcase1'});
this.eatCardDataList = new this.ListCardDataList({ store: this.data.restaurants, title: 'Eat', iconCls: 'heart'});
this.drinkCardDataList = new this.ListCardDataList({ store: this.data.bars, title: 'Drink', iconCls: 'music1'});
![Page 130: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/130.jpg)
![Page 131: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/131.jpg)
_variables.scss
$include-html-style: true;
$include-default-icons: true;
$include-form-sliders: true;
$include-floating-panels: true;
$include-default-uis: true;
$include-highlights: true;
$include-border-radius: true;
$basic-slider: false;
$base-color: #354F6E;
$base-gradient: 'matte';
$alert-color: red;
$confirm-color: #92cf00;
$page-bg-color: #eee;
$global-row-height: 2.6em;
$active-color: darken( saturate($base-color, 55%), 10%);
![Page 132: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/132.jpg)
http://dev.sencha.com/deploy/touch/docs/theme/
![Page 133: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/133.jpg)
Sass is a superset of CSS$base-‐color: #849;$include-‐default-‐icons: false;
@import 'sencha-‐touch/default/all';...
@include pictos-‐iconmask('briefcase1');@include pictos-‐iconmask('heart');@include pictos-‐iconmask('music1');
.photo { float:left; margin:0 8px 16px 0; border:1px solid #ccc; -‐webkit-‐box-‐shadow: 0 2px 4px #777;}...
![Page 134: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/134.jpg)
WebFonts@import url(http://fonts.googleapis.com/css?family=Smokum);
.x-‐toolbar-‐title { font-‐family: Smokum; font-‐weight: normal; font-‐size: 1.7em; line-‐height: 1.7em; letter-‐spacing: 0.05em;}
![Page 135: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/135.jpg)
Done?
![Page 136: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/136.jpg)
Development sequence
1 Structure the app
2 Layout the UI
3 Model the data
4 Load the list
5 Detail page
6 Add a map
7 More data
8 Customize theme
![Page 137: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/137.jpg)
![Page 138: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/138.jpg)
A ‘responsive’ app...
http://sencha.com/x/cv
![Page 139: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/139.jpg)
And if we’d had time...
Add to home screen - Icon - Splash screen
Hybrid app; PhoneGap / NimbleKit - Contacts API - Geolocation - Packaging
http://sencha.com/x/cy
http://sencha.com/x/de
![Page 140: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/140.jpg)
O!ine app
http://github.com/jamesg
pearce/confess
$> phantomjs confess.js http://github/nashville/
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/nashville.css
NETWORK:*
![Page 141: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/141.jpg)
O!ine data
http://sencha.com/x/df
Taking Yelp data o"ine
Taking images o"ine - src.sencha.io to generate cross-origin B64
Detecting network connection changes
![Page 142: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/142.jpg)
Weinre
http://phonegap.github.c
om/weinre/
![Page 143: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/143.jpg)
Apps vs Web technologybuilt with
![Page 144: Bd conf sencha touch workshop](https://reader037.fdocuments.net/reader037/viewer/2022102813/54696ed4af795939568b70ee/html5/thumbnails/144.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]