Flash : XML et compléments aux Arrays

le 2 février 2011 • Flash • par Dawlin

Suite à une demande à peine voilée d'Ecline pour un tutoriel plus poussé sur les arrays, voilà que Hop, je m'y mets... En premier lieu, on va d'abord apprendre ce que c'est que le XML et comment on s'en sert dans flash.

Je vous conseille toute de même, si vous n'avez aucune idée de ce dont il s'agit, d'aller voir au préalable les premiers tutoriels sur les arrays dans Flash.

Allez, hop, c'est partit !

C'est quoi, un XML ?

Le XML est un langage qui permet de trier des données. il est très simple à apprendre puisqu'il ne peut rien engendrer (il n'a pas de commande). C'est donc un format de tri de données.

Il ressemble beaucoup au HTML dans le sens où il est constitué d'un emboitement de balises et de balises (de fin, donc ).

Mais ces lesquelles, ces balises ??

Elles n'existent pas. A vous de les inventer. La plupart du temps, personne ne saura leur nom, l'important, c'est l'ordre dans lequel vous les mettez et les emboîtez.

Je m'explique. On parle souvent d'un arbre XML, car il y a des branches (on les appelle des noeuds) et des sous-branches (des noeuds enfants). C'est un peu comme un arbre généalogique.

Exemple de XML :


<root>
    <meurtrier>Colone Moutarde</meurtrier>
    <piece>Salon</piece>
    <arme>Chandelier</arme>
</root>

Note : le XML n'est pas limité à flash ! il est très pratique et on l'utilise dans beaucoup de langage de programmation !

Utilisation d'un code XML pour générer une array

Tout d'abord, on utilisera un peu de code XML pour bien ranger nos données. Ensuite, on va se rendre compte qu'un XML, c'est une array !

Allez, on fait F9 et on rentre ce code flash qui déclare une variable XML


monXml = new XML(); //On déclare la variable en précisant qu'il s'agit d'un objet XML
monXml.ignoreWhite = true; //On enlève les blancs qui gêneraient Flash

Puis on va le remplir :


monXml = new XML("
<root>
     <personne>Quentin</personne>
     <personne>Lou</personne>
     <personne>Maxime</personne>
     <personne>Léonard</personne>
</root>
");

Alors attention, je les écris en "déplié", mais sous flash il faut tout les regrouper en une ligne !

ça vous fait penser à quelque chose ? Oui, à une array appelée root qui contient 4 enregistrements avec des prénoms.

Donc un XML, dans Flash, ça fonctionne comme une array. mais les conteneurs s'appelleront des "nodes" (on dit des noeuds, comme dans un arbre) et les sous-noeuds s'appelleront "childNodes" (car ce sont des enfants).

Ainsi pour lire le prénom "Lou" dans mon XML, j'écrirai :


prenom = monXml.firstChild.childNodes[1].firstChild.nodeValue;

C'est à dire que :

firstChild : le premier enfant du noeud, ici
childNodes

firstChild.nodeValue; : ça nous permet d'aller encore à l'intérieur pour ne lire que la valeur du noeud (le prénom)

Voilà pour l'instant la base de l'utilisation des XMLs dans flash... ça se corsera après, mais pour l'instant il faut qu'on voit très rapidement une autre notion :

Une array dans une array

Certes, jusqu'à présent on y a mis du texte. Mais rien ne nous empêche d'y mettre des nombres, et de calculer avec... Ou des photos de vacances... Ou même... des Arrays !

Jusqu'à présent, une array c'était ça :

Mais si j'écris ceci :


monArray[0] = new Array();

(c'est à dire que je définis un enregistrement d'une array lui-même comme une array)

Alors je peux avoir ceci :

Mais... Mais... Mais ! ça veut dire que je peux avoir une array qui est une liste d'informations sur une personne pour chaque personne, et ranger toutes ces arrays dans une grande liste ??

T'as tout compris, ma mignonne ;-)

Et comment je fais tout ça en flash ?? Alors :


var liste:Array = new Array(); // je définis une grosse array 

liste[0]=["Quentin","homme",17];

Parce que pour définir une array, il est tout aussi simple de l'écrire comme ceci :


monArray = [enregitrement1,enregistrement2,enregistrement3,...,...];

ça marche aussi, donc... Et si on veut tout compacter en une seule grosse commande :


var liste:Array= [["Quentin","homme",17],["Lou","fille",19],["Maxime","homme",42]];

On a donc enregistré dans flash une double array... maintenant comme on la lit ??

Un peu de logique : on sait que l'âge est l'enregistrement numéro 2 (on commence à 0 toujours ) des "sous-arrays". Donc pour avoir l'âge du membre numéro 1, on dit...

Allez, essayez de trouver...

On dit...

Fermer ce cadre

s'il-vous plaît, bien sûr !

et sinon en flash, vu que c'est une array on va utiliser les [] et vu que c'est encore une array on va utiliser encore des []...

Cette fois-ci c'est pas une blague

Fermer ce cadre

ageDuNumero1 = liste[1][2];

Flash va donc aller chercher la personne numéro 1 (et pas 0) puis son âge, il nous donne donc : 19. Si, Si, ça marche !

Et si on repassait au XML ?

Parce que déclarer une double Array c'est quand même encombrant, surtout quand on voudra rajouter plein d'informations sur les personnes, et quand on aura 250 membres à lister... Vous imaginez la taille de la commande ? Entre-nous, je pense que flash ne peut pas lui-même l'imaginer.

Allez heup ! XML :


monXml = new XML(); //On déclare la variable en précisant qu'il s'agit d'un objet XML
monXml.ignoreWhite = true; //On enlève les blancs qui gêneraient Flash

monXml = "
<root>
     <personne>
          <nom>Quentin</nom>
          <sexe>homme</sexe>
          <age>18</age>
     </personne>
     <personne>
          <nom>Lou</nom>
          <sexe>oui</sexe>
          <age>19</age>
     </personne>
     <personne>
          <nom>Maxime</nom>
          <sexe>souvent</sexe>
          <age>42</age>
     </personne>
</root>";

Je fais quelques petites blagues, vous m'excuserez mais je suis sur ce tuto depuis une bonne heure

Donc ça commence à faire un gros texte, mais c'est lisible, au moins... C'est structuré (mais il faut toujours regrouper en une ligne !).

Donc le but c'était d'aller chercher l'âge de l'enregistrement numéro 1 ? Trop facile...

Vous voyez comment ? allez ...

Clique pour afficher la zone invisible

Fermer ce cadre

age = monXml.firstChild.childNodes[1].childNodes[2].firstChild.nodeValue;

Non, en XML, on ne se contente pas d'enchaîner les [], il faut se déplacer de noeuds en noeuds, avec des numéros, etc, etc...

Moralité : Les Arrays c'est difficile à écrire, mais facile à utiliser, alors que les XMLs, c'est l'inverse.

Mais si les deux existent encore, c'est bien qu'il y a moyen de faire quelque chose ?

Futée, la jeune ;-)

Transformer un XML en Array

J'ai donc écris ma variable XML (voir plus haut) et je veux en faire une Array...

On va donc utiliser une boucle pour lire le XML et au passage l'inscrire dans une array.

Voici le code que l'on écrira :


// Tout d'abord déclarer le XML

monXml = new XML(); //On déclare la variable en précisant qu'il s'agit d'un objet XML
monXml.ignoreWhite = true; //On enlève les blancs qui gêneraient Flash

monXml = "
<root>
     <personne>
          <nom>Quentin</nom>
          <sexe>homme</sexe>
          <age>18</age>
     </personne>
     <personne>
          <nom>Lou</nom>
          <sexe>oui</sexe>
          <age>19</age>
     </personne>
     <personne>
          <nom>Maxime</nom>
          <sexe>souvent</sexe>
          <age>42</age>
     </personne>
</root>";

// puis on crée notre grosse Array qui va servir à tout contenir :
var liste:Array = new Array();

/* Maintenant, le but du jeu, ça va être de faire passer les données de l'un dans l'autre, en gardant la même structure... SUPER-BOUCLE !! */

/* Cette boucle commence avec i=0, et elle ajoutera 1 à i à chaque fois qu'elle s'exécutera. Elle s'exécutera tant que i est < au total d'enregistrement de notre XML.
Note : voir la propriété .length d'une array aux tutoriels précédents */

for(i=0;i<monXml.firstChild.childNodes.length;i++){
      // i servira à lire une nouvelle personne à chaque fois
      // On définit des variables avec les informations de la personne :
      nom = monXml.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue;
      sexe = monXml.firstChild.childNodes[i].childNodes[1].firstChild.nodeValue;
      age = monXml.firstChild.childNodes[i].childNodes[2].firstChild.nodeValue;

      // Bien... Maintenant on crée une array provisoire :
      var arrProv:Array = new Array();
      // On lui applique ces trois variables :
      arrProv = [nom,sexe,age];

      //Puis on stocke cette array provisoire dans l'enregistrement n°i de la grosse array
      liste[i] = arrProv;

//Si la liste des personnes n'est pas finie, on revient au début de la boucle
}

Voilà, c'est un peu fastidieux, mais on peut maintenant utiliser ce XML avec une array...

Mais si on doit tout regrouper en une ligne, c'est illisible et pas structuré, non ?

Oui, mais je vous réserve un autre tutoriel pour charger un XML depuis ailleurs, et celui-là aura le droit d'être bien écrit avec des retours à la ligne ;-)

En espérant que vous eûtes tout compris, merci d'avoir suivi ce tutoriel,

Dawlin

Flash : XML et compléments aux Arrays

C'est quoi, un XML ?

Utilisation d'un code XML pour générer une array

Une array dans une array

Et si on repassait au XML ?

Transformer un XML en Array

Lisez aussi...

Flash : Le principe d'une Map

Flash : Charger et exploiter un fichier XML externe