Form XSL Intro

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"
</xsl:template>
</xsl:template> ...
... <xsl:template match="departement">
</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 :
 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"
<HTML>
<HEAD>
<TITLE>Annuaire</TITLE>
</HEAD> Ajout
<BODY>
</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é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>
</TABLE>
20
HTML: Les tableaux
Bordure de cadre
[Border] <TABLE border=?
></TABLE>
<TABLE border=2>
</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>

</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>

</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>
</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>
</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
(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
- 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:apply-templates select="entete"/>
<TABLE BORDER="1" WIDTH="100%">
<xsl:for-each select="membre">
<TR>
</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: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">

<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">

</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: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}"/>
</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: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 !

Form XSL Intro

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Form XSL Intro

Transféré par

Droits d'auteur :

Formats disponibles

XSL-T

Recommandation 16 Novembre 1999

XML Style Language

Sadok Ben Yahia, PhD

Faculté des Sciences de Tunis

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

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

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

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

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

 Et ainsi de suite ...

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

 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

<xsl:template match="un motif">

Cher moteur XSL, quand tu parses un

Va vers chacun de mes fils ( <entete>

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

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

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

action) ainsi que leur descendance :

 supprimer les règles concernant les fils

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

 Mettre les balises HTML correspondantes autour des

 Pour obtenir quelque chose qui ressemble à ceci :

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

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

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

 Commentaires[Comments] Ne pas afficher

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

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

 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

<H1>Les mois du printemps</H1>

<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

Bordure border=? (en pixels)

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>

[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

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

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

<TABLE border=2 cellspacing=10>

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

<TABLE border=2 cellpadding=10>

 Indiquer au moteur XSL :