sencha touch und phonegap

Sencha Touch & PhoneGapCross-Plattform Mobile Development

Stefan KolbIndiginox GmbH

MobileTechCon 201114/Sep/2011 - Mainz, Germany

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

Reader

• Parsen von (empfangenen) Daten

• ArrayReader, JsonReader, XmlReader

Writer

• Aufbereiten von Daten

• Speichern von Daten

• JsonWriter, XmlWriter

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

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


Touch Solitaire

Demo

• CSS3

• Unabhängig der Bildschirmauflösung

• Icons

• Animations

• slide, pop, fade, flip & cube

• Eigene Animationen mittels CSS

Style & Design


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

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


Sencha Touch & PhoneGap

Demo

Fragen?Bitte nicht so schwierige :-)

@[email protected]

I‘m up for beers

THX

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

sencha touch und phonegap

Technology

http

phonegap

sencha

ext

center

ent impact arts photo leventijpg

cross