• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing in HTML5: Widgetbox & Sencha Touch
 

Developing in HTML5: Widgetbox & Sencha Touch

on

  • 6,614 views

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

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.

Statistics

Views

Total Views
6,614
Views on SlideShare
6,560
Embed Views
54

Actions

Likes
2
Downloads
185
Comments
0

3 Embeds 54

http://www.sencha.com 42
http://maxstudiotech.com 11
http://lc.extjs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Developing in HTML5: Widgetbox & Sencha Touch Developing in HTML5: Widgetbox & Sencha Touch Presentation Transcript

    • Monday, November 29, 2010
    • Developing in HTML5 Widgetbox & Sencha Touch GILES GOODWIN, WIDGETBOXMonday, November 29, 2010
    • Widgetbox MobileMonday, November 29, 2010
    • Widgetbox Mobile HTML5 Mobile App Builder Non-developers build their own mobile apps Distribute the apps through the webMonday, November 29, 2010
    • 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 ExtrasMonday, November 29, 2010
    • Setup Ext.setup({ phoneIcon: icon, phoneStartupScreen: startupScreen, fullscreen: true, onReady: function() { ... var viewport = new Ext.TabPanel({ fullscreen: true, items: pagesArray }); ... } });Monday, November 29, 2010
    • List Pages List/Detail page types One panel Two cards: TableView and DetailView TableView extends List/DataView DetailView extends PanelMonday, November 29, 2010
    • 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
    • Image Carousel Display set photos Swipe between photos Sencha Carousel Used PhotosDetail has a CarouselMonday, November 29, 2010
    • 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
    • Input Pages For input pages we used our code Post data to rest service Graphics package integration gRaphaëlMonday, November 29, 2010
    • 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
    • Advanced UI Sections Time/Date Sorted Sub Navigation Split button More Menu ListViewMonday, November 29, 2010
    • Themes Colors Title and Tab bar Text and Backgrounds Fonts Titles Items and Details Style Elements Icons GradientsMonday, November 29, 2010
    • 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
    • Comparing Sencha with Rolling-Your-Own CodeMonday, November 29, 2010
    • ScrollingMonday, November 29, 2010
    • Scrolling Docking : Pinning Touch Event Management: Scroll not tap Scroll Up Here, Right There Smooth : Feels NativeMonday, November 29, 2010
    • Cross-DeviceMonday, November 29, 2010
    • Cross-Device Android iPhone versions iOS devices Future platformsMonday, November 29, 2010
    • Cost SavingsMonday, November 29, 2010
    • Cost Savings Developers can focus on features Less QA Overall maintenance savingsMonday, November 29, 2010
    • Tips & TricksMonday, November 29, 2010
    • Some tricks we likeMonday, November 29, 2010
    • Some tricks we like Base-64 and inline images in CSS Load data on demandMonday, November 29, 2010
    • Web App PerformanceMonday, November 29, 2010
    • Web App Performance GZIP CDN Inline Keep-AliveMonday, November 29, 2010
    • Thanks! Questions/Comments?Monday, November 29, 2010