Das Dokument behandelt das Sencha Touch 2-Framework zur Entwicklung mobiler Anwendungen mit HTML5, einschließlich seiner Geschichte, Komponenten, Layouts und Anwendungsstruktur. Es beschreibt die verschiedenen Möglichkeiten zur Interaktion mit der Benutzeroberfläche, die über das Klassen- und Komponentensystem realisiert werden, sowie die MVC-Architektur des Frameworks. Außerdem werden nützliche Ressourcen und Quellen für die weitere Vertiefung des Themas bereitgestellt.

1. DHTML
„Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML)
oder auch DOM-Scripting bezeichnen bestimmte Webdesign-
Methoden, bei denen während der Anzeige einer Webseite diese
selbst, ausgelöst durch Benutzereingaben, verändert wird.“
Quelle: http://de.wikipedia.org/wiki/Dynamic_HTML

2. (Mobile Development mit)
Sencha Touch 2

3. Who's talking?
Thorsten Suckow-Homberg, Jahrgang 1986 1976
PHP & 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 für die eyeworkers interactive GmbH, Karlsruhe
( jobs.eyeworkers.de :) )
Hobbys: Kaffee, Gitarre, Fahrrad, Einhörner

4. Worum geht es hier?
Sencha Touch 2 – HTML 5 Framework zur Erstellung
„mobiler“ Applikationen
Geschichtlicher Überblick und Einblicke in
das Framework
Sencha als Unternehmen
Vorstellung verfügbarer Komponenten
Klassensystem
Aufbau einer ST Applikation
Beispielprogramm

5. Sencha
– das is doch'n Tee, oder?

6. 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
Raphaël to tackle this new challenge of creating
awesome web applications on touch based devices [...]“
heute: Investment Capital, vlt. das populärste JS
Framework: > 5000 Kunden, > 300.000 aktive community
member, > 100 Mitarbeiter
mehr als 1.6 Millionen Entwickler

7. Features

8. Features
IOS (4+), Blackberry (OS 6+, Table OS 1), Android
(2.2+ als kleinster gemeinsamer Nenner, außerdem
noch Kindle Fire OS 6.2.2)
SDK Tools
Generieren und bundlen von Applikationen
Native Packaging für PlayStore oder App Store
Charting „Mobile HTML5 Charts“ (in 2.1?)
Sencha Architect – Visual Editor für ST/ExtJS

9. Features - Charts

10. Features – Sencha Architect
Quelle: http://www.sencha.com/products/architect/

11. Sencha Touch – Das Ziel

12. Komponenten

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

14. Komponenten - Component

15. Komponenten – Component
Controls in Sencha Touch sind „Komponenten“ -
Ext.Component
Eigenschaften:
show/hide
enable/disable
template based rendering
floatable
sizeable
positionable
observable!

16. Komponenten - Component

17. Komponenten - Container

18. Komponenten – Component > Container
Container - lateinisch continere ‚zusammenhalten',
‚enthalten'
Ext.Container - Basisklasse für alle Komponenten, die
andere Komponenten aufnehmen können
Toolbars
Panels
Fieldsets
Container verwalten ihre Kindelemente über Layouts

19. Komponenten – Component > Container
Layouts?

20. Komponenten – Component > Container (Layouts)
Wichtigsten:
hbox
vbox
card
fit

21. Komponenten – Component > Container (Layouts)
Zum Beispiel:
Quelle: http://www.sencha.com/docs/

22. Komponenten – Component > Container (Layouts)
Aufgepaßt!
Das „Wischen“ durch verschiedene Karten wird nicht
direkt über ein Layout realisiert, sondern mit Hilfe von
Ext.carousel.Carousel

23. Komponenten – Component > Container > Panel

24. Komponenten – Component > Container > Panel
in ExtJS noch Container für verschiedene funktionelle
Aufgaben, bspw. TabPanel, TreePanel, GridPanel
in Sencha Touch: Overlays (Ext.Sheet)
durch den Paradigmenwechsel „stationär“ →
„mobil“ sind die verwendeten Panel-Typen recht
überschaubar (Ext.TabPanel, Ext.Container mit
entsprechenden Layouts)

25. Komponenten – Component > Container > Panel

26. Komponenten – Component > Container > TabPanel
(traditionell)

27. Komponenten – Component > Container > Toolbar

28. Komponenten – Component > Container > Toolbar
Container zur Aufnahme von Steuer- oder
Eingabeelementen
Toolbars werden meist „docked“ eingehangen
top
bottom
… und in Zusammenhang mit Navigation benutzt
Container → Buttons (default Type ist Ext.Button)

29. Komponenten – Component > Button

30. Komponenten – Component > Button
Ext.Button Repräsentiert einen „Button“
kann mit icons versehen werden (text,
icon/iconCls)
feuert entsprechende Events bei Interaktion

31. Komponenten – Component > Button (Generiertes HTML Markup)
ExtJS 3 ==

32. Komponenten – Component > Button (Generiertes HTML Markup)
ExtJS 3 ==
Sencha Touch
!

33. Komponenten – Component > Button (Template)
template: [{
tag : 'span',
1
reference : 'badgeElement',
hidden : true
}, {
tag : 'span', 2
className : Ext.baseCSSPrefix +
'button-icon',
reference : 'iconElement',
hidden : true
}, {
tag : 'span', 3
reference : 'textElement',
hidden : true
}] 1
2
3

34. Komponenten – Component > Container > DataView > List

35. Komponenten – Component > Container > DataView > List
Ext.dataview.DataView – View für data stores
Ext.dataview.List – konkrete Implementierung
(ähnlich „Grids“ in ExtJS)
Gruppierung (grouped)
Sortierung
Index Leiste (indexBar → Ext.IndexBar)
„Disclosures“

36. Komponenten – Component > Container > DataView > List

37. Komponenten – Model
Repräsentiert Datenstruktur einzelner Entitäten
Verfügt über Assoziationen
Über Proxies können Änderungen an einzelnen
Instanzen persistiert werden

38. Komponenten - Store
Kapselt eine Kollektion von Model Instanzen
Kommuniziert über Proxies mit angeschlossenen
physikalischen Speichern (Backend, Client/HTML5
Storage)
filtern
sortieren
suchen

39. Unnu?

40. Klassensystem

41. Klassensystem - Einführung
ST arbeitet mit einem eigenen System, um OOP in JS
abzubilden
Verwendet unter der Haube natürlich weiterhin die
Stärken des Prototyping
Overrides, Mixins
new fällt weg, dafür Ext.create()
Klassendefinition über Ext.define()

42. Klassensystem - Einführung var User = function() {
};
User User.prototype = {
getFirstname(): String firstname : 'Max',
setFirstname(String) lastname : 'Mustermann',
getLastname(): String
setLastname(String) setFirstname : function(fname) {
this.firstname = fname
},
getFirstname : function() {
return this.firstname;
Ext.define('User', { },
config : { setLastname : function(lname) {
firstname : 'Max', this.lastname = lname
lastname : 'Mustermann' },
} getLastname : function() {
}); return this.lastname;
},
};

43. Klassensystem - Einführung var User = function() {
User };
getFirstname(): String User.prototype = {
setFirstname(String) firstname : 'Max',
getLastname(): String lastname : 'Mustermann',
setLastname(String)
setFirstname : function(fname) {
Ext.define('User', { this.firstname = fname
config : { },
firstname : 'Max', getFirstname : function() {
lastname : 'Mustermann' return this.firstname;
} },
}); setLastname : function(lname) {
this.lastname = lname
},
getFirstname()
getLastname : function() {
setFirstname()
return this.lastname;
getLastname()
},
setLastname()
};

44. Klassensystem - Einführung var User = function() {
User };
getFirstname(): String User.prototype = {
setFirstname(String) firstname : 'Max',
getLastname(): String lastname : 'Mustermann',
setLastname(String)
setFirstname : function(fname) {
Ext.define('User', { this.firstname = fname
config : { },
firstname : 'Max', getFirstname : function() {
lastname : 'Mustermann' return this.firstname;
} },
}); setLastname : function(lname) {
this.lastname = lname
},
getFirstname()
apply*() getLastname : function() {
setFirstname()
update*() return this.lastname;
getLastname()
},
setLastname()
};

45. Klassensystem - Einführung
var user = Ext.create('User'); var user = new User();

46. Klassensystem - Einführung
var user = Ext.create('User'); var user = new User();
var user = new User('Mustermann', 'Max');
var user = Ext.create('User', {
firstname : 'Max',
lastname : 'Mustermann'
});

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

48. Klassensystem - Mixins
Mixins erlauben es, Funktionalität anderer Klassen in
eine andere zu „streuen“
„Traits“ in PHP
Nur Verhalten wird kopiert, nicht aber der Typ!
Beispiel: Ext.util.Observable
In ExtJS noch eigenständige Klasse
Klassen, deren Instanzen Ereignisse senden können
(„Events feuern“), übernehmen das Verhalten von
Observable durch ein Mixin!

49. Klassensystem - Mixins
Ext.define('User.Customer', {
extend : 'User',
mixins : [
'Ext.util.Observable'
], var cust = Ext.create('User.Customer');
config : {
street : '', cust.on('addresschange', function() {
city : '', alert(„Address changed!“);
ZipCode : '' });
},
cust.changeAddress(/*...*/);
changeAddress : function(address) {
// ...
this.fireEvent('addresschange');
}
});

50. Aufbau einer
Applikation

51. Applikation - Grundgerüst
*.css
index.html
Server
*.js

52. Applikation – Bootstrapping
Bootstrapping über Ext.application
Einstiegspunkt ist launch() - ähnlich Ext.onReady
Wird aufgerufen, sobald Applikation initialisiert wurde
Resourcen und Viewport werden hier initialisiert
Folgt dem MVC Architekturmuster

53. Applikation - Verzeichnislayout
Typisches Verzeichnislayout:

54. Applikation - Verzeichnislayout
Typisches Verzeichnislayout:
Namespace: webcon

55. Applikation - Verzeichnislayout
Typisches Verzeichnislayout:
Namespace: webcon
webcon.controller.*
webcon.model.*
webcon.store.*
webcon.view.*

56. Applikation - Packages
/controller /model /view /store
Ext.app.Controller Ext.data.Model Ext.Component Ext.data.Store
vermittelt zwischen Model- repräsentiert (relationale) UI Controls Repräsentiert einen
und View-Instanzen Datenstrukturen Datencontainer und verwaltet
n-Instanzen vom Typ
Ext.data.Model

63. Applikation - Komponenten
Hauptansicht → webcon.view.MainView (Ext.tab.Panel)
Hauptscreen → Ext.navigation.View
Listenansicht → 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

64. Applikation – Das Ergebnis

65. 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