Vous êtes sur la page 1sur 10

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Introduction
Le langage CSS
 Association d’une feuille de style CSS à un document
Le langage XSL XML est un langage de description et de structuration de données, ces
Le langage XSLT
 Structure d’une feuille de style XSL dernier sont toujours stockées dans un document texte (le fichier XML
 Définition d’une règle
 Association d’une feuille de style XSL à un document XML contient seulement du texte);
 Valeur d’une expression régulière La représentation graphique des données (polices des caractères,
 Structure répétitive
 Les filtres couleurs, images, tableaux…) est un aspect important qui permet la
 Structure conditionnelle
 Structure à choix multiples consultation de ces derniers par des non informaticiens et qui facilite
 Le tri
 Déclaration des variables leurs interprétation;
Conclusion 2

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

L’internet et l’intranet présentent une diversités de données qui sont Dans le cadre de ce cours nous étudierons :

visualisées essentiellement sous les navigateurs (client léger), ces derniers Une introduction de la mise en forme et de l’affichage des
remplacent de plus en plus les application desktop (client lourd); documents XML sur le web en utilisant le Langage CSS;
Les navigateurs ne peuvent pas mettre en forme le contenu d’un Le langage XSLT: pour la transformation d’un document XML
document XML, car les balises XML sont extensibles (ne sont pas en un document HTML affichable par un navigateur, ce langage
reconnues comme les balises du langage HTML); permet aussi de transformer un documents XML (ou une partie
La publication des données comprises dans un document XML sous un du document) en un autre document XML ayant une structure
format HTML est un atout incontournable. 3 différente du document source. 4

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 1


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Pour mettre en forme les données comprises dans un document XML et


rendre ce dernier affichable par un navigateur, nous pouvons lui Pour associer une feuille de style CSS à un document XML nous
associer une feuille de style CSS (Cascading Style Sheets); utilisons l’instruction de traitement « xml-stylesheet » comme suit :
Le langage CSS ne permet pas la transformation des documents XML, il
Syntaxe: <?xml-stylesheet type="text/css" href="cheminStyle"?>
permet juste la mise en forme de leurs contenus;
Pour chaque élément (balise) du document XML nous pouvons définir
type: indique au navigateur le type de la feuille de style;
une règle CSS qui précise son style (police, couleur,…);
href: indique le chemin vers la feuille de style.
Le langage CSS est une recommandation W3C. 5 6

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Etudiant.xml
<?xml version='1.0' encoding='UTF-8' standalone="yes" ?> suite
<?xml-stylesheet type="text/css" href="Etudiants.css" ?> Etudiant.css
<Etudiants> <DateNai>
<Etudiant Sexe="Féminin"> <Jour>10</Jour> Etudiant{ suite
<Nom>Nouri</Nom> <Mois>Fev</Mois>
<Annee>1998</Annee>
display:block;
<Prenom>Mariam</Prenom>
<Adresse> </DateNai> }
<Rue>Lissasfa</Rue> <Tele>0666217621</Tele> Etudiant[Sexe="Masculin"]{ DateNai, Adresse, Tele{
<Etablissement>Ecole Supérieure de Technologier de Safi</Etablissement>
<Numero>980</Numero>
<Ville>Casablanca</Ville> </Etudiant> background-color: red ; display: block;
</Adresse> <Etudiant Sexe="Féminin">
<Nom>Hajjaji</Nom>
} font-size: 18pt;
<DateNai>
<Jour>10</Jour> <Prenom>Keltoum</Prenom> Etudiant[Sexe="Féminin"]{ font-style: italic;
<Mois>Mars</Mois> <Adresse> background-color: green ;
<Annee>1998</Annee> <Rue>Abdelkrim khattabi</Rue> font-family: arial ;
<Numero>342</Numero> }
</DateNai>
<Ville>Tanger</Ville> Nom, Prenom { padding-left: 10px;
<Tele>06000003</Tele>
<Etablissement>Ecole Supérieure de Technologier de Safi</Etablissement> </Adresse>
<DateNai> display: inline; }
</Etudiant>
<Etudiant Sexe="Masculin"> <Jour>25</Jour> text-decoration: underline; Etablissement{
<Mois>Mars</Mois>
<Nom>Marrakchi</Nom>
<Annee>1997</Annee>
font-size: 24pt; color: white ;
<Prenom>Alae</Prenom>
</DateNai> font-weight: bold;
<Adresse>
<Tele>06000004</Tele>
}
<Rue>Hassan II</Rue>
<Etablissement>Ecole Supérieure de Technologier de Safi</Etablissement>
}
<Numero>12</Numero>
<Ville>Safi</Ville> </Etudiant>
</Adresse> </Etudiants>
7 8

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 2


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

XSL (EXtensible Stylesheet Language) est un langage qui a été conçu


pour transformer un document XML source en un document résultat
au format PDF, HTML, XML ou autres;
XSL est développé par W3C suite à un besoin d’un langage de feuille de
styles basé sur le langage XML;
Les balises du langage XML ne sont pas prédéfinies, le langage XSL
définit comment les nœuds d’un arbre XML seront interprétés.

9 10

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Le langage XSL est non pas seulement un langage de feuille de style, il Le langage XSLT est un dialecte XML (ayant une syntaxe XML) c’est-à-dire

est composé des quatre langages suivants: qu’un document XSLT est un document XML bien formé;

 Le langage XSLT (eXtensible Stylesheet Language Transformations) qui


C’est un langage qui permet de transformer/restructurer un document
permet la transformation des documents XML; XML source en un autre document résultat;
 Le langage XSL-FO (XML Stylesheet Language - Formatting Objets) qui C’est un langage capable de:
permet le formatage des documents XML (abandonné en 2013);  Parcourir un arbre XML en utilisant le langage XPath;
 Le langage XPath qui permet la navigation dans les documents XML;  Définir des règles de transformation qui seront appliquées aux éléments d’un

 Le langage XQuery qui permet l’interrogation des documents XML. document, dont chaque règle permet de produire une partie du document résultat.
11 12

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 3


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Un programme XSLT est souvent appelé une feuille de style XSL: un <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
document XSL qui est attaché à un document XML pour le mettre en
<-- corps de la feuille de style -->
forme (comme un CSS qui est attaché à un document HTML pour le </xsl:stylesheet>
mettre en forme) ;
 Une feuille de style XSL est un document XML bien formé, qui commence par un prologue;
Une feuille de style XSL est généralement enregistrée sous un fichier
 Les éléments et les attributs de la feuille de style appartiennent à l'espace de noms associé à
d’extension « .xsl »; l'url " http://www.w3.org/1999/XSL/Transform", ils sont préfixés par « xsl »;
Le langage XSLT est une recommandation W3C.  L'attribut « xmlns:xsl » associe le préfixe « xsl » à l'espace de nom cité: c’est-à-dire que tous

13
les éléments de cette feuille (du langage XSLT) seront préfixés par « xsl »; 14

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

L’élément racine est toujours « stylesheet » (préfixé bien sûr par xsl); Une feuille de style est composée d’un <xsl:template match="motif">
<-- Corps de la règle-->
L’attribut « version » indique la version du langage XSLT; ensemble de règles ayant la syntaxe ci-contre: </xsl:template>

Le corps de la feuille de style comprend généralement:  L’élément « xsl:template » permet d’introduire une règle;

 Des éléments et des attributs de la feuille de style (qui appartiennent à l'espace de nom  L'attribut « match » désigne les éléments du document XML sur lesquels la règle sera appliquée;

« http://www.w3.org/1999/XSL/Transform » et qui sont préfixés par « xsl ») qui  La valeur « motif » de l’attribut « match » est une expression régulière (exprimée en langage
permettent de définir des règles de transformation; XPath) qui permet de sélectionner les éléments concernés par la règle;

 Des fragments (brutes ou générés par des règles) du document résultat: si le document  Le corps de la règle contient le code de la transformation et des fragments du document
résultat est un document HTML dans ce cas les fragments sont des balises HTML. résultat.
15 16

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 4


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion <Etudiant CNE="C005" Sexe="Masculin">
<Nom>Azerkan</Nom>
Soit le document XML suivant: <Prenom>Mouad</Prenom>
<Photo Source="img/005" Type="png"></Photo>
</Etudiant>
Etudiants.xml <Etudiant CNE="C006" Sexe="Feminin">
<?xml version='1.0' encoding='UTF-8' ?> <Nom>Imrani</Nom>
<Etudiants Responsable="C007"> <Prenom>Maroua</Prenom>
<Etudiant CNE="C001" Sexe="Masculin"> <Photo Source="img/006" Type="png"></Photo>
<Nom>Marrakchi</Nom> </Etudiant>
<Etudiant CNE="C007" Sexe="Masculin">
<Prenom>Alae</Prenom>
Pour associer une feuille de style XSL à un document XML nous <Photo Source="/img/001" Type="png"/>
<Nom>El Mourabib</Nom>
<Prenom>Khalid</Prenom>
</Etudiant> <Photo Source="img/007" Type="png"></Photo>
utilisons l’instruction de traitement « xml-stylesheet » comme suit : <Etudiant CNE="C002" Sexe="Masculin">
<Nom>Alami</Nom>
</Etudiant>
<Etudiant CNE="C008" Sexe="Feminin">

suite
<Prenom>Mohammed</Prenom> <Nom>Radi</Nom>
<Prenom>Chams</Prenom>
Syntaxe: <?xml-stylesheet type="text/xsl" href="cheminStyle"?> <Photo Source="img/002" Type="png"></Photo>
</Etudiant>
<Photo Source="img/008" Type="png"></Photo>
</Etudiant>
<Etudiant CNE="C003" Sexe="Feminin"> <Etudiant CNE="C009" Sexe="Feminin">
<Nom>Nouri</Nom> <Nom>Kadi</Nom>
<Prenom>Mariam</Prenom> <Prenom>Najlae</Prenom>
type: indique au navigateur le type de la feuille de style; <Photo Source="/img/003" Type="png"/> <Photo Source="img/009" Type="png"></Photo>
</Etudiant>
</Etudiant>
<Etudiant CNE="C004" Sexe="Feminin"> <Etudiant CNE="C010" Sexe="Masculin">
href: indique le chemin vers la feuille de style. <Nom>Hajjaji</Nom>
<Nom>Tounsi</Nom>
<Prenom>Jalal</Prenom>
<Prenom>Keltoum</Prenom> <Photo Source="img/010" Type="png"></Photo>
<Photo Source="img/004" Type="png"></Photo> </Etudiant>
17 </Etudiant> </Etudiants> 18

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" Si nous appliquons cette feuille de
version="1.0">
<xsl:template match="/"> style au document « Etudiants.xml » Pour accéder à un contenu d’un élément ou à une valeur d’un attribut
<html>
<head>
<title>Liste des étudiants</title>
nous obtenons le résultat suivant: nous utilisons la balise suivante:
</head>
<body> Syntaxe: <xsl:value-of select="expression XPath" />
<h1 style="text-align:center">Liste des étudiants:</h1>
<table border="1">
<tr> Cette balise permet:
<th >CNE</th>
<th> Nom</th>
<th>Prenom</th>  D’évaluer l’expression XPath de l’attribut « select »;
<th>Sexe</th>
<th>Photo</th>  De convertir le résultat obtenu en une chaîne de caractères;
</tr>
</table>
</body>  D’intégrer la chaîne de caractères dans le document résultat.
</html>
</xsl:template>
</xsl:stylesheet> 19 20

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 5


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple2.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html> Si nous appliquons cette feuille de
<head>
<title>Liste des étudiants</title>
</head> style au document « Etudiants.xml » Pour accéder aux contenus de plusieurs éléments ou des valeurs de
<body>
<h1 style="text-align:center">Liste des étudiants:</h1>
<table border="1"> nous obtenons le résultat suivant: plusieurs attributs nous utilisons la balise suivante:
<tr>
<th >CNE</th>
<th> Nom</th>
<xsl:for-each select="expression XPath">
<th>Prenom</th> Syntaxe: <-- corps de la structure répétitive-->
<th>Sexe</th>
<th>Photo</th>
</tr> </xsl:for-each>
<tr>
<td> <xsl:value-of select="//Etudiant/@CNE" /></td>
<td> <xsl:value-of select="Etudiants/Etudiant/Nom" /></td>
<td><xsl:value-of select="Etudiants/Etudiant/Prenom" /></td>
Cette balise permet:
<td><xsl:value-of select="Etudiants/Etudiant/@Sexe" /></td>
<td><xsl:value-of select="//Etudiant/Photo/@Source" />.<xsl:value-of
select="//Etudiant/Photo/@Type"/></td>
 D’évaluer l’expression XPath de l’attribut « select »;
</tr>
</table>
</body>  De parcourir et de sélectionner tous les nœuds qui vérifient l’expression XPath;
</html>
</xsl:template>
</xsl:stylesheet> 21  D’exécuter le traitement exprimé dans le corps sur les nœuds sélectionnés. 22

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple3.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
Si nous appliquons cette feuille de
<html>
<head> <title>Liste des étudiants</title> </head> style au document « Etudiants.xml »
<body>
<h1 style="text-align:center">Liste des étudiants:</h1>
Le langage XSLT permet de réaliser des filtres sur les nœuds sélectionnés;
<table border="1"> nous obtenons le résultat suivant:
<tr>
<th >CNE</th> La forme générale d’une expression de filtre est la suivante:
<th> Nom</th>

<xsl:for-each select="chemin [element opérateur 'valeur']">


<th>Prenom</th>
<th>Sexe</th> Forme:
<th>Photo</th>
</tr>
<xsl:for-each select="Etudiants/Etudiant">
<tr> Les opérateurs utilisés pour les filtres sont:
<td> <xsl:value-of select="@CNE" /></td>
<td> <xsl:value-of select="Nom" /></td>
<td><xsl:value-of select="Prenom" /></td>
<td><xsl:value-of select="@Sexe" /></td>
 « = »: qui désigne égal à;
<td><xsl:value-of select="Photo/@Source" />.<xsl:value-of
select="Photo/@Type"/></td>
</tr>
 « != »: qui désigne différent de;
</xsl:for-each>
</table>
</body>  « &gt; »: qui désigne plus grand que;
</html>
</xsl:template>
</xsl:stylesheet> 23  « &lt; »: qui désigne plus petit que. 24

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 6


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple4.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html> Si nous appliquons cette feuille de
<head> <title>Liste des étudiants</title> </head>
<body>
<h1 style="text-align:center">Liste des étudiants:</h1> style au document « Etudiants.xml » Le langage XSLT permet d’exprimer des tests conditionnels sur les
<table border="1">
<tr>
<th >CNE</th> nous obtenons le résultat suivant: nœuds d’un document XML;
<th> Nom</th>

Pour exprimer un test nous utilisons la balise suivante:


<th>Prenom</th>
<th>Sexe</th>
<th>Photo</th>
</tr>
<xsl:for-each select="Etudiants/Etudiant[Nom='Imrani'] ">
<tr>
<xsl:if test="expression">
<td> <xsl:value-of select="@CNE" /></td>
<td> <xsl:value-of select="Nom" /></td>
Syntaxe: <-- corps de la structure conditionnelle-->
<td><xsl:value-of select="Prenom" /></td>
<td><xsl:value-of select="@Sexe" /></td>
</xsl:if>
<td><xsl:value-of select="Photo/@Source" />.<xsl:value-of
select="Photo/@Type"/></td>
</tr>
Cette balise permet:
</xsl:for-each>
</table>
</body>  D’évaluer l’expression de l’attribut « test » afin qu’un nœud soit sélectionner ou non;
</html>
</xsl:template>
</xsl:stylesheet> 25  D’exécuter le traitement exprimé dans le corps sur le nœud sélectionné. 26

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html> Si nous appliquons cette feuille de
<head> <title>Liste des étudiants</title> </head>
<body>
<h1 style="text-align:center">Liste des étudiants:</h1> style au document « Etudiants.xml »
<table border="1"> Pour exprimer plusieurs tests conditionnels nous utilisons la balise suivante:
<tr>
<th >CNE</th> nous obtenons le résultat suivant: <xsl:choose>
<th> Nom</th> Cette balise permet: Syntaxe: <xsl:when test=" expression_1">
exemple5.xsl

<th>Prenom</th>
<th>Sexe</th>
<-- corps de l’instruction-->
<th>Photo</th>
</tr>
 D’évaluer les expressions des attributs </xsl:when>
<xsl:for-each select="Etudiants/Etudiant">
<xsl:when test=" expression_2">
<xsl:if test="@Sexe='Masculin'">
<tr>
« test » afin qu’un nœud soit <-- corps de l’instruction-->
<td> <xsl:value-of select="@CNE" /></td>
<td> <xsl:value-of select="Nom" /></td> sélectionner ou non ; </xsl:when>
<td><xsl:value-of select="Prenom" /></td> ...
<td><xsl:value-of select="@Sexe" /></td>
<td><xsl:value-of select="Photo/@Source" />.<xsl:value-of  D’exécuter le traitement exprimé dans <xsl:otherwise>
select="Photo/@Type"/></td> <-- corps de l’instruction-->
</tr>
</xsl:if> le corps de l’expression vérifie sur le </xsl:otherwise >
</xsl:for-each> </xsl:choose>
</table>
</body> nœud sélectionné;
</html>
</xsl:template>
27
 Le traitement de la balise <xsl:otherwise> sera exécuté si aucune expression n’est vérifiée. 28
</xsl:stylesheet>

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 7


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple6.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> suite
<xsl:template match="/">
<html>
<head> <title>Liste des étudiants</title> </head>
<xsl:otherwise>
<tr bgcolor="green">
Si nous appliquons la feuille
<body> <td> <xsl:value-of select="@CNE" /></td>
<h1 style="text-align:center">Liste des étudiants:</h1> <td> <xsl:value-of select="Nom" /></td>
<td><xsl:value-of select="Prenom" /></td>
de style « exemple6.xsl » au
<table border="1">
<td><xsl:value-of select="@Sexe" /></td>
<tr>
<th >CNE</th>
<td><xsl:value-of select="Photo/@Source" />.<xsl:value-of
select="Photo/@Type"/></td>
document « Etudiants.xml »
<th> Nom</th> </tr>
<th>Prenom</th>
<th>Sexe</th>
</xsl:otherwise>
</xsl:choose>
nous obtenons le résultat
<th>Photo</th> </xsl:for-each>
</tr>
<xsl:for-each select="Etudiants/Etudiant">
</table>
</body>
suivant:
<xsl:choose> </html>
<xsl:when test="@Sexe='Masculin'"> </xsl:template>
<tr bgcolor="red"> </xsl:stylesheet>
<td> <xsl:value-of select="@CNE" /></td>
<td> <xsl:value-of select="Nom" /></td>
<td><xsl:value-of select="Prenom" /></td>
<td><xsl:value-of select="@Sexe" /></td>
<td><xsl:value-of select="Photo/@Source" />.<xsl:value-of
select="Photo/@Type"/></td>
</tr>
</xsl:when> 29 30

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple7.xsl
<?xml version="1.0" encoding="UTF-8"?> suite
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0"> <td><xsl:value-of select="Photo/@Source" />.<xsl:value-of
<xsl:template match="/">
Le langage XSLT permet de trier les nœuds sélectionnés dans l’ordre <html>
select="Photo/@Type"/></td>
</tr>
<head> <title>Liste des étudiants</title> </head> </xsl:for-each>
<body> </table>
ascendant ou descendant; <h1 style="text-align:center">Liste des étudiants:</h1>
</body>
</html>
<table border="1"> </xsl:template>
<tr>
Pour effectuer un tri nous utilisons la balise suivante: <th >CNE</th>
</xsl:stylesheet>

<th> Nom</th>
<th>Prenom</th>
Syntaxe: <xsl:sort select="element" order="ascending|descending" /> <th>Sexe</th>
<th>Photo</th>
</tr>
<xsl:for-each select="Etudiants/Etudiant" >

Cette balise est utilisé au sein d’une structure « <xsl:for-each> »; <xsl:sort select="Nom" order="ascending" />
<tr>
<td> <xsl:value-of select="@CNE" /></td>
L’attribut « select » désigne le nœud à trier; <td> <xsl:value-of select="Nom" /></td>
<td><xsl:value-of select="Prenom" /></td>
<td><xsl:value-of select="@Sexe" /></td>

L’attribut « order » désigne l’ordre de tri.


31 32

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 8


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Si nous appliquons la feuille


Le langage XSLT permet aussi de définir les variables, c’est-à-dire un
de style « exemple7.xsl » au
identificateur associé à une valeur;
document « Etudiants.xml »
La valeur d’une variable XSLT peut être sous forme d’un contenu
nous obtenons le résultat
textuelle ou bien le résultat d’une expression XPath (souvent une
suivant:
arborescence des éléments);
Pour définir une variable qui prend comme valeur le résultat d’une
expression nous utilisons la balise suivante:
Syntaxe1: <xsl:variable name="identificateur" select="expression" />
33 34

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

exemple8.xsl
<?xml version="1.0" encoding="UTF-8"?> suite
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<td> <xsl:value-of select="@Sexe"/> </td>
Pour définir une variable qui prend comme valeur un contenu textuelle <xsl:variable name="Responsable" select="/Etudiants/@Responsable"/>
<html>
<td><xsl:value-of select="Photo/@Source"/>.<xsl:value-of
select="Photo/@Type"/></td>
<head> <title>Liste des étudiants</title> </head> </tr>

nous utilisons la balise suivante: <body>


<h1 style="text-align:center">Liste des étudiants:</h1>
</xsl:when>
<xsl:otherwise>
<h3 style="text-align:left">Le responsable de la classe est l'étudiant(e): <tr>
<xsl:variable name="identificateur " > <xsl:value-of select="$Responsable"/></h3>
<td> <xsl:value-of select="@CNE"/> </td>
Syntaxe2: <table border="1">
<td> <xsl:value-of select="Nom"/> </td>

<-- contenu textuel --> <tr>


<td> <xsl:value-of select="Prenom"/> </td>
<td> <xsl:value-of select="@Sexe"/> </td>
<th>CNE</th> <td><xsl:value-of select="Photo/@Source"/>.<xsl:value-of
</xsl:variable> <th> Nom</th> select="Photo/@Type"/></td>
</tr>
<th>Prenom</th>
</xsl:otherwise>
<th>Sexe</th>
</xsl:choose>
Pour accéder à la valeur d’une variable nous utilisons l’opérateur « $ » <th>Photo</th>
</tr>
</xsl:for-each>
</table>
<xsl:for-each select="Etudiants/Etudiant"> </body>
devant son nom; <xsl:choose>
<xsl:when test="@CNE=$Responsable">
</html>
</xsl:template>
</xsl:stylesheet>
<tr bgcolor="yellow">
Une variable peut être affichée dans le fragment du document généré, ou <td> <xsl:value-of select="@CNE"/> </td>
<td> <xsl:value-of select="Nom"/> </td>
<td> <xsl:value-of select="Prenom"/> </td>
bien utilisée dans les expressions XPath. 35 36

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 9


Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Si nous appliquons la feuille


de style « exemple8.xsl » au Les données comprises dans un document XML peuvent êtres
document « Etudiants.xml » publiées sous forme de pages web ou de documents de formats
nous obtenons le résultat différents;
suivant: Il est possible de définir une feuille de style CSS qui permet la mise
en forme d’un document XML afin qu’il soit affichable par un
navigateur;

37 38

Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion

Le langage CSS ne permet pas de transformer un document XML;


XSL est un langage de feuille de style basé sur le langage XML;
XSLT est un dialecte XML qui permet de transformer un document
XML;
Un programme XSLT est souvent appelé une feuille de style XSL qui
permet la mise en forme d’un document XML;
XSLT est une recommandation W3C.
39

EST Safi -AU 2020/2021- Pr: Abderrahman CHEKRY 10

Vous aimerez peut-être aussi