76-mal heruntergeladen
Sencha Touch und PhoneGap
- 1. Cross-Plattform Mobile Development SenchaTouch & PhoneGap MobileTechCon 2011 14/Sep/2011 - Mainz, Germany Stefan Kolb Indiginox GmbH
- 2. Me, Myself &I @stefan_kolb Social Media, baby! stefankolb.de My blog is my castle Hier macht‘s Spaß :-) Softwareentwickler
- 3. Sencha Touch https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG
- 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. jQuery jQuery Wrapper DOM Element <HTML> DOM Element append(); DOM DOM Element removeClass(); ... position(); $(‘#selector‘);
- 6. Sencha Touch Sencha Touch Widgets List <HTML> Button DOM Toolbar ... new Ext.List({ ... });
- 7. Sencha Touch • HTML5,CSS3, JavaScript • Basiert auf Ext JS (Platform) • Cross-Platform
- 8.
- 9.
- 10.
- 11.
- 12. MVC Model-View-Controller http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
- 13. Managers • Ext.regModel(); • Ext.regController(); •Ext.reg(); • new Ext.###CLASS###({ });
- 14.
- 15.
- 16.
- 17.
- 18. Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg
- 19.
- 20. Model • Repräsentiert Daten •Validierung von Daten • Verbindung zu anderen Modellen
- 21. Store • Sammlung vonModel-Instanzen • Datenmanagement für UI- Komponenten
- 22. Proxy • Laden /Speichern von Model-Daten • ClientProxy vs. ServerProxy • LocalStorageProxy, SessionStorageProxy, MemoryProxy • AjaxProxy, ScriptTagProxy • CRUD / Operation-Objekt
- 23. Reader • Parsen von(empfangenen) Daten • ArrayReader, JsonReader, XmlReader
- 24. Writer • Aufbereiten vonDaten • Speichern von Daten • JsonWriter, XmlWriter
- 25. User Interface Design http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
- 26. Components • Visuellen Bestanteileeiner App • User Interface
- 27. Demo Components http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 28. Container • Wrapper fürandere Components • Hinzufügen, Einfügen und Entfernen von Components • Anordnung der beinhaltenden Components mittels Layout
- 29. Layout • Legt fest,wie Components innerhalb eines Containers gerendert wrden • auto, fit, card, hbox, vbox • dock, field, box
- 30.
- 31.
- 32.
- 33.
- 34. Container/Layout Konfiguration • pack: start, center, end, justify • align: start, center, end, stretch • direction: normal, reverse • width, height, flex
- 35.
- 37. Touch Events & Gestures pinch/rotate swipe tap/double-tap tap & hold http://www.sencha.com/products/touch/
- 38. Demo Touch Solitaire http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 39. Style & Design •CSS3 • Unabhängig der Bildschirmauflösung • Icons • Animations • slide, pop, fade, flip & cube • Eigene Animationen mittels CSS
- 40. Demo Styles & Design http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 41. Theming http://www.sencha.com/products/touch/style-design
- 42. Lizenzen • Open SourceLicenses • GPL v3 & FLOSS • Commercial Software License • Commercial OEM License
- 43. Lizenzen • Open SourceLicenses • GPL v3 & FLOSS • Commercial Software License • Commercial OEM License
- 44. Offline ScrollView Android HTML5 Charts Animations CSS3 Maps Windows Phone Theming Audio MVC Video BlackBerry History Ajax Templates Forms Layouts Touch Events iOS Data Package Animations
- 45. PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
- 46. Web-App HTML5 CSS Native APIs JavaScript
- 47. PhoneGap • Native Bibliothek •JavaScript • navigator.*
- 48.
- 49.
- 50.
- 51.
- 52. Demo Sencha Touch &PhoneGap http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 53. Fragen? Bitte nicht so schwierige :-) @stefan_kolb stefan.kolb@indiginox.com
- 54. THX I‘m up forbeers http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959