Le langage XML
Afficher le XML avec XSL

Home

Le XSL - Les feuilles de style du XML

Comme le XML n'utilise pas des balises prédéfinies (car on peut inventer ses propres balises), le navigateur ne "comprend" pas les balises du XML et ne sais pas trop comment afficher un document XML.

Pour néanmoins afficher des documents XML, il est nécessaire d'avoir un mécanisme pour décrire comment le document pourrait être affiché. Un de ces mécanismes est les feuilles de style classiques du Html (CSS), mais le XSL pour eXtensible Stylesheet Language est de loin un langage de feuille de style plus adapté au XML et donc plus performant..

De façon résumée, le XSL est un langage qui transforme le XML en Html. Mais il fait bien plus ! Ainsi nous avons cru utile de lui consacrer un plus ample développement plus loin dans ce tutorial.


 
Un exemple de XML + XSL

A seule fin de démonstration, voici un exemple des possibilités du XSL associé à un document XML. Les explications seront données au chapitre consacré au XSL.

Voici notre document XML de départ :

<?xml version="1.0" encoding="ISO-8859-1"?>
<racine>
    <enfant>
        <nom>Loïc</nom>
        <lien>garçon</lien>
        <date>07/11/83</date>
        <data>Le petit qui me dépasse d'une tête.</data>
    </enfant>
    <enfant>
        <nom>Marine</nom>
        <lien>fille</lien>
        <date>20/12/85</date>
        <data>La petite fille chérie à son papa.</data>
    </enfant>
</racine>

Affiché dans le navigateur, cela nous donne :

Pas très folichon !

On ajoute un fichier .xsl dont voici le contenu :

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<body style="font-family:Arial; font-size:12pt;">
    <xsl:for-each select="racine/enfant">
    <div style="background-color:teal; color:white;">
    <span style="font-weight:bold; color:white; padding:4px">     <xsl:value-of select="nom"/></SPAN>
     - <xsl:value-of select="lien"/>
    </div >
    <div style="margin-left:20px; font-size:10pt">
    <span > Anniversaire le <xsl:value-of select="date"/>
    </span >
    <span style="font-style:italic"> - <xsl:value-of select="data"/>   
    </span >
    </div >
    </xsl:for-each>
</body>
</html>

Après avoir ajouté un lien vers le fichier xsl dans le fichier xml :

<?xml:stylesheet type="text/xsl" href="simple.xsl"?>

On obtient finalement :

Un peu mieux assurément !

Pour voir les fichiers en direct - IE5+ seul - :