I. 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

I-A. 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

 
Sélectionnez
monCodeXML.getBytesLoaded()

Exemple

 
Sélectionnez
document.getBytesLoaded()

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

 
Sélectionnez
monCodeXML.getBytesTotal()

Exemple

 
Sélectionnez
document.getBytesTotal()

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

 
Sélectionnez
monCodeXML.load(url)

Exemple

 
Sélectionnez
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

 
Sélectionnez
monCodeXML.attributes

Exemple

 
Sélectionnez
document = new XML()

document.load("monXML.xml")

trace(document.firstChild.childNodes[1].attributes.nom)

I-B. application

On crée un document XML.

 
Sélectionnez
<?xml version="1.0" ?>  

<root> 

<nouvelle numero="3" date="17/12/2003" /> 

</root>

On charge le document XML.

 
Sélectionnez
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 :

 
Sélectionnez
document.firstChild.childNodes[0].attributes.numero 

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

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

 
Sélectionnez
document.firstChild.childNodes.length

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

 
Sélectionnez
document.firstChild.childNodes[0].attributes.date

I-C. Aller plus loin

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

 
Sélectionnez
_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();
}

II. 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.

 
Sélectionnez
<?xml version="1.0" ?>  

<root> 

<nouvelle date="10/02/2003"  texte=" teste 1"/> 

</root>

Voici le code de la page ASP::

 
Sélectionnez
<@ 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
%>

III. XPath

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

III-A. 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.

 
Sélectionnez
<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: "<", ">", "//".

III-B. Application

 
Sélectionnez
<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

  1. ouvrir : Fenêtre/Autres panneaux/Bibliothèques communes/Classes
  2. Sélectionnez la bibliothèque DataBindingClasses et glissez-la dans la bibiothèque de votre animation.
  3. 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.

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

La fonction Remplir ajoute les valeurs du tableau dans le textarea

 
Sélectionnez
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

 
Sélectionnez
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.

 
Sélectionnez
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

 
Sélectionnez
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.

IV. Remerciements

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