Sencha Touch & PhoneGap
•
4 gefällt mir•1,612 views
Introduction to both Sencha Touch and PhoneGap Note: Slides are in mostly in German
Melden
Teilen
Sencha Touch & PhoneGap
- 1. Cross-Plattform Mobile Development Sencha 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. 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
- 10. Sencha Touch
- 11. index.html
- 12. MVC Model-View-Controller http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
- 13. Managers • Ext.regModel(); • Ext.regController(); • Ext.reg(); • new Ext.###CLASS###({ });
- 14. Model erstellen
- 15. View erstellen
- 17. Funktionen
- 18. Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg
- 20. Model • Repräsentiert Daten • Validierung von Daten • Verbindung zu anderen Modellen
- 21. Store • Sammlung von Model-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. User Interface Design http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
- 24. Components • Visuellen Bestanteile einer App • User Interface
- 25. Demo Components http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 26. Container • Wrapper für andere Components • Hinzufügen, Einfügen und Entfernen von Components • Anordnung der beinhaltenden Components mittels Layout
- 27. Layout • Legt fest, wie Components innerhalb eines Containers gerendert wrden • auto, fit, card, hbox, vbox • dock, field, box
- 28. fit
- 29. card
- 30. hbox
- 31. vbox
- 32. Container/Layout Konfiguration • pack: start, center, end, justify • align: start, center, end, stretch • direction: normal, reverse • width, height, flex
- 35. Touch Events & Gestures pinch/rotate swipe tap/double-tap tap & hold http://www.sencha.com/products/touch/
- 36. Demo Touch Solitaire http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 37. Style & Design • CSS3 • Unabhängig der Bildschirmauflösung • Icons • Animations • slide, pop, fade, flip & cube • Eigene Animationen mittels CSS
- 38. Demo Styles & Design http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 39. Theming http://www.sencha.com/products/touch/style-design
- 40. Lizenzen • Open Source Licenses • GPL v3 & FLOSS • Commercial Software License • Commercial OEM License
- 41. Lizenzen • Open Source Licenses • GPL v3 & FLOSS • Commercial Software License • Commercial OEM License
- 42. 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
- 43. PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
- 44. Web-App HTML5 CSS Native APIs JavaScript
- 45. PhoneGap • Native Bibliothek • JavaScript • navigator.*
- 48. deviceready?
- 50. Demo Sencha Touch & PhoneGap http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
- 51. Fragen? Bitte nicht so schwierige :-) @stefan_kolb stefan.kolb@indiginox.com
- 52. THX I‘m up for beers http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959