5. Exemples

5.1 Utilisation de apply-templates et XPath

Avant d’utiliser des constructions avancées comme "if" ou "for-each", réfléchissez bien si c’est vraiment nécessaire. Dans la plupart des cas il suffit de définir des règles avec "xsl:apply-templates" et le reste "s’organise" tout seul.

Exemple 5-1: Simple XML vers HTML avec XSLT

http://tecfa.unige.ch/guides/xml/examples/xsl-simple/ (fouiller le répertoire !)

A. Un texte en XML

<arbre>

 <para>Simples Templates et XPath</para>

 <aunt>

  <name>Auntie</name>

  <child>Je suis un enfant de aunt</child>

 </aunt>

 <uncle>

  <name>Uncle Ben</name>

  <child>Je suis le premier enfant de uncle</child>

  <child>Je suis le 2eme enfant de uncle</child>

  <child>Je suis le 3eme enfant de uncle</child>

 </uncle>

</arbre>

B. La feuille de style XSLT

Ici on veut produire un simple HTML à partir du XML, avec les consignes suivantes:

On aimerait que les enfants de <aunt> et <uncle> soient affichés différemment
Le prermier enfant de <uncle> doit être affiché spécialement aussi

Si voulez savoir comment ce code s’exécute, consultez le fichier *-trace.xml

 <xsl:template match="arbre">

  <html><title>XSL Example</title><body>

    <xsl:apply-templates />

   </body> </html>

 </xsl:template>

 <xsl:template match="uncle|aunt">

   <hr /> <xsl:apply-templates />

 </xsl:template>

 <xsl:template match="name">

  <xsl:apply-templates /> :

 </xsl:template>

 <xsl:template match="uncle/child[position()=1]">

  <p> <strong><xsl:apply-templates /></strong> </p>

 </xsl:template>

 <xsl:template match="uncle/child[position()>1]">

  <p> <xsl:apply-templates /></p>

 </xsl:template>

 <xsl:template match="aunt/child">

  <p style="color:blue"><xsl:apply-templates /></p>

 </xsl:template>

C. Le résultat en HTML

<!DOCTYPE html

  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <title>XSL Example</title>

   <body>

      Simples Templates et XPath

      <hr>

      Auntie :

      <p style="color:blue">Je suis un enfant de aunt</p>

      <hr>

      Uncle Ben :

      <p><strong>Je suis le premier enfant de uncle</strong></p>

      <p>Je suis le 2eme enfant de uncle</p>

      <p>Je suis le 3eme enfant de uncle</p>

   </body>

</html>

5.2 Gestion de liens

Le formalisme XML en soi ne comprend pas les liens !!

Il existe un langage XLink que vous pouvez utiliser (et qui fait partie des standards SVG)
Sinon, vous inventez un élément ou encore un attribut pour ce type d’information et vous traduisez en <a href ...>

Exemple 5-2: Traduction vers <a href="...">...</a>

c.f. le code source de ces fichiers !

A. Extraits du fichier XML

On peut inventer une balise comme "url" pour l’URL et une autre balise comme "name" pour indiquer le nom du lien.

 <address>

   <name>TECFA</name>

   <url>http://tecfa.unige.ch</url>

  </address>

  <address2>

   <name>TECFA</name>

   <url>http://tecfa.unige.ch</url>

  </address2>

Alternativement, on aurait pu mettre des informations dans un attribut

  <address4 url="http://tecfa.unige.ch">TECFA</address4>

  <address5 url="http://tecfa.unige.ch">TECFA</address5>

B. Extraits du fichier XSLT

Pour address et address2 on crée des règles

<xsl:template match="address">

  <a href="{url}
"> <xsl:value-of select="name
"/> </a>

</xsl:template>

<xsl:template match="address2">

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

</xsl:template>

<xsl:template match="url">

 <a href="{.}"> <xsl:value-of select="../name"/> </a>

</xsl:template>

address3 et address2 sont traitées directement depuis l’élément mère

<a href="{address3/url}"><xsl:value-of select="address3/name"/></a>

<a href="{address4/@url}"><xsl:value-of select="address4"/></a>

<xsl:template match="address5">

  <a href="{@url}"> <xsl:value-of select="."/> </a>

</xsl:template>

5.3 Images

Il y n’a aucune magie spéciale pour gérer les images !
Simplement:

Examinez votre XML
Trouvez un moyen pour traduire en HTML (ou autre chose)

Example 5-3: Insertion d’images

Fichier XML

<?xml version="1.0"?>

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

<page>

 <title>Hello Here are my images</title>

 <list>

   <image>
dolores_001.jpg</image>

   <image>dolores_002.jpg</image>

   <image>dolores_002.jpg</image>

   <image2>scrolls.jpg </image2>

   <image2>scrolls.jpg </image2>

   <image3
 source="dolores_002.jpg">Recipe image</image3>

 </list>

 <comment>Written by DKS.</comment>

</page>

XSLT stylesheet

Une règle pour la balise "list"

<xsl:template match="list">

   Apply templates for "image" elements:

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

   This will only insert the first "image2" element contents it finds:

   <p> <img src="{image2}"/> </p>

   And another template for a tag image3 element (with an attribute)

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

</xsl:template>

Une règle pour la balise "image"

  <xsl:template match="image">

    <p> <img src="{.}
"/> </p>

  </xsl:template>

Une règle pour la balise "image3"

  <xsl:template match="image3">

    <p> <img src="{@source}
"/><xsl:value-of select="."/>
 </p>

  </xsl:template>

5.4 Fabrication de références (liens)

Exemple 5-4: Table de matières pour éléments qui ont un identificateur

http://tecfa.unige.ch/guides/xml/examples/recit/
On utilise ici un attribut "mode" dans la définition des templates et apply-templates
Cela nous permet d’écrire plusieurs règles pour un même noeud
Ici par exemple, on utilise mode="toc" pour fabriquer une table des matières

Fragment XSLT (fait d’abord la table des matières, ensuite le reste)

<xsl:template match="/">

  <html>

   <body bgcolor="#FFFFFF">

     <h1><xsl:value-of select="/RECIT/Titre"/></h1>

     <p> Highlights de l'histoire:

         <xsl:apply-templates select="//EPISODE" mode="toc"/> </p>

     <xsl:apply-templates/>

   </body>

 </html>

</xsl:template>

Fragments XSLT pour gérér la balise "EPISODE": 2 règles dont une avec un mode

<xsl:template match="EPISODE" mode="toc"
>

  <a href="#{@id}">
<xsl:value-of select="SousBut"/></a> -

</xsl:template>

<xsl:template match="/RECIT/FIL/EPISODE">

  <a name="{@id}"
> <hr /> </a>

  <xsl:apply-templates/>

</xsl:template>

Exemple 5-5: Tables de matières pour éléments sans ID

plus difficile car il faut "fabriquer" des attributs "name" et "href" pour le HTML

la solution adopté ici est moche (on aurait pu compter les éléments)

il s’agit des jours d’un atelier webmaster qu’on peut consulter ici:
http://tecfa.unige.ch/tecfa/teaching/formcont/webmaster2003/programme/
Pour comprendre cet exemple il faut fouiller dans les fichiers suivants:

programme.xml - contient tout le "programme" de l’Atelier
programme.xsl - produit le résultat (voir le fichier programme.html)
matos.xsl, resume.xsl, animateurs.xsl créent des extraits variés du programme.

Fragments XSLT

<!-- Code qui fabrique la table des matières (jours) en HTML -->

Programme: <xsl:apply-templates select="//day" mode="toc"
 />

<xsl:template match="day" mode="toc">

  <a href="#{@name}{@dayno}{@month}"
><xsl:value-of select="@name"/></a> -

</xsl:template>

<!-- Code pour insérer des attributs "name" dans le HTML -->

<xsl:template match="day">

   <a name="{@name}{@dayno}{@month}"
><xsl:value-of select="@name"/></a> -          <xsl:value-of select="@dayno"/>/<xsl:value-of select="@month"/>/

   <xsl:value-of select="@year"/>

</xsl:template>

Fragment XML (élément à extraire)

Faire une table des matières avec les jours de l’Atelier (avec liens)

<day name="lundi" year="2003" month="6" dayno="16">

Résultat HTML

Au début du fichier on a un menu qui affiche les jours (liens vers le bas)

Programme: <a href="#lundi166">lundi</a> - <a href="#mardi176">mardi</a> - ....

......

Dans le fichier on insère les attributs "name"

<a name="lundi166">lundi</a> - 16/6/2003

Note:

Dans ce répertoire il y a aussi un fichier programme-fo.xsl qui génère du code xsl-fo utilisé pour générer la version PDF du programme.

Exemple 5-6: Tables de matières pour éléments sans ID

Table des matières pour une "page travaux STAF" (portfolio étudiant)
On liste les travaux
http://tecfa.unige.ch/guides/xml/examples/xsl-toc/