Sencha Touch und PhoneGap

Cross-Plattform Mobile Development

Sencha Touch & PhoneGap

MobileTechCon 2011
14/Sep/2011 - Mainz, Germany

Stefan Kolb
Indiginox GmbH

Me, Myself & I
@stefan_kolb Social Media, baby!
stefankolb.de My blog is my castle

Hier macht‘s Spaß :-)

Softwareentwickler

Sencha Touch

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

“ The ﬁrst 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

jQuery

jQuery Wrapper
DOM Element
<HTML> DOM Element append();
DOM DOM Element removeClass();
... position();

$(‘#selector‘);

Sencha Touch

Sencha Touch Widgets
List
<HTML> Button
DOM Toolbar
...

new Ext.List({ ... });

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/

MVC
Model-View-Controller

http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg

Managers

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

Data Package

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

& Sencha Touch

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

Model

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

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

Reader

• Parsen von (empfangenen) Daten
• ArrayReader, JsonReader, XmlReader

Writer

• Aufbereiten von Daten
• Speichern von Daten
• JsonWriter, XmlWriter

User Interface
Design

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

Components

• Visuellen Bestanteile einer App
• User Interface

Demo
Components

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

Container

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

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

Touch
Events & Gestures

pinch/rotate swipe

tap/double-tap tap & hold

http://www.sencha.com/products/touch/

Demo
Touch Solitaire


Style & Design

• CSS3
• Unabhängig der Bildschirmauﬂösung

• Icons
• Animations
• slide, pop, fade, ﬂip & cube
• Eigene Animationen mittels CSS

Demo
Styles & Design


Theming

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

Lizenzen

• Open Source Licenses
• GPL v3 & FLOSS

• Commercial Software License
• Commercial OEM License

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

PhoneGap

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

Web-App
HTML5
CSS Native APIs
JavaScript

PhoneGap

• Native Bibliothek
• JavaScript
• navigator.*

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

PhoneGap Build

build.phonegap.com

Demo
Sencha Touch & PhoneGap


Fragen?
Bitte nicht so schwierige :-)

@stefan_kolb
stefan.kolb@indiginox.com

THX
I‘m up for beers

http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959

Sencha Touch und PhoneGap

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a Sencha Touch und PhoneGap

Semelhante a Sencha Touch und PhoneGap (20)

Sencha Touch und PhoneGap