Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to sencha touch

2,153 views

Published on

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

Published in: Technology
  • Be the first to like this

Intro to sencha touch

  1. 1. Intro to Sencha TouchLichtsoft – October 29th 2011
  2. 2. HTML 5 in Mobile WebWhy?Rich & more interactive experience for mobile devices
  3. 3. Known Mobile Web (HTML 5)Frameworks
  4. 4. Frameworks
  5. 5. Frameworks
  6. 6. Frameworks
  7. 7. Starting1. Download Sencha Touch SDK http://www.sencha.com/products/touch/download2. Start Web Server3. Web Browser ▫ Safari ▫ Chrome
  8. 8. Starting4. Unzip SDK
  9. 9. Starting5. Test on Device
  10. 10. Starting
  11. 11. Starting• open the httpd-xampp.conf file, probably in C:xamppapacheconfextra find:<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>• change to Allow from all
  12. 12. Create Your First Application
  13. 13. Creating Application• Folder Structure
  14. 14. 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>
  15. 15. Creating Application • app.jsnew 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! }); }});
  16. 16. Creating Application
  17. 17. Creating Application
  18. 18. List Component
  19. 19. 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"} , ],});
  20. 20. 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}&nbsp;{lastName}</div>, }); ListDemo.Viewport = new Ext.Panel({ fullscreen: true, layout: fit, items: [ListDemo.listPanel], }); }});
  21. 21. List with Data Store
  22. 22. Grouping ListListDemo.listPanel = new Ext.List({ id: indexList, store: ListDemo.ListStore, itemTpl: <div class="contact">{firstName}&nbsp;{lastName}</div>, grouped: true, indexBar: true,});
  23. 23. Grouping List
  24. 24. 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],});
  25. 25. Adding Detail PageListDemo.listPanel = new Ext.List({ id: indexList, store: ListDemo.ListStore, itemTpl: <div class="contact">{firstName}&nbsp;{lastName}</div>, grouped: true, indexBar: true, onItemDisclosure: function(record){ ListDemo.detailPanel.update(record.data); ListDemo.Viewport.setActiveItem(detailPanel); },});
  26. 26. List with Detail Page
  27. 27. List with Detail Pagewhen detail button touched
  28. 28. Adding Toolbar ListDemo.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], });
  29. 29. Toolbar
  30. 30. Mobile Web vs Mobile App
  31. 31. Mobile Web vs Mobile AppPros:• No need to develop in multiple platform
  32. 32. Mobile Web vs Mobile AppCons:• Mobile web can’t use device features like Accelerometer, Camera, Compass, etc• Animations in mobile web are sometimes inconsistent• Slower
  33. 33. Titanium Mobile
  34. 34. PhoneGap
  35. 35. PhoneGap• Multi-platform
  36. 36. Thank You

×