XML data islands - Cours Javascript

Définition

Qu'est ce donc?

XML Data Islands est un système qui va vous permettre de lire un bout de fichier XML (interne ou externe) au sein de votre document HTML ou XHTML.
XML Data Islands (îlot de données XML) est au départ un technologie Microsoft (Internet Explorer 5.5).
Aujourd'hui les navigateurs comme FireFox ou Netscape 7 sont capables de lire ces donnés XML.
L'utilisation de XML Data Islands demande une bonne connaissance de Javascript.
XML Data Islands ne fonctionne pas de la même façon sous Internet explorer et Netscape, Firefox et Mozilla.

Cette technique reste d'après mes tests un peu hasardeuse, car elle semble être pas très bien interprétée par tous les navigateurs par exemple elle ne fonctionne pas sous Opera > 8.

Exemple de XML data islands :
Dmc1 Alias1 12 Dmc Alias 120

Copie d'écran de ce que vous devez voir :

Déroulement du cours

Informations

Internet Explorer permet d'associer les données du xml à un modèle qui va se remplir automatiquement sans utiliser le javascript.
Pour Netscape, FireFox et Mozilla, cela est différent; ils utilisent le javascript pour parser (parcourir) le XML et pour construire le code HTML et l'insérer dans la page.

Le cours

Le premier cours va se dérouler en plusieurs parties :
- une partie pour Internet Explorer qui n'utilise que du HTML simple,
- une partie pour Netscape, FireFox et Mozilla qui utilise le javascript,
- la synthèse des 2 systèmes.

Nous nous baserons sur le faite que l'îlot de données XML interne à la page et que le xml de l'îlot de données est juste.

Le but du cours est de remplir un tableau à partir de données XML.
Ces données XML comportent 3 informations le nom, le prénom et l'âge. C'est un exemple très simple.

Ecrire un îlot de données XML

Code

Vous devez introduire vos données XML grâce à la balise XML
Exemple de code :
<xml id="dmc">
  <donnes>
    <personne>
      <nom>Dmc1</nom>
      <prenom>Alias1</prenom>
      <age>12</age>
    </personne>
    <personne>
      <nom>Dmc</nom>
      <prenom>Alias</prenom>
      <age>120</age>
    </personne>
  </donnes>
</xml>

Vous devez aussi donner un identifiant à votre îlot de données XML, grâce à l'attribut ID.
Cela va permettre de l'identifier en javascript et sous Internet explorer, de l'associer au modèle
Exemple de code :
<xml id="dmc">
  <donnes>
    <balise>Valeur</balise>
  </donnes>
</xml>

A priori, il n'y a pas d'emplacement définie pour la balise XML, vous pouvez le mettre où vous voulez dans la balise HTML.
Je vous conseille de le mettre dans la balise BODY.

XML Data Islands dans I.E

Les balises et attributs

Pour deux attributs spéciale Internet Explorer sont utilisés :
- datasrc qui spécifie l'îlot de données XML à utiliser on ajoute toujours un # en plus: datasrc="#dmc"
- datafld qui spécifie l'élément XML dont on va prendre le contenu :datafld="balise"

L'attribut datasrc est valable pour les balises suivantes :
Table, div, span,a
L'attribut datafld est valable pour les balises suivantes :
div, span,a
Exemple de code :
<xml id="dmc">
  <donnes>
    <personne>
      <nom>Dmc1</nom>
      <prenom>Alias1</prenom>
      <age>12</age>
    </personne>
    <personne>
      <nom>Dmc</nom>
      <prenom>Alias</prenom>
      <age>120</age>
    </personne>
  </donnes>
</xml>
<table datasrc="#dmc" border="1">
  <tr>
    <td><div datafld="nom"></div></td>
    <td><div datafld="prenom"></div></td>
    <td><div datafld="age"></div></td>
  </tr>
</table>

Les utilisateurs d'internet explorer pourront tester dans le générateur.

XML Data Islands sous les autres

La structure du tableau

Pour Netscape, FireFox et Mozilla la récupération de l'îlot de données XML et l'affichage du XML est un peu plus complexe car tous ce fait en javascript.
On peut décomposer le tout en plusieurs étapes :
- récupération du modèle de tableau,
- récupération des données du xml,
- affichage des données.

Nous utiliserons aussi le même code de dans le chapitre ci-dessus (XML Data Islands dans I.E)

Ces différentes étapes seront regroupées dans une fonction javascript appelée "traitexml".
Cette fonction sera appelée au chargement de la page HTML grâce à l'attribut ONLOAD de la balise BODY.
Exemple de code :
<html><head>
<style type="text/css">
  xml {display: none;}
</style>
<script language="JavaScript" type="text/JavaScript">
//Emplacement des autres scripts que nous allons étudiés
  function traitexml(){
    var montableau = getTable("dmc");
    var alldatafldTitre = getdatafldNom(montableau);
    var alldatafldValue = getXmlValue("dmc", alldatafldTitre);
    setTable(montableau, alldatafldTitre, alldatafldValue);
  }
</script>
</head>
<body onload="traitexml()">
code du chapitre XML Data Islands dans I.E
</body>
</html>

Voici le code complet.

Récupération de la structure du tableau

Ce fait en deux étapes.
La première consiste à récupérer la bonne TABLE modèle et de la stocker dans la variable "montableau" de la fonction "traitexml".
Exemple de code :
function getTable(identifiant){
  //Récupère toutes les balises TABLE
  var balisesTables = document.getElementsByTagName("table");
  for (var i=0; i < balisesTables.length; i++) {
    var table = balisesTables[i];
      //Pour chaque TABLE trouvée regarde si l'attribut datasrc correspond à l'indentifiant
      if (table.getAttribute("datasrc") == "#"+identifiant){
        //C'est la bonne TABLE
        return table;
      }
  }
  return null;
}
Vous pouvez simplifier en donnant un identifiant à votre TABLE modèle grâce à l'attribut ID (ID="Tdmc"). Votre fonction devient :
Exemple de code :
function getTable(identifiant){
  var idTable = document.getElementById("T"+identifiant);
return idTable;
}

La deuxième étape consiste à récupérer le modèle d'affichage. Nous récupérons les valeurs de l'attribut "datafld" de chaque balise DIV dans un tableau qui est stocké dans la variable "alldatafldTitre" de la fonction "traitexml".
Exemple de code :
function getdatafldNom(table){
  var datafldNom = new Array();
  // Récupère toutes les balises DIV de la table Modèle
  var balisediv = table.getElementsByTagName("div");
  //Recupère la valeur de l'attribut datafld des balises DIV
  //Mette cette valeur dans le tableau datafldNom
  for (var i=0; i < balisediv.length; i++) {
    var datafld = balisediv[i].getAttribute("datafld");
    datafldNom[i] = datafld;
  }
  return datafldNom;
}

Récupération des données du xml

On récupère l'objet XML ou l'îlot de données XML (objXml) , puis nous le parcourrons et nous récupérons les valeurs dans un tableau qui est stocké dans la variable "alldatafldValue" de la fonction "traitexml".
Exemple de code :
function getXmlValue(identifiant,allDatafldTitre){
  var valeurs = new Array();
  //Recupère le XML don l'ID est égal à identifiant
  var objXml = document.getElementById(identifiant);
  //Parcour la structure du XML
  for (var i=0; i < allDatafldTitre.length; i++) {
    //Recupère la balise ayant comme nom (nom prenom age)
    var tableValeur =objXml.getElementsByTagName(allDatafldTitre[i]);
    valeurs[i] = new Array();
    //Recupère les valeurs des balises de même nom
    for(var j=0;j<tableValeur.length;j++){
      valeurs[i][j] =tableValeur[j].firstChild.nodeValue;
    }
  }
  return valeurs;
}

Affichage des données

Nous allons recréer le tableau dynamiquement.
La première étape consiste à supprimer son contenu, car nous avons encore le modèle destiné a IE.
En suite nous créeons des balises TR et TD que nous assignons au TABLE.
Exemple de code :
function setTable(montableau, alldatafldTitre, alldatafldValue){
  //Efface le TR du TABLE
  montableau.deleteRow(0);
  //Remplie le tableau avec les valeurs du XML
  for (var row = 0; row < alldatafldValue[0].length; row++) {
    //Creation d'une ligne TR
    var tr = montableau.insertRow(row);
      for (var col=0; col < alldatafldTitre.length; col++ ) {
        //Creation d'une cellule TD
        var td = tr.insertCell(col);
        //Assignation de la valeur dans la cellule TD
        td.innerHTML = alldatafldValue[col][row];
        //Assignation de la cellule TD a la ligne TR
        tr.appendChild(td);
      }
  }
}

Pour les deux

Final

Pour que cela fonctionne sur les deux types de navigateur, il vous suffit de reprendre le code pour Netscape, FireFox et Mozilla et de rajouter un teste dans la fonction "traitexml".
Exemple de code :
  function traitexml(){
  if(document.all){
  }else{
    var montableau = getTable("dmc");
    var alldatafldTitre = getdatafldNom(montableau);
    var alldatafldValue = getXmlValue("dmc", alldatafldTitre);
    setTable(montableau, alldatafldTitre, alldatafldValue);
  }
  }