Create a mobile web app with Sencha Touch

Create A Mobile Web App with Sencha Touch @ jamespearce

Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive, or...

A badge for all these ways the web is changing

HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those speciﬁcations while at the same time enhancing (X)HTML to more adequately address Web applications. - WHATWG Wiki

Consumption vs Creation Linkability User Experience Architecture

WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)

A JavaScript framework for building rich mobile apps with web standards

Kitchen Sink http://sencha.com/x/5e

<!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>

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!' }); } });

Lists var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true });

Nested Lists var list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..} });

Carousels var carousel = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ] });

Sheets var sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ] }); sheet.show();

Common patterns 1 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] });

Common patterns 2 var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [{ xtype: 'list', store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true }] });

Pre-requisites Sencha 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/

The Valley App http://senchalearn.github.com/valley http://sencha.com/x/dr

https://github.com/ senchalearn/valley

Development sequence 1 Structure the app 5 Detail page 2 Layout the UI 6 Add a map 3 Model the data 7 More data 4 Load the list 8 Customize theme

index.html <!doctype html> <html> <head> <title>Valley Guide</title> </head> <body></body> </html>

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" />

app.js va = new Ext.Application({ launch: function() { this.viewport = new Ext.Panel({ layout: 'card', fullscreen: true, html: "Hello world!" }); } });

2 Layout the UI toolbar toolbar dataList listCard detailCard na.viewport

The app... var va = 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] }); } });

listCard this.listCardToolbar = new Ext.Toolbar({ dock: 'top', title: 'Valley Guide' }); this.listCardDataList = new Ext.List({ store: null, itemTpl: '' }); this.listCard = new Ext.Panel({ dockedItems: [this.listCardToolbar], items: [this.listCardDataList], layout: 'fit' });

detailCard this.detailCardToolbar = new Ext.Toolbar({ dock: 'top', title: '...' }); this.detailCard = new Ext.Panel({ dockedItems: [this.detailCardToolbar] });

3 Model the data http://api.yelp.com/business_review_search ?ywsid=YELP_KEY &term=Restaurants &location=Silicon%20Valley

"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": [ ...", ], ...

A data namespace this.data = {};

The ‘Business’ model this.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"}, ] });

A store of those models this.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=Silicon%20Valley', reader: { type: 'json', root: 'businesses' } } });

4 Load the list this.listCardDataList = new Ext.List({ store: this.data.restaurants, itemTpl: '{name}' });

A more interesting template itemTpl: '<img class="photo" src="{photo_url}" width="40" height="40"/>' + '{name}<br/>' + '<img src="{rating_img_url_small}"/> ' + '<small>{address1}</small>'

Hack the style <style> .photo { float:left; margin:0 8px 16px 0; border:1px solid #ccc; -‐webkit-‐box-‐shadow: 0 2px 4px #777; } </style>

Get images resized... ...width="40" height="40" />

...in the cloud src="http://src.sencha.io/40/{photo_url}" width="40" height="40"/>

5 Detail page this.listCardDataList = new Ext.List({ store: this.data.restaurants, itemTpl: ... listeners: { selectionchange: function (selectionModel, records) { if (records[0]) { va.viewport.setActiveItem(va.detailCard); va.detailCardToolbar.setTitle( records[0].get('name') ); } } } });

A back button this.detailCardToolbar = new Ext.Toolbar({ dock: 'top', title: '...', items: [{ text: 'Back', ui: 'back', handler: function () { va.viewport.setActiveItem( va.listCard, {type: 'slide', direction: 'right'} ); } }] });

Detail template this.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>' ] });

A little styling .x-‐html h2 { margin-‐bottom:0; } .phone, .link { clear:both; font-‐weight:bold; display:block; text-‐align:center; margin-‐top:8px; }

6 Add a map toolbar toolbar dataList dataList detailCard listCard detailTabs va.viewport

6 Add a map va.viewport.setActiveItem(va.detailTabs); ... this.detailMap = new Ext.Map({}); this.detailTabs = new Ext.TabPanel({ dockedItems: [this.detailCardToolbar], items: [this.detailCard, this.detailMap] }); va.viewport = new Ext.Panel({ layout: 'card', fullscreen: true, cardSwitchAnimation: 'slide', items: [this.listCard, this.detailTabs] });

Tab titles this.detailCard = new Ext.Panel({ ... title: 'Info' }); this.detailMap = new Ext.Map({ title: 'Map' });

Google Maps script <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>

Update the map location selectionchange: function (selectionModel, records) { ... var map = va.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() );

Improve the tab bar this.detailTabs = new Ext.TabPanel({ dockedItems: [this.detailCardToolbar], items: [this.detailCard, this.detailMap], tabBar: { ui: 'light', layout: { pack: 'center' } } });

More data... ['hotels', 'bars', 'restaurants'].forEach( function (type) { va.data[type] = new Ext.data.Store({ model: va.data.Business, autoLoad: true, proxy: { type: 'scripttag', url: 'http://api.yelp.com/business_review_search' + '?ywsid=' + YELP_KEY + '&term=' + type + '&location=Silicon%20Valley', reader: { type: 'json', root: 'businesses' } } }); });

Make list into a ‘class’ this.ListCardDataList = Ext.extend(Ext.List, { store: null, itemTpl: '<img class="photo" ...

Instantiate that 3 times this.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...

Turn container into tabs too this.listCard = new Ext.TabPanel({ items: [ this.stayCardDataList, this.eatCardDataList, this.drinkCardDataList ], tabBar: { ui: 'light', layout: { pack: 'center' }, dock: 'bottom' }, cardSwitchAnimation: 'flip', ...

And add titles & icons this.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' });

Pull-to-refresh this.ListCardDataList = Ext.extend(Ext.List, { ... plugins: [{ ptype: 'pullrefresh' }] });

Variables /* SCSS */ /* CSS */ $blue: #3bbfce; .content-navigation { $margin: 16px; border-color: #3bbfce; color: #2b9eab; .content-navigation { } border-color: $blue; color: .border { darken($blue, 9%); padding: 8px; } margin: 8px; border-color: #3bbfce; .border { } padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

$> sudo gem install compass http://rubyinstaller.org/

Start by copying sencha-touch.scss

conﬁg.rb dir = File.dirname(__FILE__) load File.join(dir, '..', 'lib', 'touch', 'resources', 'themes') # Compass configurations sass_path = dir css_path = dir environment = :production output_style = :compressed # or :nested, :expanded, :compact

Compile... $> cd theming $> compass compile valley.scss create valley.css $> compass compile valley.scss identical valley.css [edit file] $> compass compile valley.scss overwrite valley.css $> compass watch valley.scss >>> Change detected to: valley.scss overwrite valley.css

Link... <link href="theming/valley.css" rel="stylesheet" type="text/css" />

valley.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; ...

valley.scss $base-‐color: #9D9E00; @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;

Choose own icons $base-‐color: #9D9E00; $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');

Specify iconCls this.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' });

_variables.scss $include-html-style: true; $base-color: #354F6E; $include-default-icons: true; $base-gradient: 'matte'; $include-form-sliders: true; $alert-color: red; $include-floating-panels: true; $confirm-color: #92cf00; $include-default-uis: true; $page-bg-color: #eee; $include-highlights: true; $global-row-height: 2.6em; $include-border-radius: true; $active-color: darken( saturate($base-color, 55%), $basic-slider: false; 10%);

http://dev.sencha.com/deploy/touch/docs/theme/

Sass is a superset of CSS $base-‐color: #9D9E00; $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; } ...

WebFonts @import url(http://fonts.googleapis.com/css?family=Voltaire); .x-‐toolbar-‐title { font-‐family: Voltaire; font-‐weight: normal; font-‐size: 1.7em; line-‐height: 1.7em; letter-‐spacing: 0.05em; }

A ‘responsive’ app... http://sencha.com/x/cv

And if we’d had time... Add to home screen - Icon - Splash screen Hybrid app; PhoneGap / NimbleKit - Contacts API - Geolocation http://sencha.com/x/cy http://sencha.com/x/de

O ine app $> phantomjs confess.js http://github/valley/ 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.js app/yelp.js http://cdn.sencha.io/touch/1.1.0/sencha-‐touch.js http://maps.google.com/maps/api/js?sensor=true http://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.js theming/valley.css NETWORK: * http://github.com/jamesgpearce/confess

O ine data Taking Yelp data o ine Taking images o ine - src.sencha.io to generate cross-origin B64 Detecting network connection changes http://sencha.com/x/df

Weinre http://phonegap.github.com/weinre

built with Apps vs Web technology

Create a mobile web app with Sencha Touch

More Related Content

What's hot

Viewers also liked

Similar to Create a mobile web app with Sencha Touch

More from James Pearce

Recently uploaded

Create a mobile web app with Sencha Touch