Dans ce tutoriel je vous apprendrai comment vous servir du XML avec Flash (via son langage : l'ActionScript). C'est très simple, il suffit de bien lire 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 :
<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.
<!-- Balise par paire -->
<balise>contenu</balise>
<!-- Balise unique -->
<balise />
Chacune de ces balises peut contenir un ou plusieurs attributs :
<balise attribut="contenu attribut">contenu</balise>
<!-- OU -->
<balise attribut="contenu attribut" />
Les balises qui fonctionnent par 2 peuvent contenir d'autres balises à l'intérieur et ainsi de suite, ce qui peut rendre votre fichier XML très complexe, on dit qu'il comporte des noeuds.
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-notes et de l'enregistrer en Votre_nom_de_fichier.xml. Ensuite, il faut placer cette ligne au début de votre fichier.
<?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'UTF-8 mais un autre type d'encodage. Pour avoir un 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 :
<?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 tutoriel nous étudierons 2 fichiers XML, un simple pour commencer, et un plus complexe (ce dernier étant facultatif).
Voici donc comment est un fichier XML (avec l'exemple de partie supérieure).
<?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 :
<!-- 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'ActionScript, 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 de 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 a été créée et cette dernière correspond à son contenu (le texte). On affichera donc le résultat 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 :
Fichier_XML = new XML();
Ensuite, on doit indiquer qu'on ne prend pas compte les espaces blancs (mesure obligatoire) :
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 :
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 a bien fonctionné :
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 booléen. Quand on exécute la fonction Reussite, elle renvoie true ou false (vrai ou faux). Si la fonction a fonctionné, elle renvoie true ; si elle a échouée, elle renvoie 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é).
<?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>Épée diablolique</nom>
<description>Épée du démon 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>
Il faut observer la structure de notre fichier XML pour ne pas se perdre, comme ceci :
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.
main -> contenu
==> Il n'y a qu'une seule paire de balises <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>).
x = Fichier_XML.firstChild //Correspond à la première balise du fichier: <main>
Si vous avez suivi, vous savez que l'on peut mettre aussi :
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'intérieur de <main> (<objet>) et la première à l'intérieur de <objet> (<nom>).
Rappelez-vous du schéma que l'on a fait au début du chapitre.
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 appartientau fichier.
Je me répète, mais c'est pour que vous compreniez bien le principe. <main>(variable x) contient la balise <objet> (x.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 distinguer 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 :
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].
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.
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];
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 ne 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 ça, vous n'avez ni retour à la ligne, ni code structuré 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).
Pour afficher le nom du 3e objet, il faut penser comme ceci. Le texte, le contenu est représenté par firstChild. <nom>première balise de <objet>(childNodes[0]). <objet> 3e balise de <main> (childNodes[2] [2 car childNodes[] commence a 0]).
Voilà : si on réfléchit un peu, c'est très simple. Si vous avez compris cela, vous avez tout compris. Allez, 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 saurez ainsi mieux vous repérer.
SVP, c'est essentiel pour réussir, ne regardez pas le secret avant d'y avoir réfléchi.
Comment faire pour afficher la description de l'Épée diablolique
Épée diablolique texte de <description> (firstChild) <description> deuxieme balise de <objet> (childNodes[1]) <objet> deuxième balise de <main> (childNodes[1]) <main> est représenté par la variable "x")
C'est bien beau tout ça, mais comment afficher les atributs des balises telles 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])
Comment afficher le contenu des balises <objet></objet> d'un seul coup ? Autrement dit, si on gagne un objet, le fichier XML sera différent (une balise <objet> en plus) et on devra ajouter du code ActionScript. Ça ne sera plus dynamique (automatique) !
On va utiliser les boucles qui vont afficher le contenu des balises <objet>, peu importe le nombre.
Voilà la clé du tutoriel. Je détaille et explique le code.
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). indique un retour à la ligne. Le reste, vous devriez comprendre. for est une boucle ; si vous ne les connaissez pas, allez lire ce chapitre. Je vais quand même expliquer 2 lignes :
Voir_xml += "Objet: " + x.childNodes[i].firstChild + "\n";
/* On affiche le contenu de la balise i (0 puis 1 puis 2, et après notre boucle 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 Épé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 ait plus de balise <objet>. La boucle sera donc lue 3 fois.
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 Épée diablolique
i++; (on augmente i de 1 -> i = 2)
Troisième fois
(i = 2)
x.childNodes[i].childNodes[0].firstChild -> Retourne Épé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'arrête.
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'appelle "type", qui se trouve dans la balise <objet> numéro i(la variable de la boucle) qui se trouve dans <main> */
Pffff, c'est fini. Analysez bien ce code, c'est la clé pour réussir. Vous savez maintenant utiliser les bases du XML.
Le code final
//Voir_xml est le champ 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) { //S'il n'existe pas d'élément
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 écrire le fichier XML ; la dernière sera l'étude d'une feuille XML complexe (ces parties sont falcultatives et nécessiteront 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'intérieur d'elles-mêmes :
Dans ce genre de code, vous devez faire une boucle pour afficher les employés et une autre pour afficher les enfants (car le nombre d'enfants est aussi indéfini). Ça vous fera, je pense, un bon exercice en attendant la suite.
Voilà, 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 tutoriel et relisez la dernière partie.
