Cross-Plattform Mobile DevelopmentSencha Touch & PhoneGap                                      MobileTechCon 2011         ...
Me, Myself & I                    @stefan_kolb Social Media, baby!                    stefankolb.de My blog is my castleHi...
Sencha Touch       https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Te...
“   The first HTML5, Mobile     Web App Framework              http://www.sencha.com/products/touch              http://fc0...
jQuery              jQuery Wrapper               DOM Element<HTML>         DOM Element    append();  DOM          DOM Elem...
Sencha Touch           Sencha Touch Widgets                     List<HTML>             Button  DOM              Toolbar   ...
Sencha Touch• HTML5, CSS3, JavaScript• Basiert auf Ext JS (Platform)• Cross-Platform
http://www.sencha.com/img/20110222-loopfuse.png
http://dev.sencha.com/deploy/touch/examples/kitchensink/
Sencha Touch
index.html
MVCModel-View-Controller                        http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
Managers• Ext.regModel();• Ext.regController();• Ext.reg(); • new Ext.###CLASS###({ });
Model erstellen
View erstellen
Controller erstellen
Funktionen
Data Package    http://www.etleboro.com/picture_library/Server_room_4.jpg
& Sencha Touchhttp://www.sencha.com/blog/countdown-to-ext-js-4-data-package/
Model• Repräsentiert Daten• Validierung von Daten• Verbindung zu anderen Modellen
Store• Sammlung von Model-Instanzen• Datenmanagement für UI-  Komponenten
Proxy• Laden / Speichern von Model-Daten• ClientProxy vs. ServerProxy • LocalStorageProxy, SessionStorageProxy,   MemoryPr...
User Interface                                                   Design  http://culturedcode.com/things/iphone/makingof/Th...
Components• Visuellen Bestanteile einer App• User Interface
DemoComponents             http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Container• Wrapper für andere Components• Hinzufügen, Einfügen und Entfernen  von Components• Anordnung der beinhaltenden ...
Layout• Legt fest, wie Components innerhalb  eines Containers gerendert wrden• auto, fit, card, hbox, vbox • dock, field, box
fit
card
hbox
vbox
Container/Layout      Konfiguration• pack: start, center, end, justify• align: start, center, end, stretch• direction: norm...
Container/Layout Konfiguration
Touch                                Events & Gestures                 pinch/rotate   swipetap/double-tap                 ...
DemoTouch Solitaire                  http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Style & Design• CSS3 • Unabhängig der Bildschirmauflösung• Icons• Animations • slide, pop, fade, flip & cube • Eigene Animat...
DemoStyles & Design                  http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Theming          http://www.sencha.com/products/touch/style-design
Lizenzen• Open Source Licenses • GPL v3 & FLOSS• Commercial Software License• Commercial OEM License
Lizenzen• Open Source Licenses • GPL v3 & FLOSS• Commercial Software License• Commercial OEM License
Offline         ScrollView       AndroidHTML5                  Charts  Animations                  CSS3                     ...
PhoneGap           http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
Web-AppHTML5   CSS             Native APIsJavaScript
PhoneGap• Native Bibliothek• JavaScript • navigator.*
http://www.phonegap.com/about/features
http://docs.phonegap.com
deviceready?
PhoneGap Build build.phonegap.com
DemoSencha Touch & PhoneGap                    http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba...
Fragen?               Bitte nicht so schwierige :-)       @stefan_kolbstefan.kolb@indiginox.com
THXI‘m up for beers                   http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959
Sencha Touch & PhoneGap
Upcoming SlideShare
Loading in …5
×

Sencha Touch & PhoneGap

2,433 views

Published on

Introduction to both Sencha Touch and PhoneGap
Note: Slides are in mostly in German

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

No Downloads
Views
Total views
2,433
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Sencha Touch & PhoneGap

  1. 1. Cross-Plattform Mobile DevelopmentSencha Touch & PhoneGap MobileTechCon 2011 14/Sep/2011 - Mainz, Germany Stefan Kolb Indiginox GmbH http://www.intomobile.com/wp-content/uploads/2011/02/pile-of-phones.jpg
  2. 2. Me, Myself & I @stefan_kolb Social Media, baby! stefankolb.de My blog is my castleHier macht‘s Spaß :-) Softwareentwickler
  3. 3. Sencha Touch https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG
  4. 4. “ The first HTML5, Mobile Web App Framework http://www.sencha.com/products/touch http://fc04.deviantart.net/fs50/f/2009/333/1/7/Blue_Bubbles_Wallpaper_by_SonnyKingBlack.jpg
  5. 5. jQuery jQuery Wrapper DOM Element<HTML> DOM Element append(); DOM DOM Element removeClass(); ... position(); $(‘#selector‘);
  6. 6. Sencha Touch Sencha Touch Widgets List<HTML> Button DOM Toolbar ...new Ext.List({ ... });
  7. 7. Sencha Touch• HTML5, CSS3, JavaScript• Basiert auf Ext JS (Platform)• Cross-Platform
  8. 8. http://www.sencha.com/img/20110222-loopfuse.png
  9. 9. http://dev.sencha.com/deploy/touch/examples/kitchensink/
  10. 10. Sencha Touch
  11. 11. index.html
  12. 12. MVCModel-View-Controller http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
  13. 13. Managers• Ext.regModel();• Ext.regController();• Ext.reg(); • new Ext.###CLASS###({ });
  14. 14. Model erstellen
  15. 15. View erstellen
  16. 16. Controller erstellen
  17. 17. Funktionen
  18. 18. Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg
  19. 19. & Sencha Touchhttp://www.sencha.com/blog/countdown-to-ext-js-4-data-package/
  20. 20. Model• Repräsentiert Daten• Validierung von Daten• Verbindung zu anderen Modellen
  21. 21. Store• Sammlung von Model-Instanzen• Datenmanagement für UI- Komponenten
  22. 22. Proxy• Laden / Speichern von Model-Daten• ClientProxy vs. ServerProxy • LocalStorageProxy, SessionStorageProxy, MemoryProxy • AjaxProxy, ScriptTagProxy• CRUD / Operation-Objekt
  23. 23. User Interface Design http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
  24. 24. Components• Visuellen Bestanteile einer App• User Interface
  25. 25. DemoComponents http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  26. 26. Container• Wrapper für andere Components• Hinzufügen, Einfügen und Entfernen von Components• Anordnung der beinhaltenden Components mittels Layout
  27. 27. Layout• Legt fest, wie Components innerhalb eines Containers gerendert wrden• auto, fit, card, hbox, vbox • dock, field, box
  28. 28. fit
  29. 29. card
  30. 30. hbox
  31. 31. vbox
  32. 32. Container/Layout Konfiguration• pack: start, center, end, justify• align: start, center, end, stretch• direction: normal, reverse• width, height, flex
  33. 33. Container/Layout Konfiguration
  34. 34. Touch Events & Gestures pinch/rotate swipetap/double-tap tap & hold http://www.sencha.com/products/touch/
  35. 35. DemoTouch Solitaire http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  36. 36. Style & Design• CSS3 • Unabhängig der Bildschirmauflösung• Icons• Animations • slide, pop, fade, flip & cube • Eigene Animationen mittels CSS
  37. 37. DemoStyles & Design http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  38. 38. Theming http://www.sencha.com/products/touch/style-design
  39. 39. Lizenzen• Open Source Licenses • GPL v3 & FLOSS• Commercial Software License• Commercial OEM License
  40. 40. Lizenzen• Open Source Licenses • GPL v3 & FLOSS• Commercial Software License• Commercial OEM License
  41. 41. Offline ScrollView AndroidHTML5 Charts Animations CSS3 Maps Windows Phone ThemingAudio MVC VideoBlackBerry History Ajax Templates Forms Layouts Touch Events iOSData Package Animations
  42. 42. PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
  43. 43. Web-AppHTML5 CSS Native APIsJavaScript
  44. 44. PhoneGap• Native Bibliothek• JavaScript • navigator.*
  45. 45. http://www.phonegap.com/about/features
  46. 46. http://docs.phonegap.com
  47. 47. deviceready?
  48. 48. PhoneGap Build build.phonegap.com
  49. 49. DemoSencha Touch & PhoneGap http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  50. 50. Fragen? Bitte nicht so schwierige :-) @stefan_kolbstefan.kolb@indiginox.com
  51. 51. THXI‘m up for beers http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959

×