Hybrid Mobile Web Apps with Sencha Touch 2
0 likes2,763 views
The document discusses building mobile web applications with Sencha Touch 2. It introduces Sencha Touch and its command line interface for rapidly generating app structures. It covers creating views, controllers, models, stores and proxies to manage user interfaces and data. It also discusses styling apps with Sass/Compass and using device profiles to customize experiences for different devices.
![Model
37
sencha generate model <name>
<property:type,[property:type]...>
Sunday, 14 April 13](https://image.slidesharecdn.com/2013-04-13iosonrailsconf2013-senchatouch2-130414064303-phpapp02-130726090704-phpapp02/85/Hybrid-Mobile-Web-Apps-with-Sencha-Touch-2-37-320.jpg)
Hybrid Mobile Web Apps with Sencha Touch 2
- 1. with Sencha Touch 2 Martin de Keijzer iOSOnRailsConf 2013 13-14 April, Alushta Ukraine Building mobile web applications Sunday, 14 April 13
- 3. About me Martin de Keijzer Dutch web developer 3 @Martin1982 PHPBenelux Board Member Working for Ibuildings http://www.martindekeijzer.nl Sunday, 14 April 13
- 4. The mobile web 4 Sunday, 14 April 13
- 5. Apps Languages ‣ Apple: Objective-C ‣ Android: Java ‣ Windows Phone: C# / Visual Basic 5 Distribution Methods Apple: AppStore Android: Market Windows Phone: Microsoft Market Place Sunday, 14 April 13
- 6. Web Apps 6 Available through the web Sunday, 14 April 13
- 7. Web Apps Platform independent 7 Sunday, 14 April 13
- 8. Web Apps Can be transformed to an App-like experience 8 Sunday, 14 April 13
- 9. Web Apps 9 Can be wrapped as native apps Sunday, 14 April 13
- 10. Sunday, 14 April 13
- 11. 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 11 Sunday, 14 April 13
- 12. Rapidly starting Sencha Cmd 12 Sunday, 14 April 13
- 13. Quick start: Sencha Cmd 13 sencha generate app <name> <path> Sunday, 14 April 13
- 14. Quick start: Sencha Cmd 14 •App •Resources •app.js •.json files •index.html •touch (DO NOT TOUCH!) Sunday, 14 April 13
- 15. Changing the SDK is bad! Extending is ok. 15 Sunday, 14 April 13
- 17. Setting up views Interface design 17 Sunday, 14 April 13
- 18. User interface Abstraction of various app ui elements: ‣ containers ‣ panels ‣ tab panels ‣ carousels ‣ lists ‣ forms ‣ toolbars 18 Sunday, 14 April 13
- 19. Creating views 19app/view/Technologies.js Sunday, 14 April 13
- 21. Creating views 21 /app.js Sunday, 14 April 13
- 22. Creating views 22app/view/Main.js Sunday, 14 April 13
- 23. Creating views 23 Sunday, 14 April 13
- 24. Bootstrapping & Controllers Taking control 24 Sunday, 14 April 13
- 25. Bootstrapping and Controllers 25 /app.js Final point of bootstrapping, controllers & profiles go first Sunday, 14 April 13
- 26. Bootstrapping and Controllers 26 Sunday, 14 April 13
- 27. Events 27 Create a new controller sencha generate controller <name> Sunday, 14 April 13
- 28. Events 28 Make the component selectable Sunday, 14 April 13
- 31. Events 31 Querying Predefined events Sunday, 14 April 13
- 33. Events 33 Sunday, 14 April 13
- 34. and communication Data binding 34 Sunday, 14 April 13
- 35. Data communication 35 Sunday, 14 April 13
- 37. Model 37 sencha generate model <name> <property:type,[property:type]...> Sunday, 14 April 13
- 39. Store 39 Store Model Filter Grouper Sorter Sunday, 14 April 13
- 41. Proxy 41 Proxy Reader Writer Store Model Sunday, 14 April 13
- 43. Create a list 43app/view/Technologies.js Sunday, 14 April 13
- 44. Data in action! 44 Sunday, 14 April 13
- 45. When an OS doesn’t play well with your app Device profiles 45 Sunday, 14 April 13
- 46. Device profiles Different devices can require different options. 46 Sunday, 14 April 13
- 47. Device Profiles Tablet has more screen real estate and can provide more user interaction than a phone. 47 Sunday, 14 April 13
- 48. Device Profiles Device profiles provide a solution! 48 Sunday, 14 April 13
- 49. Profile setup 49 sencha generate profile <name> Sunday, 14 April 13
- 54. Profile overriding 54 Desktop Sunday, 14 April 13
- 55. Profile overriding 55 Phone Sunday, 14 April 13
- 56. Profile overriding 56 Tablet Sunday, 14 April 13
- 57. Styling an app Your app’s got style! 57 Sunday, 14 April 13
- 58. Sunday, 14 April 13
- 59. Installing Compass 59 gem install compass Sunday, 14 April 13
- 60. The scss file 60 compass compile compass watch Extension: .scss Sunday, 14 April 13
- 61. The scss file 61resources/sass/app.scss Sunday, 14 April 13
- 62. Compass Variables 62 touch/resources/ themes/ stylesheets/ sencha-touch/ default/ _variables.scss Sunday, 14 April 13
- 63. Compass Mixins 63 Sunday, 14 April 13
- 64. Quick Tips •Well documented on http://docs.sencha.com •Sencha Command •Sencha Architect 2 •Keep your views clean, use controllers! •Mobile devices have limited hardware 64 Sunday, 14 April 13
- 65. Need another look? 65 http://www.github.com/ Martin1982/ iOSOnRailsConf Sunday, 14 April 13
- 66. 66 Sencha Touch by Sencha Sunday, 14 April 13
- 67. 66 Sencha Touch by Sencha Sunday, 14 April 13
- 68. Tomorrow’s mini Workshop 67 Prepare to tag along: Sencha Cmd Sencha Touch 2.1.1 GPL Sunday, 14 April 13
- 70. mdkeijzer@ibuildings.nl @Martin1982 Thank you for listening Sunday, 14 April 13