intro to sencha touch
DESCRIPTION
Introduction to Sencha Touch, some people said it is one of the best mobile web framework. Some people didn't say that though.. well this is democracy :DTRANSCRIPT
Intro to Sencha TouchLichtsoft – October 29th 2011
HTML 5 in Mobile Web
Why?
Rich & more interactive experience for mobile devices
Known Mobile Web (HTML 5)Frameworks
Frameworks
Frameworks
Frameworks
Starting 1. Download Sencha Touch SDK
http://www.sencha.com/products/touch/download
2. Start Web Server3. Web Browser
▫Safari▫Chrome
Starting
4. Unzip SDK
Starting5. Test on Device
Starting
Starting•open the httpd-xampp.conf file, probably
in C:\xampp\apache\conf\extra find:
•change to Allow from all
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))"> Order deny,allow Deny from all Allow from 127.0.0.0/8 ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var</LocationMatch>
Create Your First Application
Creating Application•Folder Structure
Creating Application•Index.html<!DOCTYPE html><html> <head> <title>Hello World</title> <script src="lib/touch/sencha-touch.js" type="text/javascript"></script> <script src="app/app.js" type="text/javascript"> </script> <link href="lib/touch/resources/css/sencha-touch.css"
rel="stylesheet" type="text/css" /> </head> <body></body></html>
Creating Application•app.js
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!' }); }});
Creating Application
Creating Application
List Component
Data StoreExt.regModel('Contact', {
fields: ['firstName', 'lastName']});
ListDemo.ListStore = new Ext.data.Store({ model: 'Contact', sorters: 'firstName', getGroupString: function(record) { return record.get('firstName')[0]; }, data: [
{ firstName: "Azby", lastName: "Luthfan" },{ firstName: "Yosef", lastName: "Sukianto"},{ firstName: "Brian", lastName: "Al Bahr" },{ firstName: "Chandra", lastName: "Sutikno"} ,
],});
Using the Data StoreListDemo = new Ext.Application({ name: "ListDemo",
launch: function(){ ListDemo.listPanel = new Ext.List({ id: 'indexList', store: ListDemo.ListStore, itemTpl:
'<div class="contact">{firstName} {lastName}</div>', });
ListDemo.Viewport = new Ext.Panel({fullscreen: true,layout: 'fit',items: [ListDemo.listPanel],
}); }});
List with Data Store
Grouping List
ListDemo.listPanel = new Ext.List({ id: 'indexList', store: ListDemo.ListStore, itemTpl: '<div class="contact">{firstName} {lastName}</div>', grouped: true, indexBar: true,});
Grouping List
Adding Detail PageListDemo.detailPanel = new Ext.Panel({
id: 'detailPanel',tpl: 'Hello, {firstName}',
}); ListDemo.Viewport = new Ext.Panel({
fullscreen: true,layout: 'card',items: [ListDemo.listPanel, ListDemo.detailPanel],
});
Adding Detail PageListDemo.listPanel = new Ext.List({ id: 'indexList', store: ListDemo.ListStore, itemTpl: '<div class="contact">{firstName} {lastName}</div>', grouped: true, indexBar: true,
onItemDisclosure: function(record){ ListDemo.detailPanel.update(record.data); ListDemo.Viewport.setActiveItem('detailPanel'); },});
List with Detail Page
List with Detail Page
when detail button touched
Adding ToolbarListDemo.detailToolbar = new Ext.Toolbar({ items: [ { text: 'back', ui: 'back', handler: function() {
ListDemo.Viewport.setActiveItem('indexList'); }]});
ListDemo.detailPanel = new Ext.Panel({ id: 'detailPanel', tpl: 'Hello, {firstName}', dockedItems: [ListDemo.detailToolbar],});
Toolbar
Mobile Web vs Mobile App
Pros:•No need to develop in multiple platform
Mobile Web vs Mobile App
Mobile Web vs Mobile App
Cons:•Mobile web can’t use device features like
Accelerometer, Camera, Compass, etc•Animations in mobile web are sometimes
inconsistent•Slower
Titanium Mobile
PhoneGap
PhoneGap•Multi-platform
Thank You