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
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
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
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
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
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
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)
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)
30. Komponenten – Component > Button
Ext.Button Repräsentiert einen „Button“
kann mit icons versehen werden (text,
icon/iconCls)
feuert entsprechende Events bei Interaktion
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
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()
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!
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
Paradigmenwechseln:Hinweis auf unterschiedliche Benutzerführung. Mehr wird durch weniger realisiert: Komplexer tree wird bspw. Mit einer Nested List dargestellt.