Sencha touch 2

1,359 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,359
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
672
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sencha touch 2

  1. 1. 4Developers (Poznan, Poland) / April 18th 2012 Martin de Keijzer Building mobile web applications with Sencha Touch 2 woensdag 18 april 12
  2. 2. About me Martin de Keijzer Dutch web developer 2 @Martin1982 PHPBenelux Board Member Working for Ibuildings http://www.martindekeijzer.nl woensdag 18 april 12
  3. 3. Why mobile? 3 woensdag 18 april 12
  4. 4. Apps Languages Apple: Objective-C Android: Java Windows Phone: C# / Visual Basic 4 Distribution Methods Apple: AppStore Android: Market Windows Phone: Microsoft Market Place woensdag 18 april 12
  5. 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. 6. woensdag 18 april 12
  7. 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. 8. Getting started 8 woensdag 18 april 12
  9. 9. Quick start: Sencha Command 9 sencha generate app <name> <path> woensdag 18 april 12
  10. 10. Quick start: Sencha Command 10 •App •Resources •SDK (DO NOT TOUCH!) •app.js •.json files •index.html woensdag 18 april 12
  11. 11. Quick Start: Sencha Command 11 Webkit woensdag 18 april 12
  12. 12. User interface Abstraction of various app-interface ui elements: containers panels tabpanels carousels lists forms toolbars 12 woensdag 18 april 12
  13. 13. Creating views 13 app/view/Pictures.js woensdag 18 april 12
  14. 14. Creating views 14 woensdag 18 april 12
  15. 15. Creating views 15 /app.js woensdag 18 april 12
  16. 16. Creating views 16 app/view/Main.js woensdag 18 april 12
  17. 17. Creating views 17 woensdag 18 april 12
  18. 18. Creating views 17 woensdag 18 april 12
  19. 19. Taking control 18 woensdag 18 april 12
  20. 20. Bootstrapping and Controllers 19 /app.js Final point of bootstrapping, controllers & profiles go first woensdag 18 april 12
  21. 21. Bootstrapping and Controllers 20 woensdag 18 april 12
  22. 22. Events 21 Make the component selectable Create a new controller woensdag 18 april 12
  23. 23. Events 22 app/controller/PictureBox.js woensdag 18 april 12
  24. 24. Events 23 app/controller/PictureBox.js woensdag 18 april 12
  25. 25. Events 24 Querying Predefined events woensdag 18 april 12
  26. 26. Events 25 woensdag 18 april 12
  27. 27. Data Communication 26 woensdag 18 april 12
  28. 28. Data communication 27 woensdag 18 april 12
  29. 29. Model 28 Model Field Association Validation woensdag 18 april 12
  30. 30. Model 29 app/model/Talk.js woensdag 18 april 12
  31. 31. Store 30 Store Model Filter Grouper Sorter woensdag 18 april 12
  32. 32. Store 31 app/store/Schedule.js app.js woensdag 18 april 12
  33. 33. Proxy 32 Proxy Reader Writer Store Model woensdag 18 april 12
  34. 34. Proxy 33 app/model/Talk.js woensdag 18 april 12
  35. 35. Create a list 34 app/view/Schedule.js woensdag 18 april 12
  36. 36. Create a list 35 app.js woensdag 18 april 12
  37. 37. Create a list 36 app/view/Main.js woensdag 18 april 12
  38. 38. Data in action! 37 woensdag 18 april 12
  39. 39. Device profiles 38 woensdag 18 april 12
  40. 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. 41. Profile setup 40 woensdag 18 april 12
  42. 42. Profile overriding 41 app/controller/phone/PictureBox.js app/controller/tablet/PictureBox.js woensdag 18 april 12
  43. 43. Profile overriding 42 app/profile/Phone.js woensdag 18 april 12
  44. 44. Profile overriding 43 Desktop woensdag 18 april 12
  45. 45. Profile overriding 44 Phone woensdag 18 april 12
  46. 46. Profile overriding 45 Tablet woensdag 18 april 12
  47. 47. Theme editing 46 woensdag 18 april 12
  48. 48. woensdag 18 april 12
  49. 49. Installing Compass 48 gem install compass woensdag 18 april 12
  50. 50. The scss file 49 compass compile compass watch Extension: .scss woensdag 18 april 12
  51. 51. The scss file 50 woensdag 18 april 12
  52. 52. Compass Variables 51 sdk/resources/themes/ stylesheets/sencha-touch/ default/_variables.scss woensdag 18 april 12
  53. 53. Compass Mixins 52 woensdag 18 april 12
  54. 54. Tips and conclusions 53 woensdag 18 april 12
  55. 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. 56. Need another look? 55 http://www.github.com/ Martin1982/4Developers woensdag 18 april 12
  57. 57. Hungry for more????? 56 June 7 - 8 - 9, 2012 Amsterdam RAI (The Netherlands) http://mobileconference.nl Dutch PHP Conference visitors can attend the mobile conference and vice versa! woensdag 18 april 12
  58. 58. Questions ? 57 woensdag 18 april 12
  59. 59. Thank you! Contact details: Twitter: @Martin1982 mdkeijzer@ibuildings.nl woensdag 18 april 12
  60. 60. Debugging explained 59 Bonus! woensdag 18 april 12

×