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.
Sencha Touch Intro Web Based Native(ish) Apps
 
 
 
Setup Viewport Data View
Setup
Download The SDK <ul><ul><li>Extract contents </li></ul></ul><ul><ul><li>Grab the CSS files from resources/css folder </li...
Create Base HTML <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>BmoreJS Mobile</title> </li></ul><ul><li...
Include CSS & JS <ul><li>     <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;sencha-touch-debug.css...
Setup The Aplication <ul><li>     <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: ...
Setup The Aplication <ul><li>     <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: ...
Setup The Aplication <ul><li>     <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: ...
320x460
http://tinyurl.com/iosicon 57x57
Setup The Aplication <ul><li>     <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: ...
Viewport
Create The Viewport <ul><li>     <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li...
Create The Viewport <ul><li>     <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li...
Create The Viewport <ul><li>     <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li...
Create The Viewport <ul><li>     <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li...
 
Docked Items <ul><li>        this.viewport = new Ext.Panel({ </li></ul><ul><li>             fullscreen: true, </li></ul><u...
 
Buttons <ul><li>             dockedItems: [{ </li></ul><ul><li>                 xtype: &quot;toolbar&quot;, </li></ul><ul>...
 
Button UI <ul><li>             dockedItems: [{ </li></ul><ul><li>                 xtype: &quot;toolbar&quot;, </li></ul><u...
Standard Button UI's Color Variations confirm                                         decline
Data
Data Store Model Reader Proxy Source
Model <ul><li>     Ext.regModel('Statuses', { </li></ul><ul><li>         fields: ['id_str','text'] </li></ul><ul><li>     ...
Model <ul><li>     Ext.regModel('Statuses', { </li></ul><ul><li>         fields: ['id_str','text'] </li></ul><ul><li>     ...
Model <ul><li>     Ext.regModel('Statuses', { </li></ul><ul><li>         fields: ['id_str','text'] </li></ul><ul><li>     ...
Store <ul><li>     BmoreJS.stores.Statuses = new Ext.data.Store({ </li></ul><ul><li>         model: 'Statuses', </li></ul>...
Store <ul><li>     BmoreJS.stores.Statuses = new Ext.data.Store({ </li></ul><ul><li>         model: 'Statuses', </li></ul>...
Store <ul><li>     BmoreJS.stores.Statuses = new Ext.data.Store({ </li></ul><ul><li>         model: 'Statuses', </li></ul>...
View
The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul>...
The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul>...
The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul>...
The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul>...
Templates <ul><li>itemTpl: '<a href=&quot;{url}&quot;><img src=&quot;{img}&quot;>{text}</a>', </li></ul>
The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul>...
 
Upcoming SlideShare
Loading in …5
×

Sencha Touch Intro

6,825 views

Published on

  • Be the first to comment

  • Be the first to like this

Sencha Touch Intro

  1. 1. Sencha Touch Intro Web Based Native(ish) Apps
  2. 5. Setup Viewport Data View
  3. 6. Setup
  4. 7. Download The SDK <ul><ul><li>Extract contents </li></ul></ul><ul><ul><li>Grab the CSS files from resources/css folder </li></ul></ul><ul><ul><li>Grab the JS files from the root folder </li></ul></ul>
  5. 8. Create Base HTML <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>BmoreJS Mobile</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 9. Include CSS & JS <ul><li>     <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;sencha-touch-debug.css&quot;> </li></ul><ul><li>     <script type=&quot;application/javascript&quot; src=&quot;sencha-touch-debug.js&quot;></script> </li></ul>
  7. 10. Setup The Aplication <ul><li>    <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: 'BmoreJS',         phoneStartupScreen: 'phone-startup.png',         phoneIcon: 'apple-touch-icon.png',         launch: function(){} </li></ul><ul><li>    });     </script> </li></ul>
  8. 11. Setup The Aplication <ul><li>    <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: 'BmoreJS',         phoneStartupScreen: 'phone-startup.png',         phoneIcon: 'apple-touch-icon.png',         launch: function(){} </li></ul><ul><li>    });     </script> </li></ul>
  9. 12. Setup The Aplication <ul><li>    <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: 'BmoreJS',         phoneStartupScreen: 'phone-startup.png',         phoneIcon: 'apple-touch-icon.png',         launch: function(){} </li></ul><ul><li>    });     </script> </li></ul>
  10. 13. 320x460
  11. 14. http://tinyurl.com/iosicon 57x57
  12. 15. Setup The Aplication <ul><li>    <script type=&quot;application/javascript&quot;>     Ext.regApplication({         name: 'BmoreJS',         phoneStartupScreen: 'phone-startup.png',         phoneIcon: 'apple-touch-icon.png',         launch: function(){} </li></ul><ul><li>    });     </script> </li></ul>
  13. 16. Viewport
  14. 17. Create The Viewport <ul><li>    <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li></ul><ul><li>            this.viewport = new Ext.Panel({ </li></ul><ul><li>                 fullscreen: true </li></ul><ul><li>             }); </li></ul><ul><li>         } </li></ul><ul><li>    ...     </script> </li></ul>
  15. 18. Create The Viewport <ul><li>    <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li></ul><ul><li>            this.viewport = new Ext.Panel({ </li></ul><ul><li>                 fullscreen: true </li></ul><ul><li>             }); </li></ul><ul><li>         } </li></ul><ul><li>    ...     </script> </li></ul>
  16. 19. Create The Viewport <ul><li>    <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li></ul><ul><li>            this.viewport = new Ext.Panel({ </li></ul><ul><li>                 fullscreen: true </li></ul><ul><li>             }); </li></ul><ul><li>         } </li></ul><ul><li>    ...     </script> </li></ul>
  17. 20. Create The Viewport <ul><li>    <script type=&quot;application/javascript&quot;>     ...         launch: function(){ </li></ul><ul><li>            this.viewport = new Ext.Panel({ </li></ul><ul><li>                 fullscreen: true </li></ul><ul><li>             }); </li></ul><ul><li>         } </li></ul><ul><li>    ...     </script> </li></ul>
  18. 22. Docked Items <ul><li>       this.viewport = new Ext.Panel({ </li></ul><ul><li>             fullscreen: true, </li></ul><ul><li>             dockedItems: [{ </li></ul><ul><li>                 xtype: &quot;toolbar&quot;, </li></ul><ul><li>                 dock: &quot;top&quot;, </li></ul><ul><li>                 title: 'BmoreJS' </li></ul><ul><li>             }] </li></ul><ul><li>       }); </li></ul>
  19. 24. Buttons <ul><li>             dockedItems: [{ </li></ul><ul><li>                 xtype: &quot;toolbar&quot;, </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     ui: 'back', </li></ul><ul><li>                     text: 'back', </li></ul><ul><li>                     handler: function(){} </li></ul><ul><li>                 }] </li></ul><ul><li>             }] </li></ul>
  20. 26. Button UI <ul><li>             dockedItems: [{ </li></ul><ul><li>                 xtype: &quot;toolbar&quot;, </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     ui: 'back', </li></ul><ul><li>                     text: 'back', </li></ul><ul><li>                     handler: function(){} </li></ul><ul><li>                 }] </li></ul><ul><li>             }] </li></ul>
  21. 27. Standard Button UI's Color Variations confirm                                         decline
  22. 28. Data
  23. 29. Data Store Model Reader Proxy Source
  24. 30. Model <ul><li>     Ext.regModel('Statuses', { </li></ul><ul><li>         fields: ['id_str','text'] </li></ul><ul><li>     }); </li></ul>
  25. 31. Model <ul><li>     Ext.regModel('Statuses', { </li></ul><ul><li>         fields: ['id_str','text'] </li></ul><ul><li>     }); </li></ul>
  26. 32. Model <ul><li>     Ext.regModel('Statuses', { </li></ul><ul><li>         fields: ['id_str','text'] </li></ul><ul><li>     }); </li></ul>
  27. 33. Store <ul><li>     BmoreJS.stores.Statuses = new Ext.data.Store({ </li></ul><ul><li>         model: 'Statuses', </li></ul><ul><li>         proxy: { </li></ul><ul><li>             type: 'scripttag', </li></ul><ul><li>             url: 'http://api.twitter.com/1/statuses/user_timeline.json', </li></ul><ul><li>             extraParams: { </li></ul><ul><li>               screen_name: 'bmorejs' </li></ul><ul><li>             } </li></ul><ul><li>         }, </li></ul><ul><li>         autoLoad: true </li></ul><ul><li>     }); </li></ul>
  28. 34. Store <ul><li>     BmoreJS.stores.Statuses = new Ext.data.Store({ </li></ul><ul><li>         model: 'Statuses', </li></ul><ul><li>         proxy: { </li></ul><ul><li>             type: 'scripttag', </li></ul><ul><li>             url: 'http://api.twitter.com/1/statuses/user_timeline.json', </li></ul><ul><li>             extraParams: { </li></ul><ul><li>               screen_name: 'bmorejs' </li></ul><ul><li>             } </li></ul><ul><li>         }, </li></ul><ul><li>         autoLoad: true </li></ul><ul><li>     }); </li></ul>
  29. 35. Store <ul><li>     BmoreJS.stores.Statuses = new Ext.data.Store({ </li></ul><ul><li>         model: 'Statuses', </li></ul><ul><li>         proxy: { </li></ul><ul><li>             type: 'scripttag', </li></ul><ul><li>             url: 'http://api.twitter.com/1/statuses/user_timeline.json', </li></ul><ul><li>             extraParams: { </li></ul><ul><li>               screen_name: 'bmorejs' </li></ul><ul><li>             } </li></ul><ul><li>         }, </li></ul><ul><li>         autoLoad: true </li></ul><ul><li>     }); </li></ul>
  30. 36. View
  31. 37. The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     xtype: 'list', </li></ul><ul><li>                     itemTpl: '{text}', </li></ul><ul><li>                     store: BmoreJS.stores.Statuses </li></ul><ul><li>                 }] </li></ul><ul><li>                 ... </li></ul><ul><li>             }); </li></ul>
  32. 38. The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     xtype: 'list', </li></ul><ul><li>                     itemTpl: '{text}', </li></ul><ul><li>                     store: BmoreJS.stores.Statuses </li></ul><ul><li>                 }] </li></ul><ul><li>                 ... </li></ul><ul><li>             }); </li></ul>
  33. 39. The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     xtype: 'list', </li></ul><ul><li>                     itemTpl: '{text}', </li></ul><ul><li>                     store: BmoreJS.stores.Statuses </li></ul><ul><li>                 }] </li></ul><ul><li>                 ... </li></ul><ul><li>             }); </li></ul>
  34. 40. The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     xtype: 'list', </li></ul><ul><li>                     itemTpl: '{text}', </li></ul><ul><li>                     store: BmoreJS.stores.Statuses </li></ul><ul><li>                 }] </li></ul><ul><li>                 ... </li></ul><ul><li>             }); </li></ul>
  35. 41. Templates <ul><li>itemTpl: '<a href=&quot;{url}&quot;><img src=&quot;{img}&quot;>{text}</a>', </li></ul>
  36. 42. The List <ul><li>             this.viewport = new Ext.Panel({ </li></ul><ul><li>                 layout: 'fit', </li></ul><ul><li>                 ... </li></ul><ul><li>                 items: [{ </li></ul><ul><li>                     xtype: 'list', </li></ul><ul><li>                     itemTpl: '{text}', </li></ul><ul><li>                     store: BmoreJS.stores.Statuses </li></ul><ul><li>                 }] </li></ul><ul><li>                 ... </li></ul><ul><li>             }); </li></ul>

×