HTML > DWR > JAVA > JSON > HTML

Um Daten in einer Java-Webanwendung dynamisch nachzuladen bietet sich das AJAX-Framework Direct Web Remoting [DWR] an. Mit diesem ist es möglich Java Methoden aus JavaScript aus aufzurufen und die Ergebnismenge zu empfangen. Da JavaScript mit den Objektstrukturen von Java nichts anfangen kann, müssen die Daten zuvor in JSON-Strings verpackt werden.

An einem praktischem Beispiel soll dies gezeigt werden. Wir haben 2 Dropdown-Boxen die in Abhängigkeit zueinander stehen. In der oberen Dropdownbox wählt man einen Zyklus (Täglich,Wöchentlich,Monatlich) aus und die unterer Dropdownbox soll ihre Inhalte entsprechend anpassen.
doubledropdown.png
Als erstes werden die benötigten Javaklassen erzeugt.
Da es sich im Optionsfelder handelt, gibt es eine Basisklasse mit dem Name OptionElement. Diese Klasse hat alle Attribute die auch das Option-Element in HTML hat. Zusätzlich kommt noch das Attribut order hinzu, welches die Reihenfolge innerhalb des Select-Elementes repräsentiert. Da bei der Serialisierung (Java->JSON), die Objektreihenfolge verworfen wird.

von dieser Klasse erben die 2 folgenden Klassen:
Die Klasse Zyklus entspricht der 1.Dropdownbox und hat als „Kindelemente“ alle zugehörigen Elemente der 2.Dropdownbox.

Die Klasse Zyklusdetails enspricht der 2.Dropdownbox

Nach dem eine konkrete Ausprägung der Zyklen erstellt wurde, werden diese in ein JSON-Objekt transferiert. Hierbei kommt die klassische JSON-Bibliothek zum Einsatz gekommen. Es gibt auch Alternativen, wie zum Beispiel FLEXJSON, welches „automatisch“ Objektreferenzen auflöst und serialisiert. Dies muss bei dieser Bibliothek händisch gelöst werden.

Wir haben natürlich mehrere Zyklusobjekte, die in einem Array gesammelt wurden. Dieses Array wird jetzt durchlaufen und in JSON-Objekte serialisert.

Anschließend werden die JSON-Objekte in ein JSON-String verpackt und an die aufrufende JavaScript-Funktion zurück gesendet.

Zusätzlich wird an dieser Stelle noch eine weitere Funktion (convertFormatToJSON) aufgerufen. Dies soll einfach nur zeigen das x-beliebig viele JSON-Objekte in ein JSON-String gepackt werden können und diese auch später wieder leicht auf der JavaScript-Seite aufgelöst werden können.
Folgende JavaScriptFunktion empfängt den JSON-String und schreibt die Objekte, je nach Objekttyp (Zyklus oder Format) in seperate Arrays, um diese im Anschluss weiterzuverarbeiten.

Die beiden Arrays formatData und zyklusData wurden außerhalb der Funktion, als globale Variablen angelegt.
Da bei der Serialisierung die Reihenfolge der Objekte komplett verworfen wurde, werden in der Funktion sortZyklusArray, die Elemente nach dem Attribute order sortiert. Dafür wurde die Standard Keysort-Methode überschrieben:

Die folgende Methode durchläuft das Zyklusarray und nutzt die überschriebende Keysort-Methode zum sortieren:

Die folgende Methode, erzeugt die Optionsfelder in den Select-Elementen und setzt dabei auch die Attribute selected oder disabled:

Wenn ein Select-Element nur ein Attribut hat, setzt die Methode toogleChooser, dieses Element auf disabled, da eh keine weiteren Elemente zur Auswahl stehen.

Die folgende Methode wird aufgerufen, wenn das onChange-Event in der ersten Dropdownbox ausgelöst wird:

Die Methode xxx ist nur eine Spielerei und verfärbt kurz die untere Dropdownbox, um die Veränderung zu verdeutlichen.

Dazu wurde folgende Funktion aus der script.aculo.us-Bibliothek verwendet.

urls:
http://pragprog.com/titles/cppsu
http://scripteka.com/
http://prototype-graphic.xilinus.com/
http://blog.xilinus.com/2007/11/4/prototype-ui-beta-version-pwc-reloaded

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.