Building a Mobile App with Sencha Touch

3,305 views
3,153 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,305
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
118
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building a Mobile App with Sencha Touch

  1. 1. Sencha Touch @ jamespearce
  2. 2. A JavaScript framework for building rich mobile apps with web standards
  3. 3. http://sencha.com/touch
  4. 4. Components
  5. 5. Data access & MVC
  6. 6. Forms
  7. 7. Scrolling
  8. 8. Touch Events
  9. 9. Theming
  10. 10. Charts
  11. 11. Kitchen Sinkhttp://sencha.com/x/5e
  12. 12. <!DOCTYPE  html><html>    <head>            <title>Hello  World</title>        <script  src="lib/touch/sencha-­‐touch.js"></script>        <script  src="app/app.js"></script>                <link  href="lib/touch/resources/css/sencha-­‐touch.css"                      rel="stylesheet"  type="text/css"  />        </head>    <body></body></html>
  13. 13. 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!                });        }});
  14. 14. Listsvar  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});
  15. 15. Nested Listsvar  list  =  new  Ext.NestedList({        store:  store,        displayField:  name,        title:  My  List,        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..}});
  16. 16. Carouselsvar  carousel  =  new  Ext.Carousel({        direction:  horizontal,        indicator:  true,        items:  [                ..        ]});
  17. 17. Sheetsvar  sheet  =  new  Ext.ActionSheet({        items:  [                {                        text:  Delete  draft,                        ui:  decline                },  {                        text:  Save  draft                },  {                        text:  Cancel,                }        ]});sheet.show();
  18. 18. Common patterns 1var  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [list]});
  19. 19. Common patterns 2var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [{                xtype:  list,                store:  store,                itemTpl:  {firstName}  {lastName},                grouped:  true,                indexBar:  true        }]});
  20. 20. Let’s code
  21. 21. Further thoughts...
  22. 22. Embrace hybrid
  23. 23. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  24. 24. Embrace the device
  25. 25. http://sencha.com/x/cyhttp://sencha.com/x/de
  26. 26. Embrace the tools
  27. 27. http://phonegap.github.com/weinre
  28. 28. Embrace responsiveness
  29. 29. http://sencha.com/x/cv
  30. 30. Embrace o ine
  31. 31. $>  phantomjs  confess.js  http://mysite.com/CACHE  MANIFEST#  This  manifest  was  created  by  confess.js#                    Time:  Wed  Sep  14  2011  10:14:45  GMT-­‐0700  (PDT)#        User-­‐agent:  Mozilla/5.0  ...CACHE:app/app.jsapp/yelp.jshttp://cdn.sencha.io/touch/1.1.0/sencha-­‐touch.jshttp://maps.google.com/maps/api/js?sensor=truehttp://maps.gstatic.com/intl/en_us/mapfiles/api-­‐3/6/4/main.jstheming/app.cssNETWORK:*http://github.com/jamesgpearce/confess
  32. 32. Embrace mobile
  33. 33. built withMobile Apps vs Web Technology
  34. 34. James Pearce@ jamespearce

×