XML für die Bildergalerie
Eine von vielen Möglichkeiten für das Einbinden von XML-Daten in eine dynamische Webseite ist das Spry-Framework von Adobe. Es stellt eine Reihe von JavaScript-Dateien bereit, mit Funktionen für eine breite Palette von AJAX-Techniken (Asynchronous JavaScript and XML) – die asynchrone Eigenschaft besteht darin, dass Daten für eine Webseite im Hintergrund geladen werden und dann sofort bereitstehen, wenn sie mit einem Mausklick angefordert werden.
Die Funktionsweise des Spry-Frameworks veranschaulicht eine Bildergalerie mit den beiden Bestandteilen eines Thumbnail-Mosaiks und eines Hauptfensters für die größere Darstellung eines Fotos:
Die Pfadangaben zu den Thumbnails werden hier ebenso aus einer XML-Datei geholt wie das zugehörige Bild in der vergrößerten Darstellung und die aus den Stichwort-Tags des Fotos gebildete Bildzeile darunter:
<gallery> <photos> <photo path = "anacamptis_papilionaceae.jpg" width = "800" height = "532" thumbpath = "anacamptis_papilionaceae.jpg" thumbwidth = "120" thumbheight = "80" rating = "" categories = "Anacamptis papilionaceae,Italien: Monte Gargano," caption = "" > </photo> ... </photos> </gallery> |
Nach diesem Muster kann man die XML-Datei zur Bildergalerie selbst erstellen – jedes Bild bekommt ein Element <photo> mit unterschiedlichen Attributen – denkbar wären etwa noch Attribute wie Aufnahmedatum oder Fotograf. Wer das zu den neueren Photoshop-Versionen dazu gehörende Adobe-Programm Bridge verwendet, kann die Erstellung der XML-Datei auch einem kleinen Skript überlassen.
Anschließend wird die XML-Datei namens gallery.xml in den Header der Webseite eingefügt und als Spry-Datensatz mit der Bezeichnung ds1 definiert. Nach der Datei wird hier auch angegeben, ab welchem XML-Knoten die Daten ausgelesen werden sollen: “gallery/photos/photo”:
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("gallery.xml", "gallery/photos/photo");
//-->
</script> |
Um die XML-Daten mit den Javascript-Anweisungen ansprechen zu können, werden die beiden zentralen Javascript-Dateien des Frameworks eingebunden, die bei Adobe als Bestandteil des Spry-Frameworks heruntergeladen werden können:
<script src="SpryAssets/xpath.js" type="text/javascript"></script> <script src="SpryAssets/SpryData.js" type="text/javascript"></script> |
Im Body der Webseite werden dann zwei div-Bereiche untergebracht, einer für die Thumbnails und einer für das große Bildfenster (deren Position wird mit Hilfe von CSS und “position: absolute;” festgelegt):
<body>
<div id="thumbContainer" spry:region="ds1">
<img src="thumbs/{@thumbpath}" spry:repeat="ds1" spry:setrow="ds1" class="thumbs" onclick="ds1.setCurrentRow('{ds_RowID}');"/>
</div>
<div id="main" spry:detailregion="ds1">
<img src="{@path}"><br/>{@categories}
</div>
</body> |
Hier werden die src-Attribute der beiden img-Tags aus der XML-Datei geholt, mit der Anweisung “thumbs/{@thumbpath}” bzw. “{@path}” (die Thumbnails liegen in einem Ordner namens “thumbs”, die Bilder für die vergrößerte Darstellung liegen im gleichen Ordner wie die HTML-Datei). Die Funktion onClick im “thumbContainer”-div ermöglicht das interaktive Verhalten, so dass im “main”-div das jeweils angeklickte Bild erscheint. Darunter werden die Stichwort-Tags für das Bild aufgeführt – alternativ kann man hier auch andere Photo-Attribute aus der XML-Datei aufführen.
Das Spry-Framework enthält auch eine Reihe von Ajax-Funktionen für visuelle Effekte, um die Bildergalerie noch wirkungsvoller in Szene zu setzen. Die fertige Web-Anwendung kann mit der AIR-Technik von Adobe auch als Desktop-Applikation gestaltet werden – das will ich dann demnächst versuchen.
