Embed Size (px)
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 :D
Citation preview
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
