[TUTORIAL] laden und verarbeiten von XML Dateien (basics)

[pape]

Hi!

Es kam heute(gestern) die Frage auf, wie das funktioniert mit den XML-dateien!

ich habe mich dann mal wieder hingesetzt und es recht ausfühlich erklärt!

viel Spaß und Erfolg!

Einleitung:
Ich erkläre alles was man benötigt und werde Beispiele geben, sodass es verständlich sein sollte, was nun kommt!!!

1.
Zunächst werde ich kurz darauf eingehen, wie ein XML-file aufgebaut ist und wie man per Flash die Daten auslesen kann!

2.
Dann werde ich zeigen, wie man diese Daten weiter verarbeiten kann!

3.
...und dann wird jeder der das hier gelesen hat das Ganz einfach an seine bedürfnisse anpassen können und weiter verwenden können!

Soo... jetzt nicht erschrecken-.. hört sich viel an.. ist es aber nicht.. zumindest ist es nicht so schwierig wie man vielleicht glaubt!

warum ich das mache?
weil es sinnlos ist scripts zu kopieren die man nicht versteht!(wie geschehen.. da war für etwas vergleichbares nen script mit ca 400 zeilen notwendig...)

Daher erkläre ich es jetzt noch ml in Ruhe und dann kann jeder selbst sein erworbenes Wissen immer wieder auf Probleme in der Zukunft anwenden was XML basics betrifft und man ist gerüßtet (oder zumindest kann man auf eigenen Beinen stehen) wenns um das arbeiten mit XML geht!!!

Aber genug von dem gesültze!
wollen wir loslegen....

Bis gleich!
ich mach mich jetzt mal ran ein Beispiel zu nr.1 zu bauen!

mfG,
Robert

[pape]

ich hoffe ich mache keine Fehler!
wenn irgendjemand was entdeckt dann sagt mir bitte bescheid!

1. Die XML-file

Das hier ist eine typische XML file:
(die files werden mit der Endung*.xml abgespeichert"
z.b. xmlfile.xml)

<?xml version='1.0' encoding='utf-8'?>
  <knoten>
    <kindknoten name="Element eins" beschreibung="Beschreibung 1" />
    <kindknoten name="Element zwei" beschreibung="Beschreibung 2" />
    <kindknoten name="Element drei" beschreibung="Beschreibung 3" />
  </knoten>

die erste zeile gibt an, dass nun ein XML code folgt (gibt die Xml-version und das encoding an, wie man sieht) und ist zunächst nicht weiter wichtig.

Diese Zeile brauchst du grundsätzlich nur zu kopieren und an den Anfang der Xml-datei zu schreiben!

als nächstes Folgt der erste Knoten (childNode - später mehr dazu)!
da muss nicht knoten stehen!
da kann auch z.b. <Songlist> oder <Images> stehen!
man sollte hier hinschrieben, was man halt benutzt!

dann folgen die kindknoten (auch childNodes - später mehr dazu).
Diese, wie man sieht, liegen in dem ersten childNode
diese beinhalten jeweils den kindknoten (childnode) namen und dann weiter variablen: indem beispiel name und beschreibung!
(nicht verwirren lassen! - name einmal in der XML file des Child nodes und einmal name als variable die wir später auslesen werden!)

Die Variablen werden alle als String behandelt - also müssen sie alle in "" stehen! (auch nummenr z.b.: <meinElement nummer="10" />)
die eintzelnen ChildNodes werden am ende auch direkt wieder geschlossen mit />

man sollte hier zunächst keine Sonderzeichen wie ~"§$%&/()=? benutzen (diese könnten aber noch funktionieren - viel schlimmer sind ä,ü,ö...) da so etwas öfters Probleme macht!
(das ist aber ein anderes Thema und würde jetzt den Rahmen sprengen!)
zumerken ist für den Anfang nur, dass man es vermeiden sollte Sonderzeichen zu verwenden um unnötige Fehler zu vermeiden!

am Ende wird der erste childNode (<knoten>) wieder geschlossen (</knoten>

das ist HTML sehr ähnlich!

die daten aus dem XML-file sind also so angeordnet:

childNode
-- childNode
-- childNode
-- childNode
-- childNode

und eines der eigentlichen Elemente wäre dann anzusprechen mit
childNode[0].childNode[nr]
diese Verhalten sich glücklicher Weise wie arrays und beginnen mit der Nummer 0!
daher wäre das erste Element so anzusprechen:
childNodes[0].childNodes[0]
und z.b. das letzte
childNodes[0].childNodes[3]

diese ChildNodes besitzen Attribute in denen nun unsere Variablen stehen!
die attribute bei uns heißen name und beschreibung!

so viel zum Aufbau der XML-File da ist mehr möglich aber dieses XML-Wissen reicht erstmal schon um das ein oder andere Problem zu bewältigen)!

weiter geht es jetzt gleich mit dem Auslesen Der Xml-file mit Flash!

bis gleich,
Robert

p.s. hier gibbet noch kleine bsp datei ..ist ja noch nix großartig passiert...

[pape]

2.XML-file auslesen mit Flash

zunächst müsen wir ein neues XML-Objekt erstellen worin die ganzen XML-functionen ablaufen werden!

das machen wir mit

var XMLdaten = New XML();//erstellt ein neues XML Objekt 
 
 

dann teilen wir dem Objekt mit, dass es die leerzeichen(spaces) in der file ignorieren soll (sonst hätten wir alles aneineander schreiben müssen->unübersichtlich)

XMLdaten.ignoreWhite=true; // ignoriert die leerRäume (spaces) inder XML-file 
 
 

dann müssen wir die Datei in das objekt laden:

XMLdaten.load("XMLfile.xml");//lädt die XML-file 
 
 

hier gibt man natürlich die Datei an, die man vorher abgespeichert hat!

wenn nun die Daten geladen werden müssen wir darauf reagieren um sie auszulesen:

XMLdaten.onLoad = function(success) {...}//wenn die Datei geladen wird
//das success benötigen wir um zu prüfen ob das laden erfolgreich war! 
 
 

dann erstellen wir uns zwei arrays (so viele wie wir in der XML fiel attribute für die childNodes haben)
in diese schrieben wir gleich die ausgelesenen Daten!

XMLdaten_namen = []; // Erstellt ein neues Array namens XMLdaten_namen
XMLdaten_beschreibung = []; // Erstellt ein neues Array namens XMLdaten_beschreibung 
 
 

nun gucken wir ob das laden erfolgreich war

if (success) { ...}//wenn das laden der File erfolgreich war 
 
 

wenn es das war dann gehen wir alle elemente der Datei in einer for schleife durch:

for (var i=0; i<XMLdaten.firstChild.childNodes.length; i++) {...}
//damit man nicht verwirrt ist:
//XMLdaten.firstChild.childNodes == XMLdaten.childNodes[0].childNodes
//erstes element in der XML file soll ausgelesen werden.. und zwar alle 
//elementedie sich in dem ersten childNode befinden (childNodes[0])
//diesen bezeichnet man auch als firstChild
//was auch geht firstChild.firstChild.firstChild...usw.. das können wir hier aber
//nicht gebrauchen!
//.length gibt die Anzahl an Elementen im childNode wieder! 
 
 

nun beginnt das eigentliche Auslesen!

mit

XMLdaten.firstChild.childNodes[i] 
 

greifen wir auf das (in der for schleife) aktuelle Element zu!
(noch mal an den aufbau der file erinnern u ggf. noch mal oben nachlesen!)

um ein attribut eines Elements auszulesen benötigen wir die eigenschaft ".attributes."
wir lesen das Attribut aus und schreiben es uns in unser Array!

XMLdaten_namen[i] = XMLdaten.firstChild.childNodes[i].attributes.name; //namen Attribut
//des aktuellen Elements auslesen und ins XMLdaten_namen
//array schreiben
XMLdaten.firstChild.childNodes[i].attributes.beschreibung; //beschreibungs Attribut
//des aktuellen Elements auslesen und ins XMLdaten_beschreibung
//array schreiben 
 
 

das machen wir solange bis wir unser Array mit allen daten gefüllt haben (dank der for-schleife)

wenn das alles geschehen ist sind die daten bereit und wir gehen weiter im Film um dann die Daten zu verarbeiten/weiter zu verwenden
(man könnte das ganze auch in einer Frame machen! aber ich denke es ist so erst einmal leichter zu überblicken wann was geschieht)

//das auslesen ist nun abgeschlossen, da die for schleife beendet ist!
//also gehen wir weiter im Film zum verarbeiten der XML-dateien
gotoAndStop(2); 
 

Das vollständige "auslese" script sieht demnach so aus:

stop();//in Frame (1) stehen bleiben
var XMLdaten = new XML();//erstellt ein neues XML Objekt
XMLdaten.ignoreWhite=true; // ignoriert die leerRäume (spaces) inder XML-file
XMLdaten.load("XMLfile.xml");//lädt die XML-file
XMLdaten.onLoad = function(success) {//wenn die Datei geladen wird
    XMLdaten_namen = []; // Erstellt ein neues Array namens XMLdaten_namen,
                        //hier speichern wir die Variablen wo name="..."steht
    XMLdaten_beschreibung = []; // Erstellt ein neues Array namens XMLdaten_beschreibung,
                        //hier speichern wir die Variablen wo beschreibung="..."steht
    if (success) { //wenn das laden der File erfolgreich war
        for (var i=0; i<XMLdaten.firstChild.childNodes.length; i++) {//for schleife-> für
                                    //alle elemente die firstChild (childNode[0]) besitzt...
            XMLdaten_namen[i] = XMLdaten.firstChild.childNodes[i].attributes.name; //namen Attribut
                                        //des aktuellen Elements auslesen und ins XMLdaten_namen
                                        //array schreiben
            XMLdaten_beschreibung[i] = XMLdaten.firstChild.childNodes[i].attributes.beschreibung;
                      //beschreibungs Attribut
                      //des aktuellen Elements auslesen und ins XMLdaten_beschreibung
                      //array schreiben
        }
        //das auslesen ist nun abgeschlossen, da die for schleife beendet ist!
        //also gehen wir weiter im Film zum verarbeiten der XML-dateien
        gotoAndStop(2);
    }
} 
 

bis später!

mit freundlichen Grüßen,
Robert

P.s:
bei Fragen natürlich einfach fragen!
ich erkläre nicht verstandenes gerne noch mal genauer!

p.p.s danke @ salzar für weiter unten von ihm genannte bessere Möglichkeit die daten auszulesen bzw. das script etwas zu optimieren! thx!
habe die dateien und die scripts aktuallisiert!

[pape]

3. Das verarbeiten der geladenen XML-Daten in Flash

...nun können wir ganz bequem auf unsere eben erstellten Arrays (XMLdaten_namen und XMLdaten_beschreibung) zugreifen wie auf jedes andere Array auch:

das:

trace(XMLdaten_namen[0]); 
 

würde z.b. "Element eins" ausgeben!
Zum vergleich mal in die XMLfile gucken:
dort steht beim namen Attribut des ersten Elements name="Element eins" !

das:

trace(XMLdaten_namen[1]); 
 

würde z.b. "Element zwei" ausgeben!
Zum vergleich mal in die XMLfile gucken:
dort steht beim namen Attribut des zweiten Elements name="Element zwei" !

...usw...

genau so funktioniert es mit dem beschreibungs array:

trace(XMLdaten_beschreibung[1]); 
 

ausgabe : Beschreibung 2

wie wir sehen hat die Übergabe der Daten funktioniert!

um ganz sicher zugehen, ob auch wirklich alle Element übergeben worden sind können wir uns auch direkt das ganze Array aus-tracen:

trace(XMLdaten_namen);
//ausgabe in unserem beispiel:
//Element eins,Element zwei,Element drei 
 
 

genauso das andere Array mit den beschreibungs-attributen:

trace(XMLdaten_beschreibung);
//ausgabe in unserem beispiel:
//Beschreibung 1,Beschreibung 2,Beschreibung 3 
 
 

es hat also alles wunderbar geklappt!

das wars auch eigentlich schon!

Was wir nun mit den Werten machen ist egal!
aber so wie beschrieben können wir auf sie zugreifen!
die Fla's findet ihr im Anhang!

vielleicht ein Beispiel zum verwenden der Daten zur Veranschaulichung des Vorgangs:
angenommen wir möchten dynamisch viele textfelder erzeugen und in sie auch dynamischen text schreiben...
->XML macht es möglich:

in die XML File schreiben wir:
(Filename: textfelder_daten.xml)

<?xml version='1.0' encoding='utf-8'?>
  <felder>
    <feld anzeige="Textfeld eins"/>
    <feld anzeige="Textfeld zwei"/>
    <feld anzeige="Textfeld drei"/>
    <feld anzeige="Textfeld vier"/>
    <feld anzeige="Textfeld fuenf"/>
    <feld anzeige="Textfeld sechs"/>
  </felder>

wir erstellen einen neuen Flashfilm und schreiben in das erste Bild die uns nun schon bekannte auslese Methode der XML-file:

stop();
var XMLdaten = new XML();
XMLdaten.ignoreWhite=true;
XMLdaten.load("textfelder_daten.xml");
XMLdaten.onLoad = function(success) {
    anzahl = XMLdaten.firstChild.childNodes.length; //liest die anzahl der elemente aus!
    anz = []; //neues array
    for (var i=0; i<anzahl; i++) {
            anz[i] = XMLdaten.firstChild.childNodes[i].attributes.anzeige;//auslesen
    }
    gotoAndStop(2);
} 
 

in das zweite Bild kommt das:

stop();//film stehen lassen (frame 2);
for (var i=0; i<anzahl; i++) {//wieder alle elemente durch gehen
    // neues textfeld auf _root
    //das i*20 dient dazu die Textfelder unter einander zu positionieren!
    _root.createTextField("teext"+i, i, 10, i*20, 0, 0);
    // autoSize = true wegen dynaisch langem Inhalt
    _root["teext"+i].autoSize = true;
    //text aus array dem entsprechenden Textfeld zuweisen
    _root["teext"+i].text = anz[i];
} 
 

So es war einigermaßen verständlich, oder?!

wenn es Fragen gibt, dann fragt!
Es gibt keine dummen Fragen!
...und wie gesagt, ich erkläre nicht verstandenes gerne noch mal genauer!


Ich hoffe es haben sich keine Fehler eingeschlichen!
Ich habe alles getested und daher sollte es funktionieren!
Aber es kann immer schon mal sein, dass man sich hier dann doch noch mal vertippt!
wenn jemand Fehler findet oder Verbesserungsvorschläge hat, dann bitte kurz bescheidgeben, damit ich das ändern kann!

nochmal viel Spaß/Erfolg damit!

würde mich über kommentare und konstruktive Kritik/verbesserungsvorschläge usw. freuen!

greetz,
Robert


P.s:
Anhang
Beispiel Fla'S:
(1) beispiel - fla aus meinem Tutorial.
(2) beispiel fla - Anwendungs-Beispiel (dynamische Textfelder erzeugen).

und nen special @ wurscht:
(3) beispiel fla - Anwendungs-Beispiel (RollOver bei Buttons in Verbindung mit TextFelder).

[salazar]

servus pape,
sehr fein! respekt... schönes tut! alles soweit sehr gut erklärt...
weiter so!...

cya, sal

[rena]

Wow ... danke.

Das klingt sehr gut, ausführlich und umfangreich ... hab's mal im Tut-Board verlinkt.
XML und Flash

Danke und Gruß
Rena

[salazar]

gucke es mir grad nochmal genauer an... da ist mir aufgefallen das du diese passage hier auch eleganter lösen kannst:

PHP-Code:

stop(); 
var XMLdaten = new XML(); 
XMLdaten.ignoreWhite=true; 
XMLdaten.load("textfelder_daten.xml"); 
XMLdaten.onLoad = function(success) { 
    fertig = false; 
    anzahl = XMLdaten.firstChild.childNodes.length; //liest die anzahl der elemente aus! 
    anz = []; //neues array 
    for (var i=0; i<anzahl; i++) { 
            anz[i] = XMLdaten.firstChild.childNodes[i].attributes.anzeige;//auslesen 
    } 
        fertig = true; 
} 

this.onEnterFrame = function () { 
    if (fertig) { 
        delete fertig; 
        delete this.onEnterFrame; 
        this.gotoAndStop(2); 
    } 
} 


nämlich so. aber vorsicht. im prinzip gehts so, aber hatte noch keine zeit es zu testen... so kannste aber auf die onEnterFrame verzichten. wenns nicht funzt ist es bestimmt nur nen kleiner syntax fehler..

PHP-Code:

stop(); 

var XMLdaten = new XML(); 
XMLdaten.ignoreWhite=true; 
XMLdaten.load("textfelder_daten.xml"); 
XMLdaten.onLoad = function(success) { 
    if(success){
        anzahl = XMLdaten.firstChild.childNodes.length; //liest die anzahl der elemente aus! 
        anz = []; //neues array 
        for (var i=0; i<anzahl; i++) { 
            anz[i] = XMLdaten.firstChild.childNodes[i].attributes.anzeige;//auslesen 
            if(i >= anzahl){
                this.gotoAndStop(2); 
            }
        } 
    }
} 


cya, sal

[salazar]

oder so:

PHP-Code:

stop(); 

var XMLdaten = new XML(); 
XMLdaten.ignoreWhite=true; 
XMLdaten.load("textfelder_daten.xml"); 
XMLdaten.onLoad = function(success) { 
    if(success){
        anzahl = XMLdaten.firstChild.childNodes.length; //liest die anzahl der elemente aus! 
        anz = []; //neues array 
        for (var i=0; i<anzahl; i++) { 
            anz[i] = XMLdaten.firstChild.childNodes[i].attributes.anzeige;//auslesen 
        } 
        this.gotoAndStop(2); 
    }
} 


probiers mal aus... cya, sal

[salazar]

scripten macht schon spaß! bin jetzt auch grad fleißig dabei.. hey pape. nicht böse gemeint oder so. super arbeit, aber du meintest ja wenn jemand noch ideen hat... ich tobe mich einfach mal aus... muß mich ablenken..

du kannst doch eigentlich auch komplett auf das 2 frame system im tut part 3 verichten...

PHP-Code:

stop(); 

var XMLdaten = new XML(); 
XMLdaten.ignoreWhite=true; 
XMLdaten.load("textfelder_daten.xml"); 
XMLdaten.onLoad = function(success) { 
    if(success){
        anzahl = XMLdaten.firstChild.childNodes.length; //liest die anzahl der elemente aus! 
        anz = []; //neues array 
        for (var i=0; i<anzahl; i++) { 
            anz[i] = XMLdaten.firstChild.childNodes[i].attributes.anzeige;//auslesen 
            _root.createTextField("teext"+i, i, 10, i*20, 0, 0); 
            _root["teext"+i].autoSize = true; 
           _root["teext"+i].text = anz[i]; 
        }
    }
} 


cya, sal

[pape]

@rena : thx!
@salzar: wie recht du hast!!!! oh man.... das ich da nicht sleber drauf gekommen bin.... grml....

soviel zum thema optimieren und performance freundlich... ich ändere es oben!

btw: es geht mit gotoAndStop(2);
nicht mit this.gotoAndStop(2).. this bezieht sich da auf das XML Objekt

aber es könnte u.U probleme geben, wenn man einfach gotoAndStop(2); schreibt oder?...

grz

[salazar]

vergiss gotoAndStop(2);
cya, sal

ps
ist salzar nicht mexikanisch?

[pape]

aber dann bleibt wohl nichts anderes übrig, als
sowas:

tl = _root
//...
tl.gotoAndStop("weiterverarbeiten"); 
 

hmm... des ist nich gut...

du kannst doch eigentlich auch komplett auf das 2 frame system im tut part 3 verichten...

ne...also könnte schon(wäre auch sehr sinnvoll!!-- oder zumindest mit etwas wie gotoAndStop("bilmakierung"); statt Frame nr...)
aber dann wird es für anfänger denke ich schnell unverständlich...
Edit:
zumal hier das erste mal was mit den daten getan wird!
..da glaube ich solte man das script zunächst isoliert sehen um es besser zuverstehen..
oder was meinst du?

mal schaun.. vielleicht gibt es ja noch nen weiteren part...
dann werde ich es dort auf jeden Fall so machen!

Dass das nicht böse gemeint ist weiß ich übrigens

bin ja froh wenn sowas gesagt wird, weil ich dann was dabei lerne!
also danke!

grz

[weltraumpfleger]

Erstmal danke an euch 2, prima arbeit

Ich hätte da noch ein zwei Fragen, ich glaube es liegt daran das ich das mit den childNodes noch nicht so ganz verstanden hab.

Ich mach es am besten mal an einem konkreten Beispiel fest was ich mir ausgedacht habe, vielleicht ist ja schon der Aufbau von der XML datei eher ungünstig...

So sieht die XML datei aus:

<?xml version='1.0' encoding='utf-8' ?>
<musikliste>
	<cdtitel name="CD1" ordner="sound/CD1">
		<songtitel name="Song1" beschreibung="von dem und dem" />
		<songtitel name="Song2" beschreibung="von diesem und jenem" />
	</cdtitel>
</musikliste> 

Also sie soll hier zB cdtitel und cdsongs beinhalten.
Jetzt hätte das ganze am liebsten in einem Assoziativen Array, aber ich bekomms grad nich so hin die Schleife umzubauen...
das array sollte dann so aussehen: musikArray[cdtitel][songtitel]
is das möglich?

[pape]

machstes halt so:

anzahlCDs = XMLdaten.firstChild.childNodes.length;
anzahlCDtitel = []; //neues Array
for (var i=0; i<anzahlCDs; i++) {//alle CDs durchgehen
    //länge der songtitel Ojekte der jeweiligen CD auslesen und ins array schreiben
    anzahlCDtitel[i] = XMLdaten.firstChild.childNodes[i].childNodes.length;
}
namen = [];
beschreibungen = [];
for (var i=0; i<anzahlCDs; i++) {//für jede CD
    namen[i] =[];
    beschreibungen[i] = [];
    for (var j=0; j<anzahlCDtitel[i]; j++) {//für alle Songs der jeweiligen CD
        //auslesen
        namen[i][j] = XMLdaten.firstChild.childNodes[i].childNodes[j].attributes.name;
        beschreibungen[i][j] = XMLdaten.firstChild.childNodes[i].childNodes[j].attributes.beschreibung;
    }
}
 
//zugriff aufs z.b. namen array
trace(namen[cd][titel]); 
 

habs nicht getestet. aber wie es funktioniert sollte jetzt klar sein...und eigentlich sollte es auch funktinoieren.. habe aber grad keine zeit zum testen..

grz
Robert

[warrantmaster]

Zitat von pape

aber dann bleibt wohl nichts anderes übrig, als
sowas:

tl = _root
//...
tl.gotoAndStop("weiterverarbeiten"); 
 

hmm... des ist nich gut...

was willst du in einem anderen frame als frame 1 ?
leg die nachfolgenden aktionen in eine funktion und ruf diese im onload auf.