Accueil > > > TUTORIEL COMPLET XML
 TUTORIEL COMPLET XML
 Information sur la source
 Description
Voici un tutoriel complet sur l'utilisation du xml dans flash.
 Source
- Pour expliquer comment utiliser le xml dans flash, je vais prendre un exemple concret.
- Nous apprendre a exploiter un fichier xml en prenant comme exemple un systeme de news fictif.
- Nous ne realiserons que l'exploitation des donnée, pas le systeme lui meme.
- L'affichage se fera via la fonction trace().
-
- Je part sur le principe que vous connaissez les fonctions de base du langage, en particulier les boucles et les bases de la POO.
-
- Voici donc le fichier sur lequel nous allons travailler;
-
- <?xml version='1.0' encoding='UTF-8' ?>
- <main>
-
- <news>
- <title value="titre de la news" />
- <texte>
- <![CDATA[ blablabla ]]>
- </texte>
- <links>
- <link url="http://www.allboard.net" text="Allboard Network" />
- <link url="http://www.blackwizzard.com" text="BlackWizzard NetWork" />
- <link url="http://www.underground-fr.com" text="Underground-fr" />
- </links>
- </news>
-
- <news>
- <title value="une 2eme news" />
- <texte>
- <![CDATA[ texte de la 2eme news ]]>
- </texte>
- <links>
- <link url="http://www.v-network.info" text="Allboard Network" />
- </links>
- </news>
-
- </main>
-
- Comme vous pouvez le voir, nous devons specifier un header. si il n'y en a pas, flash va quand meme le charger, mais ce header permet de preciser l'encodage.
-
- <?xml version='1.0' encoding='UTF-8' ?>
-
- les info sont entre <?xml et ?>
- version='1.0' ne changera pas puisque seul la version 1.0 existe pour l'instant ;)
-
- encoding='UTF-8' determine l'encodage du fichier.
- UTF-8 est le plus utilisé, mais il existe une multitude d'encodages possibles.
- UTF-8 est le codage 'europeen'. Il est celui utilsé dans les pays utilisant notre alphabet.
- Il existes d'autres encodage tel que windows-1252, ISO-8859-1, UTF-16 ...
-
- Apres le header, nous voyons que les Balises sont mis entre une paire de balise <main></main> que l'on appele balises "root".
- quelque soit le document xml, Tout le document doit etre encadré ce cette pair de balise.
- Le nom de cette paire balise n'as pas d'importance.
-
- Il y a 2 types de balises;
- Celles, comme en HTML qui se composent en paire <nom></nom> et celles uniques, qui sont de type <nom />
- Chaque type de balise ouvrante px accueillir des parametres, exemple, <nom parametre="valeur"></nom> ou <nom parametre="valeur" />.
- Les balises uniques ne servent uniquement a accueillir des parametres.
- Pour fournir un texte complet, mettez le entre une paire de balises, mais attention! si votre texte se compose de code html, les balises html seront considérés comme des balises xml, ce qui entrainera souvent une erreur.
- Pour eviter cela, Vous pouvez placer votre texte entre les pseudo-balises <!CDATA![ et ]]>.
- exemple:
- <nom>
- Voici un texte en gars: <br>
- <b>blablabla</b>
- </nom>
- Si vous faittes comme cela, les balises html vont etre considérées comme du xml, et la syntaxe n'etant pas correct, en particulier pour le <br>, le fichier va retourner une erreur. C'est alors qu'intervient le CDATA:
- <nom>
- <![CDATA[
- Voici un texte en gars: <br>
- <b>blablabla</b>
- ]]>
- </nom>
- Tout ce qui se trouve dans la balise CDATA ne sera pas interpreté.
-
-
- Maintenant que vous possedez les bases syntaxiques du XML, nous allons commencer le code action-script.
-
- Pour exploiter du xml, nous devons declarer un nouvel objet XML:
- myXML = new XML();
-
- Nous voulons que les espaces et sauts de lignes ne soient pas interpretés (ce qui est preferable, sinon ça fout le bordel), pour cela, nous disposont de la propriété ignoreWhite:
- myXML.ignoreWhite = true;
-
- Nous allons maintenant charger le fichier:
- myXML.load("fichier.xml");
-
- Le fichier pouvant mettre plusieurs secondes a se charger en focntion de sa taille et de la conenction, nous allons faire intervenir la fonction onLoad() qui executera son code des que le xml est chargé. Cette fonction recoit un argument de type booleen (1 ou 0; true ou false) qui correpond a l'etat de chargement; true(1) = le document est chargé, false(0) = le document n'est pas chargé, probablement indisponible ou en erreur:
- myXML.onLoad = function(flag) {
- if (flag) { // si flag = true
- // reste du code.
- }
- }
-
- Maintenant que nous savons composer et charger un document XML, il faut l'analyser.
- Pour cela, Nous allons parcourir les "branches" du fichier, qui comme tt le monde a du le remarquer se compose comme une arborescence.
- Pour cela, nous allons utiliser une boucle while(), bien qu'il soit aussi possible de passer par un for().
- Voici l'arborescence sommaire du fichier :
-
- +main
- -+news
- ----title (value)
- ----texte [cdata]
- ---+links
- ------link 1 (url, text)
- ------link 2 (url, text)
- ------link 3 (url, text)
- -+news
- ----title (value)
- ----texte [cdata]
- ---+links
- ------link 1 (url, text)
-
- j'espere qu'il est assez clair pour tt le monde.
-
- Afin de parcourir le fichier, nous disposons de 2 fonctions principales:
- xml.firstChild et xml.childNodes[x].
- xml.firstChild retourne la premiere "branche" du noeud "xml".
- xml.childNodes[x] retourne le noeud "x" du noeud "xml", sinon il retourne "undefined" si la valeur le noeud "x" n'est pas trouvé.
- xml.firstChild equivaut donc à xml.childNodes[0].
-
- quand le fichier xml est chargé, notre objet XML "myXML" prend comme valeur le contenu du fichier xml.
- Vous pouvez vous en rendre compte en effectuant un trace(myXML);
- Donc, afin d'isoler les sections de news, nous pouvons faire trace(myXML.firstChild); qui va nous retourner uniquement les zones de news.
-
- Etant donnée que le nombre de news est dynamique, nous allons les afficher une par une, sans savoir a l'avance combien il y en a.
- Pour cela, nous allons utiliser notre boucle while, xml.childNodes[x] et xml.firstChild.
- (tout le code qui suis devra se placer a la place de "// reste du code.", dans la fonction onLoad()).
-
- //initialisation
- i=0; // on initialise le compteur.
- x = myXML.firstChild; // on se place sur le noeud des news.
- while (x.childNodes[i] != undefined) { // tant qu'il y a des news...
- trace(x.childNodes[i]); // on affiche le noeud de news trouvé.
- i++; // on incremente le compteur.
- }
- trace(i+" news trouvées"); // on affiche le nombre de news trouvé, c'est pas utile
- // pour ce tutoriel, mais c'est un plus ;)
-
- Voila!
- Nous avons commencé a parcourir le fichier!
- Si vous avez compris le bout de code ci-dessus, vous avez tout compris du xml, ou presque.
-
- Mais afin de faire un tutoriel complet, je vais aller jusqu'au bout de cette exploration du fichier.
- Nous avons donc su afficher chaque noeud de news.
- Nous allons donc explorer chaque news!
- Pour cela, nous devons nous servir d'une nouvelle fonction: xml.attributes
- Pour comprendre l'utilité de cette focntion, il faut voir les specificités du xml; En effet, nous avons 2 facons pour stocker du texte:
- - entre une paire de balise: <nom>texte</nom>
- - dans une balise: <nom attr="texte" />
- Pour acceder au premier type (la paire de balise), un simple firstChild suffit.
- Par contre, pour acceder a la balise elle meme, nous devons utiliser noeud_xml.attributes.nom_attribut
- Exemple :
- Pour <link url="http://www.allboard.net" text="Allboard Network" />
- Pour acceder a la valeur de "url", nous allons faire noeud_xml.attributes.url
- et pour acceder a la valeur de "texte" noeud_xml.attributes.text
-
- Voici donc le code complet qui permet d'explorer le fichier xml.
- Vous disposez maintenant de toutes les notions necéssaires pour comprendre ce code.
-
- i = 0;
- x = myXML.firstChild;
- while (x.childNodes[i] != undefined) {
- trace(""); // ligne vide
- trace("--- NEWS "+(i+1)+" ---"); // le (i+1) permet d'afficher "NEWS 1" et non pas "NEWS 0",
- // mais c'est juste une question esthetique.
- trace("titre:\t"+x.childNodes[i].childNodes[0].attributes.value); // le titre, avec le fameux "attributes"!
- trace("texte:\t"+x.childNodes[i].childNodes[1].firstChild); // le texte, via un simple firstChild.
- trace("liens:"); // ha! là on ne sais pas combien il y a de liens par news! ça devient interessant!
- j = 0; // on initialise j.
- while (x.childNodes[i].childNodes[2].childNodes[j] != undefined) { // tant qu'il y a des liens...
- trace("\t --- LIEN "+(j+1)+" ---"); // on affiche le numero de lien...
- trace("\t lien:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.url); // ...son url,
- trace("\t texte:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.text); // son texte...
- j++; // on incremente le compteur j.
- }
- i++;
- }
- trace(""); // ligne vide, purement esthetique.
- trace(i+" news trouvées");
-
- Et voila!
- Vous pouvez desormais vous servir du xml, qui est si pratique avec flash!
- Un conseil, avant de coder, regardez bien la structure du xml, si elle est complexe, faites le shema simplifié comme on a fait, et distinguez bien les elements statiques (titre, texte toujours au meme nombre et à la meme place) des elements dynamiques (souvent a la meme place, mais rarement au meme nombre).
-
- Amusez vous bien!
-
-
- Je resume le code complet ::
-
- myXML = new XML();
- myXML.ignoreWhite = true;
- myXML.load("file.xml");
- myXML.onLoad = function(flag) {
- if (flag) {
- i = 0;
- x = myXML.firstChild;
- while (x.childNodes[i] != undefined) {
- trace("");
- trace("--- NEWS "+(i+1)+" ---");
- trace("titre:\t"+x.childNodes[i].childNodes[0].attributes.value);
- trace("texte:\t"+x.childNodes[i].childNodes[1].firstChild);
- trace("liens:");
- j = 0;
- while (x.childNodes[i].childNodes[2].childNodes[j] != undefined) {
- trace("\t --- LIEN "+(j+1)+" ---");
- trace("\t lien:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.url);
- trace("\t texte:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.text);
- j++;
- }
- i++;
- }
- trace("");
- trace(i+" news trouvées");
- }
- };
-
-
- Ce tutoriel à été ecrit par BlackWizzard pour Flashkod.
- Diffusion autorisé a la seul condition de laisser mon pseudo en signature.
Pour expliquer comment utiliser le xml dans flash, je vais prendre un exemple concret.
Nous apprendre a exploiter un fichier xml en prenant comme exemple un systeme de news fictif.
Nous ne realiserons que l'exploitation des donnée, pas le systeme lui meme.
L'affichage se fera via la fonction trace().
Je part sur le principe que vous connaissez les fonctions de base du langage, en particulier les boucles et les bases de la POO.
Voici donc le fichier sur lequel nous allons travailler;
<?xml version='1.0' encoding='UTF-8' ?>
<main>
<news>
<title value="titre de la news" />
<texte>
<![CDATA[ blablabla ]]>
</texte>
<links>
<link url="http://www.allboard.net" text="Allboard Network" />
<link url="http://www.blackwizzard.com" text="BlackWizzard NetWork" />
<link url="http://www.underground-fr.com" text="Underground-fr" />
</links>
</news>
<news>
<title value="une 2eme news" />
<texte>
<![CDATA[ texte de la 2eme news ]]>
</texte>
<links>
<link url="http://www.v-network.info" text="Allboard Network" />
</links>
</news>
</main>
Comme vous pouvez le voir, nous devons specifier un header. si il n'y en a pas, flash va quand meme le charger, mais ce header permet de preciser l'encodage.
<?xml version='1.0' encoding='UTF-8' ?>
les info sont entre <?xml et ?>
version='1.0' ne changera pas puisque seul la version 1.0 existe pour l'instant ;)
encoding='UTF-8' determine l'encodage du fichier.
UTF-8 est le plus utilisé, mais il existe une multitude d'encodages possibles.
UTF-8 est le codage 'europeen'. Il est celui utilsé dans les pays utilisant notre alphabet.
Il existes d'autres encodage tel que windows-1252, ISO-8859-1, UTF-16 ...
Apres le header, nous voyons que les Balises sont mis entre une paire de balise <main></main> que l'on appele balises "root".
quelque soit le document xml, Tout le document doit etre encadré ce cette pair de balise.
Le nom de cette paire balise n'as pas d'importance.
Il y a 2 types de balises;
Celles, comme en HTML qui se composent en paire <nom></nom> et celles uniques, qui sont de type <nom />
Chaque type de balise ouvrante px accueillir des parametres, exemple, <nom parametre="valeur"></nom> ou <nom parametre="valeur" />.
Les balises uniques ne servent uniquement a accueillir des parametres.
Pour fournir un texte complet, mettez le entre une paire de balises, mais attention! si votre texte se compose de code html, les balises html seront considérés comme des balises xml, ce qui entrainera souvent une erreur.
Pour eviter cela, Vous pouvez placer votre texte entre les pseudo-balises <!CDATA![ et ]]>.
exemple:
<nom>
Voici un texte en gars: <br>
<b>blablabla</b>
</nom>
Si vous faittes comme cela, les balises html vont etre considérées comme du xml, et la syntaxe n'etant pas correct, en particulier pour le <br>, le fichier va retourner une erreur. C'est alors qu'intervient le CDATA:
<nom>
<![CDATA[
Voici un texte en gars: <br>
<b>blablabla</b>
]]>
</nom>
Tout ce qui se trouve dans la balise CDATA ne sera pas interpreté.
Maintenant que vous possedez les bases syntaxiques du XML, nous allons commencer le code action-script.
Pour exploiter du xml, nous devons declarer un nouvel objet XML:
myXML = new XML();
Nous voulons que les espaces et sauts de lignes ne soient pas interpretés (ce qui est preferable, sinon ça fout le bordel), pour cela, nous disposont de la propriété ignoreWhite:
myXML.ignoreWhite = true;
Nous allons maintenant charger le fichier:
myXML.load("fichier.xml");
Le fichier pouvant mettre plusieurs secondes a se charger en focntion de sa taille et de la conenction, nous allons faire intervenir la fonction onLoad() qui executera son code des que le xml est chargé. Cette fonction recoit un argument de type booleen (1 ou 0; true ou false) qui correpond a l'etat de chargement; true(1) = le document est chargé, false(0) = le document n'est pas chargé, probablement indisponible ou en erreur:
myXML.onLoad = function(flag) {
if (flag) { // si flag = true
// reste du code.
}
}
Maintenant que nous savons composer et charger un document XML, il faut l'analyser.
Pour cela, Nous allons parcourir les "branches" du fichier, qui comme tt le monde a du le remarquer se compose comme une arborescence.
Pour cela, nous allons utiliser une boucle while(), bien qu'il soit aussi possible de passer par un for().
Voici l'arborescence sommaire du fichier :
+main
-+news
----title (value)
----texte [cdata]
---+links
------link 1 (url, text)
------link 2 (url, text)
------link 3 (url, text)
-+news
----title (value)
----texte [cdata]
---+links
------link 1 (url, text)
j'espere qu'il est assez clair pour tt le monde.
Afin de parcourir le fichier, nous disposons de 2 fonctions principales:
xml.firstChild et xml.childNodes[x].
xml.firstChild retourne la premiere "branche" du noeud "xml".
xml.childNodes[x] retourne le noeud "x" du noeud "xml", sinon il retourne "undefined" si la valeur le noeud "x" n'est pas trouvé.
xml.firstChild equivaut donc à xml.childNodes[0].
quand le fichier xml est chargé, notre objet XML "myXML" prend comme valeur le contenu du fichier xml.
Vous pouvez vous en rendre compte en effectuant un trace(myXML);
Donc, afin d'isoler les sections de news, nous pouvons faire trace(myXML.firstChild); qui va nous retourner uniquement les zones de news.
Etant donnée que le nombre de news est dynamique, nous allons les afficher une par une, sans savoir a l'avance combien il y en a.
Pour cela, nous allons utiliser notre boucle while, xml.childNodes[x] et xml.firstChild.
(tout le code qui suis devra se placer a la place de "// reste du code.", dans la fonction onLoad()).
//initialisation
i=0; // on initialise le compteur.
x = myXML.firstChild; // on se place sur le noeud des news.
while (x.childNodes[i] != undefined) { // tant qu'il y a des news...
trace(x.childNodes[i]); // on affiche le noeud de news trouvé.
i++; // on incremente le compteur.
}
trace(i+" news trouvées"); // on affiche le nombre de news trouvé, c'est pas utile
// pour ce tutoriel, mais c'est un plus ;)
Voila!
Nous avons commencé a parcourir le fichier!
Si vous avez compris le bout de code ci-dessus, vous avez tout compris du xml, ou presque.
Mais afin de faire un tutoriel complet, je vais aller jusqu'au bout de cette exploration du fichier.
Nous avons donc su afficher chaque noeud de news.
Nous allons donc explorer chaque news!
Pour cela, nous devons nous servir d'une nouvelle fonction: xml.attributes
Pour comprendre l'utilité de cette focntion, il faut voir les specificités du xml; En effet, nous avons 2 facons pour stocker du texte:
- entre une paire de balise: <nom>texte</nom>
- dans une balise: <nom attr="texte" />
Pour acceder au premier type (la paire de balise), un simple firstChild suffit.
Par contre, pour acceder a la balise elle meme, nous devons utiliser noeud_xml.attributes.nom_attribut
Exemple :
Pour <link url="http://www.allboard.net" text="Allboard Network" />
Pour acceder a la valeur de "url", nous allons faire noeud_xml.attributes.url
et pour acceder a la valeur de "texte" noeud_xml.attributes.text
Voici donc le code complet qui permet d'explorer le fichier xml.
Vous disposez maintenant de toutes les notions necéssaires pour comprendre ce code.
i = 0;
x = myXML.firstChild;
while (x.childNodes[i] != undefined) {
trace(""); // ligne vide
trace("--- NEWS "+(i+1)+" ---"); // le (i+1) permet d'afficher "NEWS 1" et non pas "NEWS 0",
// mais c'est juste une question esthetique.
trace("titre:\t"+x.childNodes[i].childNodes[0].attributes.value); // le titre, avec le fameux "attributes"!
trace("texte:\t"+x.childNodes[i].childNodes[1].firstChild); // le texte, via un simple firstChild.
trace("liens:"); // ha! là on ne sais pas combien il y a de liens par news! ça devient interessant!
j = 0; // on initialise j.
while (x.childNodes[i].childNodes[2].childNodes[j] != undefined) { // tant qu'il y a des liens...
trace("\t --- LIEN "+(j+1)+" ---"); // on affiche le numero de lien...
trace("\t lien:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.url); // ...son url,
trace("\t texte:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.text); // son texte...
j++; // on incremente le compteur j.
}
i++;
}
trace(""); // ligne vide, purement esthetique.
trace(i+" news trouvées");
Et voila!
Vous pouvez desormais vous servir du xml, qui est si pratique avec flash!
Un conseil, avant de coder, regardez bien la structure du xml, si elle est complexe, faites le shema simplifié comme on a fait, et distinguez bien les elements statiques (titre, texte toujours au meme nombre et à la meme place) des elements dynamiques (souvent a la meme place, mais rarement au meme nombre).
Amusez vous bien!
Je resume le code complet ::
myXML = new XML();
myXML.ignoreWhite = true;
myXML.load("file.xml");
myXML.onLoad = function(flag) {
if (flag) {
i = 0;
x = myXML.firstChild;
while (x.childNodes[i] != undefined) {
trace("");
trace("--- NEWS "+(i+1)+" ---");
trace("titre:\t"+x.childNodes[i].childNodes[0].attributes.value);
trace("texte:\t"+x.childNodes[i].childNodes[1].firstChild);
trace("liens:");
j = 0;
while (x.childNodes[i].childNodes[2].childNodes[j] != undefined) {
trace("\t --- LIEN "+(j+1)+" ---");
trace("\t lien:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.url);
trace("\t texte:\t"+x.childNodes[i].childNodes[2].childNodes[j].attributes.text);
j++;
}
i++;
}
trace("");
trace(i+" news trouvées");
}
};
Ce tutoriel à été ecrit par BlackWizzard pour Flashkod.
Diffusion autorisé a la seul condition de laisser mon pseudo en signature.
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Arnault Nouvel et Antoine Dongois Le processus à prendre : Apprendre (découvrir la plateforme) Préparer (documenter l'historique et choisir la méthode de MAJ) Test (Test de MAJ) Implémenter (Effectuer la MAJ) Valid...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOURTECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice
Après un retour sur l'histoire des TechDays de Paris et le fait que ce soit le plus gros event MS au monde (du fait de sa gratuité), le président de MS France (Eric Boustoullier) a fait une présentation de la vision Microsoft pour les années à venir...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice CRéATION D'UNE BASE DE DONNéE SOUS SQL AZURECRéATION D'UNE BASE DE DONNéE SOUS SQL AZURE par junarnoalg
Sans rentrer dans les détails, je me propose ici de faire un rapide tour de ce que propose SQL Azure.
SQL Azure est avant tout un service d'hébergement de base de données relationnelles construit sur SQL Server. Il permet aux entreprises d...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|