2012 09-04 smart devcon - sencha touch 2

1,248 views

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,248
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
35
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×