Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2012 09-04 smart devcon - sencha touch 2

1,325 views

Published on

Sencha Touch 2 application development introduction from the SmartDevCon conference in Katowice, Poland

Published in: Technology

2012 09-04 smart devcon - sencha touch 2

  1. 1. Building mobile web applications with Sencha Touch 2 Martin de KeijzerSmartDevCon 4-6 September, Katowice Poland
  2. 2. Introduction 2
  3. 3. About meMartin de KeijzerDutch web developer Working for Ibuildings PHPBenelux Board Member @Martin1982 http:// www.martindekeijzer.nl 3
  4. 4. The mobile web 4
  5. 5. AppsLanguages‣ Apple: Objective-C‣ Android: Java‣ Windows Phone: C# / Visual BasicDistribution Methods Apple: AppStore Android: Market Windows Phone: Microsoft Market 5
  6. 6. Web Apps‣ Available through the web‣ Platform independent‣ Can be transformed to an App-like experience‣ Can be wrapped as native apps 6
  7. 7. The Sencha Touch way‣ Building applications, not websites‣ Pure JavaScript‣ Touch framework‣ MV(S)C Paradigm‣ Based on ExtJS 4Downloadable from http://www.sencha.com 8
  8. 8. Sencha SDK ToolsRapidly starting 9
  9. 9. Quick start: Sencha Commandsencha generate app <name> <path> 10
  10. 10. Quick start: Sencha Command •App •Resources •app.js •.json files •index.html •SDK (DO NOT TOUCH!) 11
  11. 11. Touchin’ the SDK is bad! Extending is ok. 12
  12. 12. Quick Start: Sencha Command Webkit 13
  13. 13. Interface designSetting up views 14
  14. 14. User interfaceAbstraction of various app uielements:‣ containers‣ panels‣ tabpanels‣ carousels‣ lists‣ forms‣ toolbars 15
  15. 15. Creating views app/view/Pictures.js 16
  16. 16. Creating views http://docs.sencha.com 17
  17. 17. Creating views /app.js 18
  18. 18. Creating views app/view/Main.js 19
  19. 19. Creating views 20
  20. 20. Taking controlBootstrapping & Controllers 21
  21. 21. Bootstrapping and Controllers /app.js Final point of bootstrapping, controllers & profiles go first 22
  22. 22. Bootstrapping and Controllers 23
  23. 23. Events Make the component selectablesencha generate controller <name> Create a new controller 24
  24. 24. Events app/controller/PictureTab.js 25
  25. 25. Events app/controller/PictureBox.js 26
  26. 26. Events Querying Predefined events 27
  27. 27. Events app/controller/PictureTab.js 28
  28. 28. Events 29
  29. 29. Data bindingand communication 30
  30. 30. Data communication 31
  31. 31. Model Model Field Association Validation 32
  32. 32. Modelsencha generate model <name><property:type,[property:type]...> 33
  33. 33. Model app/model/Talk.js 34
  34. 34. Store Store Model Filter Grouper Sorter 35
  35. 35. Store app/store/Talks.js app.js 36
  36. 36. ProxyStore Proxy Model Reader Writer 37
  37. 37. Proxy app/model/Talk.js 38
  38. 38. Create a list app/view/Talks.js 39
  39. 39. Create a list app.js 40
  40. 40. Create a list app/view/Main.js 41
  41. 41. Data in action! 42
  42. 42. Devicedoesn’t play well with yourWhen an OS profilesapp 43
  43. 43. Device profilesDifferent devices can requiredifferent options.Tablet has more screen real estateand can provide more userinteraction than a phone.Sencha Touch 2 provides profiles tobuild concrete implementations ofthe device functionalities. 44
  44. 44. Profile setup sencha generate profile <name> 45
  45. 45. Profile overriding app/controller/phone/Talks.js app/controller/tablet/Talk.js 46
  46. 46. Profile overriding app/profile/Phone.js 47
  47. 47. Profile overriding Desktop 48
  48. 48. Profile overriding Phone 49
  49. 49. Profile overriding Tablet 50
  50. 50. Your app’s got style!Styling an app 51
  51. 51. Installing Compass gem install compass 53
  52. 52. The scss file Extension: .scss compass compile compass watch 54
  53. 53. The scss file resources/sass/app.scss 55
  54. 54. Compass Variables sdk/resources/ themes/ stylesheets/ sencha-touch/ default/ _variables.scss 56
  55. 55. Compass Mixins 57
  56. 56. Quick Tips•Well documented on http://docs.sencha.com•Sencha Command•Sencha Architect 2•Keep your views clean, use controllers! 58
  57. 57. Need another look? http:// www.github.com/ Martin1982/ SmartDevCon 59
  58. 58. QUESTIONS 60
  59. 59. Thank you for listening mdkeijzer@ibuildings.nl @Martin1982

×