Gribouille d'élephant

Galerie, Xml, Xslt

Introduction

Xslt étant peu répandu, j'ai jugé utile de faire un petit Tuto dessus.
Pour rappel, Xslt (Extensible Stylesheet Language Transformations) est une technique de transformation d'un document xml en un document lisible pour un utilisateur.
Vous trouverez une introduction au Xml cet endroit.

Je désirais gérer une galerie facile à maintenir dans mon site sans pour autant employer les grands moyens (php, asp, jsp).
Je me suis donc tourner vers le xml que j'utiliserais comme source de données. Il ne me restait plus qu'a déterminer de quelle manière accéder aux données : Soit par xslt, soit par Javascript.

Pourquoi avoir opté pour xslt ou plutôt : pourquoi ne pas avoir choisit Javascript?

Javascript bien que très répandu, n'est pas toujours activé sur tous les navigateurs, ce qui rendrait la galerie totalement illisible. De plus la lecture d'un document XML ne se fait pas de la même manière selon le navigateur et n'est pas standardisé. 2 inconvénients majeurs selon moi. Les développements multi-navigateurs étant ce qu'ils sont je préfère les simplifier au maximum :).
Xslt est désormais inclus dans la plupart des navigateurs (IE6, Firefox 1.5, Opera 9). Le langage Xslt est en plus assez simple à utiliser comme je vais le montrer par la suite.

Structure XML

Les informations suivantes, me semblent utiles dans la gestion d'une galerie :
Catégories, répertoire des images, titre, nom de l'image, nom de la miniature, description de l'image, date de l'image, hauteur et longueur.
Voici donc la structure XML correspondante :

<gallery>
<category name="" directory="">
<image name="" thumbnail="" title="" desc="" date="" sizeV="" sizeH="" />
</category>
</gallery>

Première constatation, j'aurais pu me limiter aux champs nom de l'image et nom de la miniature pour la création d'une galerie, mais j'ai pensé qu'il pouvait être intérressant de disposer d'informations supplémentaires, même si elles ne seront pas affichées dans l'immédiat.

La balise gallery est mon élément principal.
La balise category me permet de regrouper les éléments de ma galerie (par exemple par années). L'attribut name définit le nom de la catégorie, tandis que l'attribut directory définit l'emplacement des images dans le site. Cela me permet de ne pas spécifier l'url de chaque image. Résultats : Le fichier xml est plus léger et je peux déplacer aisément le dossier des images puisque je n'aurais qu'à modifier un seul attribut.
La balise image contient les propriétés des différentes images. name correspond au nom du fichier, thumbnail au nom de la miniature à afficher dans la galerie, sizeV et sizeH aux dimensions de l'image.

Ma structure étant prête, il est temps de passer à la partie xslt.

Le fichier Xslt

Un fichier Xslt, n'est ni plus ni moins qu'un fichier Xml avec des règles particulières, un simple bloc-notes est donc suffisant pour l'éditer.
Ajoutons la balise ci-dessous dans un nouveau fichier XSLT (extension .xsl) :

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>
Cet élément spécifie que le fichier est une feuille de style xsl.
Rajoutons l'élément ci-dessous dans la balise précédente afin de spécifier à l'interpréteur XML que le rendu du document se fera en HTML:

<xsl:output method="html"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
indent="yes"
encoding="iso-8859-1"
/>
Le contenant est désormais définit, attaquons nous au contenu.
Xslt permet de définir une transformation pour n'importe quel élément du document XML grāce à la balise xsl:template.
Le code suivant permet par exemple de définir une transformation pour l'élément category :

<xsl:template match="/gallery/category"></xsl:template>
Le code décrivant la transformation doit être décrit à l'intérieur de la balise.
A noter :
/gallery/category est la représentation de la position de l'élément category dans le document XML. L'élément image sera donc représenté par /gallery/category/image alors que l'élément racine sera représenté par /.
Dans cet exemple, lors du parcours du document XML, la transformation sera appliquée à chaque élément category.

Par facilité, j'ai décidé de n'appliquer qu'une seule transformation à l'ensemble du document XML. (match="/")
Dans cette "transformation", je vais copier la structure du code HTML des pages de mon site (Les balises html, body, link, div,etc..) de manière à garder un affichage cohérent avec le reste du site.
Le code suivant vous montre comment afficher chaque image sous forme de miniature :

<!-- Ceci est un commentaire-->

<!-- On parcourt chaque catégories-->
<xsl:for-each select="gallery/category">
<!-- On affiche le nom de la catégorie-->
<h2>
<xsl:value-of select="@name"/>
</h2>
<!--On récupère l'url du repertoire contenant les images et on stocke la valeur dans la variable directory-->
<xsl:variable name="directory" select="@directory"/>
<ul>
<!-- On parcourt chaque images, et on les affiche -->
<xsl:for-each select="image">
<li>
<!-- On appel la fonction javascript "Popup()" pour ouvrir l'image lors d'un clic sur la miniature -->
<!-- Au cas ou javascript n'est pas activé on renseigne la balise href-->
<a onclick="Popup('{$directory}{@name}',{@sizeH},{@sizeV}); return false;" href="{$directory}{@name}" target="_blank" >
<!-- On affiche la miniature-->
<img src="{$directory}{@thumbnail}" alt="{@title}" />
</a>
</li>
</xsl:for-each>
</ul>
</xsl:for-each>

Les balises commençant par xsl: sont des balises du langage XSL.
xsl:for-each permet de parcourir chaque élément spécifié.
xsl:value-of permet d'afficher un élément du fichier XML.
xsl:variable permet de stocker une valeur dans une variable.
$directory permet d'accéder à la valeur de la variable directory
@thumbnail permet d'accéder à la valeur de l'attribut thumbnail de l'élément courant.


Au final voici le fichier XSLT que l'on obtient :

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="html" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" indent="yes" encoding="iso-8859-1" />
<!--On définit le template général du doc XML-->
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Gribouille d'Elephant - David Jacquet</title>
<!-- Feuille de style -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!--On ajoute le script qui gère les popups-->
<script language="JavaScript" type="text/javascript" src="Popup.js">
</script>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
</head>
<body>
<div id="Div1">
<div class="Elephant">
<img alt="Gribouille d'élephant" src="images/elephant1.gif"/>
<img alt="Gribouille d'élephant" src="images/Title1.gif"/>
</div>
<div id="Div2">
<!-- Affichage entete -->
<div id="Div3">
<h1>
Gribouille d'élephant </h1>
<h2>
David Jacquet </h2>
</div>
<div id="Div4">
<ul>
<li>
<a href="Moi.htm" target="_self">
Presentation </a>
</li>
<li>
<a class="selected" href="Gallery.xml" target="_self">
Ma Galerie </a>
</li>
<li>
<a href="Tuto.htm" target="_self">
Tutoriaux </a>
</li>
<li>
<a href="Liens.htm" target="_self">
Liens </a>
</li>
</ul>
</div>
<div id="Div5">
<!-- On parcourt chaque catégorie-->
<xsl:for-each select="gallery/category">
<!-- On affiche le nom de la catégorie-->
<h2>
<xsl:value-of select="@name"/>
</h2>
<!--On récupère l'url du repertoire contenant les images et on stocke la valeur dans la variable directory-->
<xsl:variable name="directory" select="@directory"/>
<ul>
<!-- On parcourt chaque images, et on les affiche -->
<xsl:for-each select="image">
<li>
<!-- On appel la fonction javascript "Popup()" pour ouvrir l'image lors d'un clic sur la miniature -->
<!-- Au cas ou javascript n'est pas activé on renseigne la balise href-->
<a onclick="Popup('{$directory}{@name}',{@sizeH},{@sizeV}); return false;" href="{$directory}{@name}" target="_blank" >
<!-- On affiche la miniature-->
<img src="{$directory}{@thumbnail}" alt="{@title}" />
</a>
</li>
</xsl:for-each>
</ul>
</xsl:for-each>
<!-- On ferme la balise content-->
</div>
<!-- On ferme la balise main -->
</div>
<div class="Elephant">
<img alt="Gribouille d'élephant" src="images/Title2.gif"/>
<img alt="Gribouille d'élephant" src="images/elephant2.gif"/>
</div>
<!-- On ferme la balise global -->
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Il ne reste plus qu'une seule étape, il faut spécifier au fichier XML d'utiliser la feuille de style XSLT.
Editons le fichier XML (le bloc-notes fera très bien l'affaire) et rajoutons la ligne suivante au début du document XML : <?xml-stylesheet type="text/xsl" href="Gallery.xsl"?>
Gallery.xsl étant dans mon exemple le nom de la feuille de style XSLT.


Vous pouvez téléchargez l'exemple de ce tutoriel ici.