info@a-coding-project.de

Ajax: Spry und AjaXSLT

Das Spry-Framework ist eine von Adobe zur Verfügung gestellte JavaScript-Bibliothek mit diversen Funktionen die das Leben als Webdesigner um einiges erleichtern können. Dazu gehören zahlreiche Funktionen zur Verarbeitung von XML-Daten, Ajax-Funktionalitäten, Effekte oder Formularbehandlung. Dazu gehört außerdem die Fähigkeit zum Verarbeiten von XSLT-Daten die dem AjaXSLT-Framework entlehnt sind.

Download und Installation

Der Download findet sich bei Adobe unter folgender URL:

http://labs.adobe.com/technologies/spry/ (mittlerweile abgeschaltet)

Nach dem Download wird die Datei einfach entpackt und in den Projektordner kopiert. Damit ist das Framework bereits einsatzfähig und braucht nur noch in die jeweiligen Dateien eingebunden werden.

Startklar ...

Um mit dem Spry-Framework zu arbeiten müssen lediglich zwei Dateien eingebunden werden. Anschließend stehen diverse neue Objekte zur Verfügung auf die Zugegriffen werden kann:

<script type="text/javascript" 
        src="includes/xpath.js"></script>
<script type="text/javascript" 
        src="includes/SpryData.js"></script>

... damit sind bereits die wichtigsten beiden Bibliotheken zur Verfügung: Die Fähigkeit zum Umwandeln von XML-Daten via XSLT und die Spry-Objekte.

XML-Datasets und Dynamic Region

Eine wunderbare Arbeitserleichterung sind die XML-Datasets und damit verbunden die Verwendung von sogenannten Dynamic Regions. Adobe gibt uns hier ein Werkzeug an die hand, welches es ermöglicht eine strukturiert aufgebaute XML-Datei automatisch einzulesen, die Daten zu extrahieren und anschließend dynamisch in eine HTML-Datei wieder ebenso strukturiert auszugeben. Nehmen wir dazu eine leicht abgeänderte Version des XML-Adressbuchs aus einem vorangegangenen Beispiel:

<?xml version="1.0"?>
<Adressbuch>
 <Kunde Name="Max Mustermann">
  <Straße>Musterstraße 14</Straße>
  <PLZ>12345</PLZ>
  <Ort>Mustehausen</Ort>
 </Kunde>
 <Kunde Name="August Ausgedacht">
  <Straße>Gibts-Nicht-Weg 37</Straße>
  <PLZ>67890</PLZ>
  <Ort>Augsburg</Ort>
 </Kunde>
</Adressbuch>

Dank Spry ist es nun möglich diese Datei automatisiert und ohne viel rumgeprogrammiere in eine HTML-Datei auszugeben:

<html xmlns="http://www.w3.org/1999/xhtml/" 
      xmlns:spry="http://ns.adobe.com/spry">
<head>
<script language="JavaScript" type="text/javascript" 
        src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" 
        src="includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript">
<!--

 dsPeople = new Spry.Data.XMLDataSet("daten.xml",
                                     "Adressbuch/Kunde");
-->
</script>
</head>
<body>
 <div id="People_DIV" spry:region="dsPeople">
  <table id="People_Table">
   <tr>
    <th>Name</th>
    <th>Straße</th>
    <th>PLZ Ort</th>
   </tr>
   <tr spry:repeat="dsPeople">
    <td>{@Name}</td>
    <td>{Straße}</td>
    <td>{PLZ} {Ort}</td>
   </tr>
  </table>
 </body>
</html>

Was hier passiert ist die "Magie" von Spry: Im dritten <script>-Abschnitt wird ein Spry-XMLDataSet-Objekt erzeugt. Dieses lädt automatisch per Ajax die Daten aus daten.xml (unserem Adressbuch) und sucht ebenfalls automatisch alle Kunde-Elemente heraus und liest die Attribute (Name) und Unterelemente (Straße, PLZ, Ort) ein. Etwas weiter unten wird dann ein normaler <div> als Dynamic Region definiert indem er das Attribut spry:region erhält. Was nun geschieht ist das eigentlich magische: Spry liest zusätzlich zu den XML-Daten auch den Code in der Dynamic Region ein und setzt automatisch an die dafür vorgesehenen Stellen die passenden Werte ein (z.B. den Namen bei {@Name} oder die Postleitzahl bei {PLZ}). Außerdem wiederholt Spry den mit dem spry:repeat-Attribut gekennzeichneten Bereich entsprechend so oft wie Kunde-Einträge in der XML-Datei enthalten sind. Das Resultat: Die Daten aus der XML-Datei sind sauber und strukturiert per Ajax in der HTML-Datei gelandet ohne dass dazu viel programmiert werden musste:

Die Spry-Ausgabe im Mozilla Firefox
Darstellung: Die Spry-Ausgabe im Mozilla Firefox

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant