Copyright © 2003 Yves Mettier
Cette création est mise à disposition sous un contrat Creative Commons.
L'article original se trouve sur http://ymettier.free.fr/articles_lmag/.
Article publié dans le numéro 51 (juin 2003) de GNU/Linux France Magazine
Table des matières
Le but de cet article est de créer un site web. Notre site web s'appellera monprog et visera à présenter le logiciel du même nom. Il aura donc un menu contenant les rubriques suivantes: accueil, zone de téléchargement, captures d'écrans, nouveautés, changements, licence d'utilisation et contacts. Prenez une grande inspiration, et hop, c'est parti!
La première page, la voici: elle est rudimentaire comme vous pouvez le voir. De plus, j'ai supprimé le tag <html> et tout ce qui se trouve dans la section <head>.
1 <?xml version="1.0" encoding="iso-8859-1" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4 <body> 5 <h1>Accueil</h1> 6 <p> 7 Ceci est la super page de <b>monprog</b> 8 </p> 9 </body>
A part la première ligne et les tags <html> et <head> manquants, il n'y a aucune différence entre le html et le xml car j'ai respecté les règles d'écriture du xml pour écrire le html. C'est justement cela qu'on appelle le xhtml. Veuillez sauvegarder cette page sous le nom home.xml.
Ici, je voudrais attirer votre attention sur un point particulièrement important sur ce document source home.xml pour éviter des confusions. Notre processeur XSLT est capable de lire un document XML en entrée et de produire du HTML en sortie. Le document précédent ressemble fortement à du XHTML, d'autant plus que comme on a vu, le XHTML est du XML. On pourrait même prendre un document XHTML complet et valide avant de le passer dans la moulinette XSLT. Si l'on pense comme ceci, on aboutira au même résultat je pense. Mais toute évolution pour exporter vers un format autre que le HTML en sera d'autant plus difficile.
Ce document n'est en fait pas du XHTML. C'est un document qui contient une balise body comme racine, et qui reprend un peu de syntaxe du XHTML pour son contenu. Au lieu de h1 j'aurais pu prendre niveau1, ou au lieu de p j'aurais pu prendre para qu'on trouve beaucoup dans docbook. J'ai préféré me rapprocher de XHTML pour éviter dans mes exemples des bouts de code triviaux comme le remplacement d'une balise <important> en <b>. Si vous développez ces exemples pour vous, gardez bien en tête que les balises ont pour rôle de décrire la forme de leur contenu, pas de décrire l'apparence que cela aura en HTML.
Un fichier xsl contient en fait ce qu'on appelle une feuille de style, à ne pas confondre avec les feuilles de style CSS. Voici la feuille de style que nous améliorerons par la suite, et que vous allez appeler main.xsl:
1 <?xml version="1.0" encoding="ISO-8859-1"?> 2 3 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 4 <xsl:output method="html" 5 encoding="ISO-8859-1" 6 doctype-public="-//W3C//DTD HTML 4.0 Transitional//EN" 7 doctype-system="http://www.w3.org/TR/REC-html40/loose.dtd" 8 indent="yes" 9 /> 10 11 <xsl:template match="/body"> 12 <html> 13 <xsl:comment> 14 15 This web site is (c) 2003 Me 16 Feel free to get inspiration from this site, as soon as 17 you leave this comment here. 18 19 THIS PAGE WAS AUTOMATICALLY GENERATED FROM TEMPLATES. 20 DO NOT MODIFY ANYTHING IN THIS FILE: IT WILL BE OVERWRITTEN 21 AND ANY CHANGES WILL BE LOST. 22 23 </xsl:comment> 24 <head> 25 <link rel="stylesheet" type="text/css" href="monprog.css" /> 26 <title><xsl:apply-templates select="/body/h1[position()=1]/*"/></title> 27 </head> 28 <body> 29 <xsl:apply-templates select="@*|node()"/> 30 </body> 31 </html> 32 </xsl:template> 33 34 <xsl:template match="@*|node()"> 35 <xsl:copy> 36 <xsl:apply-templates select="@*|node()"/> 37 </xsl:copy> 38 </xsl:template> 39 40 </xsl:stylesheet>
Dans ces 40 lignes que vous allez surement trouver illisibles, se trouvent les technologies XML, XSLT, XPATH, et un peu de HTML! Nous allons décortiquer tout cela.
La feuille de style CSS dont vous avez peut-être noté la présence ligne 34 ci-dessus ne contient rien de vraiment intéressant ici. J'en reparlerai quand ce sera nécessaire, mais peu parce que les feuilles de style CSS servent beaucoup à l'esthétique d'une page web et peu à sa structure. Et nous, ici, on mettra l'accent sur la structure, juetement. Mais voici un exemple de fichier pour monprog.css:
P { font-size: 14pt; }
Pour créer notre première page web, nous devons nous servir d'un processeur xslt. xsltproc et sabcmd (du projet sablotron) sont deux logiciels libres qui peuvent très bien remplir cette tâche. Leur syntaxe de base est la même:
$ xsltproc main.xsl home.xml > home.html $ sabcmd main.xsl home.xml > home.html
Il faut fournir la feuille de style, puis les pages à transformer. Le code html résultant sort sur la sortie standard, que nous redirigeons vers un fichier. Si vous voulez utiliser des options pour l'un de ces deux programmes, sachez cependant que la compatibilité au niveau syntaxe s'arrête là. Il vous faudra vous référer aux pages de manuel pour en savoir plus. Ajoutez quand même --novalid à xsltproc pour ne pas être ennuyé avec des problèmes de validation si vous n'êtes pas connecté à internet. Sinon la validation peut tout bloquer en allant chercher ce qu'il faut sur internet.
Vous avez maintenant votre page web home.html générée, que vous pouvez visualiser avec votre navigateur. Nous allons maintenant passer à un peu plus de théorie pour comprendre le pavé de 41 lignes qui précédait, et ensuite, nous améliorerons ce pavé pour créer notre site.
Une feuille de style XSLT est donc un fichier XML comme vous le voyez à sa forme, et à sa première ligne. Ligne 2 à 10, peu d'explications à donner: nous indiquons que nous avons une feuille de style XSLT, et que la sortie sera du html, avec quelques options que vous pouvez lire. Par ailleurs, comme vous allez le voir, je vais beaucoup parler de XPath sans trop dire le pourquoi du comment. XPath est un langage d'identification des données particulières (comprendre: des éléments, des attributs...) du langage XML. Un peu ce que le SQL est aux bases utilisant ce langage pour leurs requêtes. Je vous présente cela dans l'article sur XPath (cela tombe bien!) dans le présent magazine.
Et c'est maintenant que tout commence. Le processeur xslt lit le fichier xml à la recherche du noeud racine, qui est body dans notre cas, afin d'y appliquer le modèle qui lui correspond, et s'il ne le trouve pas, il lui applique le modèle par défaut:
1 <xsl:template match="*"> 2 <xsl:value-of select="."> 3 <xsl:apply-templates select="*"/> 4 </xsl:template>
Dans notre cas, il trouve le dernier modèle qui revient à peu près au même, mais qui est plus généraliste car il tient aussi compte des attributs. Le résultat est qu'il va ensuite chercher à appliquer les modèles aux noeuds fils.
Un modèle se définit ainsi:
<xsl: template match='chemin XPATH ici'>. Le processeur repère grâce au chemin
XPATH si le noeud correspond, et si oui, il applique ce qui suit. Sinon, il passe au modèle suivant.
La fin d'un modèle est évidemment la balise XML fermante, donc </xsl:template> dans notre cas.
Appliquer ce qui suit, dans un modèle, consiste à interpréter les directives XSLT (les éléments appartenant à l'espace de nom xsl) et à recopier le reste, à savoir ce qui ne fait pas partie de l'espace de nom de XSLT.
Reprenons ce que fait le processeur XSLT pas à pas. Jusqu'à la ligne 10, il s'initialise, créant le format de sortie.
Puis il lit le fichier xml, noeud par noeud. Le premier est <body>. Cet élément correspond au chemin /body
Donc ce modèle est appliqué:
On commence par écrire la balise <html> sinon personne ne le fera à notre place. Puis vient un commentaire, lignes 14 à 24.
Lignes 25 à 28, nous recopions tout ce qui concerne l'en-tête du code html qui sera produit. Vous repérez que ligne 27, le titre est non pas codé en dur, mais est en fait le contenu du premier élément h1 fils de body. Ici encore, je reviendrai sur cette syntaxe dans l'article sur XPATH.
Ligne 29 à 31, c'est le tour de la partie body du document html résultant: ligne 30, nous demandons au processeur XSLT de traiter les noeuds fils.
Ici, les noeuds fils sont <h1>, puis <p> qui contient lui-même <b>. Ces noeuds n'ont pas de modèle particulier et c'est notre modèle générique lignes 35 à 39 qui s'applique.
Ce modèle générique, lignes 35 à 39, est un peu l'étoile des expression rationnelles. En effet, il correspond à tous les éléments et attributs, et traite tous les noeux fils après être passé en "mode copie" ligne 36.
Nous avions un cas simple. Nous allons maintenant le compliquer pour le rendre plus attrayant!
Nous allons rendre notre page multilingue en ajoutant peu de choses à notre feuille de style, En ce qui concerne la page pseudo-xhtml, voici ce que nous ajoutons: tous les textes à traduire seront entourés d'une balise <span xml:lang='fr'>, avec évidemment fr pour le français, en pour l'anglais, et ainsi de suite. Voici ce que devient le titre:
1 <h1> 2 <span xml:lang='en'>Home</span> 3 <span xml:lang='fr'>Accueil</span> 4 </h1>
Vous n'avez plus qu'à faire de même pour les autres textes de la page.
Que changeons-nous dans la feuille de style ? Nous rajoutons tout d'abord ce que nous appellerions une variable dans un autre langage, et que nous appelons paramètre ici. Voici quoi rajouter au début de la feuille de style, avant la ligne 11:
<xsl:param name="lang">en</xsl:param>
Ceci déclare un paramètre de nom lang, dont le contenu toujours initialisé, et dans notre cas à en. Ce paramètre sera utilisé comme une variable: $lang.
Ensuite, voici comment nous allons procéder. Tout élément <span> qui ne contient pas, pour
le français par exemple, l'attribut xml:lang='fr' sera éliminé avec ceci:
1 <xsl:template match="span[not(lang($lang))]"> 2 </xsl:template>
Et ensuite, tout élément <span> dont l'attribut xml:lang correspondra à la langue
utilisée sera recopié, mais nous n'allons pas faire comme d'habitude parce que nous ne voulons
pas recopier la balise <span>. Au lieu de copier avec <xsl:apply-templates ...>, nous
allons directement copier l'arborescence fille et les attributs, sauf l'attribut lang.
Voici le code:
3 <xsl:template match="span[lang($lang)]"> 4 <xsl:copy-of select="attribute::*[name()!='lang']|node()"/> 5 </xsl:template>
Ces cinq lignes sont à placer un peu n'importe où, avant le dernier modèle. Par exemple, avant la ligne 34. Nous ne touchons pas au reste.
Pour transformer la page source, les commandes précédentes marchent encore, et prennent la valeur par défaut du paramètre lang. Cependant, nous voulons pouvoir influer sur ce paramètre. C'est sur la ligne de commande que nous le changeons, et dès ici, vous voyez la différence entre xsltproc et sabcmd:
$ xsltproc --stringparam lang fr main.xsl home.xhtml > home.fr.html $ sabcmd main.xsl home.xhtml '$lang=fr' > home.fr.html
Remarque: je n'ai pas réussi à faire fonctionner sabcmd dans ce cas car il m'indique une erreur. Il ne vous reste plus qu'à observer le résultat, en changeant la valeur du paramètre lang. Et évidemment, pour générer votre site web, vous lancerez xsltproc (ou sabcmd si vous y parvenez) autant de fois qu'il y a de pages web résultantes. Ici, pour l'instant, nous en sommes donc à deux: le fichier home.*.html, en deux langues.
L'ajout d'un menu consiste visuellement à rajouter une boîte quelque part, contenant ce menu. Je connais trois manières d'ajouter un menu:
un tableau, avec une case pour le menu et l'autre case pour le reste de la page;
deux frames;
une boîte flottante grâce aux feuilles de styles CSS.
La seconde méthode n'a aucun interet car justement l'utilisation des transformations XSLT permet de se passer des frames qui sont plutôt une antiquité lourde. La troisième méthode nécessite que vous connaissiez en plus les feuilles de style assez bien pour comprendre les exemples. Je préfère me rabattre sur la méthode des tableaux car je ne dois pas me tromper de beaucoup en pensant que tout le monde qui lit cet article sait faire un tableau rudimentaire en HTML.
La page web résultante sera de cette forme:
[les en-têtes ici]
<body>
<table border='0' width='100%'>
<tr>
<td>[ici, par exemple, le menu]</td>
<td>[ici, par exemple, le texte]</td>
</tr>
</table>
</body>
</html>
Libre à vous de mettre le menu à gauche comme ici, ou à droite, ou même en haut en ajoutant une ligne au tableau.
Ils s'agit de rajouter les données décrivant le menu quelque part pour que le processeur les prenne en compte lors de la génération de la page web. Le problème est que les processeurs XSLT prennent en entrée un seul document XML, et la seule autre entrée possible est d'utiliser des paramètres. Les paramètres ne sont pas suffisants pour cela, et nous voulons éviter d'avoir à spécifier le menu dans chaque page xhtml. Une solution est de mettre tout ce qui concerne le menu dans cette feuille de style. Mais mieux que cela, nous allons demander à la feuille de style de lire un fichier xml contenant la description du menu dans les différentes langues. Nous allons donc écrire ce fichier purement XML que je vous donne intégralement afin que vous ayez quelques traductions de base. Appelez ce fichier menu.xml par exemple.
1 <?xml version="1.0" encoding="ISO-8859-1"?> 2 <menu> 3 <item name='index'> 4 <text lang='en'>Home</text> 5 <text lang='fr'>Accueil</text> 6 <text lang='de'>Startseite</text> 7 <text lang='es'>Inicio</text> 8 </item> 9 10 <item name='news'> 11 <text lang='en'>News</text> 12 <text lang='fr'>Infos</text> 13 <text lang='de'>Neuigkeiten</text> 14 <text lang='es'>Noticias</text> 15 </item> 16 17 <item name='features'> 18 <text lang='en'>Features</text> 19 <text lang='fr'>Fonctionnalités</text> 20 <text lang='de'>Features</text> 21 <text lang='es'>Características</text> 22 </item> 23 24 <item name='screenshots'> 25 <text lang='en'>Screenshots</text> 26 <text lang='fr'>Captures d'écran</text> 27 <text lang='de'>Screenshots</text> 28 <text lang='es'>Screenshots</text> 29 </item> 30 31 <item name='changes'> 32 <text lang='en'>Changes</text> 33 <text lang='fr'>Changements</text> 34 <text lang='de'>Änderungen</text> 35 <text lang='es'>Cambios</text> 36 </item> 37 38 <item name='download'> 39 <text lang='en'>Download</text> 40 <text lang='fr'>Téléchargement</text> 41 <text lang='de'>Herunterladen</text> 42 <text lang='es'>Descarga</text> 43 </item> 44 45 <item name='license'> 46 <text lang='en'>License</text> 47 <text lang='fr'>Licence</text> 48 <text lang='de'>Lizenz</text> 49 <text lang='es'>Licencia</text> 50 </item> 51 52 <item name='credits'> 53 <text lang='en'>Credits</text> 54 <text lang='fr'>Remerciements</text> 55 <text lang='de'>Credits</text> 56 <text lang='es'>Créditos</text> 57 </item> 58 </menu>
Reprenons maintenant la feuille de style XSLT que nous allons modifier en plusieurs étapes.
L'ajout d'un modèle se fait très simplement, avec quelque part, avant le dernier modèle, ceci:
1 <xsl:template name="menu" mode="menu"> 2 <p class='menu'> 3 Menu 4 </p> 5 </xsl:template>
Si le processeur XSLT trouve la balise <menu>, il risque d'appliquer ce modèle. Cependant, il n'y a pas de balise <menu> dans notre document source, et en mettre un n'est pas le but. Ceci serait vrai s'il n'y avait pas l'attribut mode. Cet attribut fait que ce modèle ne peut être appliqué que dans certaines conditions. En effet, je vais vous montrer comment forcer l'utilisation d'un modèle, c'est-à-dire comment influer sur le déroulement du flux xml en entrée.
Pour forcer l'application d'un modèle, on utilise la balise <xsl:call-template name="menu" mode="menu"/>. C'est ici que vous voyez l'utilisation de l'attribut mode. Sans cet attribut, le modèle menu n'est pas appliqué puisque ce modèle a été défini avec mode="menu". Cet attribut permet entre autres d'appliquer plusieurs modèles différents pour un même élement, en fonction du mode choisi.
Voici ce que devient le modèle /body (version définitive):
1 <xsl:template match="/body"> 2 <html> 3 <xsl:comment> 4 5 This web site is (c) 2003 Me 6 Feel free to get inspiration from this site, as soon as 7 you leave this comment here. 8 9 10 THIS PAGE WAS AUTOMATICALLY GENERATED FROM TEMPLATES. 11 DO NOT MODIFY ANYTHING IN THIS FILE: IT WILL BE OVERWRITTEN 12 AND ANY CHANGES WILL BE LOST. 13 14 </xsl:comment> 15 <head> 16 <link rel="stylesheet" type="text/css" href="monprog.css" /> 17 <title><xsl:apply-templates select="/body/h1[position()=1]/*"/></title> 18 </head> 19 <body> 20 <table class='main_table'> 21 <tr> 22 <td> 23 <xsl:call-template name="menu" mode="menu"/> 24 </td> 25 <td> 26 <xsl:apply-templates select="@*|*"/> 27 </td> 28 </tr> 29 </table> 30 </body> 31 </html> 32 </xsl:template>
Ligne 20, nous démarrons un tableau, et dans la première colonne, nous mettons le code du menu, ligne 23. Ligne 26, dans la seconde colonne, nous retrouvons ce que nous avions avant.
Vous pouvez essayer de générer une nouvelle page avec ceci: vous verrez apparaître sur la gauche le mot "menu", que nous allons maintenant remplacer par le vrai menu, celui de menu.xml.
Prenez note que j'ai mis une classe à la balise <table> afin de pouvoir changer facilement son style ensuite, via la feuille de style CSS. Ici, nous restons fonctionnels, et le sujet est traité dans l'article sur les feuilles de style CSS de ce même dossier.
Nous allons maintenant utiliser menu.xml et à partir de maintenant, tous les changements se font dans le modèle menu. Voici ce que vous pouvez faire...
1 <xsl:template name="menu" mode="menu">
2 <p class='menu'>
3 <xsl:variable name="menu" select="document('menu.xml')/menu"/>
4 <span class='menuitem'>[
5 <xsl:value-of select="./item[@name='download']/text[@lang=$lang]"/>
6 ]</span>
7 </p>
8 </xsl:template>
Dans ce nouvel exemplaire du modèle, j'ai introduit deux notions, outre ce qui concerne XPath. La première notion est la variable menu. Elle est déclarée avec la balise <xsl:variable name="menu">. Son contenu est le résultat de la requête XPath contenue dans l'attribut select. Ici, je vais détailler un peu la fonction XPath document() charge le fichier dont le nom est fourni en argument, et comme je spécifie ensuite /menu, la variable name va contenir tous les noeuds fils du noeud <menu> de menu.xml.
L'autre notion introduite ici est de mettre le résultat d'une recherche XPath (donc d'une requète aussi bien que d'un calcul) dans l'arbre généré en sortie. Nous utilisons la balise <xsl:value-of>, et c'est le résultat de ce qui est spécifié dans l'attribut select qui sera utilisé. Dans notre cas, ce sera donc le texte dont la balise lang correspond à la langue choisie pour la page web en cours de génération, pour l'item dont le nom est download. Pour simplifier l'exemple, je n'ai mis que cet item, mais il est évident que vous devriez dupliquer cette balise autant de fois qu'il y a d'items.
Dupliquer cette balise autant de fois qu'il y a d'items, cela ressemble fortement à un besoin de boucle, pour ceux qui programment. La notion de boucle existe avec XSLT: c'est la balise <xsl:for-each> qu'il faut utiliser, et encore une fois, c'est l'attribut select qui détermine la liste sur laquelle on va boucler. Voici ce que devient le modèle avec la boucle:
1 <xsl:template name="menu" mode="menu">
2 <p class='menu'>
3 <xsl:variable name="menu" select="document('menu.xml')/menu"/>
4 <xsl:for-each select="$menu/item">
5 <span class='menuitem'>[
6 <xsl:value-of select="./text[@lang=$lang]"/>
7 ]</span>
8 <br/>
9 </xsl:for-each>
10 </p>
11 </xsl:template>
Ici, la seule nouveauté est ligne 4, qui indique que tout ce qui se trouve entre les balises ouvrante et fermante de la boucle va être appliqué pour tous les éléments sélectionnés par $menu/item, donc si on regarde menu.xml, pour tous les items. Il reste donc, pour chaque item, à selectionner ce que l'on veut ligne 6, avec la balise <xsl:value-of> que l'on connaît déjà, mais où le noeud courant n'est plus défini dans menu.xml par la balise <menu> mais par un de ses fils <item>. Par ailleurs, remarquez encore une fois la classe CSS que j'ai placée aux bons endroits pour une utilisation ultérieure éventuelle via la feuille de style CSS.
Nous avons mis en place le menu, mais ce serait quand même plus agréable d'avoir des URL plutôt que des noms. Voici comment mettre une URL HTML dans une feuille de style XSLT:
1 <xsl:element name="a"> 2 <xsl:attribute name="href">URL</xsl:attribute> 3 lien 4 </xsl:element>
Ceci insère le code HTML suivant: <a href="URL">lien</a>. Dans la version précédente de notre modèle menu, nous remplaçons donc la ligne 6 par ceci:
1 <xsl:element name="a"> 2 <xsl:attribute name="href"><xsl:value-of select="@name"/>.<xsl:value-of select="$lang"/>.html</xsl:attribute> 3 <xsl:value-of select="./text[@lang=$lang]"/> 4 </xsl:element>
Ceci remplace donc notre item par une URL dont le texte est toujours l'item, et dont l'URL est composée de l'attribut name de la balise <item>, de la langue, et de l'extention .html. Pour la page espagnole de téléchargement, cela donne donc download.es.html.
Enfin, pour terminer cette page, nous allons rajouter un petit élément bien sympathique: l'item est une URL sauf si la page générée est celle de l'item. Pour cela, le processeur XSLT doit connaître le nom du fichier xhtml qu'il est en train d'utiliser en tant que source. Et cela n'est pas possible puisqu'à priori, il n'utilise que son contenu. Nous allons donc utiliser l'astuce suivante: ce sera un paramètre, tout comme la langue! Ensuite, le test consiste à dire que si l'item correspond au paramètre, on affiche du texte, et sinon, on affiche une URL.
Pour faire un test en XSLT, on utilise la balise <xsl:if>. Son attribut test permet de placer une condition. Ce qui se trouve entre la balise ouvrante et la balise fermante est traité si la condition est vraie, et ignoré sinon. L'inconvénient de <xsl:if> est que contrairement aux langages de programmations évolués comme le C ou meme moins évolués comme le java ou le C++ (!), nous n'avons rien pour exprimer un sinon comme le else de ces deux langages. Du coup, il faudrait que l'on fasse un test, si la condition est respectée, on met le lien, puis, si non(condition) est respectée, on met juste le texte. Cela est lourd et on va s'en sortir autrement.
Comme dans un langage digne de ce nom comme le C ou le lisp (dont XSLT s'inspire d'ailleurs), nous avons aussi un jeu d'instructions cas 1/cas 2/...cas n/cas par défaut. En XSLT, voici ce que cela donne:
1 <xsl:choose> 2 <xsl:when test="condition 1"> 3 Cas 1 4 </xsl:when> 5 <xsl:when test="condition 2"> 6 Cas 2 7 </xsl:when> ... ... n <xsl:otherwise> n+1 Cas par défaut n+2 </xsl:otherwise> n+3 </xsl:choose>
Nous allons donc utiliser cela, avec une seule condition, et le <xsl:otherwise>. Voici la version définitive de notre modèle menu:
1 <xsl:template name="menu" mode="menu">
2 <p class='menu'>
3 <xsl:variable name="menu" select="document('menu.xml')/menu"/>
4 <xsl:for-each select="$menu/item">
5 <span class='menuitem'>[
6 <xsl:choose>
7 <xsl:when test='$filename=@name'>
8 <xsl:value-of select="./text[@lang=$lang]"/>
9 </xsl:when>
10 <xsl:otherwise>
11 <xsl:element name="a">
12 <xsl:attribute name="href"><xsl:value-of select="@name"/>.<xsl:value-of select="$lang"/>.html</xsl:attribute>
13 <xsl:value-of select="./text[@lang=$lang]"/>
14 </xsl:element>
15 </xsl:otherwise>
16 </xsl:choose>
17 ]</span>
18 <br/>
19 </xsl:for-each>
20 </p>
21 </xsl:template>
Il n'y a rien à commenter sur cette version définitive vu que tout ce qu'il n'y a rien de nouveau par rapport à ce qui précède.
Ces deux pages sont un peu différentes des autres pages web. En effet, ce ne sont pas tout à fait des pages web, mais plutôt des petites bases de données dont il faut extraire les données afin de les rendre affichable dans le navigateur. Mais rien ne vous empèche de démarrer avec une page en pseudo-xhtml faite à la main comme les autres pages ci-dessus. Nous allons voir, dans l'article sur les bases de données en XML, dans quel cadre on peut considérer une page xml en tant que base de données, et comment en extraire ce qu'il faut pour le transformer en xhtml.
La page de téléchargement ne doit pas pointer directement vers les fichiers. Au contraire, vous devez indiquer ce qui est téléchargeable, et spécifier l'URL. Vous pouvez aussi donner l'URL du CVS, ou comment récupérer les fichiers via CVS. Vous pouvez encore donner quelques instructions pour compiler le programme...
Cet article devrait vous permettre de créer un site web statiques relativement simplement grâce à XSLT. Cependant, pour une meilleure compréhension de cet article, je vous invite à lire celui sur XPath, langage qui donne énormément de puissance à XML. D'autre part, pour rendre votre site web plus beau, je vous conseille non pas de rajouter des balises ou attributs HTML dans votre page source, mais au contraire de développer une feuille de style CSS. Et enfin, pour que votre site web s'administre très facilement, utilisez XML pour mettre en forme une base de donnée, contenue dans un fichier, pour les pages news.xml et changes.xml, comme expliqué dans l'article concerné du dossier.