Vous êtes sur la page 1sur 47

XSL-T

Recommandation 16 Novembre 1999

XML Style Language

Sadok Ben Yahia, PhD

Faculté des Sciences de Tunis

Sadok.benyahia@fst.rnu.tn
Objectifs

 Définir un langage de feuilles de style pour XML

 Transformation de documents

 Sélection

 Filtrage

 Présentation de documents

 HTML, XHTML

 RTF, Word, WAP, PS, PDF, ...

2
Notre exemple d ’annuaire

<annuaire>
<entete>
<responsable>Samir</responsable>
<dateRevision>20 septembre 2011</dateRevision>
</entete>
<membre>
<prenom>Chiraz</prenom><nom>Cherif</nom>
<tel type="fax"> + 216 71 885 890</tel>
<tel type="bureau"> + 216 71 560 830</tel>
<adresse>
<rue>Campus Universitaire, BP 1060</rue>
<ville> Tunis</ville>
<codePostal>54506</codePostal>
<pays>TUNISIE</pays>
</adresse>
<département href="departements.xml#informatique"/>
</membre>
</annuaire>
3
Une feuille de style...

 Cher moteur XSL, quand tu rencontres la racine du document,


fait quelque chose…

 Cher moteur XSL, si tu rencontres l’élément annuaire, fait


telle chose…

 Cher moteur XSL, si tu rencontres l’élément membre, fait


telle autre chose…

 Et ainsi de suite ...

 Une feuille de style XSL est une suite de règles (templates).

4
Exemple de structure XSL

<?xml version="1.0"?>

<xsl:stylesheet

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

</xsl:template>

<xsl:template match="annuaire">

</xsl:template>

</xsl:stylesheet>
5
Structure des règles (template)

 Chaque règle possède deux parties

 Un motif (XPath) qui identifie le/les nœud(s) XML du document

qui est/sont concerné(s) par la règle et sur le(s) quel(s) il faut

appliquer une action

 Une action qui effectue la transformation et/ou spécifie les

caractéristiques de la présentation

6
Structure d ’une règle

<xsl:template match="un motif">


[action]
</xsl:template>

7
Structure d ’une règle (exemple)

<xsl:template match=‘annuaire’>
<xsl:apply-templates/>
</xsl:template>

Cher moteur XSL, quand tu parses un


document XML et que tu tombes sur un
élément <annuaire> , utilise cette règle

Va vers chacun de mes fils ( <entete>


et <membre> ) et applique les règles qui
les concernent

8
Création d’une feuille de style (1)

 Créer une règle pour chacun des types de nœuds dans notre
document (DTD en fait)
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="annuaire">
<xsl:apply-templates/>
</xsl:template> ...
... <xsl:template match="departement">
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="text()">
<xsl:value-of select="."/>
</xsl:template>

9
Explication <xsl:value-of select >

 <xsl:value-of select="."/>

 Renvoie la valeur de la chose qui est sélectionnée.

 Dans notre cas, la chose est un nœud de type texte donc ce qui

est retourné est la valeur d'un nœud texte : le contenu textuel

lui-même.

10
Création d’une feuille de style (2)

 Pour les nœuds/éléments qui ne nous intéressent pas (sans

action) ainsi que leur descendance :

 supprimer l'instruction :

<xsl:apply-templates/>

 supprimer les règles concernant les fils

 qui ne seront jamais appelées donc pourquoi les garder ?

11
Création d’une feuille de style (3a)

 Mettre les balises HTML correspondantes autour des


contenus concernés

 Pour obtenir quelque chose qui ressemble à ceci :

<HTML>
<HEAD>Annuaire</HEAD>
<BODY>
...
</BODY>
</HTML>

12
Création d’une feuille de style (3b)

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

<xsl:template match="/">
<HTML>
<HEAD>
<TITLE>Annuaire</TITLE>
</HEAD> Ajout
<BODY>
<xsl:apply-templates/>
</BODY>
</HTML>
</xsl:template>
...

13
HTML: Mise en forme du texte

 Gras[Bold] <B>...</B>
<STRONG>...</STRONG> Début et fin de zone en gras

 Italique[Italic] <I>...</I>
<EM>...</EM> Début et fin de zone en italique

 Taille de caractère [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone


avec cette taille

 Couleur de caractère [Font color] <FONT COLOR="#$$$$$$"> </FONT>


Début et fin de zone en couleur

 A la ligne[Line break] <BR> Aller à la ligne

 Commentaires[Comments] <!-- *** -->Ne pas afficher

 Centrage[Center] <CENTER></CENTER> Centrer

14
HTML: Les titres

 En-têtes [Heading] <Hn></Hn> avec n=1 à 6 : Afficher une en-tête de niveau n et sauter
une ligne

 Liste non-ordonnée [Bullet list]<UL></UL> :Afficher le texte sous forme d'une liste non-
ordonnée.

 <U> ... </U> : Pour souligner le texte.

 <S> … </S> : Pour barrer le texte

 <TT> ... </TT> : Caractères de machine à écrire.

 <CENTER> … </CENTER> : Le texte va être centré.

 <SUB> ... </SUB> : Texte en indice.

 <SUP> ... </SUP> : Texte en exposant.

 <FONT…> ... </FONT> : Agit sur la police, la couleur et la taille des caractères.
15
HTML: Les titres

 Liste ordonnée[Numbered list]<OL></OL>:Afficher le texte sous

forme d'une liste ordonnée.

 Elément de liste[List items] : <LI>Voici un élément de la liste

 Paragraphe[Paragraph] <P></P>:Saut de ligne, insérer une ligne

vierge et commencer un paragraphe

16
HTML: Les titres (exemple)

<H1>Les mois du printemps</H1>


<UL><LI>avril
<LI>mai
<LI>juin</UL>
<P>
<H3>Les mois d'automne </H3>
<OL><LI>octobre
<LI>novembre
<LI>d&eacute;cembre</OL>

17
HTML: Les images

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs.

Texte alternatif alt="****  Pour les browser n'ayant pas


l'option "image" activée

Dimensions width=?
Height=? Hauteur et largeur (en pixels)

Bordure border=? (en pixels)

Alignement align=top
align=middle
align=botton
align=left
align=right 18
HTML: Les images …

L'attribut align positionne l'image par rapport au texte :

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide

<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide

<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

               

Image et lien: <A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A>

19
HTML: Les tableaux

[Table] <TABLE></TABLE>Début et fin de tableau

Définition d'une ligne[Table Row] <TR></TR>Début et fin de ligne

Définition d'une cellule[Table Data] <TD></TD>Début et fin de cellule

<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

20
HTML: Les tableaux
Bordure de cadre
[Border] <TABLE border=?
></TABLE>

<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

21
HTML: Les tableaux …

 L'espace entre les cellules ou l'épaisseur des lignes du quadrillage


<TABLE cellspacing=?>

 La largeur de la table <TABLE width=?> <TABLE width=%>

<TABLE border=2 cellspacing=10>


<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

22
HTML: Les tableaux …

 L'enrobage des cellules ou l'espace entre le bord et le contenu


<TABLE cellpadding=?>

<TABLE border=2 cellpadding=10>


<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

23
Création d’une feuille de style (4a)

 Indiquer au moteur XSL :

 Lorsqu'il rencontrera un élément <membre>, mettre une ligne

horizontale <HR>

 Traiter ses fils

 Et ceci pour tous les autres éléments <membre>

24
Création d’une feuille de style (4b)

... ...
<xsl:template match="membre"> <xsl:template match="membre">
<HR/> <HR></HR>
<xsl:apply-templates/> <xsl:apply-templates/>
</xsl:template> </xsl:template>
... (a) ... (b)

...
<xsl:template match="membre">
<HR>
<xsl:apply-templates/>
</HR>
</xsl:template>
... (c)

25
Règles par défaut (1)

 Toute feuille de style XSL possède deux règles par défaut

 Elles sont appliquées si le moteur XSL ne trouve pas de

règles correspondant pour :

 / ou *

 text()

26
Règles par défaut (2)

 Correspond au document ou à
<xsl:template match="/|*"> n'importe quel élément.
Renvoie le résultat des
<xsl:apply-templates/> templates pour les fils
</xsl:template>

Correspond à un nœud texte.


<xsl:template match="text()">
Renvoie la valeur du nœud, ie.
<xsl:value-of select="."/>
le texte
</xsl:template>

Dans le cas ou plusieurs règles peuvent s'appliquer, la


plus spécifique gagne !

27
Factorisation des motifs

 Pour éviter les répétitions inutiles de règles, on peut


factoriser les motifs sur une seule règle :

<xsl:template match="nom | prenom">


<B>
<xsl:apply-templates/>
</B>
</xsl:template>

Cette règle s'applique à la fois aux éléments


<nom> et <prenom>

28
Contrôler le parcours du document
(1)

 Pour l'instant, nous avons vu que XSL parcourt le document


dans l'ordre de ses éléments
 annuaire, entete, responsable, …, membre, prenom, nom, tel,
adresse, etc.
 de la racine vers les feuilles de l'arbre

 Comment contrôler l'ordre dans lequel les choses peuvent


être effectuées ?
 Exemples :
 codePostal avant ville
 nom avant prenom

29
Contrôler le parcours du document
(2)

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

 Sans attribut select, l'instruction apply-templates traite les

éléments dans l'ordre où ils apparaissent dans le document.

 L'attribut select permet d'indiquer au moteur XSL de traiter

uniquement les éléments qui vont correspondre au motif.

 On contrôle l'ordre maintenant !...

30
Contrôler le parcours du document
- exemple

...
<xsl:template match="membre">
<xsl:apply-templates select="nom"/>
<xsl:apply-templates select="prenom"/>
<xsl:apply-templates select="tel"/>
<xsl:apply-templates select="departement"/>
<xsl:apply-templates select="adresse"/>
</xsl:template>
...

31
Les boucles (for-each)

 Pour chaque élément qui correspond à un motif, fait l'action



 Exemple : la liste des membres

<xsl:for-each select="motif">
[action]
</xsl:for-each>

32
Les boucles : exemple

...
<xsl:template match="annuaire">
<xsl:apply-templates select="entete"/>
<TABLE BORDER="1" WIDTH="100%">
<xsl:for-each select="membre">
<TR>
<xsl:apply-templates/>
</TR>
</xsl:for-each>
</TABLE>
</xsl:template> Pour chaque membre, crée une
... ligne du tableau et traite les fils
33
Le tri avec xsl:sort

 Le tri est effectué en utilisant des éléments xsl:sort dans les


2 instructions :
 xsl:apply-templates
 xsl:for-each

 Possibilité de définir des clés primaire, secondaire, etc...

...
<xsl:template match="annuaire">
<xsl:apply-templates select="membre">
<xsl:sort select="nom" order="ascending"/>
</xsl:apply-templates>
</xsl:template>
...

34
Le test avec xsl:if

...
<xsl:template match="entete">
<!-- si pas de date, écrire 3 ? -->
<xsl:if test="not(dateRevision)">
<text>???</text>
</xsl:if>
...
</xsl:template>
...

<xsl:if test="position()=2">...
<xsl:if test="name(.)='nom'">...
<xsl:if test="@id">...

35
Choix multiple avec xsl:choose

...
<xsl:choose>
<xsl:when test="quelque-chose">
[action]
</xsl:when>
<xsl:when test="autre-chose">
[action]
</xsl:when>
...
<xsl:otherwise>
[action]
</xsl:otherwise>
</xsl:choose>
...
36
Les variables

 Mettre/stocker des valeurs ou résultats de select dans des


variables
<xsl:variable name="toto" select="text()"/>

 Référence : $toto
<xsl:value-of select="$toto"/>

 Ecrite une fois ! Lue plusieurs fois !


 On ne peut pas modifier la valeur d'une variable…

 Attention à la portée d'une variable :


 Dans l'élément qui contient sa déclaration

37
Appel explicite à une règle

 Une règle peut avoir un nom


 On peut alors l'invoquer explicitement
 Des fonctions spécifiques en quelque-sorte...

...
<xsl:template match="dateRevision">
<xsl:call-template name="formatDate"/>
</xsl:template>

<xsl:template name="formatDate">
<!-- Code XSL ici pour formater la date -->
</xsl:template>
...

38
Passage de paramètres à une règle

 Déclaration d'un ou plusieurs paramètres

<xsl:template match="elementType">
<xsl:param name="txt"/>
<xsl:param name="lang" select="FR"/>
...
</xsl:template>
 Passer les paramètres à l'invocation d'une règle
Passer les paramètres à l'invocation d'une règle
<xsl:apply-template select="elementType">
<xsl:with-param name="txt" select="text()"/>
<xsl:with-param name="lang" select="@xml:lang"/>
...
</xsl:template>

39
Les modes

 Permet de créer plusieurs règles pour un même élément

 Chaque règle permet de traiter l'élément de manière différente

 Exemple : Une table des matières

40
Les modes : exemple (1)

...
<xsl:template match="annuaire">
<xsl:apply-templates select="entete"/>
<UL>
<xsl:apply-templates select="membre" mode="toc"/>
</UL>
<TABLE BORDER="1" WIDTH="100%">
<xsl:apply-templates select="membre" mode="main"/>
</TABLE>
</xsl:template>
...

41
Les modes : exemple (2)

...
<xsl:template match="membre" mode="toc">
<LI>
<A href="#{@id}"><xsl:value-of select="nom/text()"/></A>
</LI>
</xsl:template>
...

...
<xsl:template match="membre" mode="main">
<TR>
<A NAME="{@id}"/>
<xsl:apply-templates/>
</TR>
</xsl:template>
...
42
Copie de nœuds

 <xsl:copy> : copie le nœud seul sans ses descendants

 <xsl:copy-of> : copie le nœud actuel avec ses descendants

<xsl:template match="/">
<xsl:copy-of select="."/>
</xsl:template>

43
La fonction document()

 Lecture de plusieurs documents


 Par exemple, utilisation d'un fichier de ressources multilingues
codées en XML !…
 Le format : document(url)

<xsl:variable name="multi-res"
select="document(http://…/ressources.xml)"/>

44
Fragmenter et ré-utiliser des
feuilles de style

<xsl:include> <xsl:import>

 Macro : remplace l'élément include  Idem mais avec des priorités


avec le contenu de la feuille de style supérieures au reste des règles de
incorporée la feuille de style

<xsl:stylesheet … >

<xsl:include href="fds2.xsl">
A
</xsl:stylesheet>

B C

ordre : B > C > A

45
Format de sortie

<xsl:output>
 Indiquer à XSL ce qu'il est en train de générer
 HTML : <p/> en <p>…</p>
 Codage des caractères

<xsl:stysheet …>
<xsl:output method="html" encoding="UTF-8"/>

<xsl:template …

</xsl:stylesheet>

46
Et maintenant …

A vous de jouer !