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
Komponenten Component > Container (Layouts)
Zum Beispiel:
Quelle: http://www.sencha.com/docs/
Komponenten Component > Container (Layouts)
Aufgepat!
Das Wischen durch verschiedene Karten wird nicht direkt ber ein Layout realisiert, sondern mit Hilfe von Ext.carousel.Carousel
Komponenten Component > Container > Panel
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 > Panel
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
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 Component > Container > DataView > List
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()
Klassensystem - Einfhrung
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)
Klassensystem - Einfhrung
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; },};
getFirstname()setFirstname()getLastname()setLastname()
UsergetFirstname(): StringsetFirstname(String)getLastname(): StringsetLastname(String)
Klassensystem - Einfhrung
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; },};
getFirstname()setFirstname()getLastname()setLastname()
apply*()update*()
UsergetFirstname(): StringsetFirstname(String)getLastname(): StringsetLastname(String)
Klassensystem - Einfhrung
var user = Ext.create('User');
var user = new User();
Klassensystem - Einfhrung
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:
Applikation - Verzeichnislayout
Typisches Verzeichnislayout:
Namespace: webcon
Applikation - Verzeichnislayout
Typisches Verzeichnislayout:
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
Top Related