ceci viens de ce que j'ai appris et de mon expereience donc c'est a prendre au conditionnel, c'est pas parfait et améliorable
1. Le format XML
1.1 les nodes
le format xml est un format basée sur des balises (comme le html)
une balise s'ouvre <nom de la balise> et se ferme </nom de la balise> donc pour fermer on rajoute juste / devant le nom de la balise a noter que s'il n'y a rien entre la balise ouvrante et la balise fermante on peut directement fermer la balise ouvrante
<nom de la balise />
donc en mettant un / a la fin du nom de la balise
en xml l'ensemble <nom de la balise>contenue</nom de la balise> est appelé un node, ou nœud en français mais comme dans flash le mot utiliser est node j'utiliserai node pour la suite de ce tuto
1.2 nom de node
un node a un nom de node (nodeName) qui correspond en faite au nom de la balise donc dans
<image/>
le nom du node est image
1.3 attributs
un node peut avoir 0 ou plusieurs attribut
<image url="image1.jpg" nom="mes vacances"/>
le node image a 2 attributs: url et nom url a pour valeur “image1.jpg” et nom “mes vacances”
1.4 contenue de node
un node peut avoir du contenue au format texte
<image url="image1.jpg">mes vacances</image>
le node image a un attribut url et a pour contenue “mes vacances”
un node peut contenir d'autre node
<image > <url lien="image1.jpg"/> <texte>mes vacances</texte> </image>
le node image contient 2 nodes: url et texte le node texte a un attribut lien et pas de contenue le node texte n'a pas d'attribut et a pour contenue “mes vacances”
donc au final un node peut avoir 2 types de contenues: texte ou nodes il me semble qu'il est mieux d'éviter de mélanger les deux ainsi plutôt que d'avoir
<image > <url lien="image1.jpg"/> mes vacances </image>
il est mieux de faire
<image > <url lien="image1.jpg"/> <texte>mes vacances</texte> </image>
1.5 la balise CDATA
on peut mettre du texte au format html dans contenue d'un node cependant le format html étant aussi un format a base de balise il pourrait y avoir des conflits
<texte> <b>mes vacances</b> </texte>
ici on veut que mes vacances soit en gras, hors le xml va interpréter la balise <b> comme étant une balise xml donc ici on a le node <texte> qui contient le node <b> qui a pour contenue mes vacances
pour palier a cela il existe la balises CDATA au seins de cette balises le texte n'est pas interpréter comme étant du xml la balise CDATA fonctionne ainsi <![CDATA[contenue]]> donc
<texte><![CDATA[<b>mes vacances</b>]]></texte>
ici le node texte contient le texte ”<b>mes vacances</b>”, la balise <b> n'est pas interprété
1.6 parent et enfant
les nodes contenues dans un node sont appelé les enfants de ce node
<image > <url lien="image1.jpg"/> <texte>mes vacances</texte> </image>
le node <image> a 2 enfants: <url> et <texte> cependant dans
<texte>mes vacances</texte>
“vacances” n'est pas un enfant du node <texte> ce n'est que le contenue de ce node
comme un node peut avoir des enfants il est logique que ce node soit le parent de ces enfant
<image > <url lien="image1.jpg"/> <texte>mes vacances</texte> </image>
les node <url> et <texte> ont pour node parent <image> un node peut être a la fois enfant (s'il est contenue dans un node) et parent (s'il contient des nodes)
1.7 la racine
comme des nodes peuvent avoir des enfants et que les enfants peuvent avoir des enfants on va parler d'arborescence
en xml il doit n'exister qu'un seul node tout en haut de l'arborescence ainsi on aura pas
<image url="image1.jpg" /> <image url="image2.jpg" />
mais plutôt
<data> <image url="image1.jpg" /> <image url="image2.jpg" /> </data>
2 le xml dans flash
je vais parler de classes, il est mieux de savoir ce que c'est mais ce n'est pas indispensable dite vous qu'une classe donne acces a des fonctions (chose qui font des calcul) et des proprietes (choses qui contiennet des valeurs)
dans flash il existe 2 classes pour gerer le xml la classe XML f1→Guide de référence du langage ActionScript 2.0 →Classes ActionScript > XML et la classe XMLNode f1→Guide de référence du langage ActionScript 2.0 →Classes ActionScript > XMLNode
2.1 un xml depuis une chaine de caractere
Apparté je vas utiliser le typage fort (c'est plus propre) mais dans flash c'est pas indispensable (mais c'est mieux de la faire) ainsi si vous voyez des truc du genre var toto:Number = 5 cela veux dire que je créer une variable qui s'appelle toto qui va contenir un nombre et que sa valeur est 5 mais on peut tres bien faire toto=5 la fonction trace dans flash appelle la fonction toString de l'objet passé en parametre, c'est a dire qu'il transforme en texte l'objet passé en parametre, la fonction trace est utile pour voir ce qu'il y a dans un node, mais elle ne sert pas a les manipuler
pour creer un xml on utilise donc la classe XML
var x:XML = new XML()
la on créer un objet de type XML nommé x qui est vide
var x:XML = new XML("<image url='image1.jpg'/>") trace(x)
on créer un objet xml qui a un node <image> qui a un attribut url
var x:XML = new XML("<image url='image1.jpg'>mes vacances</image>") trace(x)
l'objet x (de type XML) a un node image qui a un attribut url et a pour contenue “mes vacances”
2.1 ajouter des enfants dans un objet XML vide
pour ajouter des enfants on utilise la classe XMLNode
var enfant1:XMLNode = new XMLNode(1,"data")
ici on créer un node qui a pour nom “data” (on verra ce que veux dire le 1 plus tard)
cependant ce node n'est pour le moment attacher a aucun objet xml pour cela il y a la fonction appendChild
//on créer un objet xml vide var x:XML = new XML() //on creer un node var enfant1:XMLNode = new XMLNode(1,"data") //on ajoute ce node a l'objet xml x.appendChild(enfant1) trace(x)
pour ajouter un enfant au node data
var x:XML = new XML() var enfant1:XMLNode = new XMLNode(1,"data") var image1:XMLNode = new XMLNode(1,"image") enfant1.appendChild(image1) x.appendChild(enfant1) trace(x)
on peut ajouter plusieur enfant
var x:XML = new XML(); var enfant1:XMLNode = new XMLNode(1, "image"); var image1:XMLNode = new XMLNode(1, "url"); enfant1.appendChild(image1); var image2:XMLNode = new XMLNode(1, "texte"); enfant1.appendChild(image2); x.appendChild(enfant1); trace(x);
dans flash la classe XML herite de XMLNode, ce qui veux dire qu'un objet XML est aussi un objet XMLNode
ainsi tout ce que l'on peut faire avec un objet XMLNode et vrai avec un objet XML (mais pas le contraire )
2.2 definnir les attributs
dans la classe XMLNode il existe l'objet “attributes”, cette objet contient les attributs d'un node il peut etre modifer
var x:XML = new XML(); var enfant1:XMLNode = new XMLNode(1, "image"); var image1:XMLNode = new XMLNode(1, "url"); image1.attributes.lien = "image1.jpg" enfant1.appendChild(image1); var image2:XMLNode = new XMLNode(1, "texte"); enfant1.appendChild(image2); x.appendChild(enfant1); trace(x);
ici on defiini l'attribu lien du node image1 qui est aussi le node <url> (qui est referencé dans la variable image1
pour acceder a un attribut on utilise aussi “attributes”
var image1:XMLNode = new XMLNode(1, "url"); image1.attributes.lien = "image1.jpg" trace(image1.attributes.lien)
2.3 definnir le contenue texte d'un node
pour definnir le contenue node d'un texte il faut ajouter un node de type texte
var image1:XMLNode = new XMLNode(1, "url"); var texteNode:XMLNode = new XMLNode(3,"image1.jpg") image1.appendChild(texteNode) trace(image1)
quand on créer un node avec new XMLNode on passe en parametre le type de node que l'on veux créer 1 signifie un element de type ELEMENT_NODE 3 signifie un element de type TEXT_NODE pour plus d'information f1→Guide de référence du langage ActionScript 2.0 →Classes ActionScript > XMLNode > XMLNode(), constructeur
2.4 recuperer le contenue texte d'un node
pour recuperer le contenue texte d'un node il faut utiliser la propriete nodeValue de la classe XMLNode
on viens de voir que le contenue texte d'un node etait en faite contenue dans un node de type texte pour pointer vers le contenue il faut donc pointer vers ce node puis vers le nodeValue
var image1:XMLNode = new XMLNode(1, "url"); var texteNode:XMLNode = new XMLNode(3,"image1.jpg") image1.appendChild(texteNode) trace(image1.firstChild.nodeValue)
firstChild equivaut a childNodes[0]
xml = new XML("<data>coucou</data>") trace(xml.childNodes[0].firstChild.nodeValue)
xml.childNodes[0] pointe vers le node data xml.childNodes[0].firstChild pointe vers le node texte du node data xml.childNodes[0].firstChild.nodeValue pointe vers le texte contenue dans le node data
3 charger un fichier xml
ouvrez le blocnote creez un nouveau fichier enregistrer le sous le nom “xml.xml” en choisissant le codage UTF8 copier le texte
<data> <image url="imgage1.jpg">mes vacances</image> </data>
le chargement d'un fichier xml est assynchrone, c'est a dire que le chargement n'est pas instanné il faut donc attendre que le fichier soit chargé avant d'essayer de le lire pour cela il y a la fonction onLoad
de plus flash a tendance a ajouter des nodes vides quand il interprete un fichier xml pour eviter cela il y a la prorprietes ignoreWhite
//on crée un objet xml xml = new XML() //on dis de ne pas tenir compte des nodes vides créer par flash xml.ignoreWhite = true //on definni l'action a faire une fois le fichier loadé xml.onLoad = function(){ trace(this) } //on load le fichier xml.load("xml.xml")
au seins de la fonction onLoad , this renvoie a l'objet xml, il faut donc bien a faire attention a ne pas l'utiliser pour cibler un objet sur la scene
pour pointer vers le contenue du node image
xml = new XML() xml.ignoreWhite = true xml.onLoad = function(){ trace(this.firstChild.firstChild.firstChild.nodeValue) } xml.load("xml.xml")
this.firstChild → node <data> this.firstChild.firstChild → node <image> this.firstChild.firstChild.firstChild → node texte du node image this.firstChild.firstChild.firstChild.nodeValue → contenue texte du node image
3.1 connaitre l'avancement du chargement d'un fichier xml
un objet xml a 2 functions, getBytesLoaded() et getBytesTotal()
on peut s'en servir dans nu enterFrame par exemple
var xml:XML = new XML(); xml.ignoreWhite = true; xml.onLoad = function() { trace(this.firstChild.firstChild.firstChild.nodeValue); }; xml.load("xml.xml"); onEnterFrame = function () { //on calcul le pourcentage de chargement du fichier p = Math.round(100*xml.getBytesLoaded()/xml.getBytesTotal()); trace(p); //on oublie pas de supprimer le onEnterFrame une fois le chargement fini if(xml.getBytesLoaded()==xml.getBytesTotal())delete onEnterFrame };
4 exemple: lire un flux RSS
dans cette exemple on va charger un flux rss du net on affiche les titres des articles dans un liste quand on selectionne un titre on affiche l'article dans une zone de texte
pour cela il faut donc un champs de texte de saisi pour entrer l'url du flux un bouton pour lancer le chargement du flux une liste pour afficher les titres des articles une zone de texte pour afficher l'article
voir le fichier xml.fla
a+
