Building mobile web applications                                               with Sencha Touch 2                        ...
About me            Martin de Keijzer            Dutch web developer                       Working for Ibuildings         ...
Why mobile?                        3woensdag 18 april 12
Apps          Languages               Apple: Objective-C               Android: Java               Windows Phone: C# / Vis...
Web Apps               Available through the web               Platform independent               Can be transformed to an...
woensdag 18 april 12
The Sencha Touch way               Building applications, not websites               Pure JavaScript               Touch f...
Getting started                                         8woensdag 18 april 12
Quick start: Sencha Command           sencha generate app <name> <path>                                               9woe...
Quick start: Sencha Command                            •App                            •Resources                         ...
Quick Start: Sencha Command                               Webkit                                        11woensdag 18 apri...
User interface          Abstraction of various app-interface ui elements:               containers               panels   ...
Creating views                       app/view/Pictures.js                                              13woensdag 18 april...
Creating views                           14woensdag 18 april 12
Creating views                           /app.js                                     15woensdag 18 april 12
Creating views                       app/view/Main.js                                          16woensdag 18 april 12
Creating views                           17woensdag 18 april 12
Creating views                           17woensdag 18 april 12
Taking control                                        18woensdag 18 april 12
Bootstrapping and Controllers                                    /app.js                        Final point of bootstrappi...
Bootstrapping and Controllers                                          20woensdag 18 april 12
Events                       Make the component selectable                          Create a new controller               ...
Events                       app/controller/PictureBox.js                                                      22woensdag ...
Events                       app/controller/PictureBox.js                                                      23woensdag ...
Events                          Querying                       Predefined events                                          2...
Events                       25woensdag 18 april 12
Data Communication                                            26woensdag 18 april 12
Data communication                               27woensdag 18 april 12
Model                                   Model                       Field                               Association   Vali...
Model                       app/model/Talk.js                                           29woensdag 18 april 12
Store                                   Store                       Model                        Filter   Grouper   Sorter...
Store                       app/store/Schedule.js                              app.js                                     ...
Proxy             Store              Proxy            Model                       Reader           Writer                 ...
Proxy                       app/model/Talk.js                                           33woensdag 18 april 12
Create a list                          app/view/Schedule.js                                                 34woensdag 18 ...
Create a list                          app.js                                   35woensdag 18 april 12
Create a list                          app/view/Main.js                                             36woensdag 18 april 12
Data in action!                            37woensdag 18 april 12
Device profiles                                         38woensdag 18 april 12
Device profiles          Different devices require different options.          Tablet has more screen real estate and can ...
Profile setup                          40woensdag 18 april 12
Profile overriding                       app/controller/phone/PictureBox.js                       app/controller/tablet/Pi...
Profile overriding                       app/profile/Phone.js                                             42woensdag 18 apr...
Profile overriding                               Desktop                                         43woensdag 18 april 12
Profile overriding                               Phone                                       44woensdag 18 april 12
Profile overriding                               Tablet                                        45woensdag 18 april 12
Theme editing                                       46woensdag 18 april 12
woensdag 18 april 12
Installing Compass                       gem install compass                                             48woensdag 18 apr...
The scss file                            Extension: .scss                          compass compile                        ...
The scss file                          50woensdag 18 april 12
Compass Variables                                sdk/resources/themes/                              stylesheets/sencha-tou...
Compass Mixins                           52woensdag 18 april 12
Tips and conclusions                                              53woensdag 18 april 12
Quick Tips          •Well documented on http://docs.sencha.com          •Sencha Command          •Sencha Designer 2 Beta  ...
Need another look?                               http://www.github.com/                               Martin1982/4Develope...
Hungry for more?????                                  June 7 - 8 - 9, 2012                           Amsterdam RAI (The Ne...
Questions ?                                     57woensdag 18 april 12
Thank you!                               Contact details:                         Twitter: @Martin1982                    ...
Bonus!                       Debugging explained                                             59woensdag 18 april 12
Upcoming SlideShare
Loading in …5
×

Sencha Touch 2

2,246 views
2,178 views

Published on

Sencha Touch 2 @ 4Developers (Poznan, Poland)

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,246
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
90
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Sencha Touch 2

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

×