Das Erstellen von Menü-Einträgen mit Hilfe einer XML-Datei, die dynamisch auf jeder Seite aktualisiert werden kann, ermöglicht die Kombination allgemeiner mit Benutzer- und Seiten-spezifischen Elementen. Dieser Ansatz erlaubt die Erzeugung eines einheitlichen Menüs, ohne alle möglichen Varianten separat programmieren zu müssen.
Wer bereits einmal ein DHTML-Menü-Script verwendet hat, wird wissen, dass man dabei eine Liste aller Menüeinträge bereitstellen muss, aus denen die eigentlichen Menüs bestehen. Obwohl die Bereitstellung einer hart codierten Liste bzw. eines Arrays für kleine oder unkomplizierte Websites relativ einfach ist, wird diese Aufgabe zunehmend komplexer, wenn es um eine Anwendung im Unternehmensmaßstab geht. Bei solchen Anwendungen möchte man die einzelnen Menü-Optionen vielleicht abhängig von mehreren Faktoren anpassen, wie z. B.:
- angemeldeter Benutzer-/Gast-Account
- Gruppen, bei denen der Benutzer Mitglied ist
- der Teil der Website, auf dem sich der Benutzer gerade befindet
- ob der Benutzer über spezielle Verantwortlichkeiten verfügt
- ob sich der Benutzer in einem abweichenden Modus befindet (z. B. Bearbeiten)
Man könnte für jede mögliche Kombination in der Anwendung ein hart codiertes Array erstellen, doch ist absehbar, dass dies schnell nicht mehr zu bewältigen sein dürfte. Außerdem müssten all diese Varianten vom Client heruntergeladen werden, so dass der Download schnell einen größeren Umfang annehmen kann.
Dynamisches Erstellen der Menü-Einträge
Die offensichtliche Lösung dieses Problems ist das dynamische Erstellen der Menü-Einträge innerhalb der Anwendung. Das könnte z. B. durch folgenden Code geschehen:
Die Erstellung eines Menüs könnte im Ergebnis aus mehreren Einzelteilen bestehen, so z. B.:
- aus unterschiedlichen Teilen des Anwendungs-Codes (wie im obigen Beispiel)
- aus einer Datenquelle, z. B. könnte in einer Datenbank eine Liste für jede Benutzergruppe vorhanden sein
- aus einigen Standard-Komponenten, z. B. einem Link zur Startseite
Das endgültige Menü kann entweder ausschließlich von einem dieser Faktoren oder – was wahrscheinlicher ist – von einer Kombination mehrerer Faktoren abhängen. Sobald diese Datei erstellt ist, kann sie dynamisch in die endgültige Ausgabe eingebunden werden, die zum Browser des Clients geschickt wird, um als Teil der Benutzeroberfläche dargestellt zu werden. Viele Varianten gängiger DHTML-Menü-Scripts ermöglichen eine solche Definition der Struktur, üblicherweise mithilfe einer Datenbank. 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[1] 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[2] aussehen wird.
Wer auch Nicht-IE-Browser unterstützen will, sollte diesen Teil des Codes entsprechend modifizieren.
Da es nun eine Referenz auf das XML-Objekt gibt, kann man die XML-Datei laden. Diese ist in der Variablen url_xmlFile enthalten. Mit diesem Objekt ist es möglich, alle in der XML-Datei enthaltenen Menü-Einträge herauszuziehen, um sie in ein Array zu packen. Die Einträge werden durch den menuitem-Tag identifiziert:
Sobald sich alle Einträge in einem Array befinden, sollte man sie der Reihe nach durchgehen können, um die Parameter für die Standard-Funktionen des DHTML-Menüs bereitzustellen. Es gibt zwei Hauptunterschiede zwischen dem hart codierten Script oben und dem XML-Beispiel. Erstens: Für Menü-Einträge der obersten Ebene wurde in der XML-Datei eine 0 verwendet statt null im Original-Code. Zweitens: Die Nummern der Menü-Elemente in der XML-Datei haben noch kein alphanumerisches Präfix erhalten. Also muss man diese beiden Aufgaben innerhalb der Funktion erledigen. Wenn man dies berücksichtigt, sieht das Script schließlich aus wie das in Listing B[3].
Nun kann der hart codierte Teil des Menüs des Scripts durch den neuen dynamischen XML-Prozessor ersetzt werden, wobei der Rest des Codes für das DHTML-Menü-Script unangetastet bleibt.
Bereitstellung von Menü-Einträgen
Mit diesem Ansatz können die Menü-Einträge in einer XML-Datei bereitgestellt werden. Sobald diese mit dem unveränderten Rest des CoolMenus-Scripts kombiniert wird, erhält man ein funktionierendes DHTML-Menü[4] auf XML-Basis.
Dieser Artikel dürfte eine ausreichende Grundlage für die Verwendung dieser Methode in eigenen Anwendungen bieten. Die Aktualisierung der XML-Datei hängt von einer Vielzahl von Faktoren ab, die je nach Anwendung variieren, weshalb dieser Aspekt hier nicht behandelt wurde. Auch die Vorgehensweise beim Erstellen der verwendeten XML-Datei bleibt jedem Anwender selbst überlassen.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/
[4] = http:/