building a mobile app with sencha touch
Post on 05-Dec-2014
3.439 Views
Preview:
DESCRIPTION
TRANSCRIPT
Sencha Touch@ jamespearce
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 }]});
Let’s code
Further thoughts...
Embrace hybrid
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
Hybridapps
Embrace the device
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
$> 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
Embrace mobile
Mobile Apps vs Web Technologybuilt with
James Pearce @ jamespearce
top related