Data Binding in qooxdoo
Upcoming SlideShare
Loading in...5
×
 

Data Binding in qooxdoo

on

  • 8,041 views

My final presentation of my master thesis. The topic was the data binding layer of the javascript framework qooxdoo which i created during the thesis.

My final presentation of my master thesis. The topic was the data binding layer of the javascript framework qooxdoo which i created during the thesis.

Statistics

Views

Total Views
8,041
Views on SlideShare
7,788
Embed Views
253

Actions

Likes
7
Downloads
209
Comments
0

8 Embeds 253

http://news.qooxdoo.org 201
http://swik.net 22
http://www.slideshare.net 21
http://feeds2.feedburner.com 4
http://planet.blog.tennessee.1und1.de 2
http://feeds.feedburner.com 1
http://planet.blog.tennessee.schlund.de 1
http://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • - Vorstellen (Thema und mich) <br /> - Dauer erwähnen <br />
  • - Grundlagen für Präsentation <br /> - Keine lange qooxdoo oder JavaScript Einleitung <br /> - sollte jeder einigermaßen kennen <br />
  • - Was ist Data Binding? <br /> - Nicht 100%ig definiert was dazu gehört und was nicht. <br /> <br /> - Daten werden zwischen einer Quelle und einem Ziel synchronisiert. <br /> - verschiedene Transformationen <br /> <br /> - Hier, Model und View da es um UI Binding ging <br />
  • - Was ist Data Binding? <br /> - Nicht 100%ig definiert was dazu gehört und was nicht. <br /> <br /> - Daten werden zwischen einer Quelle und einem Ziel synchronisiert. <br /> - verschiedene Transformationen <br /> <br /> - Hier, Model und View da es um UI Binding ging <br />
  • - Was ist Data Binding? <br /> - Nicht 100%ig definiert was dazu gehört und was nicht. <br /> <br /> - Daten werden zwischen einer Quelle und einem Ziel synchronisiert. <br /> - verschiedene Transformationen <br /> <br /> - Hier, Model und View da es um UI Binding ging <br />
  • - Warum braucht man denn Data Binding? <br /> <br /> 1. Man kommt schneller zu einem Ergebnis (Time to market) <br /> 2. Man bekommt viele Funktionalität geschenkt <br /> 3. Verringert das Fehlerrisiko da man getestete Komponenten verwendet <br /> <br /> 4. Dadurch hat man Vorteile den anderen Frameworks gegenüber bzw. holt deren Vorsprung wieder ein. <br /> 5. Der Wunsch besteht schon lange. Seit Mitte 2006 gibt es schon im qooxdoo eigenen Bugsystem 2 offe bugs für data binding. <br />
  • Ganz kurz die wichtigsten Dinge ins Gedächtnis rufen. <br /> <br /> Es gibt ein Event System von qooxdoo welches Änderungen von Werten propagieren kann. <br /> <br /> Zum Speichern von Werten werden oft Properties im Framework verwendet. Für diese werden die typischen Zugriffsmethoden automatisch erzeugt. <br />
  • - kleine Auffrischung der wichtigsten Dinge von JavaScript <br /> <br /> - Alle Objekte sind assoziative Arrays. <br /> - Funktionen an Objekten heißen Methoden <br /> - Methoden sind nur als Wert eines Arrays abgelegt <br /> - einige Möglichkeiten, diese methoden aufzurufen <br /> - auf nummer 2 eingehen <br />
  • Das sollten eigentlich genug Grundlagen gewesen sein damit wir direkt ins Thema einsteigen können. Bevor mit der Entwicklung des Data Binding für qooxdoo begonnen wurde, wurde eine ausgiebige Analyse gemacht. <br />
  • - 1 1/2 Monate <br /> - drei Bereiche: JavaScript, Alternative und Native <br /> - JavaScript <br /> - SmartClient: gute dokumentation <br /> - dojo: viele stores <br /> - Alternative <br /> - Flex: sehr leichtgewichtig und gut für enzelwerte <br /> - Native <br /> - Cocoa: Gute Controller-Konzepte, jedoch laden der Daten nicht drin <br /> - Eclipse: Sehr komplex, viel nötig um die Voraussetzungen zu schaffen <br /> <br /> - Backend wurde überprüft aber es hat sich nichts geeignet <br />
  • - 1 1/2 Monate <br /> - drei Bereiche: JavaScript, Alternative und Native <br /> - JavaScript <br /> - SmartClient: gute dokumentation <br /> - dojo: viele stores <br /> - Alternative <br /> - Flex: sehr leichtgewichtig und gut für enzelwerte <br /> - Native <br /> - Cocoa: Gute Controller-Konzepte, jedoch laden der Daten nicht drin <br /> - Eclipse: Sehr komplex, viel nötig um die Voraussetzungen zu schaffen <br /> <br /> - Backend wurde überprüft aber es hat sich nichts geeignet <br />
  • - 1 1/2 Monate <br /> - drei Bereiche: JavaScript, Alternative und Native <br /> - JavaScript <br /> - SmartClient: gute dokumentation <br /> - dojo: viele stores <br /> - Alternative <br /> - Flex: sehr leichtgewichtig und gut für enzelwerte <br /> - Native <br /> - Cocoa: Gute Controller-Konzepte, jedoch laden der Daten nicht drin <br /> - Eclipse: Sehr komplex, viel nötig um die Voraussetzungen zu schaffen <br /> <br /> - Backend wurde überprüft aber es hat sich nichts geeignet <br />
  • - gar nicht genauer drauf eingehen <br /> - Auflistung nicht komplett <br /> - Dient nur als Ausschnitt <br />
  • - auch diese Liste ist nicht komplett <br /> - man kann sich ja viele use-cases denken <br /> - hier sind nur ein paar aufgelistet <br />
  • Jetzt kommen wir endlich zu dem interessanten Teil, nämlich zum Aufbau der Data Binding Lösung für qooxdoo. Ziel war es, Daten zu laden und mit der Oberfläche zu synchronisieren. <br />
  • - von links nach rechts <br /> - Data: Service, Datei, ... <br /> - DataStore: Verantwortlich die Daten zu besorgen und in das Model zu bringen <br /> - Model: Hält die Daten, reine Datenhaltung aus der Data Binding Sicht <br /> - Controller: Übernimmt die Synchronisation zwischen Model und View <br /> - View: übliche qooxdoo widgets <br /> <br /> - Aufteilung in UI- und Backend-Binding <br /> - Trotz Backend, alles im Client <br /> <br /> - Schichtenansicht <br />
  • - Finden sich einige Teile wieder <br /> - Basis ist qooxdoo <br /> <br /> - für die stores eine abstrakte Basisklasse <br /> - Models sind im groben einfache qooxdoo klassen <br /> - Controller hat das SVB als Basis <br /> - Synchronisation von Einzelwerten wie z.B. Strings, Booleans aber auch Referenzen <br /> <br />
  • - Finden sich einige Teile wieder <br /> - Basis ist qooxdoo <br /> <br /> - für die stores eine abstrakte Basisklasse <br /> - Models sind im groben einfache qooxdoo klassen <br /> - Controller hat das SVB als Basis <br /> - Synchronisation von Einzelwerten wie z.B. Strings, Booleans aber auch Referenzen <br /> <br />
  • - Genau dieses schauen wir uns als erstes an <br />
  • - zuerst die Basis klären <br /> - Was braucht manzum synchronisieren <br /> <br /> 1. Änderungen mitbekommen <br /> 2. allgemeine Zugriffsmethoden <br /> - JavaScript-Objekte gehen z.B. nicht <br /> <br /> => qooxdoo Properties! <br /> - Unterstützung von change Events <br /> - Automatische Generierung der Zugriffsfunktionen <br /> - funktioniert auf allen Properties mit events im Framework <br /> --> große Unterstützung schon vorhanden <br />
  • - Keine langen reden <br /> - Beispielhafter Ablauf <br /> - Zwei Objekte einer gleichen Klasse mit einem Property <br /> - a hat die 12 <br /> - binding aufsetzen <br />
  • - initial wird die 12 synchronisiert <br /> <br />
  • - Änderungen in a bewirken Änderungen in b <br />
  • - umgekehrt aber nicht --> unidirektional <br /> - bidirektional durch 2 bindings <br /> <br /> - Code sieht es sehr übersichtlich aus. <br />
  • - Konzept geht jedoch noch weiter <br /> - Quelle eine Objekt-Hierarchie <br /> - Binding über diese Hirarchie <br />
  • - Auch hier wird die Zahl initial synchronisiert <br /> - Änderungen werden übertragen <br />
  • - Auch hier wird die Zahl initial synchronisiert <br /> - Änderungen werden übertragen <br />
  • - Auch hier wird die Zahl initial synchronisiert <br /> - Änderungen werden übertragen <br />
  • - Auch hier wird die Zahl initial synchronisiert <br /> - Änderungen werden übertragen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - b wird auf null gesetzt <br /> --> prop in c wird reseted (kein Fehler) <br /> - d wird an stelle von c platziert <br /> --> 78 wird synchronisiert <br /> - Code sehr ähnlich <br /> - Unterschied nur die property kette <br /> - Kann beliebig lange werden, wenn die events dazu vorhanden sind <br /> - Arrays können auch darin vorkommen <br />
  • - Viel der Probleme wurde schon durch qooxdoo gelöst <br /> - Sehr gut dass dies verwendet werden konnte <br /> - technischer knackpunkt war der Aufruf der Zugriffsfunktionen <br /> - Einleitung erwähnen <br />
  • - größte Herausforderung: die hohe dynamik des systems <br /> - Beispiel <br /> - Anpassungen auf an das Framework <br /> - nicht für alles gibt es properties, aber die property getter und setter <br /> - eigentlich reicht ein event aus <br /> - es können auch eventnamen angegeben werden <br /> - müssen allerdings data events sein <br />
  • Dies war die Basis für die Controller. Diese wollen wir uns jetzt genauer ansehen. <br />
  • Noch einmal zur Erinnerung. Die Controller befinden sich zwischen model und view und sind für die synchronisation der beiden zuständig. <br />
  • - Davor:zusammenhang mit views <br /> - Auflistung der verschiedensten Views <br /> - Auf jedes kurz eingehen <br /> - Jede hat bestimmte spezielle eigenschaften <br /> --> je view typ ein controller <br />
  • Object: verwaltet Felder mit einzelwerten wie z.b. textfeld, spinner usw. <br /> List: Alle listenartigen Widgets <br /> Tree: das tree widget <br /> Table: Die tabelle <br />
  • - Tabelle nicht umgesetzt <br /> - neue Tabelle in der Planung <br /> - Später natürlich angebunden <br /> - Alle weiteren Beschreibungen ohne den object controller <br /> - bequeme Zwischenschicht für das Single Value Binding <br />
  • Zwei der in der Analyse herausgearbeiteten Features will ich jetzt mal genauer betrachten. Dabei handelt es sich um die Selektion und die Filterung. Diese wurden beide auf der Ebene der Controller eingebaut. <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - Selektion ohne das Data Binding <br /> - Beispiel: Liste <br /> - Selektion --> ListItem <br /> - anhand dieses Widgets selektion bestimmen <br /> - Selektion mit Data Binding <br /> - immer Modelobjekte stellvertretend für die Listeneinträge <br /> - genau diese werden auch bei der Selektion zurückgeliefert <br /> <br /> - zwei Tatsachen: <br /> 1. Selektion ist ein array <br /> --> kann wieder an eine Liste gebunden werden <br /> 2. Man ist völlig abstrakt von den Widgets <br /> --> Selektion auf dem Baum liefert auch ein Modelobjekt zurück <br />
  • - zuerst einige verschiedene Ansätze <br /> - Letztendlich ist es im controller durch index-mapping <br /> - So kann auch die Sortierung einfach umgesetzt werden <br />
  • - Größtes Problem: binden nur von label und icon <br /> - benötigte Werte werden in properties gespeichert <br /> => Erweiterung benötigt <br /> - Delegate Pattern bietet die Möglichkeiten <br />
  • - Ursprünglich aus dem bekannten Design Pattern Buch <br /> - private klasse übernimmt teile der Funktionalität <br /> - methoden-wrapper für bestimmte funktionen <br />
  • - anders in qooxdoo <br /> - Ansatz ist von cocoa bekannt <br /> - delegate wird von aussen gesetzt <br /> - jede Methode ist optional <br /> - es gibt daher immer eine Standardverhalten <br /> => So kann code in den controller gebracht werden <br />
  • - Sieht folgendermassen aus <br /> - Delegate ist einfaches Objekt <br /> - könnte auch qooxdoo object sein (this.methodenname dann) <br /> - funktion wird dem controller übergeben (bindItem) <br /> - In dieser Funktion wird dem controller gesagt, welche properties er wie binden soll <br /> - Geschichte zum Zitat erzählen <br />
  • Bestimmt hat sich der eine oder andere schon die Frage gestellt, wie die Models denn nun genau aussehen. <br />
  • Dies zeige ich jetzt. Hier noch einmal das Bild. Das Model ist, wie schon zu Beginn erwähnt, für die Haltung der Daten verantwortlich. <br />
  • - Da die daten in Properties sollen bieten sich einfache qooxdoo Klassen an <br /> - Durch die change Events kann man so alle Änderungen mitbekommen <br /> - Probleme mit Arrays <br /> - Änderungen im Array --> bekommt man nicht mit <br /> => spezielle Array implementierung benötigt <br /> - Aber nicht so spannend. Bei jeder Änderung gibt es einen Event. <br />
  • Mit dem Models sind wir somit auch schon durch. Nicht gerade viel aber sie spielen in diesem Kapitel noch eine Rolle. <br />
  • Denn es ist hier noch einmal dargestellt, dass der Store für die Datenbeschaffung und das schreiben in das Model verantwortlich ist. <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Daten Laden = Welches Format? <br /> - Viele Denkbar <br /> - Hauptformat ist JSON <br />
  • - Diagramm sollte bekannt sein <br /> - Delegate Pattern <br /> - Was machen die zwei teile? <br />
  • - Store: Laden und bereitstellen <br /> - Marshaler: Generieren von Klassen und Instanzen <br /> <br />
  • - Erstellen von Klassen zur Laufzeit? <br /> - Wie werden Klassen in qooxdoo erstellt? <br /> - Hier der Code zu sehen <br />
  • - Gleiche bei der Definition der Klasse <br /> - Kann auch ersetzt werden <br />
  • - Spätestens jetzt sieht man klar, dass nur noch eine Funktion übrig ist <br /> - Diese kann auch zur Laufzeit ausgeführt werden. <br /> - Genau auf diese Weise werden die Klassen generiert <br /> - Übriger Parameter: Name und namespace der klasse <br /> - Wie benennt man denn die erzeugten Klassen? <br />
  • - Feststellen, was sie unterscheidet <br /> - Aufgabe <br /> - Halten von Daten in Properties <br /> - Properties sind nur leere Datenfelder ohne Typ <br /> --> nur der Namen unterscheidet die Klassen <br />
  • - Hash-Algorithmus benötigt <br /> - Erste Idee: Konkatenieren der Property-Namen <br /> --> Geht nicht wegen der Reihenfolge <br />
  • - Hash-Algorithmus benötigt <br /> - Erste Idee: Konkatenieren der Property-Namen <br /> --> Geht nicht wegen der Reihenfolge <br />
  • - Hash-Algorithmus benötigt <br /> - Erste Idee: Konkatenieren der Property-Namen <br /> --> Geht nicht wegen der Reihenfolge <br />
  • - Lösung: Sortieren <br /> - Nächstes Problem <br /> - nicht eindeutig zuweisbar <br />
  • - Lösung: Sortieren <br /> - Nächstes Problem <br /> - nicht eindeutig zuweisbar <br />
  • - Lösung: Sortieren <br /> - Nächstes Problem <br /> - nicht eindeutig zuweisbar <br />
  • - Lösung: Trennzeichen benötigt <br /> - Welches? <br /> - Beispiel mit $ <br /> - Geht auch schief <br />
  • - Lösung: Trennzeichen benötigt <br /> - Welches? <br /> - Beispiel mit $ <br /> - Geht auch schief <br />
  • - Lösung: Trennzeichen benötigt <br /> - Welches? <br /> - Beispiel mit $ <br /> - Geht auch schief <br />
  • - nächster Versuch <br /> --> Blick in die JSON Spec <br /> - Was ist in JSON nicht ok aber in JavaScript <br /> - einzig mögliches Zeichen sind die quotes <br /> --> Jetzt geht es immer <br />
  • - nächster Versuch <br /> --> Blick in die JSON Spec <br /> - Was ist in JSON nicht ok aber in JavaScript <br /> - einzig mögliches Zeichen sind die quotes <br /> --> Jetzt geht es immer <br />
  • - nicht nur der reine JSON Store wurde umgesetzt <br /> - Proof of concept <br /> - twitter vie REST angebunden, Rückgabeformat JSON <br /> - Beispielapplikation mit Gears gebaut <br /> - flickr angebunden (auch JSON) <br />
  • Jetzt haben wir alle Teile im einzelnen gesehen. <br />
  • Ich hoffe mal es hat jeder einigermaßen verstanden, welcher Teil was macht. Um dies zu verdeutlichen, habe ich noch zwei Beispiele aufbereitet, die dasd Zusammenspiel verdeutlichen. <br />
  • - Erstes Beispiel: Laden dieser JSON Datei und anzeigen in einer Liste <br /> - Daten entsprechen keinem vordefinierten Format <br /> - Könnten auch Objekte in dem Array sein <br /> - Code auf der folgenden Seite würde aber anders aussehen <br />
  • 1. Liste erzeugen und anzeigen <br /> - hat noch gar nix mit data binding zu tun <br /> 2. controller erzeugen. <br /> - kein Model gesetzt <br /> - direkt mit der liste verbunden <br /> 3. Store erzeugen <br /> - kennt die URL <br /> 4. Zusammenbinden vie Single Value Binding von Store und Controller <br /> <br /> - Kein Model gesehen <br /> - Wo ist das aber? <br /> - Sehen wir gleich. <br /> <br />
  • - Zuerst: Ergebnis <br /> - Einfach und nichts besonderes <br /> - Aber nur 5 Zeilen code! <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />
  • - Zurück zum verlorenen Model <br /> - Ablauf zeigt noch mal den Zeitlichen ablauft des Codes <br /> 1. Daten sind schon da <br /> 2. Liste wird erzeugt <br /> 3. Controller wird erzeugt. <br /> - kennt die liste <br /> - model ist null <br /> 4. Store wird erzeugt <br /> - kennt die daten <br /> - model ist null <br /> - beginnt mit dem laden <br /> 5. binding der model properties wird erstellt <br /> - Code fertig <br /> 6. Asynchron kommen die Daten an <br /> - Model wird mit dem Daten erstellt <br />

Data Binding in qooxdoo Data Binding in qooxdoo Presentation Transcript

  • Data Binding in qooxdoo Intelligente und umfassende Datenbindung für moderne Webanwendungen in qooxdoo Master Thesis - Martin Wittemann martin.wittemann@1und1.de HS-Karlsruhe 1&1 Internet AG 16.04.2009
  • Introduction
  • Data Binding Model View
  • Data Binding Model View
  • Data Binding Formating Filtering Sorting Model View Validation Converting
  • Why? Faster Advantage over Bug 18 and 19 programming competitors
  • JavaScript • All objects are assoziative arrays • Different ways to call a function: var doFunc = function() { // function code } var obj = {do: doFunc}; obj.do(); // 1. obj[quot;doquot;](); // 2. obj.do.call(); // 3. obj[quot;doquot;][quot;callquot;](); // 4. doFunc.call(obj); // 5. doFunc[quot;callquot;](obj); // 6. obj[quot;doquot;].apply(); // 7. obj[quot;doquot;][quot;applyquot;](); // 8.
  • Analysis
  • Evaluation
  • Evaluation JavaScript Frameworks SproutCore SmartClient
  • Evaluation Alternative JavaScript Frameworks Frameworks SproutCore Flex SmartClient
  • Evaluation Alternative JavaScript Native Frameworks Frameworks Frameworks SproutCore Flex Cocoa Eclipse Data Binding WPF SmartClient
  • Features • Binding of single values • Binding of list widgets • Binding of tree widgets • Binding of JSON, XML, CSV • Formating, Conversion, Filtering, ... • Master detail view • ...
  • Use Cases • Synchronize two textfields • Fill a list with data from a JSON file • Fill a tree widget with data • Connect to the twitter REST service and display messages in a list • ...
  • Architecture
  • Structure DataStore Store Model Controller View Data Backend Binding UI Binding
  • Layers Store Model Controller qooxdoo
  • Store 1 Layers Store 2 ... Abstract Store Store N Data Array qooxdoo Classes with Properties Controller 1 Controller 2 Binding ... SingleValue Controller N
  • Single Value Binding
  • How could it work? • Change notification needed • Common way to access the data needed
  • How could it work? • Change notification needed • Common way to access the data needed qooxdoo Properties • Support for change events • Generated accessors
  • Idea a:A b:A + prop : 12 + prop :
  • Idea a:A b:A <<binding>> + prop : 12 + prop :
  • Idea a:A b:A <<binding>> + prop : 12 + prop : 12
  • Idea a:A b:A <<binding>> + prop : 23 + prop : 23
  • Idea a:A b:A <<binding>> + prop : 23 + prop : 30
  • Idea a:A b:A <<binding>> + prop : 23 + prop : 30 a.bind(quot;propquot;, b, quot;propquot;);
  • Deep Binding a:A c:B + child : b + prop : b:B + prop : 12
  • Deep Binding a:A c:B <<binding>> + child : b + prop : b:B + prop : 12
  • Deep Binding a:A c:B <<binding>> + child : b + prop : 12 b:B + prop : 12
  • Deep Binding a:A c:B <<binding>> + child : b + prop : 23 b:B + prop : 23
  • Deep Binding a:A c:B <<binding>> + child : b + prop : 23 b:B + prop : 23
  • Deep Binding a:A c:B <<binding>> + child : b + prop :
  • Deep Binding a:A c:B <<binding>> + child : b d + prop : 78 d:B + prop : 78
  • Deep Binding a:A c:B <<binding>> + child : b d + prop : 78 d:B + prop : 78 a.bind(quot;child.propquot;, b, quot;propquot;);
  • Realization • Properties and events as a basis • Using of the dynamic aspects of JavaScript var value = targetObject[quot;getquot; + propertyName]();
  • Challenges • highly dynamic a.bind(quot;c[1].d.e[0].namequot;, b, quot;propquot;); • Fallback textfield.bind(quot;inputquot;, label, quot;contentquot;);
  • Controller
  • Controller DataStore Store Model Controller View Data
  • Controller DataStore Store Model Controller View Data
  • Views List Tree Table SelectBox ComboBox Form Elements
  • Controller Object List Tree Table
  • Controller Object List Tree
  • Selection without data binding list.getSelected();
  • Selection without data binding list.getSelected(); ListItem
  • Selection without data binding with data binding 0 00 ctrl.getSelection()[0]; list.getSelected(); ListItem
  • Selection without data binding with data binding 0 00 ctrl.getSelection()[0]; list.getSelected(); ModelItem 4 ListItem
  • Problems • Default binding only to the label and the icon • Hard wired
  • Problems • Default binding only to the label and the icon • Hard wired Extension with the Delegate Pattern
  • Delegate Pattern var delegate = new DelegateOfA(); this.do = function() { A return delegate.do(); } delegate Delegate
  • Delegate Pattern in qooxdoo this.setDel = function(del) { this.delegate = del; } this.do = function() A { if ( this.delegate != null delegate && this.delegate.do != null ){ Delegate this.delegate.do(); } else { this.doDefault(); } }
  • Binding of other properties var delegate = { bindItem : function(controller, item, id) { controller.bindProperty( quot;onlinequot;, quot;checkedquot;, null, item, id ); } }; controller.setDelegate(delegate);
  • Binding of other properties var delegate = { bindItem : function(controller, item, id) { controller.bindProperty( quot;onlinequot;, quot;checkedquot;, null, item, id ); } }; controller.setDelegate(delegate); „The delegate structure provides great extensibility. Well done!“ [Wayne Si]
  • Model
  • Model DataStore Store Model Controller View Data
  • Model DataStore Store Model Controller View Data
  • Requirements • Regular qooxdoo classes hold the data • Properties with events on every change • Can hold every JavaScript datatype • Problem with data in native arrays • No change events will be fired
  • Requirements • Regular qooxdoo classes hold the data • Properties with events on every change • Can hold every JavaScript datatype • Problem with data in native arrays • No change events will be fired Custom array implementation is necessary
  • Stores
  • Stores DataStore Store Model Controller View Data
  • Stores DataStore Store Model Controller View Data
  • Possible Data Sources
  • Possible Data Sources JSON XML CSV SOAP JSON-RPC ...
  • Possible Data Sources JSON XML CSV SOAP JSON-RPC ...
  • Architecture var marshaler = new JsonMarshaler(); this.do = function() { JsonStore return marshaler.do(); } Json Marshaler
  • Responsibilities Fetches and provides JsonStore the data as model. Generates the model Json classes and instances. Marshaler
  • Creating Classes qx.Class.define(quot;namespace.namequot;, { extend : qx.core.Object, properties : { // ... } });
  • Creating Classes qx.Class.define(quot;namespace.namequot;, { extend : qx.core.Object, properties : p });
  • Creating Classes qx.Class.define(quot;namespace.namequot;, classDef);
  • What Distinguishes Models? • Models hold all data in properties
  • What Distinguishes Models? • Models hold all data in properties Only the property names are different
  • Identifying Model Classes Model Hash +b +a
  • Identifying Model Classes Model ba Hash +b +a
  • Identifying Model Classes Model ba Hash +b +a Model ab Hash +a +b
  • Identifying Model Classes Model ba ! Hash +b +a Model ab Hash +a +b
  • Identifying Model Classes Model Hash +b +a
  • Identifying Model Classes Model ab Hash +b +a
  • Identifying Model Classes Model ab Hash +b +a Model ab Hash + ab
  • Identifying Model Classes Model ab ! Hash +b +a Model ab Hash + ab
  • Identifying Model Classes Model Hash +b +a
  • Identifying Model Classes Model a$b Hash +b +a
  • Identifying Model Classes Model a$b Hash +b +a Model a$b Hash + a$b
  • Identifying Model Classes Model a$b ! Hash +b +a Model a$b Hash + a$b
  • Identifying Model Classes Model Hash +b +a
  • Identifying Model Classes Model aquot;b Hash +b +a
  • Identifying Model Classes Model aquot;b Hash +b +a ✔
  • Extended Stores Gears
  • Integration
  • Integration DataStore Store Model Controller View Data
  • Integration DataStore Store Model Controller View Data
  • The Data [ quot;aquot;, quot;bquot;, quot;cquot;, quot;dquot;, quot;equot;, quot;fquot;, quot;gquot;, quot;hquot;, quot;iquot;, quot;jquot;, quot;kquot;, quot;lquot; ] data.json
  • Application Code var list = new qx.ui.form.List(); this.getRoot().add(list); var controller = new qx.data.controller.List(null, list); var store = new qx.data.store.Json(quot;data.jsonquot;); store.bind(quot;modelquot;, controller, quot;modelquot;);
  • Result
  • Structure Data
  • Structure List Data
  • Structure target ListController List Data model null
  • Structure url target JsonStore ListController List Data model model null null
  • Structure url target JsonStore ListController List Data model model <<binding>> null null
  • Structure url target JsonStore ListController List Data model model <<binding>> null null Model
  • Structure url target JsonStore ListController List Data <<binding>> model model Model
  • Feed Reader
  • Feed Reader Data tion ec sel selection
  • Feed Reader Data selection TreeController ListController selection
  • Conclusion
  • Layers Twitter Store Flickr Store JSON Store Gears Store Data Array Classes with Properties qooxdoo Object Controller List Controller Binding SingleValue Tree Controller
  • Outlook • Remote model • Virtual widgets support • Table support • Optimization • Dynamic form widget
  • Give it a try!
  • More Information http://qooxdoo.org/documentation/0.8/data_binding http://demo.qooxdoo.org/current/feedreader/ Images source http://www.everystockphoto.com/
  • http://www.qooxdoo.org