Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
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
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
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 XQuery qui permet l’interrogation des documents XML. document, dont chaque règle permet de produire une partie du document résultat.
11 12
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
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
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>
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>
Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion Introduction Le langage CSS Le langage XSL Le langage XSLT Conclusion
<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>
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>
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>
37 38