Webcon 2012 Mobile Development mit Sencha Touch

Folie 1

Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML) oder auch DOM-Scripting bezeichnen bestimmte Webdesign-Methoden, bei denen whrend der Anzeige einer Webseite diese selbst, ausgelst durch Benutzereingaben, verndert wird.

Quelle: http://de.wikipedia.org/wiki/Dynamic_HTML

DHTML

(Mobile Development mit)Sencha Touch 2

Who's talking?

Thorsten Suckow-Homberg, Jahrgang 1986 1976PHP & Javascript seit 1999

Sencha-Frameworks seit 2007

Autor diverser ExtJS-Extensions (u.a. Ext.ux.Livegrid) sowie des conjoon Open Source Projektes (conjoon.org)

arbeitet fr die eyeworkers interactive GmbH, Karlsruhe ( jobs.eyeworkers.de :) )

Hobbys: Kaffee, Gitarre, Fahrrad, Einhrner

Worum geht es hier?

Sencha Touch 2 HTML 5 Framework zur Erstellung mobiler Applikationen

Geschichtlicher berblick und Einblicke indas Framework

Sencha als Unternehmen

Vorstellung verfgbarer Komponenten

Klassensystem

Aufbau einer ST ApplikationBeispielprogramm

Sencha das is doch'n Tee, oder?

Sencha

Jack Slocum programmiert ExtJS auf Basis von YUI, um eine erweiterte Sammlung von UI Controls anzubieten

Ende 2007: ExtJS2 Meilenstein!

Juni 2010: [...] we combined forces with jQTouch and Raphal to tackle this new challenge of creating awesome web applications on touch based devices [...]

heute: Investment Capital, vlt. das populrste JS Framework: > 5000 Kunden, > 300.000 aktive community member, > 100 Mitarbeiter

mehr als 1.6 Millionen Entwickler

Features

Features

IOS (4+), Blackberry (OS 6+, Table OS 1), Android (2.2+ als kleinster gemeinsamer Nenner, auerdem noch Kindle Fire OS 6.2.2)

SDK ToolsGenerieren und bundlen von Applikationen

Native Packaging fr PlayStore oder App Store

Charting Mobile HTML5 Charts (in 2.1?)

Sencha Architect Visual Editor fr ST/ExtJS

Features - Charts

Features Sencha Architect

Quelle: http://www.sencha.com/products/architect/

Sencha Touch Das Ziel

Komponenten

Komponenten

Quelle: Sencha Touch in Action, Manning Publications, http://www.manning.com/garcia2/. Mit freundlicher Genehmigung von Jay Garcia.

Komponenten - Component

Komponenten Component

Controls in Sencha Touch sind Komponenten - Ext.Component

Eigenschaften: show/hide

enable/disable

template based rendering

floatable

sizeable

positionable

observable!

Komponenten - Component

Komponenten - Container

Komponenten Component > Container

Container - lateinisch continere zusammenhalten', enthalten'

Ext.Container - Basisklasse fr alle Komponenten, die andere Komponenten aufnehmen knnenToolbars

Panels

Fieldsets

Container verwalten ihre Kindelemente ber Layouts

Komponenten Component > Container

Layouts?

Komponenten Component > Container (Layouts)

Wichtigsten:hbox

vbox

card

fit


Zum Beispiel:

Quelle: http://www.sencha.com/docs/


Aufgepat!

Das Wischen durch verschiedene Karten wird nicht direkt ber ein Layout realisiert, sondern mit Hilfe von Ext.carousel.Carousel

Komponenten Component > Container > Panel


in ExtJS noch Container fr verschiedene funktionelle Aufgaben, bspw. TabPanel, TreePanel, GridPanel

in Sencha Touch: Overlays (Ext.Sheet)

durch den Paradigmenwechsel stationr mobil sind die verwendeten Panel-Typen recht berschaubar (Ext.TabPanel, Ext.Container mit entsprechenden Layouts)

Paradigmenwechseln:Hinweis auf unterschiedliche Benutzerfhrung.Mehr wird durch weniger realisiert: Komplexer tree wird bspw. Mit einer Nested List dargestellt.


Komponenten Component > Container > TabPanel

(traditionell)

Komponenten Component > Container > Toolbar

Komponenten Component > Container > Toolbar

Container zur Aufnahme von Steuer- oder Eingabeelementen

Toolbars werden meist docked eingehangentop

bottom

und in Zusammenhang mit Navigation benutztContainer Buttons (default Type ist Ext.Button)

Komponenten Component > Button

Komponenten Component > Button

Ext.Button Reprsentiert einen Button

kann mit icons versehen werden (text, icon/iconCls)

feuert entsprechende Events bei Interaktion

Komponenten Component > Button (Generiertes HTML Markup)

ExtJS 3

==

Komponenten Component > Button (Generiertes HTML Markup)

Sencha TouchExtJS 3

==

!

Komponenten Component > Button (Template)

template: [{ tag : 'span', reference : 'badgeElement', hidden : true }, { tag : 'span', className : Ext.baseCSSPrefix + 'button-icon', reference : 'iconElement', hidden : true }, { tag : 'span', reference : 'textElement', hidden : true }]

123123

Komponenten Component > Container > DataView > List


Ext.dataview.DataView View fr data stores

Ext.dataview.List konkrete Implementierung (hnlich Grids in ExtJS)Gruppierung (grouped)

Sortierung

Index Leiste (indexBar Ext.IndexBar)

Disclosures


Komponenten Model

Reprsentiert Datenstruktur einzelner Entitten

Verfgt ber Assoziationen

ber Proxies knnen nderungen an einzelnen Instanzen persistiert werden

Komponenten - Store

Kapselt eine Kollektion von Model Instanzen

Kommuniziert ber Proxies mit angeschlossenen physikalischen Speichern (Backend, Client/HTML5 Storage)filtern

sortieren

suchen

Unnu?

Klassensystem

Klassensystem - Einfhrung

ST arbeitet mit einem eigenen System, um OOP in JS abzubilden

Verwendet unter der Haube natrlich weiterhin die Strken des PrototypingOverrides, Mixins

new fllt weg, dafr Ext.create()

Klassendefinition ber Ext.define()


Ext.define('User', { config : { firstname : 'Max', lastname : 'Mustermann' }});

var User = function() {};User.prototype = { firstname : 'Max', lastname : 'Mustermann',

setFirstname : function(fname) { this.firstname = fname }, getFirstname : function() { return this.firstname; }, setLastname : function(lname) { this.lastname = lname }, getLastname : function() { return this.lastname; },};

UsergetFirstname(): StringsetFirstname(String)getLastname(): StringsetLastname(String)





getFirstname()setFirstname()getLastname()setLastname()






getFirstname()setFirstname()getLastname()setLastname()

apply*()update*()



var user = Ext.create('User');

var user = new User();


var user = Ext.create('User');

var user = new User();

var user = Ext.create('User', { firstname : 'Max', lastname : 'Mustermann'});

var user = new User('Mustermann', 'Max');

Klassensystem - Vererbung

Ext.define('User.Customer', { extend : 'User', config : { street : '', city : '', zipCode : '' }});

UserCustomer

Klassensystem - Mixins

Mixins erlauben es, Funktionalitt anderer Klassen in eine andere zu streuen

Traits in PHP

Nur Verhalten wird kopiert, nicht aber der Typ!

Beispiel: Ext.util.ObservableIn ExtJS noch eigenstndige Klasse

Klassen, deren Instanzen Ereignisse senden knnen (Events feuern), bernehmen das Verhalten von Observable durch ein Mixin!

Klassensystem - Mixins

Ext.define('User.Customer', { extend : 'User', mixins : [ 'Ext.util.Observable' ], config : { street : '', city : '', ZipCode : '' },

changeAddress : function(address) { // ... this.fireEvent('addresschange'); }});

var cust = Ext.create('User.Customer');

cust.on('addresschange', function() { alert(Address changed!);});

cust.changeAddress(/*...*/);

Aufbau einer Applikation

Applikation - Grundgerst

index.html

*.js*.cssServer

Applikation Bootstrapping

Bootstrapping ber Ext.application

Einstiegspunkt ist launch() - hnlich Ext.onReadyWird aufgerufen, sobald Applikation initialisiert wurde

Resourcen und Viewport werden hier initialisiert

Folgt dem MVC Architekturmuster

Applikation - Verzeichnislayout

Typisches Verzeichnislayout:



Namespace: webcon



Namespace: webcon

webcon.controller.*
webcon.model.*
webcon.store.*
webcon.view.*

Applikation - Packages

/controller/model/view/store

Ext.app.ControllerExt.data.ModelExt.ComponentExt.data.Store

vermittelt zwischen Model- und View-Instanzenreprsentiert (relationale) DatenstrukturenUI ControlsReprsentiert einen Datencontainer und verwaltet n-Instanzen vom Typ Ext.data.Model

Applikation - Komponenten

Hauptansicht webcon.view.MainView (Ext.tab.Panel)Hauptscreen Ext.navigation.ViewListenansicht webcon.view.ListView (Ext.List)Datenbank webcon.store.AttendeeStore (Ext.data.Store)Datenstruktur webcon.model.Attendee (Ext.data.Model)

Detailansicht webcon.view.AttendeeDetailView (Ext.Container)

Infoscreen Ext.Container

Applikation Das Ergebnis

Quellen

Folien und Quelltext: http://thorsten.suckow-homberg.de/webcon-2012

Dokumentation: http://sencha.com/docs

Twitter:http://twitter.com/ModusCreate, /ModusJesus, /msims84, /sencha

ExtJS in Action Books:http://manning.com/garcia

http://manning.com/garcia2

http://manning.com/garcia3

Forum: http://sencha.com/forum

Education

Webcon 2012 Mobile Development mit Sencha Touch