Les Data Islands sont souvent méconnus des développeurs web pourtant c'est une alternative à l'utilisation d'un langage dynamique tel que Asp.NET ou PHP pour traiter un document XML.

Lors de cet article, nous allons créer une petite application nommée "Gestionnaire d'album". Les technologies utilisées seront :

  • Xhtml
  • Javascript
  • Xml

Le but de cette application est de gérer une collection d'album avec plusieurs renseignements : Artiste, Titre, Année, Numéro du disque. Bien entendu, cette application est à modifier selon vos besoins. Le code source est disponible ici : http://orion.fulinux.com/articles/web/xml/DataIslands/DataIslands.zip.

Avant de lire la suite, j'invite les novices à consulter les articles de Derf à propos de XML.

Qu'est ce qu'un Data Islands ?

En français, on pourrait dire que c'est une île contenant des données XML. En bon informaticien que vous êtes, c'est simplement un élément HTML permettant d'insérer du contenu XML dans sa page web.

Un Data Islands se présente sous cette forme dans votre page HTML :

Comme vous l'aurez certainement compris, l'attribut src correspond au fichier source XML, id à l'identifiant et async à la synchronisation du contenu XML.

Pourquoi utiliser Javascript ?

Beaucoup de développeurs web n'aime pas manipuler le langage Javascript, moi le premier ! Mais il est vrai que dans le cas des Data Islands, c'est obligatoire et tellement pratique. Exemple :

function suivant() {
 x=xmldso.recordset
 if (x.absoluteposition < x.recordcount) {
  x.movenext()
 }
}

function precedent() {
 x=xmldso.recordset
 if (x.absoluteposition > 1) {
  x.moveprevious()
 }
}

Ici, deux fonctions : suivant() et precedent().

Première étape, déclaration d'une variable "x" faisant office de pointeur dans notre contenu XML. Ensuite une condition permettant de vérifier la position du pointeur (x) grâce aux propriétés absoluteposition et recordcount. La dernière fonction utilisé, movenext() qui hérite de l'objet x va nous permettre de passer à l'enregistrement suivant.

Quelques petits changements pour notre fonction precedent(). On déclare à nouveau une variable x, une condition permettant de revenir à l'enregistrement précédent, et la fonction moveprevious().

Et notre contenu XML dans tout ça ?

Voici une partie du fichier, il est disponible dans le zip du code source.



...........


  Love Poems For Dying Children Act1
  Autumn Tears
  1
  1996
 

 
  Love Poems For Dying Children Act2
  Autumn Tears
  2
  1997
 

 
  Absolution
  Autumn Tears
  3
  1997
 

 
  Love Poems For Dying Children Act3
  Autumn Tears
  4
  1999
 

...........

A noter ici une particularité dans ce fichier, tous les éléments sont en majuscules. J'ai remarqué quelques problèmes avec les minuscules c'est donc pourquoi je vous conseille l'utilisation de majuscule pour le nom de vos éléments.

Pour conclure, une capture d'écran de l'application en cours d'exécution :