1. Sencha TouchHTML5 TWorks( ) http://blog.tworks.jp/ http://tanoapp.tworks.jp/ #47

2. Tomonori Ohba HN TWorks TwitterID @tworks PFUSI/SE iOS/Android/WP/SL/WPF/ASP.NET/etc... Windows Phone Arch #47 3. PR Windows Phone Windows Phone #47 4. Sencha Touch 1.1 View HTML JavaScript / #47 5. Sencha Touch 1.1 View HTML JavaScript / #47 6. JavaScriptWeb iOS/AndroidWeb JQuery MobileWeb PCExt JS HTML5 iOS/Androi WebKit #47 7. GNU GPL license v3 GNU GPL license v3 99,500/ #47 8. Sencha Touch 1.1 View HTML JavaScript / #47 9. View HTML5 #47 10. View List #47 11. View #47 12. View Map HTML5 GEO API GoogleMapsEULA #47 13. View Overlays #47 14. View iOSiOSUserInterface UI #47 15. Sencha Touch 1.1 View HTML JavaScript / #47 16. View PanelExt.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true,}); #47 17. View HTML Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:Hello, Wankuma!!}); #47 18. View cls (css class) Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:Hello, Pronama!!, cls: title //css}); CSS #47 19. View itemsExt.setup({ onReady: function() { var panel = new Ext.Panel({ button1 fullscreen: true, items: [{ xtype: button, ui: normal, text: button1 }, {button2 xtype: button, ui: normal, text: button2 }, { xtype: button, ui: normal, button3 text: button3 }]}); #47 20. View dockedItemsExt.setup({top onReady: function() { var panel = new Ext.Panel({ fullscreen: true, dockedItems items: [{xtype: toolbar, leftrigihtdock: top,items: [{xtype: button, ui: normal, text: button2}] }] bottom}); #47 21. View layout : vboxExt.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, button1 layout: vbox, items: [{ xtype: button, ui: normal, text: button1 }, {button2 xtype: button, ui: normal, text: button2 }, { xtype: button, ui: normal, button3 text: button3 },}); #47 22. View layout : hvoxExt.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, layout: hbox, items: [{ xtype: button, ui: normal, text: button1button button button }, {123 xtype: button, ui: normal, text: button2 }, { xtype: button, ui: normal, text: button3 },}); #47 23. View handlerExt.setup({ onReady: function() { var panel = new Ext.Panel({button1 fullscreen: true, items: [{xtype: button,ui: normal,text: button1,handler: function() {window.alert(hello!);} }]})}}); #47 24. View BOX items BOX .html htmlcssJavaScript JavaScript #47 25. Sencha Touch 1.1 View HTML JavaScript / #47 26. Model/Store/Proxy Model DatabaseTableExt.regModel(Product, { fields: [ {name: name, type: string}, {name: description, type: string}, {name: price, type: float}, {name: image_url, type: string}, {name: in_stock, type: boolean} ]}); #47 27. Store/Proxy StoreModelProxy Proxy/ ajax/rest/sessionstoregestore: new Ext.data.Store({model: Product,proxy: { type: ajax, url : /products.json, // products.xml reader: { type: json, // xml root: products }}}), #47 28. products reader{ "products": [{"name": "Some Product", "price": 9.99, "image_url": "product1.jpg", "in_stock": true},{"name": "Another Product", "price": 7.50, "image_url": "product2.jpg", "in_stock": true},{"name": "A third product", "price": 2.35, "image_url": "product3.jpg", "in_stock": false},...]} sessionstorage / localstorage WebStoragevar Cart = new Ext.data.Store({model: Product,proxy: { type: sessionstorage, // or localstorage id : shoppingCart}}); #47 29. getGroupString FunctiongetGroupString : function(record) { return record.get(name)[0]; //}, sorters #47 30. Sencha Touch 1.1 View HTML JavaScript / #47 31. Demo Sencha Touch #47 32. Sencha Touch 1.1 View HTML JavaScript / #47 33. 1. Sencha Touch http://extjs.co.jp/products/touch/download.php2. HTML53. Web Sencha Touch4. HTMLCSS #47 34. Sencha Touch 1.1 View HTML JavaScript / #47 35. HTML JavaScript/CSSHTML ListSample #47 36. Sencha Touch 1.1 View HTML JavaScript / #47 37. JavaScript ModelExt.regModel(Contact, {fields: [ {name:firstName, type: string}, {name: lastName, type: string}, {name:email, type:string}]}); #47 38. JavaScript Store/Proxy/getGroupStringvar store = new Ext.data.JsonStore({model : Contact,sorters: [ {property: lastName, direction: ASC}, {property: firstName, direction: ASC} ],getGroupString : function(record) { return record.get(lastName)[0];},proxy : { type : ajax, url : data/contacts.json, reader : {type : json,root : contacts,idProperty : email // }},autoLoad : true}); #47 39. JavaScript myapp.js VListMStorevar list = new Ext.List({store : contactStore,itemTpl :

{firstName} {lastName}

,itemSelector : div.contact,singleSelect : true,grouped : true,indexBar : true,...}); #47 40. JavaScript myapp.js list.on(itemtap, function(dataView, index, item, e){ data = contactStore.getAt(index); alert(data.get(firstName) + + data.get(lastName));}); #47 41. Sencha Touch 1.1 View HTML JavaScript / #47 42. / Sencha Touch.js ListSample