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...
Reader• Parsen von (empfangenen) Daten• ArrayReader, JsonReader, XmlReader
Writer• Aufbereiten von Daten• Speichern von Daten• JsonWriter, XmlWriter
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 und PhoneGap
Upcoming SlideShare
Loading in …5
×

Sencha Touch und PhoneGap

2,903
-1

Published on

Vortrag von Stefan Kolb anlässlich der MTC 11 in Mainz zu Cross-Plattform Mobile-Entwicklung mit Sencha Touch und PhoneGap

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

  • Be the first to like this

No Downloads
Views
Total Views
2,903
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
75
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sencha Touch und PhoneGap

  1. 1. Cross-Plattform Mobile DevelopmentSencha Touch & PhoneGap MobileTechCon 2011 14/Sep/2011 - Mainz, Germany Stefan Kolb Indiginox GmbH
  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. Reader• Parsen von (empfangenen) Daten• ArrayReader, JsonReader, XmlReader
  24. 24. Writer• Aufbereiten von Daten• Speichern von Daten• JsonWriter, XmlWriter
  25. 25. User Interface Design http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
  26. 26. Components• Visuellen Bestanteile einer App• User Interface
  27. 27. DemoComponents http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  28. 28. Container• Wrapper für andere Components• Hinzufügen, Einfügen und Entfernen von Components• Anordnung der beinhaltenden Components mittels Layout
  29. 29. Layout• Legt fest, wie Components innerhalb eines Containers gerendert wrden• auto, fit, card, hbox, vbox • dock, field, box
  30. 30. fit
  31. 31. card
  32. 32. hbox
  33. 33. vbox
  34. 34. Container/Layout Konfiguration• pack: start, center, end, justify• align: start, center, end, stretch• direction: normal, reverse• width, height, flex
  35. 35. Container/Layout Konfiguration
  36. 36. Touch Events & Gestures pinch/rotate swipetap/double-tap tap & hold http://www.sencha.com/products/touch/
  37. 37. DemoTouch Solitaire http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  38. 38. Style & Design• CSS3 • Unabhängig der Bildschirmauflösung• Icons• Animations • slide, pop, fade, flip & cube • Eigene Animationen mittels CSS
  39. 39. DemoStyles & Design http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  40. 40. Theming http://www.sencha.com/products/touch/style-design
  41. 41. Lizenzen• Open Source Licenses • GPL v3 & FLOSS• Commercial Software License• Commercial OEM License
  42. 42. Lizenzen• Open Source Licenses • GPL v3 & FLOSS• Commercial Software License• Commercial OEM License
  43. 43. Offline ScrollView AndroidHTML5 Charts Animations CSS3 Maps Windows Phone ThemingAudio MVC VideoBlackBerry History Ajax Templates Forms Layouts Touch Events iOSData Package Animations
  44. 44. PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
  45. 45. Web-AppHTML5 CSS Native APIsJavaScript
  46. 46. PhoneGap• Native Bibliothek• JavaScript • navigator.*
  47. 47. http://www.phonegap.com/about/features
  48. 48. http://docs.phonegap.com
  49. 49. deviceready?
  50. 50. PhoneGap Build build.phonegap.com
  51. 51. DemoSencha Touch & PhoneGap http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  52. 52. Fragen? Bitte nicht so schwierige :-) @stefan_kolbstefan.kolb@indiginox.com
  53. 53. THXI‘m up for beers http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959

×