Sources de données au format XML

Introduction

Le format encodé URL est sémantiquement pauvre : il ne permet guère que de présenter des listes de valeurs qu'il faut apparier par programme. Par exemple, une liste de marques automobiles et une liste de nombres représentant les immatriculations de chaque firme. Un autre format de données a aujourd'hui envahi le monde de l'Internet et du multimédia : il s'agit du format XML qui permet de structurer des informations hiérarchiquement. Flash ne pouvait pas rester sourd aux appels d'XML et il propose depuis la version 5 (parue en 2000) un objet XML très puissant capable de charger, d'envoyer et d'analyser (ang. parser) des sources de données aux format XML. C'est cet objet que nous nous proposons d'étudier pendant quelques labos, la théorie sur XML étant supposée connue.

Nous partons d'un arbre XML à deux niveaux contenant la liste des présidents des Etats-Unis, l'objectif étant de présenter cette liste dans une animation Flash.

L'objet XML

On déclare un objet XML tout simplement par l'appel du constructeur. A la ligne 5 ci-dessous, on crée une instance XML nommée xmlDoc. Bien sûr, il ne s'agit là que d'un nom de variable et tout autre nom pourrait convenir, mais autant se simplifier la vie et nommer les choses convenablement.

A la ligne 7, on modifie la proprité ignoreWhite pour indiquer à l'objet XML d'ignorer les blancs lors de l'analyse de la source. On entend par blanc tout caractère d'espacement, tabulation et retour à la ligne situé entre deux noeuds de l'arbre.

La méthode load appelée à la ligne 9 permet de charger une URL

Les lignes 15 à 21 définissent la fonction de rappel qui sera exécutée lorsque se produira l'événement onLoad, c'est-à-dire lorsque la lecture de la source sera terminée ou qu'elle aura échoué. Le statut de l'opération est transmis à la fonction par le paramètre ok.

Il est également possible de définir par ailleurs une fonction de rappel externe pour l'événement onLoad, comme nous l'avons fait à plusieurs reprises pour l'objet LoadVars.

La propriété firstChild

Le rôle de la fonction se résume pour le moment à afficher un message d'erreur dans la fenêtre de sortie ou à afficher l'arbre XML en affichant la propriété firstChild de l'objet XML. Cette propriété contient les données proprement dites (donc le noeud <potus></potus> et ses noeuds enfants), le reste du document XML étant constitué de la déclaration XML et de la DTD.

Parcourir une collection

Il s'agit maintenant d'extraire de l'arbre les noms des présidents. La collection noeud.childNodes contient la liste des noeuds enfants d'un noeud. Une collection se comporte comme un tableau ActionScript (ang. array). La propriété length donne le nombre d'éléments contenus dans le tableau et il est possible de parcourir ce tableau en utilisant une boucle for.

Extraire le contenu d'un noeud terminal

Pour obtenir le nom d'un président sans ses balises, il faut extraire le premier enfant de chaque élément de la collection.

Afficher les données dans une animation

Nous nous contenterons dans cette première étape d'afficher la liste complète des présidents sur une seule image. Pour obtenir une mise en page équilibrée des 43 présidents, nous pouvons utiliser 3 colonnes de 15 lignes ou 4 colonnes de 11 lignes.

Visualiser l'animation

Diviser pour régner

Pour garantir la facilité de compréhension du code, il est nécessaire de découper le programme en fonctions chargées chacune d'une tâche particulière. Ainsi, plutôt que de surcharger la fonction analyse() en lui faisant faire tout le travail, nous allons "déléguer" la tâche à une autre fonction.

Remarquez combien le code ci-dessus est facile à lire.

La fonction afficherLesNoms()

La ligne 25 ci-dessus appelle la fonction afficherLesNom() en lui transmettant en argument la variable president. La déclaration de la fonction doit donc comporter une variable pour recevoir cet argument. Pour généraliser la fonction, cette variable est appelée liste. On pourra ainsi appeler la fonction en lui transmettant des listes de rois, de pharaons ou de prix Nobels.

La méthode createTextField()

Pour afficher les noms, nous pourrions créer une zone de texte dynamique dans un clip que l'on importerait depuis la bibliothèque : nous avons déjà utilisé cette technique dans un précédent labo. Nous préférons cette fois-ci faire appel à la méthode createTextField() de l'objet MovieClip. Cette méthode permet de créer des zones de texte "à la volée". Elle requiert 6 paramètres : un nom d'occurrence, un niveau de profondeur, des coordonnées x,y et les deux dimensions largeur et hauteur

Les dimensions sont constantes pour tous les champs de texte et nous pouvons les définir une fois pour toutes avant la boucle. Nous choisissons une hauteur de 25 et une largeur de 200. Comme on prévoit une marge de 10 pixels (voir infra), il faut prévoir une largeur de document de 3x210=630 pixels. La hauteur d'une colonne est de 15x25=375 + 30 pixels si nous prévoyons un intervalle de 2 pixels entre chaque zone de texte : nous pouvons amener la hauteur du document à 410 pixels.

Les coordonnées x,y doivent également être initialisées avant la boucle. Nous commençons en haut à gauche de l'animation, à 10 pixels du bord.

Pour formater une zone de texte créée par programme, il faut créer une instance de l'objet textFormat et l'appliquer à la zone de texte par la méthode setTextFormat(). Comme nous appliquons le même format à toutes les zones de texte, nous pouvons également créer la format avant la boucle. Ici, nous nous contentons de modifier la propriété color de l'objet, mais il est possible de modifier d'autres propriétés comme la police, la taille, le style, le comportement, etc. Notez que certaines propriétés comme la présence d'une bordure, la couleur de la bordure, la couleur du fond sont de propriétés de l'object textField et non de l'objet textFormat.

Afficher les colonnes

Pour créer à la volée une zone de texte dynamique, il nous faut un nom automatique et une profondeur. La profondeur sera donnée par i, le numéro du président. Le nom automatique sera formé de la concaténation de la lettre "p" et de la profondeur, soit "p"+i (cf. ligne 45).

La méthode createTextField() a un grand défaut : elle ne renvoie rien. Pour accéder à la zone de texte qui vient d'être créée, il faut utiliser son nom. Seulement voilà, la variable nom utilisée aux lignes 45 et 46 n'est pas une référence de clip mais une simple chaîne de caractère. Pour créer une référence de clip, il faut "évaluer" la valeur de la variable nom. Ceci se fait par la fonction eval à la ligne 48, qui renvoie dans tf_txt une référence vers la zone de texte. On peut alors modifier la propriété text et appliquer la méthode setTextFormat() (cf. lignes 49 et 50)

Après avoir créé la zone de texte, on déplace y de h + 2 vers le bas.

Pour afficher la liste en 3 colonnes de 15 lignes, on se sert de l'opérateur % qui renvoie le modulo de 2 nombres, c'est-à-dire le reste de la division entière. Soit k le numéro de la ligne. Si le modulo de k par 15 vaut 0 c'est que k est un multiple de 15. Dans ce cas, il y faut recommencer l'affichage en haut de l'animation en réinitialisant y à 0 et on change de colonne en incrémentant x de la largeur d'une zone de texte (w) + une marge de 10 pixels. Tout ceci se passe aux lignes 53-56. Notez que k a été initialisé à 1 et non à 0 car le modulo de 0 par n est toujours 0.

Afficher des photos miniatures

Nous allons maintenant afficher des photos miniatures à gauche de chaque zone de texte. Les photos sont stockées dans un sous-dossier de l'animation nommé tiny et elles sont toutes un hauteur de 25 pixels et une largeur de 19 à 21 pixels.

Le nom du fichier photo est donné dans le fichier XML potus_02.xml qui contient d'autres informations telles que les dates du mandat, l'état et le parti.

La fonction afficherLesMiniatures() commence par réinitialiser x et y à 0 (lignes 62 et 63). Dans une boucle for, elle accomplit les actions suivantes

 

Visualiser l'animation