Embed Size (px)
DESCRIPTION
Citation preview
HTML5 and the dawn of rich mobile web applications
@ jamespearce
Part II
jQuery MobileSencha Touch
jQuery Mobile
http://jquerymobile.com/
“A unified user interface system that works seamlessly
across all popular mobile device platforms”
Key features
Built on jQueryModular library
Markup-driven configurationProgressive enhancement
<!DOCTYPE html><html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body></html>
Page...<body>
<div data-role="page" id="home">
<div data-role="header"> ... </div>
<div data-role="content"> ... </div>
<div data-role="footer"> ... </div>
</div>
</body>...
Multiple Pages
...<body>
<div data-role="page" id="home"> <a href="#products">Products</a> </div>
<div data-role="page" id="products"> ... </div>
<div data-role="page" id="about"> ... </div>
</body>...
Disable AJAX
...<body>
<div data-role="page" id="home">
<a href="#products" data-ajax="false">Products</a>
<a href="http://google.com" rel="external">Google</a>
</div>
<div data-role="page" id="products"> ... </div>
</body>...
Back buttons
...<body>
<div data-role="page" id="home">
<a href="#products">Products</a>
</div>
<div data-role="page" id="products">
<a href="#home" data-rel="back">Home</a>
</div>
</body>...
Transitions
...<body>
<div data-role="page" id="home">
<a href="#products" data-transition="fade">Products</a>
</div>
<!-- slide, slideup, slidedown, pop, fade, flip -->
</body>...
Dialogs
...<body>
<div data-role="page" id="home">
<a href="#products" data-rel="dialog">Products</a>
</div>
</body>...
Themes...<body>
<div data-role="page" id="home" data-theme="b"> ... </div>
</body>...
Toolbars
<div data-role="header" data-position="inline">
! <a href="index.html" data-icon="delete">Cancel</a>
! <h1>Edit Contact</h1>
! <a href="index.html" data-icon="check">Save</a>
</div>
Footer
<div data-role="footer" class="ui-bar">
<a href="delete.html" data-icon="delete" >Remove</a> <a href="add.html" data-icon="plus" >Add</a> <a href="up.html" data-icon="arrow-u">Up</a> <a href="down.html" data-icon="arrow-d">Down</a>
</div>
Fixed footer
<div data-role="footer" data-position="fixed"> ...</div>
Buttons
<a href="index.html" data-role="button">Link button</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
Grouped buttons
<div data-role="controlgroup"> <a href="yes.html" data-role="button">Yes</a> <a href="no.html" data-role="button">No</a> <a href="maybe.html" data-role="button">Maybe</a></div>
Grouped buttons 2
<div data-role="controlgroup" data-type="horizontal"> <a href="yes.html" data-role="button">Yes</a> <a href="no.html" data-role="button">No</a> <a href="maybe.html" data-role="button">Maybe</a></div>
Icons
Forms
Lists
<ul data-role="listview">! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li> ...</ul>
jQuery Mobile Demo
Sencha Touch
A JavaScript frameworkfor building
rich mobile appswith web standards
http://sencha.com/touch
Components
Data access & MVC
Forms
Scrolling
Touch Events
Theming
Charts
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 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]});
Common patterns2
var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [{ xtype: 'list', store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true }]});
Sencha Touch Demo
Closing thoughts
Embrace hybrid
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
Hybridapps
Embrace the device
Hybrid apps
UIWebView WebView
HTMLCSS
JSStores
Device APIs
e.g. PhoneGap
FileGeolocationMediaNetworkNotificationStorage
AccelerometerCameraCompassContactsDeviceEvents
e.g. NimbleKit
http://sencha.com/x/cy http://sencha.com/x/de
Embrace the tools
http://phonegap.github.com/weinre
Embrace responsiveness
http://sencha.com/x/cv
Embrace o!ine
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
$> phantomjs confess.js http://mysite.com/
Embrace mobile
Apps vs web technologybuilt with
James Pearce @ jamespearce
