This presentation introduces Sencha Touch, an HTML5 framework for building cross-platform mobile applications. It discusses Sencha Touch's advantages for building apps that work across iOS, Android, Windows Phone and other platforms. The presentation demonstrates how to get started with Sencha Touch, including creating user interface views, working with data models and stores, and binding data to views. Code demos show how to manipulate data and use different layouts. The presentation concludes with a question and answer section.

1. Using the Sencha Touch for Building
Cross-Platform HTML5 Mobile
Applications
Presented By:
Mukul Seth

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. Who we are

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. In other words..
›Everything!

6. Some of our clients

7. MSN Video Portal (Win7 Slate)

8. CBC Elections Map (iPad)

9. McCain Menu Advantage (PlayBook)

10. › What do these apps have
in common?
Ans. __________

11. › What do these apps have
in common?
Ans. HTML5/CSS3

12. HTML5/CSS3

13. HTML5/CSS3

14. Enter: Sencha Touch

15. Why Sencha Touch?
Cross-platform
Faster, cheaper, easier
Highly customizable

16. Cross-platform

17. Kitchen Sink Example

18. Sample Apps

19. API Documentation

20. Skinning Engine

21. Demo Application
LET’S GET READY TO…

22. Demo Application
LET’S GET READY TO…
FOOSBRAWL!

23. Demo Application
http://github.com/Digiflare/foosbrawl

24. FOOSBRAWLIN’

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

27. App.js

28. Sencha Touch Libs and CSS

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. 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. UI Control Creation
Ext.create Shorthand equivalent

32. UI Control Definition

33. View/Control Customization

34. Layout Types
fit card

35. Card-based Controls
TabPanel Carousel

36. Layout Types – cont’d
vbox hbox

37. Vbox & Hbox Layouts - Flex
flex config config defaults

38. Method Overrides

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

42. Data Stores

43. Manipulating Data
Model Creation Model Update

44. Manipulating Stores – Filtering

45. Binding Data

46. DEMO!

47. Q/A
Mukul Seth
mukul.seth@digiflare.com
@m_seth

48. USER POLL

49. Future HTML5 Presentation Topics?
› Theming/Skinning Sencha Touch Apps
› Metro Style Apps for Windows 8
› jQuery Mobile App Development
›…
› Any other ideas?