Sencha Touch & PhoneGap

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

Transcript

1. Sencha Touch & PhoneGap Cross-Plattform Mobile Development Stefan Kolb Indiginox GmbH MobileTechCon 2011 14/Sep/2011 - Mainz, Germany http://www.intomobile.com/wp-content/uploads/2011/02/pile-of-phones.jpg
2. Me, Myself & I Softwareentwickler Hier macht‘s Spaß :-) @stefan_kolb Social Media, baby! stefankolb.de My blog is my castle
3. Sencha Touch https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG
4. “ http://fc04.deviantart.net/fs50/f/2009/333/1/7/Blue_Bubbles_Wallpaper_by_SonnyKingBlack.jpg http://www.sencha.com/products/touch The first HTML5, Mobile Web App Framework
5. jQuery <HTML> DOM DOM Element DOM Element DOM Element ... $(‘#selector‘); jQuery Wrapper position(); append(); removeClass();
6. Sencha Touch <HTML> DOM List Button Toolbar ... new Ext.List({ ... }); Sencha Touch Widgets
7. Sencha Touch • HTML5, CSS3, JavaScript • Basiert auf Ext JS (Platform) • Cross-Platform
8. http://www.sencha.com/img/20110222-loopfuse.png
9. http://dev.sencha.com/deploy/touch/examples/kitchensink/
10. Sencha Touch
11. index.html
12. Model-View-Controller MVC http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
13. • Ext.regModel(); • Ext.regController(); • Ext.reg(); • new Ext.###CLASS###({ }); Managers
14. Model erstellen
15. View erstellen
16. Controller erstellen
17. Funktionen
18. Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg
19. http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/ & Sencha Touch
20. • Repräsentiert Daten • Validierung von Daten • Verbindung zu anderen Modellen Model
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. Design User Interface http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
24. • Visuellen Bestanteile einer App • User Interface Components
25. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Components Demo
26. • Wrapper für andere Components • Hinzufügen, Einfügen und Entfernen von Components • Anordnung der beinhaltenden Components mittels Layout Container
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
33. Container/Layout Konfiguration
35. Events & Gestures Touch http://www.sencha.com/products/touch/ tap/double-tap pinch/rotate swipe tap & hold
36. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Touch Solitaire Demo
37. • CSS3 • Unabhängig der Bildschirmauflösung • Icons • Animations • slide, pop, fade, flip & cube • Eigene Animationen mittels CSS Style & Design
38. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Styles & Design Demo
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 HTML5 CSS3 Touch Events Animations Theming MVC Data Package iOS BlackBerry Android Windows Phone Charts Ajax Forms Layouts Audio Video History Templates Animations ScrollView Maps
43. PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
44. Web-App HTML5 CSS JavaScript Native APIs
45. PhoneGap • Native Bibliothek • JavaScript • navigator.*
46. http://www.phonegap.com/about/features
47. http://docs.phonegap.com
48. deviceready?
49. build.phonegap.com PhoneGap Build
50. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Sencha Touch & PhoneGap Demo
51. Fragen? Bitte nicht so schwierige :-) @stefan_kolb stefan.kolb@indiginox.com
52. I‘m up for beers THX http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959