> Le Site du Zéro - Informatique > Cours > Tutoriels > Programmation > AS / Flash / Flex > Le XML > Lecture du tutoriel

Le XML

Par

Mise à jour : 23/02/2009

494 visites depuis 7 jours , classé 219/777

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.

Retour en haut

Sommaire du tutoriel :

Le XML : explications
Préparons notre fichier
Dernières préparations
Enfin le code, c'est parti !
Tout afficher
Enregistrer un fichier XML

Retour en haut

Le XML : explications

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 : XML

<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 : XML

1 2	<!-- Balise par paire --> <balise>contenu</balise>

Code : XML

1 2	<!-- Balise unique --> <balise />

Chacune de ces balises peut contenir un ou plusieurs attributs : Code : XML

1
2
3

<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.

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.

Retour en haut

Préparons notre fichier

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.
Code : XML

1	<?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 :
Code : XML

<?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).Code : XML

<?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 : XML

1	<!-- 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).

Retour en haut

Dernières préparations

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 : Code : Autre

1	Fichier_XML = new XML();

Ensuite, on doit indiquer qu'on ne prend pas compte les espaces blancs (mesure obligatoire) :
Code : Autre

1	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 : Autre

1	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é :
Code : Autre

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é).
Code : XML

<?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>

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 changez l'URL à la ligne Fichier_XML.load("Inventaire.xml"); du fichier Flash.

Retour en haut

Enfin le code, c'est parti !

Il faut observer la structure de notre fichier XML pour ne pas se perdre, comme ceci :

Code : XML

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

1	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>).
Code : Autre

1	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 : Autre

1	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>).

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 : XML

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 compreniez 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 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 :
Code : Autre

1
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 : Autre

1	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 : Autre

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 : Autre

1 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 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).

Secret (cliquez pour afficher)

Pour afficher le nom du 3^e objet, il faut penser comme ceci.
Le texte, le contenu est représenté par firstChild.
<nom> première balise de <objet> (childNodes[0]).
<objet> 3^e balise de <main> (childNodes[2] [2 car childNodes[] commence a 0]).

Code : Autre

1	Voir_xml = x.childNodes[2].childNodes[0].firstChild

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.

Retour en haut

Tout afficher

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

Secret (cliquez pour afficher)

É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")
Code : Autre

1	Voir_xml = x.childNodes[1].childNodes[1].firstChild;

J'espère 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 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])
Code : Autre

1	Voir_xml = x.childNodes[0].attributes.type

Si vous ne faites pas des tests chez vous et que vous lisez tout comme ça, vous risquez d'avoir des difficultés, n'hésitez 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 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.

Code : Autre

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 { //S'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";
}

Voilà la clé du tutoriel. Je détaille et explique le code.
Code : Autre

1	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, allez lire ce chapitre.
Je vais quand même expliquer 2 lignes : Code : Autre

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

Code : Autre

//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).

Retour en haut

Enregistrer un fichier XML

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 :

Code : XML

<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 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.

Retour en haut

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.

Retour en haut

Retour en haut

35 commentaires pour "Le XML"

Note moyenne : 3.75 / 4 (4 votes)

Pseudo	Commentaire
ElvenElder	# Posté le 13/05/2009 à 23:44:32
	Excellent tutoriel. Très didactique. Mais je rencontre le même problème que Hfranck. A savoir, si dans : Fichier_XML.onLoad = function(Reussite) { ............... }; on accède effectivement aux valeurs de Fichier_XML. Dés qu'on quitte .onLoad tous les accès sont "undefined"... Comme si on était avec une variable locale dans la fonction. Existe-t-il un moyen de la passer en globale ? J'ai essayé avec _root. Ca ne marche pas.
Nik0	# Posté le 16/09/2009 à 23:40:34
Études : BTS IG Rouen	Ce tutoriel ne pouvait pas tomber mieux car j'ai eu beaucoup de difficultés avec l'affichage de ma gallerie à l'aide d'un fichier eXtensible Markup Language pour le chargement de photos . ( Il y\'à également la fonction idMap qui est utile pour çeux qui veulent .) Je remercie donc la personne qui à écrite ce tuto car il me manquait uniquement l'endroit donc ici "champ var" ou je devais mettre le nom de la variable pour que tout mes scripts fonctionnent alors c'est trop cool ! ! ! Et merci au site du Zer0 :)))
Maëlan	# Posté le 14/08/2011 à 19:02:31
Insupportable perfectionniste.	Citation : le tuto 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. Euh... UTF-8 est une "version" d'Unicode, avec tous les caractères possibles et imaginables qu'offre ce dernier. Donc le japonais, entre autres. Unicode, c'est le charset ultime. Tu pensais sous doute au charset ISO-8859-1 (Latin-1) qui est une norme d'encodage très répandue pour coder les alphabets européens. 1 , 2 , 3 « La notion de passoire est indépendante de la notion de trou, et réciproquement. » ↓ Sur le forum, n'oubliez pas… • $\tiny\LaTeX$ pour les formules de maths ; • zCode et indentation pour le code ; • de marquer votre sujet résolu. Quelques points de C [info/C] • Les nombres à virgules en C [info/C] • (βêta) Bases numériques & systèmes de numération [maths] • (10%) Les encodages [info] • ma vie, mon œuvre sur le SdZ ↑
Sannazzarotiti	# Posté le 15/08/2011 à 13:41:15
Ville : Nantes Pays : France métropolitaine	Oui tu a tout à faire raison. Il faut dire qu'a l’époque (car j’étais relativement jeune) je n'avais pas vraiment de notion sur les charsets. Mais tu à tout à fait raison de le signaler.
bouslimi	# Posté le 31/01/2012 à 17:17:22
Avis : Bon	Merci bcp pour ce tuto .. y a t'il un autre tuto pour javafx FXML