[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Programmation
> ActionScript / Flash / Flex
> Le XML
> Lecture du tutoriel
Le XML
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Dans ce tutorial je vous apprendrai comment vous servir du XML avec Flash (via son langage: l'action script). C'est très simple, il suffit de bien lire le tutorial et de tenter de reproduire la même chose chez soi.
Je vais vous expliquer brièvement comment fonctionne le XML, si vous voulez plus de détails allez
lire ce tuto
Pour faire simple, le XML est une sorte de langage personnalisable. Vous stockez vos informations à votre manière et de façon très propre. Exemple très simple :
Code : XML1
2
3
4
5 | <objet type="Potions/Soin">
<nom>Potion +50</nom>
<description>Augmente vos PV de 50</description>
<details nombre="2" />
</objet>
|
En plus, je suis sûr que du premier coup d'oeil vous avez compris de quoi il s'agit.
le XML n'est pas le remplaçant de HTML ou du XHTML. Vous pouvez faire une sorte de BBcode avec le XML certes, mais ce n'est pas le but.
Dans mon exemple, je montre les
2 sortes de balises du XML.
Code : XML1
2 | <!-- Balise par paire -->
<balise>contenu</balise>
|
Code : XML1
2 | <!-- Balise unique -->
<balise />
|
Chacune de ces balises peut contenir un ou plusieurs attributs :
Code : XML1
2
3 | <balise attribut="contenu attribut">contenu</contenu>
<!-- OU -->
<balise attribut="contenu attribut" />
|
Les balises qui fonctionnent par 2 peuvent contenir d'autres balises à l'interieur et ainsi de suite ce qui peut rendre votre fichier XML très complexe,
on dit qu'il comporte des noeuds.
Vous pouvez mettre plusieurs attributs par balise à condition qu'ils ne portent pas le même nom
N'utilisez pas les balises qui fonctionnent seules si vous n'utilisez pas les attributs
Si vous avez tout compris, c'est bien, nous pouvons continuer. Vous devez tous vous poser la question, comment fait-on le fichier XML et avec quoi ?
Il suffit d'ouvrir votre bloc note et de l'enregistrer en
Votre_nom_de_fichier.xml.
Ensuite il faut placer cette ligne au début de votre fichier.
Code : XML1 | <?xml version='1.0' encoding="UTF-8" ?>
|
Cette ligne sert juste à indiquer que c'est un
fichier XML encodé en UTF-8 (ce dernier mode pouvant lire les accents et les caractères spéciaux de la langue Française). Si on avait voulu encoder pour les caractères japonais on n'utiliserait pas l'UFT-8 mais un autre type d'encodage.
Pour avoir votre fichier XML qui fonctionne, il vous faut ajouter des balises <main> (de la même manière que la balise <html> quand on fait du XHTML). Ce qui nous donne le code suivant :
Code : XML1
2
3
4
5
6 | <?xml version='1.0' encoding="UTF-8" ?>
<main>
<!-- Ici ce sera notre code XML -->
</main>
|
Il ne vous reste plus qu'à mettre votre document XML à l'intérieur. Dans ce petit tutorial nous étudierons 2 fichiers XML, un simple pour commencer et un plus complexe
(ce dernier étant facultatif).
Voici comment est donc un fichier XML (avec l'exemple de partie supérieure).
Code : XML 1
2
3
4
5
6
7
8
9
10 | <?xml version='1.0' encoding="UTF-8" ?>
<main>
<objet type="Potions/Soin">
<nom>Potion +50</nom>
<description>Augmente vos PV de 50</description>
<details nombre="2" />
</objet>
</main>
|
Dernier point, on peut commenter les fichiers XML comme pour un fichier HTML :
Code : XML1 | <!-- Ceci est un commentaire -->
|
Les commentaires servent à vous repérer dans votre fichier. Quand vous lirez votre fichier avec Flash, il vous sera impossible de voir les commentaires (ce qui est le but).
Avant de commencer l'action script, créez un nouveau document flash et ajoutez y
un champ texte dynamique. (raccourcis
T pour sélectionner
l'outil texte, puis dans les options choisissez "
Texte dynamique".) Dans l'option (le champ)
var (et non pas "
nom de l'occurrence") entrez (si vous suivez l'exemple) "
Voir_xml". Je ne donne pas une source de départ car cela se fait facilement en 10 secondes et on évite ainsi le travail bâclé (copier coller) sans que vous compreniez. Si vous débutez en Flash, les explications que je viens de donner doivent être floues pour vous. Je vous donne donc
en exclusivité mondiale une capture d'écran.
Désolé pour les traits pas très droits.
En mettant
Voir_xml au
var du champ dynamique, cela signifie qu'une variable
Voir_xml à été créée et cette dernière correspond à son contenu (le texte). On affichera donc le résultât de notre XML dans ce champ via la variable
Voir_xml.
Pour commencer à lire un XML, il faut créer une variable de type XML :
Code : Autre
Ensuite, on doit indiquer qu'on ne prend pas compte les espaces blancs (mesure obligatoire)
Code : Autre1
| Fichier_XML.ignoreWhite = true; |
On dit donc par
.ignoreWhite = true; qu'on n'en tient pas compte
Après on dit quel fichier on veut charger :
Code : Autre1
| Fichier_XML.load("Inventaire.xml"); |
Enfin on demande d'exécuter une fonction une fois le fichier XML chargé, et on vérifie si ça à bien fonctionné :
Code : Autre1
2
3
4
5
| Fichier_XML.onLoad = function(Reussite) {
if (Reussite) {
}
}; |
Attends là je commence à me perdre, c'est quoi ce Reussite ?
En fait
au chargement du XML on exécute une fonction qui se nomme
Reussite.
Le
if(Reussite) est un boolean. Quand on exécute la fonction
Reussite, elle renvoie
true ou
false (
vrai ou
faux). Si la fonction à fonctionné, elle renvoi
true, si elle a échouée elle renvoi
false.
if(Reussite) revient à écrire
if(Reussite = true) c'est à dire
si la fonction s'est exécutée correctement.
On va enfin passer aux choses sérieuses, je rajoute des balises à mon XML (pour la quantité).
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <?xml version='1.0' encoding="UTF-8" ?>
<main>
<objet type="Potions/Soin">
<nom>Potion +50</nom>
<description>Augmente vos PV de 50</description>
<details nombre="2" />
</objet>
<objet type="Arme/Epee">
<nom>Epée diablolique</nom>
<description>Epée du demon lucifer</description>
<details nombre="1" element="Feu"/>
</objet>
<objet type="Arme/Bouclier">
<nom>Bouclier aquatique</nom>
<description>Bouclier de la dame du lac</description>
<details nombre="1" element="Eau">
</objet>
</main>
|
Je sais, pas très original ^^.
Le fichier XML et le fichier .swf ou .fla doivent se trouver dans le même dossier ou sinon changer l'url à la ligne Fichier_XML.load("Inventaire.xml"); du fichier Flash
Il faut observer la structure de notre fichier XML pour ne pas se perdre comme ceci :
Code : XML1
2
3
4
5
6
7 | main -> contenu
objet -> attribut
nom -> contenu
description -> contenu
details -> attribut, attribut
fin objet
fin main
|
En détails, voici comment est structuré notre XML. Nous allons voir 2 fonctions simples,
childNodes[] et
firstChild.
childNodes précise sur quel
noeud on agit et
firstChild décrit le premier noeud.
childNodes[] agit comme un array, ainsi
childNodes[0] est identique à
firstChild. Maintenant je vais tenter de vous expliquer
le plus gros morceau du tuto.
Un array est un sorte de tableau qui contient des informations. Il commence par 0. Donc 0 correspond au premier, 1 correspond au deuxième et ainsi de suite.
Code : Autre
==> Il n'y a qu'une seule paire de balise <main> donc 1 seul noeud dans le fichier.
==> On doit (obligatoirement) utiliser la variable x pour simplifier.
==> x sera l'équivalent de la première balise du fichier (donc <main>)
Code : Autre1
| x = Fichier_XML.firstChild //Correspond à la première balise du fichier: <main> |
Si vous avez suivi, vous savez que l'on peut mettre aussi
Code : Autre1
| x = Fichier_XML.childNodes[0]//Correspond à la première balise du fichier: <main> |
Mais mettre le premier exemple est plus propre, surtout lorsque l'on aura beaucoup de noeuds.
Donc pour simplifier les choses, on va dire que
firstChild sera là pour afficher et
childNodes[] pour passer à un autre noeud.
Pour afficher le contenu de
<nom>, on va lire la première balise à l'interieur de
<main> (<objet>) et la première à l'interieur de <objet> (<nom>).
Je précise que quand je dis première balise, je parle de balise ouverte.
Rappelez vous du schéma que l'on a fait au début du chapitre.
Code : XML1
2
3
4
5
6
7 | main -> contenu
objet -> attribut
nom -> contenu
description -> contenu
details -> attribut, attribut
fin objet
fin main
|
Chaque espace veut dire qu'il appartient à la balise supérieure, ainsi :
<details>,
<description> et
<nom> appartiennent à
<objet> qui
appartient à
<main> qui
lui même appartient au fichier.
Je me répète, mais c'est pour que vous comprenniez bien le principe.
<main>(variable x) contient la balise
<objet> (x.
childNodes[0]).
<objet> qui contient
<nom> (x.
childNodes[0].childNodes[0]) cette balise contient du texte, pour l'afficher on doit donc utiliser un dernière fois
childNodes[0] ou
firstChild .Pour différencier si on entre dans un noeud ou si on va lire du texte - je recommande la fonction
firstChild. Le code pour lire le contenu de la balise
<nom> est donc :
Code : Autre1
2
| Voir_xml = x.childNodes[0].childNodes[0].firstChild
/* On lit la première balise de <main>; <main> qui lit sa première balise (<objet>); <objet> qui va lire sa première balise. Enfin pour afficher le texte on utilise firstChild */ |
Mais bien sûr on peut remplacer le
.firstChild par
.childNodes[0].
Code : Autre1
| Voir_xml = x.childNodes[0].childNodes[0].childNodes[0] |
N'hésitez pas à relire si vous ne comprenez pas. Le résultat doit être
Potion +50. Mais si vous voulez afficher
Bouclier aquatique comment faire ? Je vous laisse y réfléchir. Pensez bien aux balises qui en contiennent d'autres.
Avant d'afficher le secret, lisez cela.
Code : Autre1
2
3
4
5
| Voir_xml = x.firstChild;
/* Affichera le contenu des balises <nom> et <description> car en écrivant cela j'affiche le contenu de la première balise de <main> (toujours représentée par "x"), c'est à dire <objet>.
Code similaire */
Voir_xml = x.childNodes[0]; |
Code : Autre1
2
| Voir_xml = x;
/* Identique au code supérieur sauf qu'on affiche les balises (et leur contenu) qui se trouve dans <main>. |
Bah pourquoi on marque pas Voir_xml = x; et fini ça sera plus simple et plus court que de faire des tonnes de lignes pour afficher les informations une par une.
En fait, quand vous faites comme ca vous n'avez ni retour à la ligne, ni code structurer comme vous le désirez. Si vous voulez afficher les informations dans l'ordre que vous voulez ou encore si vous ne voulez pas tout afficher vous ne pourrez pas avec cette méthode. En gros cela ne sert à rien.
Pourquoi tu nous l'a montré alors
Tout simplement pour que vous compreniez le principe ;).
Réponse à la question "Comment afficher Bouclier aquatique" : (vous avez réfléchi j'espère).
Secret (cliquez pour afficher)Pour afficher le nom du 3eme objet il faut penser comme ceci.
le texte, le contenu
est representé par firstChild
<nom>
première balise de <objet> (childNodes[0])
<objet>
3eme balise de <main> (childNodes[2] [2 car childNodes[] commence a 0])
Code : Autre1
| Voir_xml = x.childNodes[2].childNodes[0].firstChild |
Voila, si on réfléchit un peu c'est très simple. Si vous avez compris cela, vous avez tout compris. Aller plus que 3 parties et le XML n'aura plus de secret pour vous.
Précisions : Quand vous pensez aux textes d'une balise c'est que vous pouvez mettre
firstChild. Pour le reste utilisez les childNodes[]. Vous serez ainsi mieux vous repérer.
SVP, c'est essentiel pour reussir, ne regardez pas le secret avant d'y avoir reflechi.
Comment faire pour afficher la description de l'Epée diablolique
Secret (cliquez pour afficher)Epée diablolique texte de <description> (firstChild)
<description> deuxieme balise de <objet> (childNodes[1])
<objet> deuxieme balise de <main> (childNodes[1])
<main> est représenté par la variable "x")
Code : Autre1
| Voir_xml = x.childNodes[1].childNodes[1].firstChild; |
J'espere que vous avez compris.
Si votre fichier XML est complexe avec plusieurs noeuds, la meilleure méthode pour raisonner correctement reste le morceau de papier
C'est bien beau tout ça mais comment afficher les atributs des balises tel que <details /> ou <objet>
Il vous suffira de remplacer
.firstChild(si vous codez comme moi, ou un childNodes[0]) par
attributes.Nom_Attribut.
Refléchissons de la même manière. L'attribut
type appartient à
<objet>(attributes.type) (type est le nom de l'attibut)
<objet> est la première balise de
<main> (childNodes[0])
Code : Autre1
| Voir_xml = x.childNodes[0].attributes.type |
Si vous ne faites pas des tests chez vous et que vous lisez tout comme ca vous risquez d'avoir des difficultés, n'hesitez pas à faire des pauses aussi.
Pour vous exercer, vous pouvez essayer d'afficher les attributs de la balise <details /> Si vous n'y arrivez pas, vous verrez la solution plus loin
-----------------------------------------------------------------------
Comment afficher le contenu des balises <objet></objet> d'un seul coup. Autrement dit, si on gagne un objet, le fichier XML sera different (une balise <objet> en plus) et on devra ajouter du code action script. Ca ne sera plus dynamique (automatique).
On va utiliser les boucles qui vont afficher le contenu des balises <objet>, peu importe le nombre.
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
| for(i = 0; x.childNodes[i] != undefined; i++) {
Voir_xml += "Objet: " + x.childNodes[i].childNodes[0].firstChild + "\n";
Voir_xml += "Type: " + x.childNodes[i].attributes.type + "\n";
Voir_xml += "Quantité: " + x.childNodes[i].childNodes[2].attributes.nombre + "\n";
if(!x.childNodes[i].childNodes[2].attributes.element) { //Si il n'existe pas d'element
Voir_xml += "Element: Aucun \n";
}
else { //Si il existe
Voir_xml += "Element: " + x.childNodes[i].childNodes[2].attributes.element + "\n";
}
Voir_xml += "Description: " + x.childNodes[i].childNodes[1].firstChild + "\n";
Voir_xml += "\n";
} |
Voila la clé du toturial. Je détaille et explique le code.
Code : Autre1
| for(i = 0; x.childNodes[i] != undefined; i++) { |
Tant qu'il y a des balises <objet> (x.childNodes[i] -> première balise de <main> qui devient la deuxième quand on augmente la valeur de la variable i).
Le += veut dire qu'on ajoute le texte à la variable (et on ne le remplace pas).
\n'indique un retour à la ligne.
Le reste vous devriez comprendre.
for est une boucle, si vous ne les connaissez pas aller
lire ce chapitre.
Je vais quand même expliquer 2 lignes:
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| Voir_xml += "Objet: " + x.childNodes[i].firstChild + "\n";
/* On affiche le contenu de la balise i(0 puis 1 puis 2 et apres notre boulce s'arrète) de <main> (<objet>) qui affiche lui même le contenu de sa première balise (<nom>)
x.childNodes[0].childNodes[0].firstChild -> Retourne Potion +50
x.childNodes[1].childNodes[0].firstChild -> Retourne Epée diablolique
x.childNodes[2].childNodes[0].firstChild -> Retourne Bouclier aquatique
Dans notre boucle i = 0; Une boucle relit le code jusqu'à ce que x.childNodes[i] != undefined. Autrement dit jusqu'à ce qu'il n'y est plus de balise <objet>. La boucle sera lu 3 fois donc.
Première fois
(i = 0)
x.childNodes[i].childNodes[0].firstChild -> Retourne Potion +50
i++; (on augmente i de 1 -> i = 1)
Deuxième fois
(i = 1)
x.childNodes[i].childNodes[0].firstChild -> Retourne Epée diablolique
i++; (on augmente i de 1 -> i = 2)
Troisième fois
(i = 2)
x.childNodes[i].childNodes[0].firstChild -> Retourne Epée diablolique
i++; (on augmente i de 1 -> i = 3)
Quatrième fois
(i = 3)
Il n'y a pas 4 balises objet (0 = première; 1= deuxième; 2= troisième; 3=quatrième)
donc la boucle s'arrete.
Imaginez écrire ce code avec 100 objets :s, c'est le but des boucles */
Voir_xml += "Type: " + x.childNodes[i].attributes.type + "\n";
/* Affiche l'attribut qui s'apelle "type" qui se trouve dans la balise <objet> numero i(la variable de la boucle) qui se trouve dans <main> */ |
Pffff, c'est fini. Analysez bien ce code, c'est la clé pour reussir.
Vous savez maintenant utiliser les bases du XML.
Le code finalCode : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| //Voir_xml est le champs texte dynamique
Fichier_XML = new XML();
Fichier_XML.ignoreWhite = true;
Fichier_XML.load("Inventaire.xml");
Fichier_XML.onLoad = function(Reussite) {
if (Reussite) {
x = Fichier_XML.firstChild;
for(i = 0; x.childNodes[i] != undefined; i++) {
Voir_xml += "Objet: " + x.childNodes[i].childNodes[0].firstChild + "\n";
Voir_xml += "Type: " + x.childNodes[i].attributes.type + "\n";
Voir_xml += "Quantité: " + x.childNodes[i].childNodes[2].attributes.nombre + "\n";
if(!x.childNodes[i].childNodes[2].attributes.element) { //Si il n'existe pas d'element
Voir_xml += "Element: Aucun \n";
}
else { //Si il existe
Voir_xml += "Element: " + x.childNodes[i].childNodes[2].attributes.element + "\n";
}
Voir_xml += "Description: " + x.childNodes[i].childNodes[1].firstChild + "\n";
Voir_xml += "\n";
}
}
else { Voir_xml = "Erreur lors du chargement du fichier XML"; }
}; |
Il reste 2 autres parties qui expliqueront comment ecrire le fichier XML et la dernière sera l'étude d'une feuille XML complexe
(ces parties sont falcultatives et elles nécéssiteront que l'on connaisse le php)
Le tuto est en fait, incomplet. Il reste 2 parties. Comment enregistrer son fichier XML à partir de flash et étude d'un fichier XML complexe. En attendant, je voudrais préciser à ceux qui travailleront sur un fichier XML qui contiendra plusieurs balises à l'interieur d'elles mêmes :
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <employe>
<nom>Dupont</nom>
<prenom>Gerard</prenom>
<enfants><nom>Dupont</nom>
<prenom>Kevin</prenom>
<age>15 ans</age>
<nom>Dupont</nom>
<prenom>Bernardette</prenom>
<age>8 ans</age>
</enfant>
</employe>
<employe>
<nom>Morsion</nom>
//etc...
</employe>
|
Dans ce genre de code vous devez faire une boucle pour afficher les employés et une boucle pour afficher les enfants (car le nombre d'enfants est aussi indefini). Ca vous fera je pense un bon exercice en attendant la suite.
Voila, c'est fini, j'espère vous avoir appris un tas de trucs sur le XML. Normalement vous pourrez vous en servir à votre guise. Si vous utilisez des fichiers XML complexes, pensez à réfléchir comme on l'a fait tout au long de ce tutorial et relisez la dernière partie.