Le langage XSL

Javascript et XSL

Une solution en Javascript

Nous avons expliqué dans les pages précédentes comment utiliser le XSL pour transformer un document XML sous forme de Html. La solution était d'ajouter une feuille de style XSL au fichier XML et de laisser faire le navigateur. Cependant, il n'est pas toujours souhaitable d'inclure une référence à une feuille de style dans un fichier XML car ce procédé ne fonctionnerait pas avec un navigateur qui ne reconnaît pas le XSL.

Une solution consiste à utiliser un script en Javascript pour faire la transformation du XML en Html. Cette transformation du XSL par le navigateur (soit côté client) est un des défis majeurs des navigateurs dans les années futures et devrait aboutir à des navigateurs spécialisés dans des tâches spécifiques comme le Braille, le Web parlant, les Pockets PC ou les téléphones mobiles.

Elaboration du fichier

Reprenons notre fichier XML (inchangé).

<?xml version="1.0"?> <compilation>
<mp3>
<titre>Foule sentimentale</titre>
<artiste>Alain Souchon</artiste> </mp3>
<mp3>
<titre>Solaar pleure</titre> <artiste>MC Solaar</artiste> </mp3>
<mp3>
<titre>Le baiser</titre> <artiste>Alain Souchon</artiste> </mp3>
<mp3>
<titre>Pourtant</titre>
<artiste>Vanessa Paradis</artiste> </mp3>
<mp3>
<titre>Chambre avec vue</titre> <artiste>Henri Salvador</artiste> </mp3>
</compilation>

Voir le fichier xml [xmldemo.xml].

Passons maintenant au fichier XSL

On reprend simplement le fichier XSL du chapitre précédent [xsl_choose.xsl].

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="1" cellspacing="0" cellpadding="3">
<tr bgcolor="#FFFF00">
<td>Artiste</td>
<td>Titre</td>
</tr>
<xsl:for-each select="compilation/mp3">
<xsl:choose>
<xsl:when test=".[artiste='Alain Souchon']">
<tr bgcolor="#00FF00">
<td><xsl:value-of select="titre"/></td>
<td><xsl:value-of select="artiste"/></td>
</tr>
</xsl:when>
<xsl:otherwise>
<tr>
<td><xsl:value-of select="titre"/></td>
<td><xsl:value-of select="artiste"/></td>
</tr>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Voir le fichier xsl (IE 5 et +).

Construisons maintenant notre fichier Html avec son code Javascript qui va transformer nos fichiers XML et XSL en un seul fichier Html.

<html>
<body>
<script type="text/javascript">
// chargement du fichier XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("xmldemo.xml")

// chargement du fichier XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("xsl_choose.xsl")

// transformation en Html
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

On commence le script par un appel du XML Parser (XMLDOM) et le chargement en mémoire du fichier XML concerné. La seconde partie du script crée une autre instance du Parser et charge le document XSL en mémoire. La dernière ligne du code Javascript transforme le document XML selon le fichier XCL en écrit le résultat sous forme d'un document Html.

Simple, net et efficace !

On obtient (bien entendu) le même résultat qu'au chapitre précédent.

Voir le fichier html (IE 5 et +).