Introduction au XML
Pour expliquer comment utiliser le xml dans flash, je vaisprendre un exemple concret.
Nous apprendre à exploiter un fichier xml en prenant commeexemple un système de news fictif.
Nous ne réaliserons que l'exploitation des donnée, pas lesystème lui même.
L'affichage se fera via la fonction trace().
Je part sur le principe que vous connaissez les fonctions debase du langage, en particulier les boucles et les bases de la POO.
Voici donc le fichier sur lequel nous allons travailler;
| <?xml version='1.0' encoding='UTF-8' ?> <main> <news> <title value="titre de la news" /> <texte> <![CDATA[ blablabla ]]> </texte> <links> <link url="http://www.allboard.net" text="Allboard Network" /> <link url="http://www.blackwizzard.com" text="BlackWizzard NetWork" /> <link url="http://www.underground-fr.com" text="Underground-fr" /> </links> </news> <news> <title value="une 2eme news" /> <texte> <![CDATA[ texte de la 2eme news ]]> </texte> <links> <link url="http://www.v-network.info" text="Allboard Network" /> </links> </news> </main> |
Comme vous pouvez le voir, nous devons spécifier un header.si il n'y en a pas, flash va quand même le charger, mais ce header permet depréciser l'encodage.
| <?xml version='1.0' encoding='UTF-8' ?> |
Les info sont entre <?xml et ?>
version='1.0' ne changera pas puisque seul la version 1.0existe pour l'instant ;)
encoding='UTF-8' détermine l'encodage du fichier.
UTF-8 est le plus utilisé, mais il existe une multituded'encodages possibles.
UTF-8 est le codage 'européen'. Il est celui utilisé dansles pays utilisant notre alphabet.
Il existe d’autres encodages tels que windows-1252,ISO-8859-1, UTF-16 ...
Apres le header, nous voyons que les Balises sont mis entreune paire de balise <main></main> que l'on appelle balises"root".
Quelque soit le document xml, Tout le document doit êtreencadré ce cette pair de balise.
Le nom de cette paire balise n’a pas d'importance.
Il y a 2 types de balises;
Celles, comme en HTML qui se composent en paire<nom></nom> et celles uniques, qui sont de type <nom />
Chaque type de balise ouvrante peut accueillir desparamètres, exemple, <nom paramètre="valeur"></nom> ou<nom paramètre="valeur" />.
Les balises uniques ne servent uniquement a accueillir desparamètres.
Pour fournir un texte complet, mettez le entre une paire debalises, mais attention! si votre texte se compose de code html, les baliseshtml seront considérés comme des balises xml, ce qui entraînera souvent uneerreur.
Pour éviter cela, Vous pouvez placer votre texte entre lespseudo balises <!CDATA![ et ]]>.
Exemple:
| <nom> Voici un texte en gars: <br> <b>blablabla</b> </nom> Si vous faittes comme cela, les balises html vont etre considérées comme du xml, et la syntaxe n'etant pas correct, en particulier pour le <br>, le fichier va retourner une erreur. C'est alors qu'intervient le CDATA: <nom> <![CDATA[ Voici un texte en gars: <br> <b>blablabla</b> ]]> </nom> |
Tout ce qui se trouve dans la balise CDATA ne sera pas interprété.
Maintenant que vous possédez les bases syntaxiques du XML,nous allons commencer le code action script.
Pour exploiter du xml, nous devons déclarer un nouvel objetXML:
Nous voulons que les espaces et sauts de lignes ne soientpas interprétés (ce qui est préférable, sinon ça fout le bordel), pour cela,nous disposons de la propriété ignoreWhite:
| myXML.ignoreWhite = true; |
Nous allons maintenant charger le fichier:
myXML.load("fichier.xml"); |
Le fichier pouvant mettre plusieurs secondes a se charger enfonction de sa taille et de la vitesse de connexion, nous allons faireintervenir la fonction onLoad() qui exécutera son code des que le xml estchargé. Cette fonction reçoit un argument de type booléen (1 ou 0; true oufalse) qui correspond a l'état de chargement; true(1) = le document est chargé,false(0) = le document n'est pas chargé, probablement indisponible ou enerreur:
myXML.onLoad = function(flag) { if (flag) { // si flag = true // reste du code. } } |
Maintenant que nous savons composer et charger un documentXML, il faut l'analyser.
Pour cela, Nous allons parcourir les "branches" dufichier, qui comme tt le monde a du le remarquer se compose comme unearborescence.
Pour cela, nous allons utiliser une boucle while(), bienqu'il soit aussi possible de passer par un for().
Voici l'arborescence sommaire du fichier :
| +main -+news ----title (value) ----texte [cdata] ---+links ------link 1 (url, text) ------link 2 (url, text) ------link 3 (url, text) -+news ----title (value) ----texte [cdata] ---+links ------link 1 (url, text) |
J’espère qu'il est assez clair pour tt le monde.
Afin de parcourir le fichier, nous disposons de 2 fonctionsprincipales:
xml.firstChildet xml.childNodes[x]
xml.firstChild retourne la première "branche" dunoeud "xml".
xml.childNodes[x] retourne le noeud "x" du noeud"xml", sinon il retourne "undefined" si la valeur du noeud"x" n'est pas trouvée.
xml.firstChildet xml.childNodes[0] sont donc similaires
Quand le fichier xml est chargé, notre objet XML"myXML" prend comme valeur le contenu du fichier xml.
Vous pouvez vous en rendre compte en effectuant untrace(myXML);
Donc, afin d'isoler les sections de news, nous pouvons fairetrace(myXML.firstChild); qui va nous retourner uniquement les zones de news.
Etant donnée que le nombre de news est dynamique, nousallons les afficher une par une, sans savoir a l'avance combien il y en a.
Pour cela, nous allons utiliser notre boucle while,xml.childNodes[x] et xml.firstChild.
(tout le code qui suis devra se placer a la place de"// reste du code.", dans la fonction onLoad()).
//initialisation i=0; // on initialise le compteur. x = myXML.firstChild; // on se place sur le noeud des news. while (x.childNodes[i] != undefined) { // tant qu'il y a des news... trace(x.childNodes[i]); // on affiche le noeud de news trouvé. i++; // on incrémente le compteur. } trace(i+" news trouvées"); // on affiche le nombre de news trouvé, c'est pas utile // pour ce tutorial, mais c'est un plus ;) |
Voila!
Nous avons commencé à parcourir le fichier!
Si vous avez compris le bout de code ci-dessus, vous aveztout compris du xml, ou presque.
Mais afin de faire un tutorial complet, je vais allerjusqu'au bout de cette exploration du fichier.
Nous avons donc su afficher chaque noeud de news.
Nous allons donc explorer chaque news!
Pour cela, nous devons nous servir d'une nouvelle fonction:xml.attributes
Pour comprendre l'utilité de cette fonction, il faut voirles spécificités du xml; En effet, nous avons 2 façons pour stocker du texte:
- entre une paire de balise: <nom>texte</nom>
- dans une balise: <nom attr="texte" />
Pour accéder au premier type (la paire de balise), un simplefirstChild suffit.
Par contre, pour accéder a la balise elle même, nous devonsutiliser noeud_xml.attributes.nom_attribut
Exemple:
Pour<link url="http://www.allboard.net" text="AllboardNetwork" />
Pour accéder a la valeur de "url", nous allonsfaire noeud_xml.attributes.url
Et pour accéder a la valeur de "texte"noeud_xml.attributes.text
Voici donc le code complet qui permet d'explorer le fichierxml.
Vous disposez maintenant de toutes les notions nécessairespour comprendre ce code.
i = 0; x = myXML.firstChild; while (x.childNodes[i] != undefined) { trace(""); // ligne vide trace("--- NEWS "+(i+1)+" ---"); // le (i+1) permet d'afficher "NEWS 1" et non pas "NEWS 0", // mais c'est juste une question esthetique. trace("titre:\t"+x.childNodes[i].childNodes[0].attributes.value); // le titre, avec le fameux "attributes"! trace("texte:\t"+x.childNodes[i].childNodes[1].firstChild); // le texte, via un simple firstChild. trace("liens:"); // ha! là on ne sais pas combien il y a de liens par news! ça devient interessant! j = 0; // on initialise j. while (x.childNodes[i].childNodes[2].childNodes[j] != undefined) { // tant qu'il y a des liens... trace("\t --- LIEN "+(j+1)+" ---"); // on affiche le numero de lien... trace("\t lien:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.url); // ...son url, trace("\t texte:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.text); // son texte... j++; // on incremente le compteur j. } i++; } trace(""); // ligne vide, purement esthetique.trace(i+" news trouvées"); |
Et voila!
Vous pouvez désormais vous servir du xml, qui est sipratique avec flash!
Un conseil, avant de coder, regardez bien la structure duxml, si elle est complexe, faites le shema simplifié comme on a fait, etdistinguez bien les éléments statiques (titre, texte toujours au même nombre età la même place) des éléments dynamiques (souvent a la même place, maisrarement au même nombre).
Amusez vous bien!
Le code final
myXML = new XML(); myXML.ignoreWhite = true; myXML.load("file.xml");myXML.onLoad = function(flag) { if (flag) { i = 0; x = myXML.firstChild; while (x.childNodes[i] != undefined) { trace(""); trace("--- NEWS "+(i+1)+" ---"); trace("titre:\t"+x.childNodes[i].childNodes[0].attributes.value); trace("texte:\t"+x.childNodes[i].childNodes[1].firstChild); trace("liens:"); j = 0; while (x.childNodes[i].childNodes[2].childNodes[j] != undefined) { trace("\t --- LIEN "+(j+1)+" ---"); trace("\t lien:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.url); trace("\t texte:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.text); j++; } i++; } trace(""); trace(i+" news trouvées"); } }; |
Tutorial écrit par Julien Loutre, alias BlackWizzard.
Diffusion électronique autorisée en l’état.
Toute modification doit faire l’objet d’un accord écrit del’auteur.
L’impression ou la diffusion dans un but lucratif eststrictement interdite sans autorisation préalable.
Contact :
Tel (+33)0615576747
Email blackwizzard@gmail.com
[collé depuis word]