Developing in HTML5: Widgetbox & Sencha Touch

Tuesday, November 30, 2010

Developing in HTML5Widgetbox & Sencha Touch

GILES GOODWIN, WIDGETBOX


Widgetbox Mobile


Widgetbox Mobile HTML5 Mobile App Builder

Non-developers build their own mobile appsDistribute the apps through the web



Over 1000 apps made


Demo: Build an App


Dissection of the App


App BaseNavigation StylePage TypesPagesTheme Page SetsExtras

Architecture


SetupExt.setup({ phoneIcon: icon, phoneStartupScreen: startupScreen, fullscreen: true, onReady: function() {

...var viewport = new Ext.TabPanel({ fullscreen: true, items: pagesArray});...

}});


List PagesList/Detail page typesOne panelTwo cards: TableView and DetailViewTableView extends List/DataViewDetailView extends Panel


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...});

List View Page Types


Image CarouselDisplay set photosSwipe between photosSencha Carousel UsedPhotosDetail has a Carousel


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); }});

Carousel Page Types


For input pages we used our codePost data to rest serviceGraphics package integrationgRaphaël

Input Pages


Ext.util.JSONP.request({url: voteApiUrl, callbackKey: 'wbx_callback',

params: { wbx_token: WbxMobileSite.token

},

callback: function(result) { panel.getResults(true); }});

Input Page Types: JSONP


SectionsTime/DateSortedSub NavigationSplit buttonMore MenuListView

Advanced UI


ColorsTitle and Tab barText and BackgroundsFontsTitlesItems and DetailsStyle ElementsIconsGradients

Themes


// 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;...

SASS Setup


Comparing Sencha with Rolling-Your-Own Code


Scrolling


ScrollingDocking : Pinning

Touch Event Management: Scroll not tap Scroll Up Here, Right There

Smooth : Feels Native


Cross-Device


Cross-DeviceAndroid

iPhone versionsiOS devices

Future platforms


Cost Savings


Cost SavingsDevelopers can focus on features

Less QAOverall maintenance savings


Tips & Tricks


Some tricks we like


Some tricks we likeBase-64 and inline images in CSS

Load data on demand


Web App Performance


Web App PerformanceGZIPCDN

InlineKeep-Alive


Thanks!Questions/Comments?


Technology

Developing in HTML5: Widgetbox & Sencha Touch