XML zur Erzeugung eines DHTML-Menüs

Seit dem Aufkommen von XML als Möglichkeit des Datenaustauschs zwischen Server und Client-Browser steht eine weitere Möglichkeit zur Bereitstellung der Menü-Struktur für den Endbenutzer zur Verfügung. Dieser Ansatz bietet eine Reihe von Vorteilen:

• Der Aufbau des Menüs erfolgt nun clientseitig, was den Server entlastet.
• Die XML-Datei muss nur bei Bedarf aktualisiert werden, und nicht jedes Mal, wenn man auf einen internen Link klickt oder die Seite im Browser aktualisiert.
• Die Daten befinden sich nun in einer separaten Datei und sind dadurch deutlich einfacher zu lesen und zu aktualisieren, als wenn sie in den Programm-Code eingebettet wären.

Das DHTML-Menü-Script CoolMenus

Als ich meine private Website überarbeitet habe, habe ich mich nach einem einfach zu benutzenden DHTML-Menü-Script umgeschaut, das ich genau an meine Anforderungen anpassen konnte. Ich habe mich schließlich für das CoolMenus-Script von Thomas Brattli entschieden. Mit ein paar kleineren Änderungen lässt es sich an alle Bedürfnisse anpassen.

Dieselben Konzepte, wie sie hier vorgestellt werden, gelten auch für alle anderen DHTML-Menü-Scripts, die man vielleicht schon benutzt oder aber in Erwägung zieht. Allerdings enthält dieses Script in seiner Originalform die einzelnen Menü-Einträge in einem hart codierten Format. Da es in diesem Artikel darum geht, XML für die Erzeugung der Menü-Einträge zu verwenden, um für maximale Flexibilität zu sorgen, muss man einige Änderungen vornehmen, damit das Script seine Daten aus XML bezieht.

Modifizieren des Menüs für die XML-Unterstützung

Wenn man sich das Script anschaut, wird man erkennen, dass man den Großteil des Codes unverändert belassen kann. Dies bedeutet auch, dass die Kernfunktionen nicht noch einmal getestet werden müssen. Es ist lediglich XML-Prozessor erforderlich, der eine vorhandene XML-Datei verarbeitet und dann deren Inhalt verwendet, um unter Verwendung der derzeitigen Funktionalität des Menüs die Datenstruktur zu füllen, aus der das eigentliche Menü erstellt wird.

Erstellen des Formats der XML-Datei

Es folgt ein Beispiel des hart codierten Menüs im Original-Script, wo eine Funktion mit Parametern aufgerufen wird um jeden Menüeintrag zu erzeugen:

Die Elemente, aus denen die Struktur oder der Baum des Menüs besteht, sind:

• ID – Dies ist ein eindeutiger Bezeichner für jedes Element, der mit einem Buchstaben beginnen muss, um Probleme mit bestimmten Browsern zu vermeiden.
• PARENT ID – Dies ist ein Bezeichner für das Eltern-Element dieses Elements. Fall er null ist, handelt es sich um einen Menü-Eintrag der obersten Ebene.
• LABEL – Dies ist der auf der Benutzeroberfläche anzuzeigende Text.
• URL – Dies ist die URL für das Element, auf das sich das Label bezieht.

Wie man an diesem Beispiel sieht, kann sich das URL-Attribut auf eine Vielzahl von Elementen beziehen – in diesem Fall auf ein Verzeichnis, eine Adobe PDF-Datei oder eine HTML-Seite. Aus Gründen der Einfachheit wird unsere XML-Datei exakt so wie die oben gezeigte Datenstruktur definiert werden, so dass das Format der XML-Datei ungefähr wie Listing A aussehen wird.