Sencha Touch & PhoneGap

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

Me, Myself & I Softwareentwickler Hier macht‘s Spaß :-) @stefan_kolb
Social Media, baby! stefankolb.de My blog is my castle

Sencha Touch https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG

“ http://fc04.deviantart.net/fs50/f/2009/333/1/7/Blue_Bubbles_Wallpaper_by_SonnyKingBlack.jpg http://www.sencha.com/products/touch The ﬁrst HTML5, Mobile Web App Framework

jQuery <HTML> DOM DOM Element DOM Element DOM Element ...
$(‘#selector‘); jQuery Wrapper position(); append(); removeClass();

Sencha Touch <HTML> DOM List Button Toolbar ... new Ext.List({
... }); Sencha Touch Widgets

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

Model-View-Controller MVC http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg

• Ext.regModel(); • Ext.regController(); • Ext.reg(); • new Ext.###CLASS###({ });
Managers

Model erstellen

View erstellen

Controller erstellen

Funktionen

Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg

http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/ & Sencha Touch

• Repräsentiert Daten • Validierung von Daten • Verbindung zu
anderen Modellen Model

Store • Sammlung von Model-Instanzen • Datenmanagement für UI- Komponenten

Proxy • Laden / Speichern von Model-Daten • ClientProxy vs.
ServerProxy • LocalStorageProxy, SessionStorageProxy, MemoryProxy • AjaxProxy, ScriptTagProxy • CRUD / Operation-Objekt

Design User Interface http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg

• Visuellen Bestanteile einer App • User Interface Components

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Components Demo

• Wrapper für andere Components • Hinzufügen, Einfügen und Entfernen
von Components • Anordnung der beinhaltenden Components mittels Layout Container

Layout • Legt fest, wie Components innerhalb eines Containers gerendert
wrden • auto, ﬁt, card, hbox, vbox • dock, ﬁeld, box

Container/Layout Konﬁguration • pack: start, center, end, justify • align:
start, center, end, stretch • direction: normal, reverse • width, height, ﬂex

Container/Layout Konﬁguration

Events & Gestures Touch http://www.sencha.com/products/touch/ tap/double-tap pinch/rotate swipe tap &
hold

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Touch Solitaire Demo

• CSS3 • Unabhängig der Bildschirmauﬂösung • Icons • Animations
• slide, pop, fade, ﬂip & cube • Eigene Animationen mittels CSS Style & Design

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Styles & Design Demo

Theming http://www.sencha.com/products/touch/style-design

Lizenzen • Open Source Licenses • GPL v3 & FLOSS
• Commercial Software License • Commercial OEM License

Oﬄine 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

PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_ﬂScXAY/UTGC0101.jpg

Web-App HTML5 CSS JavaScript Native APIs

PhoneGap • Native Bibliothek • JavaScript • navigator.*

http://www.phonegap.com/about/features

http://docs.phonegap.com

deviceready?

build.phonegap.com PhoneGap Build

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Sencha Touch & PhoneGap Demo

Fragen? Bitte nicht so schwierige :-) @stefan_kolb [email protected]

I‘m up for beers THX http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959

Sencha Touch & PhoneGap

Sencha Touch & PhoneGap

More Decks by Stefan Kolb

Other Decks in Programming

Featured

Transcript