Sencha Touch und PhoneGap
-
Upload
indiginox -
Category
Technology
-
view
3.460 -
download
0
description
Transcript of Sencha Touch und PhoneGap
![Page 1: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/1.jpg)
Sencha Touch & PhoneGapCross-Plattform Mobile Development
Stefan KolbIndiginox GmbH
MobileTechCon 201114/Sep/2011 - Mainz, Germany
![Page 2: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/2.jpg)
Me, Myself & I
Softwareentwickler
Hier macht‘s Spaß :-)
@stefan_kolb Social Media, baby!
stefankolb.de My blog is my castle
![Page 3: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/3.jpg)
Sencha Touch
https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG
![Page 4: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/4.jpg)
“
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, MobileWeb App Framework
![Page 5: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/5.jpg)
jQuery
<HTML> DOM
DOM ElementDOM ElementDOM Element
...
$(‘#selector‘);
jQuery Wrapper
position();
append();removeClass();
![Page 6: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/6.jpg)
Sencha Touch
<HTML> DOM
ListButtonToolbar
...
new Ext.List({ ... });
Sencha Touch Widgets
![Page 7: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/7.jpg)
Sencha Touch
• HTML5, CSS3, JavaScript
• Basiert auf Ext JS (Platform)
• Cross-Platform
![Page 8: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/8.jpg)
http://www.sencha.com/img/20110222-loopfuse.png
![Page 9: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/9.jpg)
http://dev.sencha.com/deploy/touch/examples/kitchensink/
![Page 10: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/10.jpg)
Sencha Touch
![Page 11: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/11.jpg)
index.html
![Page 12: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/12.jpg)
Model-View-Controller
MVC
http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
![Page 13: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/13.jpg)
• Ext.regModel();
• Ext.regController();
• Ext.reg();
• new Ext.###CLASS###({ });
Managers
![Page 14: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/14.jpg)
Model erstellen
![Page 15: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/15.jpg)
View erstellen
![Page 16: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/16.jpg)
Controller erstellen
![Page 17: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/17.jpg)
Funktionen
![Page 18: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/18.jpg)
Data Package
http://www.etleboro.com/picture_library/Server_room_4.jpg
![Page 19: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/19.jpg)
http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/
& Sencha Touch
![Page 20: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/20.jpg)
• Repräsentiert Daten
• Validierung von Daten
• Verbindung zu anderen Modellen
Model
![Page 21: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/21.jpg)
Store
• Sammlung von Model-Instanzen
• Datenmanagement für UI-Komponenten
![Page 22: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/22.jpg)
Proxy
• Laden / Speichern von Model-Daten
• ClientProxy vs. ServerProxy
• LocalStorageProxy, SessionStorageProxy, MemoryProxy
• AjaxProxy, ScriptTagProxy
• CRUD / Operation-Objekt
![Page 23: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/23.jpg)
Reader
• Parsen von (empfangenen) Daten
• ArrayReader, JsonReader, XmlReader
![Page 24: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/24.jpg)
Writer
• Aufbereiten von Daten
• Speichern von Daten
• JsonWriter, XmlWriter
![Page 25: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/25.jpg)
Design
User Interface
http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
![Page 26: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/26.jpg)
• Visuellen Bestanteile einer App
• User Interface
Components
![Page 27: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/27.jpg)
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Components
Demo
![Page 28: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/28.jpg)
• Wrapper für andere Components
• Hinzufügen, Einfügen und Entfernen von Components
• Anordnung der beinhaltenden Components mittels Layout
Container
![Page 29: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/29.jpg)
Layout
• Legt fest, wie Components innerhalb eines Containers gerendert wrden
• auto, fit, card, hbox, vbox
• dock, field, box
![Page 30: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/30.jpg)
fit
![Page 31: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/31.jpg)
card
![Page 32: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/32.jpg)
hbox
![Page 33: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/33.jpg)
vbox
![Page 34: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/34.jpg)
Container/Layout Konfiguration
• pack: start, center, end, justify
• align: start, center, end, stretch
• direction: normal, reverse
• width, height, flex
![Page 35: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/35.jpg)
Container/Layout Konfiguration
![Page 36: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/36.jpg)
![Page 37: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/37.jpg)
Events & Gestures
Touch
http://www.sencha.com/products/touch/
tap/double-tap
pinch/rotate swipe
tap & hold
![Page 38: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/38.jpg)
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Touch Solitaire
Demo
![Page 39: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/39.jpg)
• CSS3
• Unabhängig der Bildschirmauflösung
• Icons
• Animations
• slide, pop, fade, flip & cube
• Eigene Animationen mittels CSS
Style & Design
![Page 40: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/40.jpg)
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Styles & Design
Demo
![Page 41: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/41.jpg)
Theming
http://www.sencha.com/products/touch/style-design
![Page 42: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/42.jpg)
Lizenzen
• Open Source Licenses
• GPL v3 & FLOSS
• Commercial Software License
• Commercial OEM License
![Page 43: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/43.jpg)
Lizenzen
• Open Source Licenses
• GPL v3 & FLOSS
• Commercial Software License
• Commercial OEM License
![Page 44: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/44.jpg)
OfflineHTML5
CSS3
Touch Events
Animations
Theming
MVC
Data PackageiOS
BlackBerry
Android
Windows Phone
Charts
AjaxForms
Layouts
Audio
Video
HistoryTemplates
Animations
ScrollView
Maps
![Page 45: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/45.jpg)
PhoneGap
http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
![Page 46: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/46.jpg)
Web-App
HTML5CSS
JavaScriptNative APIs
![Page 47: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/47.jpg)
PhoneGap
• Native Bibliothek
• JavaScript
• navigator.*
![Page 48: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/48.jpg)
http://www.phonegap.com/about/features
![Page 49: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/49.jpg)
http://docs.phonegap.com
![Page 50: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/50.jpg)
deviceready?
![Page 51: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/51.jpg)
build.phonegap.com
PhoneGap Build
![Page 52: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/52.jpg)
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Sencha Touch & PhoneGap
Demo
![Page 54: Sencha Touch und PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022061115/5461ccfbb1af9f936c8b4b80/html5/thumbnails/54.jpg)
I‘m up for beers
THX
http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959