Introduction au xml (mx 6 et ulterieurs)
Introduction au xml (mx 6 et ultérieurs)
Description
Ce cours vous donnera les bases de l'exploitation du XML dans flash, ainsi que les bases du XML lui même.
Cours, précis, concis, adapté aux débutants.
Introduction au XML
Pour expliquer comment utiliser le xml dans flash, je vais prendre un exemple concret.
Nous apprendre à exploiter un fichier xml en prenant comme exemple un système de news fictif. Nous ne réaliserons que l'exploitation des données, pas le système lui même.
L'affichage se fera via la fonction trace().
Je part sur le principe que vous connaissez les fonctions de base 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. S'il n'y en a pas, flash va quand même le charger, mais ce header permet de préciser l'encodage.
<?xml version='1.0' encoding='UTF-8' ?>
Les infos sont entre
<?xml
et
?>
.
version='1.0' ne changera pas puisque seule la version 1.0 existe pour l'instant ;)
encoding='UTF-8' détermine l'encodage du fichier.
UTF-8 est le plus utilisé, mais il existe une multitude d'encodages possibles. UTF-8 est le codage 'européen'. Il est celui utilisé dans les pays utilisant notre alphabet. Il existe d'autres encodages tels que windows-1252,ISO-8859-1, UTF-16 ...
Après le header, nous voyons que les Balises sont mis entre une paire de balises <main></main> que l'on appelle balises "root".
Quelque soit le document xml, Tout le document doit être encadré ce cette paire de balises.
Le nom de cette paire de balises 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 des paramètres.
Exemple, <nom paramètre="valeur"></nom> ou <nom paramètre="valeur" />.
Les balises uniques servent uniquement à accueillir des paramètres.
Pour fournir un texte complet, mettez le entre une paire de balises. Attention! si votre texte se compose de code html, les balises html seront considérés comme des balises xml, ce qui entraînera souvent une erreur.
Pour éviter cela, Vous pouvez placer votre texte entre les pseudos balises <!CDATA![ et ]]>.
Exemple :
<nom>
Voici un texte en gars: <br>
<b>blablabla</b>
</nom>
Si vous faites comme cela, les balises html vont être considérées comme du xml, et la syntaxe n'étant pas correcte, 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.
Code Action Script
Pour exploiter du xml, nous devons déclarer un nouvel objetXML :
myXML = new XML();
Nous voulons que les espaces et sauts de lignes ne soient pas 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 à se charger, en fonction de sa taille et de la vitesse de connexion, nous allons faire intervenir la fonction onLoad() qui exécutera son code des que le xml est chargé. Cette fonction reçoit un argument de type booléen (1 ou 0; true ou false) qui correspond à l'état de chargement ; true(1) = le document est chargé, false(0) = le document n'est pas chargé, probablement indisponible ou en erreur:
myXML.onLoad = function(flag) {
if (flag) { // si flag = true
// reste du code.
}
}
Maintenant que nous savons composer et charger un document XML, il faut l'analyser.
Pour cela, Nous allons parcourir les "branches" du fichier, qui, comme tout le monde a du le remarquer, se compose comme une arborescence.
Pour cela, nous allons utiliser une boucle while(), bien qu'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 tout le monde.
Afin de parcourir le fichier, nous disposons de 2 fonctions principales :
- xml.firstChild : retourne la première "branche" du noeud "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.firstChild et 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 un trace(myXML);
Donc, afin d'isoler les sections de news, nous pouvons faire trace(myXML.firstChild); qui va nous retourner uniquement les zones de news.
Étant donné que le nombre de news est dynamique, nous allons les afficher une par une, sans savoir à 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 tutoriel, mais c'est un plus ;)
Voila!
Nous avons commencé à parcourir le fichier!
Si vous avez compris le bout de code ci-dessus, vous avez tout compris du xml, ou presque.
Mais afin de faire un tutoriel complet, je vais aller jusqu'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 voir les 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 simple firstChild suffit.
Par contre, pour accéder à la balise elle même, nous devons utiliser noeud_xml.attributes.nom_attribut
Exemple :
<link url="http://www.allboard.net" text="AllboardNetwork" />
Pour accéder a la valeur de "url", nous allons faire 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 fichier xml.
Vous disposez maintenant de toutes les notions nécessaires pour 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 esthétique.
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 incrémente le compteur j.
}
i++;
}
trace(""); // ligne vide, purement esthétique.
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 du xml. Si elle est complexe, faites le schéma simplifié comme on a fait, et distinguez 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, mais rarement 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");
}
};
Tutoriel écrit par Julien Loutre, alias BlackWizzard.
Diffusion électronique autorisée en l'état.
Toute modification doit faire l'objet d'un accord écrit de l'auteur.
L'impression ou la diffusion dans un but lucratif est strictement interdite sans autorisation préalable.
- Introduction au xml (mx 6 et ulterieurs)
- 3c xml - Forum C++ & C++ .NET
- Vba xml ✓ - Forum VBA Office (Excel, Word ...)
- Jdk 6 - Forum Java
- Schema xml - Conseils pratiques -Visual Basic / VB.NET
- Xml tableau ✓ - Forum Flash