XSL XML:Exemples de mises en forme

Un article de WikiTuto.

Jump to: navigation, search

Catégorie:Cours XML

XML Concepts de base

Prise en main d'XML CookTop

Prise en main d'oXygen XML Editor

Déclarations de Type de Document

Initiation aux Schéma XML

Mise en forme à l'aide de feuilles de style XSL

Présentation
Exemples de mises en forme

Mise en forme à l'aide de feuilles de style XSL (XSLT)

Fonctions XPath

Utilisation du DOM et XSLT dynamique

Synchroniser des contenus multimédia avec SMIL

Un format de dessin vectoriel en XML: SVG

L'animation dans le SVG

Plus loin que les formulaires HTML: XForms

Quelques mots sur les Services Web

modifier Tdm XML

Source : Gilles Chagnon

[modifier]

Exemple simple

[modifier]

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.

[modifier]

Exemple

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

 <?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 :

 <?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>
       <p><xsl:value-of select="bouteille/composition" /></p>
       <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>

[modifier]

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.

Voir l'exercice intitulé "Mise en forme simple à l'aide de XSL" pour un deuxième exemple.

[modifier]

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

[modifier]

Exemple avec boucle

[modifier]

Introduction

Il arrive que la structure du document XML ne soit pas linéaire, mais fondée sur, par exemple, 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 select="ce_qu_on_cherche_a_afficher"/>, qui permet de faire une boucle sur l'élément cherché :

 <?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 : 1.la présence du caractère / à la fin de l'élément "Retour-Ligne"
. Dans le fichier HTML produit, il n'apparaît plus.

2. le réarrangement des entrées : les ions positifs sont de toutes manières affichés avant les ions négatifs.

3.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.

[modifier]