TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Transformations XSLT

L'application d'une feuille de style XSL à un document XML permet de transformer le document XML en un autre document XML ou un document HTML. Dans la suite nous traitons la transformation vers un document HTML.

Application d'une feuille de style XSL

L'application d'une feuille de style XSL à un document xml se fait par le biais de l'élément xml-stylesheet placé en tout début du document après l'entête xml :

<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet href="transform.xsl" type="text/xsl"?>

Le fichier XML à transformer

Dans la présentation des diverses notions fondant XSLT, les exemples seront basés sur le fichier monde.xml décrivant les pays du monde par continent. Sa DTD est la suivante :

<!DOCTYPE monde[

<!ELEMENT monde (continent,continent,continent,continent,continent)>

<!ELEMENT continent (nom,liste)>

<!ELEMENT nom (#PCDATA)>

<!ELEMENT liste (pays+)>

<!ELEMENT pays (nom,capitale,monnaie)>

<!ELEMENT capitale (#PCDATA)>

<!ELEMENT monnaie (#PCDATA)>

]>

Dont voici l'arbre partiellement développé :

arbre du document monde.xml

Structure d'une feuille de style

Une feuille de style XSL se présente ainsi :

<?xml version="1.0" encoding="iso-8859-1"?>

 

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

 

<xsl:output method="html"/>

 

ensemble de règles de transformation

 

</xsl:stylesheet>

Règles de transformation

Une règle de transformation explicite comment un élément XML doit être traduit en terme d'éléments HTML, comment un noeud de l'arbre XML produit un noeud dans l'arbre HTML.

Une règle se décompose en deux parties :

Par analogie, cette distinction s'apparente à la distinction sélecteur - propriétés en CSS.

Syntaxe d'une règle

<xsl:template match="expression Xpath">

description du noeud HTML résultat

</xsl:template>


Exemple : règle pour la racine

<xsl:template match="/">

<html>

</head>

<head>

<body>

</body>

</html>

</xsl:template>

Cette règle s'applique à la racine désignée par "/" qui n'est pas la racine du document xml, mais son parent fictif. Cet élément fictif est unique et est en général utilisé pour construire la structure du document HTML (html head body) comme dans l'exemple.

La règle racine est la première à être appliquée

Une règle pour l'élément monde

<xsl:template match="monde">

<h1> Les pays du monde </h1>

</xsl:template>

Application des règles

Principe

Initialement la règle pour "/" est appliquée. En général elle sert à définir la structure du document html et surtout à déclencher l'application d'autres règles par une commande :

<xsl:apply-templates select="expression Xpath"/>

Dans l'exemple précédent, la règle "/" est appliquée tandis que la règle "monde" est ignorée. Pour déclencher l'application de la règle "monde" on doit y faire appel au sein de la règle "/". Cet appel a lieu dans la balise body ou doit figurer le résultat de l'application de la règle "monde".

Ainsi on obtient le fichier monde.xsl suivant :

<?xml version="1.0" encoding="iso-8859-1"?>

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

<xsl:output method="html"/>

 

<xsl:template match="/">

<html>

<head>

</head>

<body>

<xsl:apply-templates select="monde">

</body>

</html>

</xsl:template>

 

<xsl:template match="monde">

<h1> Les pays du monde </h1>

</xsl:template>

 

</xsl:stylesheet>

Dans le code HTML de la règle racine, l’appel de la règle « monde » sera remplacé par le code HTML produit par cette règle monde.

Plus généralement :

Règle par défaut

Si la règle appelée n'est pas définie, c'est une règle par défaut qui s'applique.

La règle par défaut pour un élément E est ainsi définie :

Ainsi lorsque seule la règle racine est définie, l'appel à la règle monde aura pour effet d'afficher, en ligne, la totalité du contenu textuel du document par appel successifs des règles par défaut pour tous les descendants.

Affichage du contenu d'un élément

Syntaxe

Pour afficher le contenu d'un élément de l'arborescence xml, on utilise la notation suivante :

<xsl:value-of select="expression XPath"/> qui renvoie le contenu de l'élément désigné par l'expression XPath.

Si on ajoute la commande suivante dans la règle "monde" : <xsl:value-of select="continent/nom"/>

<xsl:template match="monde">

<h1> Les pays du monde </h1>

<xsl:value-of select="continent/nom"/>

</xsl:template>

Si on souhaite afficher le nom de tous les continents on peut remplacer <xsl:value-of select="continent/nom"/> par <xsl:apply-templates select="continent/nom" /> qui appliquera la règle par défaut à tous les noms de continents.

Cette utilisation de la règle par défaut pour un élément ne permet pas de contrôler la présentation, les continents étant positionnés les uns à la suite des autres.

Exemple : afficher le nom des continents

Si on souhaite afficher le nom de chaque continent dans un titre h2:

<xsl:template match="continent">

<h2><xsl:value-of select="nom"/></h2>

</xsl:template>

<xsl:template match="monde">

<h1> Les pays du monde </h1>

<xsl:apply-templates="continent"/>

</xsl:template>

La totalité du code se présente ainsi :

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

<xsl:output method="html"/>

 

<xsl:template match="/">

<html>

<body>

<xsl:apply-templates select="monde"/>

</body>

</html>

</xsl:template>

 

<xsl:template match="monde">

<h1>Les pays du monde </h1>

<xsl:apply-templates select="continent" />

</xsl:template>

 

<xsl:template match="continent">

<p><xsl:value-of select="nom" /></p>

</xsl:template>

 

</xsl:stylesheet>

Afficher le nom des pays

Pour afficher le nom des pays de chaque continent dans un paragraphe :

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

 

<xsl:output method="html"/>

 

<xsl:template match="/">

<html>

<body>

<xsl:apply-templates select="monde"/>

</body>

</html>

</xsl:template>

 

<xsl:template match="monde">

<h1> Les pays du monde </h1>

<xsl:apply-templates select="continent" />

</xsl:template>

 

<xsl:template match="continent">

<h2><xsl:value-of select="nom" /> </h2>

<xsl:apply-templates select="liste/pays"/>

</xsl:template>

 

<xsl:template match="pays">

<p><xsl:value-of select="nom" /></p>  

</xsl:template>

 

</xsl:stylesheet>

Le fichier monde0.xml, le fichier monde0.xsl

Le résultat de l'application de la feuille de style monde0.xsl au fichier monde0.xml monde0.xsl

 

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007