building a mobile app with sencha touch

Sencha Touch@ jamespearce

A JavaScript frameworkfor building

rich mobile appswith web standards

http://sencha.com/touch

Components

Data access & MVC

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