Sencha Touch Intro - Toronto HTML5 User Group


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • -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

    1. 1. Using the Sencha Touch for Building Cross-Platform HTML5 Mobile Applications Presented By: Mukul Seth
    2. 2. 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
    3. 3. Who we are
    4. 4. 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…
    5. 5. In other words..›Everything!
    6. 6. Some of our clients
    7. 7. MSN Video Portal (Win7 Slate)
    8. 8. CBC Elections Map (iPad)
    9. 9. McCain Menu Advantage (PlayBook)
    10. 10. › What do these apps have in common?Ans. __________
    11. 11. › What do these apps have in common?Ans. HTML5/CSS3
    12. 12. HTML5/CSS3
    13. 13. HTML5/CSS3
    14. 14. Enter: Sencha Touch
    15. 15. Why Sencha Touch? Cross-platform Faster, cheaper, easier Highly customizable
    16. 16. Cross-platform
    17. 17. Kitchen Sink Example
    18. 18. Sample Apps
    19. 19. API Documentation
    20. 20. Skinning Engine
    21. 21. Demo ApplicationLET’S GET READY TO…
    22. 22. Demo ApplicationLET’S GET READY TO…FOOSBRAWL!
    23. 23. Demo Application
    24. 24. FOOSBRAWLIN’
    25. 25. 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…)
    26. 26. index.html
    27. 27. App.js
    28. 28. Sencha Touch Libs and CSS
    29. 29. 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. ;)
    30. 30. 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….
    31. 31. UI Control Creation Ext.create Shorthand equivalent
    32. 32. UI Control Definition
    33. 33. View/Control Customization
    34. 34. Layout Types fit card
    35. 35. Card-based Controls TabPanel Carousel
    36. 36. Layout Types – cont’d vbox hbox
    37. 37. Vbox & Hbox Layouts - Flex flex config config defaults
    38. 38. Method Overrides
    39. 39. 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)
    40. 40. 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
    41. 41. Data Models
    42. 42. Data Stores
    43. 43. Manipulating Data Model Creation Model Update
    44. 44. Manipulating Stores – Filtering
    45. 45. Binding Data
    46. 46. DEMO!
    47. 47. Q/A Mukul Seth @m_seth
    48. 48. USER POLL
    49. 49. Future HTML5 Presentation Topics?› Theming/Skinning Sencha Touch Apps› Metro Style Apps for Windows 8› jQuery Mobile App Development›…› Any other ideas?