Monday, November 29, 2010
Developing in HTML5                             Widgetbox & Sencha Touch                                GILES GOODWIN, WID...
Widgetbox MobileMonday, November 29, 2010
Widgetbox Mobile                                    HTML5 Mobile App Builder                            Non-developers bui...
Monday, November 29, 2010
Over 1000 apps madeMonday, November 29, 2010
Demo: Build an AppMonday, November 29, 2010
Dissection of the AppMonday, November 29, 2010
Architecture       App Base       Navigation Style       Page Types       Pages       Theme       Page Sets       ExtrasMo...
Setup          Ext.setup({              phoneIcon: icon,              phoneStartupScreen: startupScreen,              full...
List Pages       List/Detail page types       One panel       Two cards: TableView and       DetailView       TableView ex...
List View Page Types          Wbx.feed.FeedListView = Ext.extend(Ext.List, {              itemSelector: li.entry, singleSe...
Image Carousel       Display set photos       Swipe between photos       Sencha Carousel Used       PhotosDetail has a Car...
Carousel Page Types          Wbx.photos.PhotoCarousel = Ext.extend          (Wbx.PageViewController, {              constr...
Input Pages       For input pages we used our code       Post data to rest service       Graphics package integration     ...
Input Page Types: JSONP          Ext.util.JSONP.request({            url: voteApiUrl,                           callbackKe...
Advanced UI       Sections       Time/Date       Sorted       Sub Navigation       Split button       More Menu       List...
Themes       Colors       Title and Tab bar       Text and Backgrounds       Fonts       Titles       Items and Details   ...
SASS Setup          // Lets start with the basics          $base_color: #7c92ae;          $base_gradient: glossy;         ...
Comparing Sencha with                            Rolling-Your-Own CodeMonday, November 29, 2010
ScrollingMonday, November 29, 2010
Scrolling                                       Docking : Pinning                            Touch Event Management: Scrol...
Cross-DeviceMonday, November 29, 2010
Cross-Device                                   Android                               iPhone versions                      ...
Cost SavingsMonday, November 29, 2010
Cost Savings                            Developers can focus on features                                        Less QA   ...
Tips & TricksMonday, November 29, 2010
Some tricks we likeMonday, November 29, 2010
Some tricks we like                             Base-64 and inline images in CSS                                  Load dat...
Web App PerformanceMonday, November 29, 2010
Web App Performance                                      GZIP                                      CDN                    ...
Thanks!                        Questions/Comments?Monday, November 29, 2010
Upcoming SlideShare
Loading in …5
×

Developing in HTML5: Widgetbox & Sencha Touch

6,304 views

Published on

The future of mobile is with cross platform mobile web apps. In this session you'll discover how Widgetbox used Sencha Touch to rebuild their existing HTML5 mobile apps from the ground up. Using real-life product examples, we'll cover all aspects of developing on top of the Sencha framework including using Javascript, styling in CSS3, and taking advantage of performance optimization and workarounds.

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

No Downloads
Views
Total views
6,304
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
189
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Developing in HTML5: Widgetbox & Sencha Touch

  1. 1. Monday, November 29, 2010
  2. 2. Developing in HTML5 Widgetbox & Sencha Touch GILES GOODWIN, WIDGETBOXMonday, November 29, 2010
  3. 3. Widgetbox MobileMonday, November 29, 2010
  4. 4. Widgetbox Mobile HTML5 Mobile App Builder Non-developers build their own mobile apps Distribute the apps through the webMonday, November 29, 2010
  5. 5. Monday, November 29, 2010
  6. 6. Over 1000 apps madeMonday, November 29, 2010
  7. 7. Demo: Build an AppMonday, November 29, 2010
  8. 8. Dissection of the AppMonday, November 29, 2010
  9. 9. Architecture App Base Navigation Style Page Types Pages Theme Page Sets ExtrasMonday, November 29, 2010
  10. 10. Setup Ext.setup({ phoneIcon: icon, phoneStartupScreen: startupScreen, fullscreen: true, onReady: function() { ... var viewport = new Ext.TabPanel({ fullscreen: true, items: pagesArray }); ... } });Monday, November 29, 2010
  11. 11. List Pages List/Detail page types One panel Two cards: TableView and DetailView TableView extends List/DataView DetailView extends PanelMonday, November 29, 2010
  12. 12. List View Page Types Wbx.feed.FeedListView = Ext.extend(Ext.List, { itemSelector: li.entry, singleSelect: true, ! itemTpl: new Ext.XTemplate( ! ... ! ! <li class="entry">...</li> ! ... ), constructor: function(config) { config.proxy = new Wbx.date.FeedProxy({feedUrl:config.feedUrl}); config.store = new Ext.data.Store({ proxy: config.proxy, model: FeedEntry ! ! ! ... }); feed.FeedListView.superclass.constructor.call(this, config); }, ! // Other FeedListView specific overrides... });Monday, November 29, 2010
  13. 13. Image Carousel Display set photos Swipe between photos Sencha Carousel Used PhotosDetail has a CarouselMonday, November 29, 2010
  14. 14. Carousel Page Types Wbx.photos.PhotoCarousel = Ext.extend (Wbx.PageViewController, { constructor: function(config) { ! ! this.carousel = new Ext.Carousel({ items: photoPanels }); this.items = [this.carousel]; photos.PhotoCarousel.superclass.constructor.call (this, config); }, ! ... setPhoto: function(index) { var photoCard = this.photoCards[index]; photoCard.doLayout(); this.carousel.setActiveItem(photoCard); } });Monday, November 29, 2010
  15. 15. Input Pages For input pages we used our code Post data to rest service Graphics package integration gRaphaëlMonday, November 29, 2010
  16. 16. Input Page Types: JSONP Ext.util.JSONP.request({ url: voteApiUrl,                callbackKey: wbx_callback,           params: {                    wbx_token: WbxMobileSite.token   }, callback: function(result) {         panel.getResults(true);    } });Monday, November 29, 2010
  17. 17. Advanced UI Sections Time/Date Sorted Sub Navigation Split button More Menu ListViewMonday, November 29, 2010
  18. 18. Themes Colors Title and Tab bar Text and Backgrounds Fonts Titles Items and Details Style Elements Icons GradientsMonday, November 29, 2010
  19. 19. SASS Setup // Lets start with the basics $base_color: #7c92ae; $base_gradient: glossy; // Lists $list_active_gradient: bevel; $list_header_gradient: matte; @import sencha-touch/default/all; @include sencha-panel; @include sencha-buttons; ...Monday, November 29, 2010
  20. 20. Comparing Sencha with Rolling-Your-Own CodeMonday, November 29, 2010
  21. 21. ScrollingMonday, November 29, 2010
  22. 22. Scrolling Docking : Pinning Touch Event Management: Scroll not tap Scroll Up Here, Right There Smooth : Feels NativeMonday, November 29, 2010
  23. 23. Cross-DeviceMonday, November 29, 2010
  24. 24. Cross-Device Android iPhone versions iOS devices Future platformsMonday, November 29, 2010
  25. 25. Cost SavingsMonday, November 29, 2010
  26. 26. Cost Savings Developers can focus on features Less QA Overall maintenance savingsMonday, November 29, 2010
  27. 27. Tips & TricksMonday, November 29, 2010
  28. 28. Some tricks we likeMonday, November 29, 2010
  29. 29. Some tricks we like Base-64 and inline images in CSS Load data on demandMonday, November 29, 2010
  30. 30. Web App PerformanceMonday, November 29, 2010
  31. 31. Web App Performance GZIP CDN Inline Keep-AliveMonday, November 29, 2010
  32. 32. Thanks! Questions/Comments?Monday, November 29, 2010

×