2. Thorsten Suckow-Homberg, Jahrgang 1976
PHP & Javascript seit 1999
Sencha seit 2007
Autor des conjoon Open Source Projektes (conjoon.org)
arbeitet für die eyeworkers interactive GmbH, Karlsruhe
( jobs.eyeworkers.de )
@thorstensuckow
3. Worum geht es hier?
Ext JS4 – HTML 5 Framework zur Erstellung webbasierter Applikationen
Geschichtlicher Überblick und Einblicke in
das Framework
Sencha als Unternehmen
Architektur, Klassensystem, Komponenten
4. Sencha
Jack Slocum programmiert ExtJS auf Basis von YUI, um
eine erweiterte Sammlung von UI Controls anzubieten
Ende 2007: ExtJS2 – Meilenstein!
2011: Sench Touch
2011: ExtJS4
heute: Investment Capital, vlt. das populärste JS
Framework: > 5000 Kunden, > 300.000 aktive community
member, > 100 Mitarbeiter
mehr als 1.6 Millionen Entwickler
12. Klassensystem - Einführung
Sencha 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()
14. 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'
19. Komponenten – Component
Controls in ExtJS sind „Komponenten“ Ext.Component
Eigenschaften:
show/hide
enable/disable
xtype
child components via Ext.Container
observable!
20. 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
25. Komponenten – Component > Container > Toolbar
Container zur Aufnahme von Steuer- oder
Eingabeelementen
Toolbars werden meist „docked“ eingehangen
top
bottom
28. Model
Repräsentiert Datenstruktur einzelner Entitäten
Verfügt über Assoziationen
Ext.data.Association: hasMany, belongsTo
Über Proxies können Änderungen an einzelnen
Instanzen persistiert werden
Außerdem:
Feld-Definitionen
Validierung (Ext.data.validations)
29. Store
Kapselt eine Menge von Model Instanzen
Kommuniziert über Proxies mit angeschlossenem
Backend oder Cient (HTML5 Storage)
filtern
sortieren
suchen
30. Proxy
Ext.data.Store/Model: „proxy“ property vom Typ
Ext.data.Proxy, über den auf Daten
lesend
schreibend
zugegriffen werden kann
Proxies lassen sich in zwei Gruppen unterteilen:
Client Proxies
Server Proxies
31. Model – Beispiel Validierung
Ext.define(„Order“, {
extend : 'Ext.data.Model',
var order = Ext.create(„Order“);
var errors = order.validate();
console.log(errors);
fields : [{
name : 'customerName',
type : 'string'
}],
var order = Ext.create(„Order“, {
customerName : 'A. Scott'
validations : [{
type
: 'presence',
field : 'customerName'
});
var errors = order.validate();
console.log(errors);
}]
});
errors =>
[Ext.data.Errors].isValid():boolean
32. Model – Beispiel Assoziation
Ext.define(„Order“, {
var address =
Ext.create(„ShippingAddress“,{
// …
street : 'Comusstrasse 23'
associations : [{
name
: 'shippingAddress',
type
});
: 'hasOne',
model : 'ShippingAddress'
var order = Ext.create(„Order“, {
customerName : 'D. Lightman'
}]
});
});
Ext.define(„ShippingAddress“, {
extend : 'Ext.data.Model',
fields : [{
name : 'street',
type : 'string'
}]
}});
order.setShippingAddress(address);
33. Model – Proxy
Beispiel (Ext.data.proxy.Ajax):
proxy : {
type : 'ajax',
api : {
myOrder.save();
create
: '/order/add/',
read
: '/order/get',
Order.load(123);
update
: '/order/set',
myOrder.save();
Destroy : '/order/delete'
}
}
myOrder.destroy();
36. 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.
Hinweis auf Getter und setterName, key und foreign key
Hinweis auf Getter und setterName, key und foreign key