XML inladen in Flash

XML inladen in Flash MX (of MX 2004)!

Inleiding:

In mijn zoektocht om XML in te leren laden in Flash kwam ik alleen Engelstalige tutorials tegen, en ik vond ze zelfs niet allemaal even duidelijk.

Na veel proberen heb ik eindelijk de basis te pakken, en deze ga ik delen met jullie! :)

XML basis:

Xml zelf is heel erg simpel, zoals je nu hier zult zien.

</kleurtjes>

</kleurtjes>

</kleuren>

Dit kan waarschijnlijk iedereen begrijpen, we defineren een lijst van kleuren, die bestaat uit kleurtjes die allemaal een kleur hebben!

Sommige kleurtjes hebben ook nog waardes als vrolijk of fel.

Zoals je ziet worden de kleurtjes die geen verdere waarde dan kleur hebben meteen weer afgesloten door in de begin-tag alweer te sluiten dmv />.

Je kunt nu ook meteen zien dat het overzichtbaar houden van XML tags ook verstandig is, dus met inspringen werken telkens als je binnen een object iets nieuws defineert.

Je XML bestand moet in dezelfde map staan als je .swf, of je moet bij de path van je XML aangeven dat hij in een andere folder staat, helaas kan Flash nog steeds niet raden waar je je XML bestand hebt geplaatst.

XML maakt gebruik van de zogeheten parent-child structuur. Dit kan het best uitgelegd worden aan de hand van dit voorbeeld:

kind1

</ouders>

kind2

</ouders>

</grootouders>

Alle ouders zijn kinderen van grootouders, en alle kinderen zijn kinderen van hun ouders.

Belangrijk: Wat tussen <tags>en</tags> staat, is dus een kind van die tags, en geen attribute!

Flash basis:

Om je xml in flash in te laden hoef je helemaal niet zo veel moeite te doen. Het enige wat je hoeft te doen is:

xmlload = "eerstexmltest.xml";

test = new XML();

test.load(xmlload);

En voila! Je hebt je eerst xmlbestand in Flash ingeladen. Wat dus helemaal niet zo moelijk is, nu zit je er alleen nog mee dat je niks met de ingeladen waarden kunt. Dit gaan we nu behandelen.

Flash + XML eindelijk samen!

We gaan nu de ingeladen XML pagina in Flash output geven! Om er voor te zorgen dat als je begint met de XML pagina aan te roepen moeten we eerst ervoor zorgen dat alles is ingeladen voordat Flash begint, dit doen we dmv de onLoad parameter.

xmlload = "eerstexmltest.xml";

test = new XML();

test.onLoad = function(succes){

if(succes){

trace(“Het is gelukt!”);

}

else {

trace(“inladen mislukt!”);

}

test.load(xmlload);

Dit laat wanneer het inladen van je XML is gelukt “Het is gelukt!” zien. Alleen willen we natuurlijk wel meer laten zien dan of het inladen is gelukt.

xmlload = "eerstexmltest.xml";

test = new XML();

test.onLoad = function(succes){

if(succes){

infoover = this.firstChild.nodeName;

trace(infoover);

}

else {

trace(“inladen mislukt!”);

}

test.load(xmlload);

Deze geeft dan de output: kleuren. Wat de eerste tag van je eerstxmltest.xml bestand is. (Of als je al met je eigen .xml bestand bent begonnen krijg je natuurlijk een andere output).

This.firstChild.nodeName firstChild is, als vanzelfsprekend, het eerste ‘kind’ van je .xml bestand, oftewel de eerste tag.

nodeName geeft de naam van de node aan, oftewel wat er tussen de < en > staat.

Dit begint er al meer op te lijken! Nu gaan we de kleuren outputten in een textveld dat we hebben aangemaakt (ik adviseer een groot textveld zodat we alles in een keer kunnen zien, zodat we niet met scrollbars e.d. hoeven te werken.

xmlload = "eerstexmltest.xml";

test = new XML();

test.ignoreWhite = true;

test.onLoad = function(succes){

if(succes){

infoover = this.firstChild;

kleuren = infoover.childNodes;

for(i in kleuren){

test = kleuren[i].attributes;

tekstveld.text += test.kleur + "\n";

}

else {

trace(“inladen mislukt!”);

}

test.load(xmlload);

Nu hebben we al nuttige output! We gaan weer even langs de code:

Er is een belangrijke regel bijgekomen: test.ignoreWhite = true. Deze regel zorgt er voor dat elk wit stuk in het xml bestand (tabs/spaties) word genegeerd als informatie, de spaties tussen <test>e n</test> worden wel bewaard.

De variabele infoover wordt weer de naam van de eerste tag in het XML bestand.

‘kleuren’ wordt een array van alle kinderen van infoover. Oftewel alle kleuren!

‘for(i in kleuren)’ dit doorloopt alle waarden in de array kleuren. (Pas op! Dit gaat de array wel van achter naar voor af!)

‘test = kleuren[i].attributes’ de variabele test wordt een object die alle attributes van kleuren[i] bevat. En kleuren[i] is telkens 1 childNode van infoover.

‘tekstveld.text += test.kleur’ Aan de text van het tekstveld wordt de waarde kleur van het object test toegevoegd, wat dus staat voor de attribute van een van de childNodes van infoover.

Nu gaan we nog iets verder, we willen ook nog de informatie die tussen de <kleurtjes> tags staat toevoegen.

Eerst moeten we kijken of de childNode van <kleuren> zelf childNodes heeft. Dit doen we met de hasChildNodes(); functie.

En dan willen we de naam nog van die childNode opvragen, dat doen we met nodeName. En de informatie opvragen die tussen die tags staan vragen we op met nodeValue! Pas op! nodeName zit een niveau hoger dan nodeValue! Dit zullen we dadelijk in het voorbeeld zien.

xmlload = "eerstexmltest.xml";

test = new XML();

kleuren = new Array();

test.ignoreWhite = true;

test.onLoad = function(succes){

if(succes){

kleureninfo = this.firstChild;

kleuren = kleureninfo.childNodes;

infoover = this.firstChild.nodeName;

for(i in kleuren){

test = kleuren[i].attributes;

tekstveld.text += test.kleur + " " + infoover +"! \n";

if(kleuren[i].hasChildNodes()){

for(j in kleuren[i].childNodes){

stukjes = kleuren[i].childNodes[j];

tekstveld.text += " "+stukjes.nodeName+": " +stukjes.firstChild.nodeValue + "\n";

}

else {

tekstveld.text = "inladen van: . " + xmlload + " is niet gelukt!";

}

test.load(xmlload);

//negeer de witte stukjes

//Test krijgt dezelfde waarden als de atrributes van kleuren[i]

//als kleuren[i] childNodes heeft:

//voor elke waarde van J die geldig is in kleuren[i].childNodes[j]

//stukjes krijgt de waarde van kleuren[i].childNodes[j]

//aan tekstveld.text wordt de naam van stukjes toegevoegd, en de waarde van het kind van deze node.

Dit is het laatste voorbeeld. En omdat deze iets uitgebreider is, is de uitleg ernaast gegeven.

Ik zal nog even alle xml-tags die je gebruikt met het uitlezen van XML bestanden uitleggen:

firstChild	Het eerste kind van een object, als je deze los gebruikt in de onLoad geeft het het hele XML bestand terug
nodeName	Geeft de naam van het gespecificeerd xml object terug. Vb. this.firstChild.nodeName geeft de naam de eerste tag in het XML bestand.
hasChildNodes()	Geeft true of false terug. Als het xml bestand childNodes heeft geeft het true terug.
nodeValue	Geeft de waarde terug van de informatie die tussen de tags staat.
nodeType	Geeft 1 of 3 terug, 1 als de gespecifeceerde node een xml-object is, en 3 als de node tekst is.
atrributes	Geeft alle attributes van een node terug. Deze attributes zijn alleen aan te roepen met de naam die in het XML bestand zelf is gebruikt.
childNodes	childNodes is een array van alle childNodes van een bepaald object. Vb. this.firstChild.childNodes geeft een array terug met alle waardes van de nodes tussen de eerste tags van het XML bestand. Dus this.firstChild.childNodes[0] = “<kleurtjes kleur='bruine'><vrolijk>nee</vrolijk></kleurtjes>” Als je XML bestand gebruik boven in deze pagina.

Bedankt voor het lezen van deze tutorial!

Klik hier als je een punt wil geven. (wat zeer waardeert wordt!)