Teil 1: XML-Daten auslesen
Der wichtigste aber trotzdem noch der einfachste Schritt zum Erstellen eines TYPO3-Flashmenüs ist das Auslesen und Auswerten der XML-Datei die unser zukünftiges Flashmenü mit den Daten versorgt.
Die in diesem Tutorial verwendete Extension zur Erzeugung dieser XML-Datei heißt tox_xmlmenu und wurde von mir extra für solche Geschichten geschrieben. Ihr könnt euch die Extension samt einer kleinen Installationsanleitung hier herunterladen. Dort ist ausführlich beschrieben, wie man die XML-Datei anpasst und erstellt - deshalb bin ich jetzt mal so frei und überspringe ich diesen Punkt einfach.
Ziele
Nach diesem Tutorial könnt ihr folgendes:
- Mit Flash auf eine externe XML-Seite zugreifen
- Die einzelnen Menüpunkte inklusive aller Parameter auslesen und anzeigen
Wir werden in diesem Tutorial auf die besagte XML-Datei zugreifen, uns dort die Daten holen falls die Verbindung geklappt hat und anschließend per "trace"-Befehl ausgeben. Es ist also noch nichts wirklich spektakuläres und auch noch nichts wirklich visuelles aber dieser Schritt ist nun mal nötig, da das spätere Flashmenü darauf aufbaut.
XML-Objekt erstellen
Der gesamte ActionScript-Code dieses Teil-Tutorials wurde in der Root-Szene auf Bild 1 erstellt - die Datei habe ich xml_laden.fla genannt. Hier wird später auch unser Menu-Objekt erstellt... aber dazu mehr im nächsten Tutorial.
Flash verfügt über einen XML-Parser, den wir nutzen werden um die Daten einzulesen. Der Syntax dafür ist einfach:
var xml = new XML();
xml.onLoad = load;
xml.ignoreWhite = true;
xml.load("http://www.mortox.de/index.php?id=7");
Es wird ein neues xml-Objekt erzeugt, dem wir mit der load-Methode die URL zuweisen, auf der sich die XML-Datei befindet. ignoreWhite bedeutet, dass leere Textknoten ingoriert werden. Das sollte zwar mit tox_xmlmenu garnicht erst vorkommen, aber wenn ihr andere extensions verwendet ist das evtl. sicherer. Mit xml.onLoad weisen wir dem Objekt xml die Event-Methode "load" zu. Diese wird aufgerufen, wenn der Ladevorgang der XML-Datei zuende ist, oder nicht geklappt hat. Die load-Funktion muss natürlich erst noch von uns definiert werden.
Die load()-Funktion
Die load-Funktion nimmt ein Argument entgegen, dass vom Typ "Boolean" ist - also true oder false. Das ist wichtig, damit wir wissen, ob das Laden der XML-Seite geklappt hat (true) oder in die Hose gegangen ist (false).
Hier zunächst der ActionScript-Code:
_root.error._visible = false;
function load(success:Boolean) {
_root.loading._visible = false;
if(success) {
//Knoten anzeigen
display(xml.firstChild.childNodes,1);
}
else {
_root.error._visible = true;
}
}
Halt - das steht ja noch was vor der Funktion... Hier wird ein Movieclip auf der Bühne mit dem Namen "error" ausgeblendet. Warum? Um irgendwie festzustellen, ob der Zugriff auf die XML-Datei stattgefunden hat, noch am Laden ist oder komplett fehlgeschlagen ist, gibt es zwei Movieclips die uns das mitteilen - einen namens "error" und einen namens "loading". Beide werden auf der Bühne erstellt und je nach Bedarf ein- oder ausgeblendet.
Zur load-Funktion: Zuerst wird der MovieClip "loading" ausgeblendet, da der Vorgang beendet ist. Hat das Laden geklappt - success ist true - wird die display-Funktion aufgerufen. Diese dient erstmal nur zur Ausgabe der Daten, später werden wir eine Funktion schreiben, die uns ein Menu-Objekt erzeugt. Falls das Laden fehlgeschlagen ist, wird der MC "error" angezeigt.
Daten Anzeigen
Nun müssen die Menüdaten nur noch angezeigt werden. Das übernimmt die display()-Funktion.
Actionscript:
function display(array:Array, depth:Number) {
//Nur fürs optische Einrücken zuständig
var indent:String = "";
for(var k:Number = 1; k < depth; k++) {
indent += " ";
}
//Gibt den Inhalt des Arrays aus
for(var i:String in array) {
for(var j:String in array[i].attributes) {
trace(indent + j + " => " +array[i].attributes[j]);
}
if(array[i].hasChildNodes()) {
display(array[i].childNodes, depth+1);
}
trace(indent + "-----------");
}
}
Da wir nicht wissen, wieviel Menüebenen wir durchlaufen müssen, ruft sich die Funktion selbst immer wieder rekursiv auf, bis alle Knoten abgearbeitet sind. Der "indent"-String ist lediglich für das optische Einrücken der Informationen gedacht und wird je nach Menüebene immer größer.
Die eigentliche Funktionalität steckt in der Schleife darunter. Das übergebene Array wird durchloffen und alle Attribute die der Knoten besitzt werden untereinander ausgegeben. Nun wird geprüft, ob der Knoten weitere Kinderknoten hat (hasChildNotes). Ist dies der Fall, wird die display()-Funktion nochmals aufgerufen, allerdings diesmal mit den Kinderknoten und eine Ebene Tiefer (depth+1)!
Am Ende eines jeden Menüpunkts wird ein Strich gezogen um die Attribute optisch zu trennen.
Hat alles geklappt, sollte die trace-Ausgabe ungefähr so aussehen:
- Traceausgabe der XML-Datei
Schlusswort
Das hilft uns zwar jetzt noch nicht sooo viel weiter aber wir haben die Daten immerhin schon mal in Flash verfügbar und können damit arbeiten. Das nächste Tutorial wird sich damit beschäftigen, wie man die Daten in einer "Menu"-Klasse ablegt und weiterverarbeitet.
