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.

1. Tuesday, November 30, 2010

2. Developing in HTML5
Widgetbox & Sencha Touch
GILES GOODWIN, WIDGETBOX
Tuesday, November 30, 2010

3. Widgetbox Mobile
Tuesday, November 30, 2010

4. Widgetbox Mobile
HTML5 Mobile App Builder
Non-developers build their own mobile apps
Distribute the apps through the web
Tuesday, November 30, 2010

5. Tuesday, November 30, 2010

6. Over 1000 apps made
Tuesday, November 30, 2010

7. Demo: Build an App
Tuesday, November 30, 2010

8. Dissection of the App
Tuesday, November 30, 2010

9. Architecture
App Base
Navigation Style
Page Types
Pages
Theme
Page Sets
Extras
Tuesday, November 30, 2010

10. Setup
Ext.setup({
phoneIcon: icon,
phoneStartupScreen: startupScreen,
fullscreen: true,
onReady: function() {
...
var viewport = new Ext.TabPanel({
fullscreen: true,
items: pagesArray
});
...
}
});
Tuesday, November 30, 2010

11. List Pages
List/Detail page types
One panel
Two cards: TableView and
DetailView
TableView extends List/DataView
DetailView extends Panel
Tuesday, November 30, 2010

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...
});
Tuesday, November 30, 2010

13. Image Carousel
Display set photos
Swipe between photos
Sencha Carousel Used
PhotosDetail has a Carousel
Tuesday, November 30, 2010

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);
}
});
Tuesday, November 30, 2010

15. Input Pages
For input pages we used our code
Post data to rest service
Graphics package integration
gRaphaël
Tuesday, November 30, 2010

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);
}
});
Tuesday, November 30, 2010

17. Advanced UI
Sections
Time/Date
Sorted
Sub Navigation
Split button
More Menu
ListView
Tuesday, November 30, 2010

18. Themes
Colors
Title and Tab bar
Text and Backgrounds
Fonts
Titles
Items and Details
Style Elements
Icons
Gradients
Tuesday, November 30, 2010

19. SASS Setup
// Let's 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;
...
Tuesday, November 30, 2010

20. Comparing Sencha with
Rolling-Your-Own Code
Tuesday, November 30, 2010

21. Scrolling
Tuesday, November 30, 2010

22. Scrolling
Docking : Pinning
Touch Event Management: Scroll not tap
Scroll Up Here, Right There
Smooth : Feels Native
Tuesday, November 30, 2010

23. Cross-Device
Tuesday, November 30, 2010

24. Cross-Device
Android
iPhone versions
iOS devices
Future platforms
Tuesday, November 30, 2010

25. Cost Savings
Tuesday, November 30, 2010

26. Cost Savings
Developers can focus on features
Less QA
Overall maintenance savings
Tuesday, November 30, 2010

27. Tips & Tricks
Tuesday, November 30, 2010

28. Some tricks we like
Tuesday, November 30, 2010

29. Some tricks we like
Base-64 and inline images in CSS
Load data on demand
Tuesday, November 30, 2010

30. Web App Performance
Tuesday, November 30, 2010

31. Web App Performance
GZIP
CDN
Inline
Keep-Alive
Tuesday, November 30, 2010

32. Thanks!
Questions/Comments?
Tuesday, November 30, 2010