Epivoila, blog graphisme developpement referencement

Classe pour parser un XML dans Flash

- Ecrit par Alexis le Jeudi 14 février 2008 | catégorie : Développement web

- Mots clefs : , ,

Parser un XML en Action Script 2

Ou plutôt comment parser un XML en Action Script 2.0.

Je pense que cette classe a une réelle utilité, car elle permet de passer outre le décodage XML natif de l’action script 2 qui n’est… Pas souple du tout.
Tout d’abord je pense qu’il est important de souligner que cette classe ne permet pas de décoder n’importe quel XML sous n’importe quelle DTD, c’est juste une manière de transmettre des informations à flash grâce à un fichier XML.

Si vous n’avez pas envie de lire, téléchargez directement le zip! (c’est en bas ;)

On verra dans d’autres billets comment faire communiquer PHP et SQL grâce à cette classe, mais puisque le reste tournera autour de cette classe…
Il n’y a pas de gestion des attributs non plus, mais ici autant dire que ça sert à rien pour de la transmission de données (objets, nombres, chaînes, dates, tableaux indicés ou non).
L’aspect que je voulais respecter est le typage, on peut donc passer des informations typées, avec les accents et les caractères spéciaux.

Pour le typage, il suffit de rajouter un attribut type dans la balise avec comme valeur possible:
- number: pour un nombre bien sûr :) au format générique avec le point pour définir la virgule: 10, 10.4, -0.008
- date: pour une date au format timestamp à la milliseconde, c’est le nombre de millisecondes écoulées depuis le 1er janvier 1970, avec ça on retrouve n’importe quelle date grâce à un gros numero :) L’avantage ici est que mon parseur créé automatiquement un objet date configuré avec le timestamp.
- boolean: pour un booleen, les valeurs accéptées sont true, false, 1 ou 0
- string: pour faire une chaîne de carractères, basique et implicite car si ce n’est pas un autre type, alors c’est ça (non?).

Les tableau et les objets sont implicites, pas besoin de les définir étant donné qu’il seront toujours retrouvés grâce à l’organisation du fichier XML.

J’ai aussi fait un typage compressé pour accélérer les gros échanges:
- “n” pour number
- “d” pour date
- “b” pour le booleen

Ah oui, quelque chose de très très important si vous ne voulez pas que flash vous crie dessus en anglais:
Flash n’aime que l’UTF-8, donc le fichier XML doit IMPÉRATIVEMENT être encodé en UTF-8 (pour ça: notepad++ ou notepad2)
Si le fichier XML sort de PHP, il suffit de rajouter une balise header http pour spécifier l’encodage, PHP se chargera du reste (on verra ça plus tard).
Sans UTF-8 il n’y aura pas d’accents, et les carractères spéciaux seront bouffés.

Avant de commencer les exemples, juste une petit récapitulatifs des méthodes et des propriétés disponibles avec cette classe (je sais je suis vilain je n’ai pas fait de doc):
- Le constructeur: new xml(sourceXML:XML);
Le paramètre sourceXML de type XML est optionnel, il permet de passer un XML pour le parser directement (sans charger de fichier externe) ça sert à rien, mais ça coutait rien de le rajouter alors…

- load(source:String):Void;
Le paramètre source de type String est le lien du fichier XML à charger et à parser. Il sera parsé automatiquement et une fois qu’il sera prêt, la méthode externe onLoad sera appelée.

- onLoad(objet:Object):Void;
Ceci est une méthode externe, à ajouter avec un eventListener par exemple. Elle est appelée une fois que le fichier XML est chargé et parsé correctement. Le paramètre objet de type Object est tout simplement l’objet XML parsé.

- onLoadError():Void;
Cette méthode externe est appelée si le fichier XML n’arrive pas à être chargé.

- toString():String;
Permet d’afficher l’objet au format String, tout simplement (ça donne une bonne idée de l’architecture du fichier XML, et surtout si rien n’a été oublié).

- getElementsByTagName(tag:String):Array;
Cette méthode permet de rechercher toutes entités présentes dans l’architectures et portant le nom passé en paramètre ‘tag’ de type String. Les résultats sont retournées directement (étiquettes des entités recherchées) dans un tableau indicé.

- objet:Object;
C’est une propriété en lecture seule, c’est l’architecture du fichier XML parsé.

Premier exemple:

Voici le type d’XML que l’ont pourrait parser, en provenance de PHP par exemple, ou tout simplement stocké sur le serveur:

1
2
3
4
5
6
7
8
9
10
11
12
13
<racine>
	<tableau>
		<item type="number">23.8</item>
		<item type="string">test</item>
		<item type="date">34567898765</item>
		<item type="boolean">false</item>
		<item type="boolean">true</item>
	</tableau>
	<objet>
		<truc>Le truc avec des accents héhé</truc>
		<bidule>Et le bidule h@h@</bidule>
	</objet>
</racine>

Ah oui important, il est préférable d’avoir une balise racine (vous l’appelez comme vous voulez bien sûr) mais pas plusieurs entités dès le premier étage.

Voilà comment flash vera désormais ce gros tat de balises:

1
2
3
4
5
6
7
8
9
10
+ racine [object]
    + tableau [object]
        - 0 [number]: 23.8
        - 1 [string]: test
        - 2 [object]: Fri Feb 5 03:11:38 GMT+0100 1971
        - 3 [boolean]: false
        - 4 [boolean]: true
    + objet [object]
        - truc [string]: Le truc avec des accents héhé
        - bidule [string]: Et le bidule h@h@

La méthode toString() permet d’avoir un graph dans ce genre (ça permet de debugguer correctement).

Voici comment par exemple avoir la date: monObjet.racine.tableau[2]
Fini, ça n’a pas l’air trop dûr.
Maintenant pareil mais pour avoir truc: monObjet.racine.objet.truc

Pour parser tout ça dans flash, ça devient alors tout simple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Importation de la classe
import zouloux.xml;
// Création d'un nouvel objet XML
var monXML:xml = new xml();
// Charger le fichier XML
monXML.load("test1.xml");
// Cette fonction est appelée une fois que le fichier XML est chargé et parsé
monXML.onLoad = function(objet)
{
	// Afficher l'objet XML parsé
	trace("Xml chargé avec succès");
	// Le toString affiche un graph comme au dessus
	trace(monXML.toString());
	// Sortir toutes les valeurs du tableau
	trace("Affichage du tableau");
	for (var i in objet.racine.tableau)
	{
		trace("-&gt; "+i+": "+objet.racine.tableau[i]);
	}
};
// Le fichier XML n'a pas pu être chargé
monXML.onLoadError = function()
{
	trace("Impossible de charger le fichier XML");
};

Second exemple:

Voici aussi par exemple aussi le fichier XML d’une galerie Flash.
Avec par exemple, un titre pour la galerie, et pour chaque image un nom, une url pour l’image, une note sur 5 et la date d’envois.
Ca reste tout simple et le typage est respecté.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<galerie>
	<titre>Ma galerie!</titre>
	<images>
		<item>
			<nom>Ma première image</nom>
			<url>image1.jpg</url>
			<note type="number">3</note>
			<date type="date">61234567890</date>
		</item>
		<item>
			<nom>Ma seconde image</nom>
			<url>image2.jpg</url>
			<note type="number">4</note>
			<date type="date">51234567890</date>
		</item>
		<item>
			<nom>Ma troisième image</nom>
			<url>image3.jpg</url>
			<note type="number">0</note>
			<date type="date">41234567890</date>
		</item>
	</images>
</galerie>

Pour parser ça en AS2:

1
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
// Importation de la classe
import zouloux.xml;
// Création d'un nouvel objet XML
var monXML:xml = new xml();
// Charger le fichier XML
monXML.load("test2.xml");
// Cette fonction est appelée une fois que le fichier XML est chargé et parsé
monXML.onLoad = function(objet)
{
	// Afficher l'objet XML parsé
	trace("Xml chargé avec succès");
	// Le toString affiche un graph comme au dessus
	trace(monXML.toString());
	// Sortir le titre
	trace("Affichage du titre: "+objet.galerie.titre);
	// Sortir toutes les images de la galerie
	trace("Affichage de toutes les images de la galerie:");
	for (var i in objet.galerie.images)
	{
		trace("- Image "+i);
		trace("   nom:  "+objet.galerie.images[i].nom);
		trace("   url:  "+objet.galerie.images[i].url);
		trace("   note: "+objet.galerie.images[i].note);
		trace("   date: "+objet.galerie.images[i].date);
	}
};
// Le fichier XML n'a pas pu être chargé
monXML.onLoadError = function()
{
	trace("Impossible de charger le fichier XML");
};

Je pense qu’il y a assez d’exemples, il y en a d’autres dans le zip, de toutes manières je repasserais là dessus (pour l’exportation d’XML) et surtout la communication avec les applications en ligne (c’est là que ça devient marrant et intéressant :)
Voilà, tout est dans le zip et si vous avez des questions, des remarques ou des idées n’oubliez pas les commentaires!

Télécharger la classe au format [zip]

Commentaires (5)

Flèche commentaire Ah punaize depuis le temps qu'on l'attendais ce premier billet ! Mais ca valait le coup, c'est vraiment interessant. Merci alex.

- Ecrit par clement, le 14 février 2008 à 9:47

Flèche commentaire Mdr paye ton billet de taré ! Super interessant en tout cas !

- Ecrit par Julien, le 14 février 2008 à 13:02

Flèche commentaire merci, je viens de m'en servir, ça fonctionne nikwel !

- Ecrit par GrM, le 26 février 2008 à 16:49

Flèche commentaire Idem, je suis en train de tester et la classe fonctionne très bien, merci alex.

- Ecrit par clement, le 26 février 2008 à 19:24

Flèche commentaire Super interessant comme billet :) Je fais plus d'AS2, simplicité AS3 obligé (notamment pour le XML) Mais ton concepte pourrait être intéressant pour un portage en AS3. En tout cas , cela peut être une bonne alternative a AMFPHP.

- Ecrit par Xarald, le 13 mai 2008 à 20:56

Postez votre commentaire