Navigation XML

Cet article montre comment un système de navigation peut être mis en place dans un site web généré à l'aide de contenus XML et de feuilles de style XSL. Les modèles XSL, les templates, présentés ici pourront par exemple servir à intégrer une piste de navigation dans chaque page HTML produite.

Ce que nous entendons par mettre en place un système de navigation, c'est de pouvoir rendre aussi simple que possible, grâce au couple XML/XSL, la génération de liens hypertextes qui permette une navigation entre les pages d'un site web.
Nous supposons ici que le système de navigation doit être étendu à tout le site, mais rien n'empêche de le limiter à un groupe de pages, si, par exemple, on souhaite simplement permettre une navigation du type « Précédent / Suivant » pour aller et revenir d'une page web vers une autre.
Le but est également de fournir des exemples de modèles que vous pourriez modifier à votre convenance.

Décrire la structure du site

La première étape consiste à décrire les pages du site web que l'on souhaite rendre navigables. Cette description est réalisée par un document XML, le fichier pages.xml, dont voici en exemple :

<pages>
  <page id="1" desc="desc1" href="desc1.htm">
    <page id="11" desc="desc11" href="desc11.htm"/>
    <page id="12" desc="desc12" href="desc12.htm">
      <page id="121" desc="desc121" href="desc121.htm"/>
    </page>
    <page id="13" desc="desc13" href="desc13.htm"/>
  </page>
  <page id="2" desc="desc2" href="desc2.htm"/>
</pages>

Mise à part l'élément document pages, ce document ne comporte qu'un seul type d'élément, page, lequel peut contenir 0 ou plusieurs élément(s) page. A chaque page HTML on fera correspondre un élément page défini dans le fichier pages.xml.

L'élément page accepte ici les attributs suivants :

id : cet attribut permet d'identifier de manière unique une page HTML ; dans le source de vos feuilles de style, vous appellerez un modèle de navigation en transmettant l'id de la page cible ;

desc : la valeur de cet attribut sera utilisée comme texte à utiliser lors de la génération du lien correspondant qui mènera à la page HTML ;

href : tout comme l'attribut de même nom de la balise HTML a, href est l'URL de la page HTML.

Modèles de navigation XSL

Nous avons réuni dans le fichier page.xsl, les modèles de navigation XSL décrits plus bas. Vos feuilles de style devront donc comporter une instruction d'importation, par exemple :

<xsl:import href="pages.xsl"/>

normalement placée après l'élément ouvrant :

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Piste de navigation XSL

Dans une page HTML, la piste de navigation est ce qui permet à l'internaute de se situer dans les niveaux de l'arborescence d'un site web ; en utilisant les liens de cette piste, l'internaute peut alors se placer dans l'un des niveaux qui englobe directement ou indirectement celui dans lequel il se trouve.

En reprenant l'exemple de fichier pages.xml, si l'utilisateur voit la page d'URL desc121.htm, la piste de navigation sera de la forme, où desc1 et desc12 sont des liens hypertextes :

desc1 > desc12 > desc121

Détaillons maintenant le modèle piste de navigation du fichier pages.xsl présenté ci-dessous :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:param name="pages" select="'pages.xml'"/>
    <xsl:template name="piste">
        <xsl:param name="pageid"/>
        <xsl:variable name="page" select="document($pages)//page[@id=$pageid]"/>

        <xsl:for-each select="$page/ancestor::node()">
            <xsl:if test="local-name()='page'">
                <xsl:choose>
                    <xsl:when test="@href">
                        <a><xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute><xsl:value-of select="@desc"/></a>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="@desc"/>
                    </xsl:otherwise>
                </xsl:choose>
                <b> > </b>
            </xsl:if>
        </xsl:for-each>
        <xsl:value-of select="$page/@desc"/>
    </xsl:template>

...

</xsl:stylesheet>

Les modèles de navigation doivent être appelés à l'aide de l'élément XSL xsl:call-template, en fournissant un paramètre indiquant la page pour laquelle on veut appliquer le modèle. Un exemple d'appel du modèle de navigation pour la piste de navigation, nommé « piste », est donné ci-dessous :

<xsl:call-template name="piste">
    <xsl:with-param name="pageid" select="content/piste/pageid"/>
</xsl:call-template>

La valeur de l'attribut select de l'élément xsl:with-param vous permet de récupérer l'id de la page souhaitée. Cette valeur peut être donnée directement, par exemple

select="'desc121'"

ou bien peut être issue d'un autre document XML, comme c'est le cas avec la valeur content/piste/pageid.

Quelques explications sur le modèle piste. Tout d'abord la feuille de style définit le paramètre global pages qui permet de se référer au fichier pages.xml :

<xsl:param name="pages" select="'pages.xml'"/>

Le modèle piste définit la variable nommée page, initialisée avec le noeud du document pages.xml qui porte l'id passé en argument ; pour cela la fonction XPath document() est utilisée en opérant une sélection dans le fichier pages.xml.
Nous devons ensuite parcourir les éléments page parents du noeud ainsi sélectionné de manière à construire la piste de navigation, à l'aide de l'élément XSL xsl:for-each et de la fonction XPath ancestor::node().
La piste de navigation est construite en utilisant successivement les descriptions des noeuds parents, en les séparant par le caractère supérieur (référence d'entité >).

Les autres modèles

Le fichier pages.xsl définit deux autres modèles nommés enfants et precRemSuiv ; le premier permet de lister les pages directement descendantes de la page dont on passe l'id en argument, tandis que le second crée, s'ils existent, des liens vers la page précédente, la page parente et la page suivante.

Conclusion

La puissance de description d'XML permet de définir dans un fichier séparé les liens que nous voulons tisser entre les pages d'un site web. Les modèle XSL discutés ici, à inclure dans vos propres modèles, vous offrent la possibilité de générer facilement ces liens.
Ce système peut très bien être utilisé dans un framework de génération dynamique des pages web côté serveur, tel que Cocoon, projet Open Source d'Apache.

La rubrique suivante vous permettra de télécharger un exemple d'utilisation des modèles de navigation : il faut transformer le fichier testpages.xml avec la feuille de style testpages.xsl, tandis que les pages navigables sont décrites dans le fichier pages.xml.

Ressources

Les modèles de navigation : pages.xsl.
Exemple d'utilisation : pages.xml, testpages.xml et testpages.xsl.
Apache Cocoon

Sommaire

Décrire la structure du site
Modèles de navigation XSL
Conclusion
Ressources

Début