XML-Daten

Genug der Theorie. Jetzt soll sich das Framework einmal in der Praxis bewähren. Zuerst wird getestet, wie gut Spry mit XML-Daten zurechtkommt. Dazu werden einige Beispieldaten in Form einer XML-Datei erstellt. Als Einträge dienen Angaben über Mitarbeiter einer fiktiven Stadtverwaltung:


Wie man sieht, bestehen die Daten aus mehreren Zeilen mit jeweils denselben Eigenschaften. Spry verlangt keine DTD (Data Type Definition) zur Arbeit mit XML. Das stellt normalerweise ein Problem bei der Verarbeitung von XML dar, weil es keine Standardisierung gibt. Das Ziel ist eine selbständige Verarbeitung dieser Daten durch Spry und die Ausgabe auf einer HTML-Seite. Man legt einfach die gewünschten Attribute und Eigenschaften der Daten fest. Anschließend teilt man Spry mit, an welcher Position der Seite sie angezeigt werden sollen.

Den HTML-Content kann man mithilfe eines schlichten Texteditors erstellen. Einen Ausschnitt davon sieht man unten. Es werden zwei .js-Dateien importiert: Die erste verwendet Googles Open-Source-Code zur Verwendung von XPath. Dadurch kann man die Daten später filtern. Die zweite ist die Spry-Data-Library. Diese ist abhängig von der XPath-Library. Darum muss diese zuerst geladen werden.

Als Nächstes wird eine Instanz des Spry XMLDataSet deklariert. Hier wird sie dsEmployees genannt. Die Instantiierung erfordert zwei Parameter: den Speicherort der XML-Datei sowie einen XPath-Ausdruck. Dieser identifiziert die XML-Knoten, in denen die gewünschten Daten enthalten sind. Der XML-Code kann auch von einer URL geladen werden. Man beachte, dass der XPath-Ausdruck den XML-Wurzelknoten identifiziert und dann den Namen jedes Kindknotens, der die jeweilige Datenzeile repräsentiert.


Die Ausgabe des Spry-Datensatzes innerhalb des Body der Seite ist einfach. Spry verwendet sogenannte dynamische Regionen zur Anzeige von XML-Daten auf der Seite. Diese aktualisieren sich selbständig, wenn sich der Datensatz ändert. Eine dynamische Region wird innerhalb eines <div>-Tags mithilfe von spry:region deklariert. HTML-Tags dienen dann als Behälter für die dynamische Region. Die Region fungiert als „Beobachter“ des Spry-Datensatzes. Geschweifte Klammern dienen dazu, Spalten des Datensatzes zu identifizieren. Das spry:repeat-Tag iteriert über den Datensatz und zeigt alle Zeilen an.


Spry bietet Funktionen für dynamische Regionen, die nach Master/Detail strukturiert sind, von einem oder mehreren Datensätzen. Der folgende Beispielcode verwendet dieselbe Logik innerhalb des <head>-Tags, um wie oben einen Spry-Datensatz zu deklarieren. Ein onclick-Ereignis wurde der wiederholten Tabellenzeile hinzugefügt. Sie ist mit einer Spry-XMLDataSet-Methode namens setCurrentRow verknüpft. Dabei wird die ID der aktuellen Zeile als Parameter übergeben. Die zweite Tabelle ist von einem <div>-Tag umgeben, das spry:detailregion verwendet, um den Detailbereich des Codes mit Daten zu füllen. Das Sortieren der Tabellendaten nach Spaltenüberschrift ist ebenfalls ganz einfach.


Inhalt

Neueste Kommentare 

Noch keine Kommentare zu Einfach zu implementierendes AJAX-Framework: So funktioniert Spry

Kommentar hinzufügen

Schreibe einen Kommentar

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