Sencha Touch 2
•
4 likes•1,126 views
The document discusses building mobile web applications with Sencha Touch 2. It provides an overview of Sencha Touch, including how to get started, create user interfaces and views, handle events and data, implement device profiles and themes, and offers some tips. The presentation was given by Martin de Keijzer on building mobile apps with the Sencha Touch JavaScript framework.
More Related Content
Similar to Sencha Touch 2
Similar to Sencha Touch 2 (10)
More from Martin de Keijzer
More from Martin de Keijzer (16)
Recently uploaded
Recently uploaded (20)
Sencha Touch 2
- 1. Building mobile web applications with Sencha Touch 2 Martin de Keijzer 4Developers (Poznan, Poland) / April 18th 2012 woensdag 18 april 12
- 2. About me Martin de Keijzer Dutch web developer Working for Ibuildings PHPBenelux Board Member @Martin1982 http://www.martindekeijzer.nl 2 woensdag 18 april 12
- 3. Why mobile? 3 woensdag 18 april 12
- 4. Apps Languages Apple: Objective-C Android: Java Windows Phone: C# / Visual Basic Distribution Methods Apple: AppStore Android: Market Windows Phone: Microsoft Market Place 4 woensdag 18 april 12
- 5. Web Apps Available through the web Platform independent Can be transformed to an App-like experience Can be wrapped as native apps 5 woensdag 18 april 12
- 6. woensdag 18 april 12
- 7. The Sencha Touch way Building applications, not websites Pure JavaScript Touch framework MV(S)C Paradigm Based on ExtJS 4 Downloadable from http://www.sencha.com 7 woensdag 18 april 12
- 8. Getting started 8 woensdag 18 april 12
- 9. Quick start: Sencha Command sencha generate app <name> <path> 9 woensdag 18 april 12
- 10. Quick start: Sencha Command •App •Resources •SDK (DO NOT TOUCH!) •app.js •.json files •index.html 10 woensdag 18 april 12
- 11. Quick Start: Sencha Command Webkit 11 woensdag 18 april 12
- 12. User interface Abstraction of various app-interface ui elements: containers panels tabpanels carousels lists forms toolbars 12 woensdag 18 april 12
- 13. Creating views app/view/Pictures.js 13 woensdag 18 april 12
- 14. Creating views 14 woensdag 18 april 12
- 15. Creating views /app.js 15 woensdag 18 april 12
- 16. Creating views app/view/Main.js 16 woensdag 18 april 12
- 17. Creating views 17 woensdag 18 april 12
- 18. Creating views 17 woensdag 18 april 12
- 19. Taking control 18 woensdag 18 april 12
- 20. Bootstrapping and Controllers /app.js Final point of bootstrapping, controllers & profiles go first 19 woensdag 18 april 12
- 21. Bootstrapping and Controllers 20 woensdag 18 april 12
- 22. Events Make the component selectable Create a new controller 21 woensdag 18 april 12
- 23. Events app/controller/PictureBox.js 22 woensdag 18 april 12
- 24. Events app/controller/PictureBox.js 23 woensdag 18 april 12
- 25. Events Querying Predefined events 24 woensdag 18 april 12
- 26. Events 25 woensdag 18 april 12
- 27. Data Communication 26 woensdag 18 april 12
- 28. Data communication 27 woensdag 18 april 12
- 29. Model Model Field Association Validation 28 woensdag 18 april 12
- 30. Model app/model/Talk.js 29 woensdag 18 april 12
- 31. Store Store Model Filter Grouper Sorter 30 woensdag 18 april 12
- 32. Store app/store/Schedule.js app.js 31 woensdag 18 april 12
- 33. Proxy Store Proxy Model Reader Writer 32 woensdag 18 april 12
- 34. Proxy app/model/Talk.js 33 woensdag 18 april 12
- 35. Create a list app/view/Schedule.js 34 woensdag 18 april 12
- 36. Create a list app.js 35 woensdag 18 april 12
- 37. Create a list app/view/Main.js 36 woensdag 18 april 12
- 38. Data in action! 37 woensdag 18 april 12
- 39. Device profiles 38 woensdag 18 april 12
- 40. Device profiles Different devices require different options. Tablet has more screen real estate and can provide more user interaction than a phone. Sencha Touch 2 provides profiles to build concrete implementations of the device functionalities. 39 woensdag 18 april 12
- 41. Profile setup 40 woensdag 18 april 12
- 42. Profile overriding app/controller/phone/PictureBox.js app/controller/tablet/PictureBox.js 41 woensdag 18 april 12
- 43. Profile overriding app/profile/Phone.js 42 woensdag 18 april 12
- 44. Profile overriding Desktop 43 woensdag 18 april 12
- 45. Profile overriding Phone 44 woensdag 18 april 12
- 46. Profile overriding Tablet 45 woensdag 18 april 12
- 47. Theme editing 46 woensdag 18 april 12
- 48. woensdag 18 april 12
- 49. Installing Compass gem install compass 48 woensdag 18 april 12
- 50. The scss file Extension: .scss compass compile compass watch 49 woensdag 18 april 12
- 51. The scss file 50 woensdag 18 april 12
- 52. Compass Variables sdk/resources/themes/ stylesheets/sencha-touch/ default/_variables.scss 51 woensdag 18 april 12
- 53. Compass Mixins 52 woensdag 18 april 12
- 54. Tips and conclusions 53 woensdag 18 april 12
- 55. Quick Tips •Well documented on http://docs.sencha.com •Sencha Command •Sencha Designer 2 Beta •Keep your views clean, use controllers! •Mobile devices have limited hardware 54 woensdag 18 april 12
- 56. Need another look? http://www.github.com/ Martin1982/4Developers 55 woensdag 18 april 12
- 57. Hungry for more????? June 7 - 8 - 9, 2012 Amsterdam RAI (The Netherlands) http://mobileconference.nl Dutch PHP Conference visitors can attend the mobile conference and vice versa! 56 woensdag 18 april 12
- 58. Questions ? 57 woensdag 18 april 12
- 59. Thank you! Contact details: Twitter: @Martin1982 mdkeijzer@ibuildings.nl woensdag 18 april 12
- 60. Bonus! Debugging explained 59 woensdag 18 april 12