Sencha Touch Intro - Toronto HTML5 User Group
Upcoming SlideShare
Loading in...5

Sencha Touch Intro - Toronto HTML5 User Group






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • -When people talk about an HTML5 application, it really involves 3 things-HTML5-But it also involves utilizing CSS3 to create some snazzy looking interfaces and using Javascript APIs and libraries to power the interactivity and functionality of the app-In fact a lot of the new HTML5 elements have JavaScript APIs that you need to use in order to harness the power of that element-When you look at what sorts of functionality the HTML5 spec covers, you’ll understand why you need to leverage JavaScript.-The specification is so big that it’s grouped into 8 technology areas
  • -Performance for things like JavaScript-Semantics for the new attributes and tags to describe your document-Styling which includes things like CSS and typography-Multimedia for elements such as our new Video and Audio-3D effects which are possible through Canvas and SVG elements-Offline and Storage for creating apps that don’t need to be connectived-Connectivity encompasses things like web sockets and server sent requests-Device access which refers to things like geo location, accessing the web cam and microphone-One thing to keep in mind is that this chart represents the intended future state of HTML5-Not all of these features are available now
  • Show Kitchen Sink!!!!
  • Show Kitchen Sink – with Source Code example
  • Show Kitchen Sink – with Source Code example

Sencha Touch Intro - Toronto HTML5 User Group Sencha Touch Intro - Toronto HTML5 User Group Presentation Transcript

  • Using the Sencha Touch for Building Cross-Platform HTML5 Mobile Applications Presented By: Mukul Seth
  • Agenda› Who we are and what we do› The Current HTML5/CSS3 Landscape› Why Sencha Touch? › Getting Started › Working with Views – Demo › Working with Data – Demo› Q/A
  • Who we are
  • Our Expertise› Browser - HTML5, Branded Websites› iOS – Mobile and Tablet› Android – Mobile and Tablet› Windows Phone 7, Windows Tablet› BB6, BB7, PlayBook, WebKit, AIR, QNX› Microsoft Xbox Kinect› Google TV› more…
  • In other words..›Everything!
  • Some of our clients
  • MSN Video Portal (Win7 Slate)
  • CBC Elections Map (iPad)
  • McCain Menu Advantage (PlayBook)
  • › What do these apps have in common?Ans. __________
  • › What do these apps have in common?Ans. HTML5/CSS3
  • HTML5/CSS3
  • HTML5/CSS3
  • Enter: Sencha Touch
  • Why Sencha Touch? Cross-platform Faster, cheaper, easier Highly customizable
  • Cross-platform
  • Kitchen Sink Example
  • Sample Apps
  • API Documentation
  • Skinning Engine
  • Demo ApplicationLET’S GET READY TO…
  • Demo Application
  • Getting Started› What makes a Sencha Touch Application? › index.html › App.js › sencha touch libs (js files) › sencha touch resources (images/css/etc…) › Your js/css files and other assets(images, fonts, etc…)
  • index.html
  • App.js
  • Sencha Touch Libs and CSS
  • Working with Views› Sencha Touch UI Controls› UI Control Creation› UI Control Definitions› UI Control Customization› Container Layout Types› Method and property overrides› Sencha Touch Kitchen Sink › One of your best friends. ;)
  • Sencha Touch UI Controls› Component – Essentially an HTML Container› Panel – Complex container, supports child items› List – Most commonly used DataView control› Button – pretty self-explanatory› TabPanel – A specialized panel, allows to easily switch between child items using Tabs› Carousel – A specialized panel, allows to easily switch between child items using swipe gestures› and more….
  • UI Control Creation Ext.create Shorthand equivalent
  • UI Control Definition
  • View/Control Customization
  • Layout Types fit card
  • Card-based Controls TabPanel Carousel
  • Layout Types – cont’d vbox hbox
  • Vbox & Hbox Layouts - Flex flex config config defaults
  • Method Overrides
  • Working with Data› Data Models – define data schema › LocalStorage proxy example› Data Stores – manage/store data instances› Manipulating Data and Stores› Binding data to DataView Controls (i.e. Lists)
  • Data Classes› Model – Used to define data types› Store – Used to store and manipulate collections of models› Proxy – Data service layer – connects to a persistence data layer
  • Data Models
  • Data Stores
  • Manipulating Data Model Creation Model Update
  • Manipulating Stores – Filtering
  • Binding Data
  • DEMO!
  • Q/A Mukul Seth @m_seth
  • Future HTML5 Presentation Topics?› Theming/Skinning Sencha Touch Apps› Metro Style Apps for Windows 8› jQuery Mobile App Development›…› Any other ideas?