Utilisation du format XML dans FLASH

21/05/2004

Par Bolo Michelin (Autres articles)

Cet article vous expliquera comment utiliser un document XML dans Flash.

1. XML:base 1

Ce premier article vous apprendra les bases de la manipulation d'un document XML. Je vous invite à visiter la section XML.Pour toutes questions sur ce tutorial

1.1. commandes

Pour charger des données XML, il faut créer un objet XML. Dans le dictionnaire A.S (Action Script) vous pourrez voir toutes les propriétés de l'objet XML. Dans cet article nous utiliserons ces commandes pour charger le document XML : XML.getBytesLoaded, XML.getBytesTotal, XML.load.
XML.getBytesLoaded
XML.getBytesLoaded renvoie le nombre d'octets chargés pour le document XML
Minimum
flash player 6
Syntaxe

monCodeXML.getBytesLoaded()

Exemple

document.getBytesLoaded()

XML.getBytesTotal
XML.getBytesTotal renvoie la taille, en octets, du document XML spécifié.
Minimum
flash player 6
Syntaxe

monCodeXML.getBytesTotal()

Exemple

document.getBytesTotal()

XML.load
XML.load charge un document XML depuis l'URL.
Minimum
flash player 5
Syntaxe

monCodeXML.load(url)

Exemple

document = new XML()
document.load("monXML.xml")

Pour récupérer les données nous utiliserons XML.attributes.
XML.attribut
XML.attributes renvoie un tableau associatif contenant tous les attributs de l'objet XML spécifié.
Minimum
flash player 5
Syntaxe

monCodeXML.attributes

Exemple

document = new XML()
document.load("monXML.xml")
trace(document.firstChild.childNodes[1].attributes.nom)

1.2. application

On crée un document XML.

<?xml version="1.0" ?>  
<root> 
<nouvelle numero="3" date="17/12/2003" /> 
</root>

On charge le document XML.

document= new XML(); //création de l'objet XML
document.ignoreWhite=true; //ignorer les sauts de ligne
document.load("essai.xml"); //charge le document

Pour récupérer le numéro et la date de la nouvelle, on fait ainsi :

document.firstChild.childNodes[0].attributes.numero 
document.firstChild.childNodes[0].attributes.date

Manipulation d'un document XML : Combien y a-t-il de nouvelles ?

document.firstChild.childNodes.length

Quel est la date de la nouvelle numéro 1 ?

document.firstChild.childNodes[0].attributes.date

1.3. Aller plus loin

Le code ci-dessous explique comment précharger des données XML. Nous préchargeons les données du document XML.

_root.document=new XML(); //création de l'objet XML
_root.document.ignoreWhite=true;// les espaces vides sont supprimés
_root.document.load("monXMl.xml");//chargement du document XML
_root.stop();
_root.document.onLoad=function(){ //quand le chargement du document est terminé , lancement de l'animation
trace(this.firstChild.childNodes[0].attributes.texte);
_root.play();
}

2. XML et Base de données (ASP)

La création d'un document XML à la volée est assez simple. Dans la page ASP nous réalisons une requête qui sélectionne toutes les news. Après nous les éditons en les formatant comme un fichier XML. Dans l'exemple ci-dessous, nous créons un document XML de cette forme.

<?xml version="1.0" ?>  
<root> 
<nouvelle date="10/02/2003"  texte=" teste 1"/> 
</root>

Voici le code de la page ASP:

<@ CodePage=65001 Language="VBScript">
<%
'connection à la base de données
Set oC = Server.CreateObject("ADODB.Connection")
oC.Provider = "Microsoft.Jet.OLEDB.4.0"
oC.Open "Data Source=" & Server.MapPath("../../databases/ind.mdb") 
'sélectionne toute les nouvelles
SQL ="SELECT * FROM news order by date DESC"

'création du Recordset
Set oRS = CreateObject("ADODB.Recordset")
oRS.Open SQL,oC,3,3

'création du document XML 
response.write("<?xml version="""1.0""" ?>")" 
response.write(<root> )

' boucle pour collecter toutes les nouvelles
ors.movefirst
do while not ors.eof
  response.Write("<nouvelle date=""" & ors("date") & """ texte=""" & ors("texte") & """ />" )
  ors.movenext
Loop

'on ferme le document XML
response.write("</root> ")

'on ferme la connection à la bdd
Set oRS = Nothing
oC.Close
Set oC = Nothing
%>

3. XPath

Flash MX 2004 introduit une nouvelle classe XPathAPI. Celle-ci vous permettra de faire des recherches simples avec Xpath dans Flash.

3.1. Commandes

La classe de XPathAPI n'est pas une classe construite dans le Flash Player 7. Celle-ci se trouve dans une librairie spéciale appelée DataBindingClasses. Avant de voir un cas concret, voyons toutes les expressions supportées par Flash.

<employees>
   <person gender="m">Matt</person>
   <person gender="f">Heather</person>
   <person gender="m">Tucker</person>
   <person gender="f">Apple</person>
   <person gender="m">Nate</person>
 </employees>

Pour accéder au noeud personne, on peut soit utiliser un chemin absolu
/employees/person
soit un chemin relatif person si le noeud courant est <employees>.
On peut également utiliser les wildcard (*). Par exemple avec notre fichier:
le chemin "/*/person" recherche tous les élements <person> indépendamment du noeud parent.
L'opérateur = est supporté également. Ce chemin nous ressort tous les employés qui sont des femmes "/employees/person[@gender='f']".
Ce chemin "/employees/person[@gender='f' and @age='30 ']" ressort tous les employés qui sont des femmes et qui ont 30 ans.
Les opérateurs suivants ne sont pas supportés par Flash: "<", ">", "//".

3.2. Application

<employees>
   <person gender="m">Matt</person>
   <person gender="f">Heather</person>
   <person gender="m">Tucker</person>
   <person gender="f">Apple</person>
   <person gender="m">Nate</person>
 </employees>

Dans notre nouveau document, nous allons importer la librairie DataBindingClasses

• ouvrir : Fenêtre/Autres panneaux/Bibliothèques communes/Classes
• Sélectionnez la bibliothèque DataBindingClasses et glissez-la dans la bibiothèque de votre animation.
• Sur la première Frame de votre animation taper : import mx.xpath.XPathAPI;. Celle ligne permet d'importer la classe XpathApi dans Flash

Maintenant que notre classe est importée dans notre animation, nous allons créer notre interface.

• Placer deux boutons : un pour les hommes(bnt_H) et un pour les femmes (bnt_F)
• Placer un textarea (txt_pesonne) et dans l'option HTML mettez "true"

La fonction Remplir ajoute les valeurs du tableau dans le textarea

function Remplir (texte){
	/* on supprime le contenu du textarea*/
	txt_pesonne.text  =""
	/* on ajoute chaque personne au textarea*/
  for (var i = 0; i < texte.length; i++) {
   txt_pesonne.text+=texte[i];
  }
}

Puis nous chargeons notre fichier XML et nous ajoutons tous les noms

myXML = new XML()
myXML.ignoreWhite = true;
myXML.onLoad = function(success) {
	if(success){
	/* definit le chemin*/
  var chemin = "/employees/person"
  /* on récupère toutes les personnes*/
  var personNoeud = mx.xpath.XPathAPI.selectNodeList(this.firstChild,chemin);
  /* on remplit le textarea */
  Remplir (personNoeud )
	}
}
myXML.load("xpath.xml")

Le bouton bnt_F affichera le nom des femmes.

bnt_F.onPress = function () {
var chemin = "/employees/person[@gender='f']";
var personNoeud = mx.xpath.XPathAPI.selectNodeList(myXML.firstChild,chemin);
  /* on ajoute chaque personne au textarea*/
Remplir (personNoeud )
}

Le bouton bnt_H affiche lui le nom tous les hommes

bnt_H.onPress = function () {
var chemin = "/employees/person[@gender='m']";
var personNoeud = mx.xpath.XPathAPI.selectNodeList(myXML.firstChild,chemin);
  /* on ajoute chaque personne au textarea*/
Remplir (personNoeud )
}

Télécharger le zip contenant le fichier XML et le fla.

Remerciements

Chaleureux remerciements à Developpez.com et plus particulièrement à Jérôme etAlacazam .