DHTML. selbst, ausgelöst durch Benutzereingaben, verändert wird. Quelle:

Transkript

1 DHTML Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML) oder auch DOM-Scripting bezeichnen bestimmte WebdesignMethoden, bei denen während der Anzeige einer Webseite diese selbst, ausgelöst durch Benutzereingaben, verändert wird. Quelle:

2 (Mobile Development mit) Sencha Touch 2

3 Who's talking? Thorsten Suckow-Homberg, Jahrgang 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, > 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:

11 Sencha Touch Das Ziel

12 Komponenten

13 Komponenten Quelle: Sencha Touch in Action, Manning Publications, 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:

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 1 : 'span', reference : 'badgeelement', hidden : true }, { tag : 'span', 2 classname : Ext.baseCSSPrefix + 'button-icon', reference : 'iconelement', hidden : true }, { tag : 'span', 3 reference : 'textelement', hidden }] : true 1 3 2

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', { setlastname : function(lname) { config : { this.lastname = lname firstname : 'Max', lastname }, : 'Mustermann' getlastname : function() { } return this.lastname; }); }, };

43 Klassensystem - Einführung User getfirstname(): String var User = function() { }; User.prototype = { setfirstname(string) firstname : 'Max', getlastname(): String lastname : 'Mustermann', setlastname(string) setfirstname : function(fname) { this.firstname = fname Ext.define('User', { }, config : { getfirstname : function() { firstname : 'Max', lastname return this.firstname; : 'Mustermann' }, } setlastname : function(lname) { }); this.lastname = lname }, getfirstname() getlastname : function() { setfirstname() return this.lastname; getlastname() setlastname() }, };

44 Klassensystem - Einführung User var User = function() { }; getfirstname(): String User.prototype = { setfirstname(string) firstname : 'Max', getlastname(): String lastname : 'Mustermann', setlastname(string) setfirstname : function(fname) { this.firstname = fname Ext.define('User', { }, config : { getfirstname : function() { firstname : 'Max', lastname return this.firstname; : 'Mustermann' }, } setlastname : function(lname) { }); this.lastname = lname getfirstname() setfirstname() getlastname() setlastname() }, apply*() getlastname : function() { return this.lastname; update*() }, };

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', config : { street : '', city : '', User 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 : '', city : '', ZipCode : '' cust.on('addresschange', function() { alert( Address changed! ); }); }, cust.changeaddress(/*...*/); changeaddress : function(address) { //... this.fireevent('addresschange'); } });

50 Aufbau einer Applikation

51 Applikation - Grundgerüst *.css Server index.html *.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 Modelund View-Instanzen repräsentiert (relationale) Datenstrukturen UI Controls Repräsentiert einen Datencontainer und verwaltet n-instanzen vom Typ Ext.data.Model

57

58

59

60

61

62

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: Dokumentation: Twitter: /ModusJesus, /msims84, /sencha ExtJS in Action Books: Forum: