sencha touch & phonegap
Post on 07-Nov-2014
2.672 Views
Preview:
DESCRIPTION
TRANSCRIPT
Sencha Touch & PhoneGapCross-Plattform Mobile Development
Stefan KolbIndiginox GmbH
MobileTechCon 201114/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 first HTML5, MobileWeb App Framework
jQuery
<HTML> DOM
DOM ElementDOM ElementDOM Element
...
$(‘#selector‘);
jQuery Wrapper
position();
append();removeClass();
Sencha Touch
<HTML> DOM
ListButtonToolbar
...
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, fit, card, hbox, vbox
• dock, field, box
fit
card
hbox
vbox
Container/Layout Konfiguration
• pack: start, center, end, justify
• align: start, center, end, stretch
• direction: normal, reverse
• width, height, flex
Container/Layout Konfiguration
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 Bildschirmauflösung
• Icons
• Animations
• slide, pop, fade, flip & 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
Lizenzen
• Open Source Licenses
• GPL v3 & FLOSS
• Commercial Software License
• Commercial OEM License
OfflineHTML5
CSS3
Touch Events
Animations
Theming
MVC
Data PackageiOS
BlackBerry
Android
Windows Phone
Charts
AjaxForms
Layouts
Audio
Video
HistoryTemplates
Animations
ScrollView
Maps
PhoneGap
http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
Web-App
HTML5CSS
JavaScriptNative 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_kolbstefan.kolb@indiginox.com
I‘m up for beers
THX
http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959
top related