Sencha Touch 2
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Sencha Touch 2

  • 2,387 views
Uploaded on

Sencha Touch 2 @ 4Developers (Poznan, Poland)

Sencha Touch 2 @ 4Developers (Poznan, Poland)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,387
On Slideshare
2,387
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
87
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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