Mise en forme à l'aide de feuilles de style XSL : initiation à XSLT

Contenu du cours

I. Présentation

1. Introduction

XSL signifie eXtensible Stylesheet Langage, ou langage extensible de feuille de style. Cette abréviation recouvre en fait trois langages :

XPath désigne un moyen d'accéder à un nœud quelconque de l'arborescence d'un document XML à partir d'un autre nœud quelconque.
XSLT signifie eXtensible Stylesheet Langage Transformation.
XSL-FO signifie eXtensible Stylesheet Langage - Formating Objects, et désigne un langage permettant le contrôle de la mise en page finale de la transformation. Ce langage est particulièrement destiné à la production de contenus au format PDF.

Ce cours se limitera à aborder les deux premiers langages.

Comme son nom l'indique, le XSLT ne sert pas uniquement de langage de feuille de style. Il est aussi un très puissant manipulateur d'éléments. Il permet de transformer un document XML source en un autre, permettant ainsi, à l'extrême, d'en bouleverser la structure.

Le fonctionnement du XSL est fondé sur les manipulations de modèles (templates). Les éléments du document XML d'origine sont remplacés (ou plus ou moins légèrement modifiés) par ces modèles. Un modèle contient ainsi le texte (éléments, attributs, texte...) de remplacement d'un élément donné.

Tout élément pouvant être remplacé dans le fichier de sortie par tout type de contenu texte, XSL est un outil privilégié de production de fichiers HTML à partir de sources XML. PHP fait ainsi appel à des bibliothèques de procédures de type XSL comme libxslt quand il doit gérer l'interfaçage avec des bases de données XML.

Un fichier XSL étant un fichier XML, il doit respecter les normes de syntaxe de ce format.

>Retour à la TdM

2. Structure d'un document XSL

La structure de base d'un document XSL commence par un prologue, puis un élément xsl:stylesheet pouvant contenir quelques attributs, notamment une déclaration d'espace de noms ainsi que le numéro de version. L'exemple suivant présente l'appel à cet élément tel que nous le pratiquerons dans ce cours :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> (...) </xsl:stylesheet>

L'élément xsl:stylesheet est l'élément racine du document XSL. C'est lui qui contient tous les modèles (les templates), y compris celui qui est associé à la racine du document XML, modèle que l'on note <xsl:template match="/">. L'attribut match="/" indique que ce modèle s'applique à la racine du document XML.

>Retour à la TdM

II. Exemples de mises en forme

1. Exemple simple

a. Introduction

Il est possible de traiter de manière simple un fichier XML contenant une information relativement linéaire. Ainsi, l'exemple déjà présenté d'une composition de bouteille d'eau, dans le cas d'une seule bouteille, se prête facilement à une simple mise en forme HTML.

b. Exemple

Exemple d'un document XML lié à une feuille de style XSL simple à l'aide d'une instruction de traitement :

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="bouteille1.xsl"?>
<bouteille>
  <marque>Cristaline</marque>
  <composition>calcium 71mg/l, magnésium 5,5mg/l, chlorure 20mg/l, nitrate 1mg/l, traces de fer.</composition>
  <source>
    <ville>St-Cyr la Source</ville>
    <departement>Loiret</departement>
  </source>
  <code_barre>3274080005003</code_barre>
  <contenance>150cl</contenance>
  <ph>7,45</ph>
</bouteille>

Et voici la feuille de style XSL associée :

c. Application à un exemple

Appliquer cette dernière feuille de style au fichier XML produit un fichier HTML avec la mise en page désirée.

>Retour à la TdM

Exercice 1. Mise en forme simple à l'aide de XSL

Énoncé

Correction

2. Exemple avec boucle

a. Introduction

Il arrive que la structure du document XML ne soit pas linéaire, mais fondée par exemple sur des boucles, ou bien comporte un nombre indéterminé de fois un même élément ; c'est d'ailleurs le plus souvent le cas.

On peut ainsi reprendre l'exemple de la bouteille d'eau, qui se présente sous la forme du fichier XML suivant :

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="bouteille1.xsl"?>
<bouteille>
    <marque>Cristaline</marque>
    <composition>
      <ion_positif>calcium 71mg/l</ion_positif>
      <ion_negatif>nitrate 1mg/l</ion_negatif>
      <ion_positif>magnésium 5,5mg/l</ion_positif>
      <ion_negatif>chlorure 20mg/l</ion_negatif>
      <autres_materiaux>fer</autres_materiaux>
    </composition>
    <source>
      <ville>St-Cyr la Source</ville>
      <departement>Loiret</departement>
    </source>
  <code_barre>3274080005003</code_barre>
  <contenance>150cl</contenance>
  <ph>7,45</ph>
</bouteille>

Cette fois-ci, il faut tenir compte d'un nombre a priori indéterminé d'éléments ion_positif, par exemple. Il suffit pour cela d'introduire dans la feuille de style un élément xsl:for-each avec un attribut select permettant d'indiquer les nœuds sur lesquels s'effectue la boucle :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
    <head>
      <title>Exemple de sortie HTML</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
      <h1>Bouteille de marque <xsl:value-of select="bouteille/marque" /> </h1>
      <h2>Composition:</h2>
      <h3>Ions positifs</h3>
      <ul>
        <xsl:for-each select="bouteille/composition/ion_positif">
          <li> <xsl:value-of select="." /> </li>
        </xsl:for-each>
      </ul>
      <h3>Ions négatifs</h3>
      <ul>
        <xsl:for-each select="bouteille/composition/ion_negatif">
          <li> <xsl:value-of select="." /> </li>
        </xsl:for-each>
      </ul>
      <h3>Autres matériaux</h3>
      <ul>
        <xsl:for-each select="//autres_materiaux">
          <li> <xsl:value-of select="." /> </li>
        </xsl:for-each>
      </ul>
<h2>Lieu d'origine</h2>
      <p>Ville de <b> <xsl:value-of select="bouteille/source/ville" /> </b>, dans le département <b> <xsl:value-of select="bouteille/source/departement" /> </b> </p>
      <h2>Autres informations</h2>
      <ul>
        <li>Contenance: <xsl:value-of select="bouteille/contenance" /> </li>
        <li>pH: <xsl:value-of select="bouteille/ph" /> </li>
      </ul>
    </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Noter :

la présence du caractère / à la fin de l'élément « Retour-Ligne » br. Dans le fichier HTML produit, il n'apparaît plus. Le / est obligatoire car en tant que fichier XML, la feuille de style XSLT doit être bien formée.
le réarrangement des entrées : les ions positifs sont de toute manière affichés avant les ions négatifs.
la sélection des « autres matériaux » avec select="//autres_materiaux". Cela est une des manières de faire référence à un élément dans l'arbre des éléments. Nous verrons la liste de ces sélecteurs plus tard.

Cours de XML - Mise en forme à l'aide de feuilles de style XSL : initiation à XSLT

Table des matières (TdM)

Contenu du cours

I. Présentation

1. Introduction

2. Structure d'un document XSL

II. Exemples de mises en forme

1. Exemple simple

a. Introduction

b. Exemple

c. Application à un exemple

Exercice 1. Mise en forme simple à l'aide de XSL

Énoncé

Correction

2. Exemple avec boucle

a. Introduction

b. Exemple

Exercice 2. Mise en forme avec réarrangement

Énoncé

Correction

Historique de ce document

Bibliographie

De l'auteur (G. Chagnon)

Conditions d'utilisation et licence