Développement d`Applications Web - Feuilles de style XML: CSS et

Transcription

Développement d’Applications Web
Feuilles de style XML: CSS et XSLT
Mehdi BENZINE
[email protected]
Département d’Informatique
Faculté des Sciences
Université FERHAT ABBAS Sétif I
2015/2016
.
M. BENZINE
DAW:Feuilles de style XML
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
1 / 33
.
Introduction
Les feuilles de style permettent d’appliquer des règles de mise en
forme à un document XML (couleurs, polices de caractères, marges
...).
Plusieurs types de feuilles de style peuvent être appliquées à un
document XML.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
2 / 33
.
CSS: Cascading StyleSheet
Les feuilles de style CSS offrent un système de règles simples, pour
associer des effets de style à un élément XML.
Il est possible d’associer à un fichier XML une feuille de style CSS
en ajoutant au prologue du fichier l’instruction de traitement:
<?xml-stylesheet type="text/css" href="url fichier
css"?>
Les feuilles de style CSS utilisées pour mettre en forme les
documents XML sont les mêmes que celles que nous avons utilisé
avec HTML.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
3 / 33
.
Mise en forme avec CSS
Pour mettre en forme un document XML avec une feuille de style
CSS, il suffit de définir une règle pour chaque élément que l’ont
souhaite afficher.
Seuls les nœuds textuels peuvent être affichés.
La présence ou non d’attributs et leurs valeurs peuvent permettre
de définir des règles conditionnelles.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
4 / 33
.
Exemple
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<carnet>
<contact type="perso">
<nom>Karkar</nom>
<prenom>Farid</prenom>
<telephone fixe="true">036 84 47 12</telephone>
...
</contact>
<contact type="pro">
<nom>Boudoukha</nom>
<prenom>Said</prenom>
...
<adresse>
<numero>8</numero>
<rue>rue des frères Habeche</rue>
<ville>Sétif</ville>
</adresse>
</contact>
.
. . . . .
</carnet>
. .
.
. . . .
M. BENZINE
.
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
5 / 33
.
Exemple
Les éléments n’ayant pas de contenu textuel et ne devant pas être
affichés
carnet{
background-color: yellow;
}
contact{
}
Les éléments ayant un contenu textuel peuvent doivent être
affichés comme bloc, en ligne ... grâce à l’attribut display
nom{
display: block;
color: red;
text-decoration: underline;
}
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
6 / 33
.
Exemple
La valeur d’un attribut de l’élément peut permettre en mettre en
place une mise en forme conditionnelle
telephone[fixe="true"]{
display: inline;
color: green;
}
telephone[fixe="false"]{
display: inline;
color: blue;
}
contact[type="pro"] > nom{
display: inline;
background-color: green;
color: white;
}
M. BENZINE
.
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
7 / 33
.
Limites des CSS
Les CSS présentent un certain nombre de limites parmi lesquelles:
Impossibilité d’afficher plusieurs fois le même élément
Impossibilité d’afficher les éléments dans un ordre différent
que celui où ils apparaissent dans le document
Impossibilité d’afficher les valeurs des attributs
...
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
8 / 33
.
XSLT: eXtensible Stylesheet Language Transformations
La recommandation XSL (eXtensible Stylesheet Language)
regroupe deux parties:
XSLT (XSL Transformations): Langage de transformation
permettant de transformer un document XML en un autre
document XML ou XHTML (de structure et/ou de contenu
différents du document initial).
XSL-FO (XSL Formatting Objects): Langage de
description de mise en forme. Pouvant être utilisé
conjointement avec XSLT (utile pour générer des documents
pdf, rtf...).
XSL-FO et XSLT sont eux mêmes des dialectes XML.
Seul XSLT sera étudié dans ce cours.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
9 / 33
.
Document XSLT
Une feuille de style XSLT est un document XML.
XSLT est un langage permettant d’exprimer des séquences
d’instructions (langage de programmation)
XSLT est un langage Turing complet
L’élément racine de ce document doit déclarer l’espace de
nommage XSLT comme ceci:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Le document XML auquel s’applique la feuille de style doit y faire
référence dans le prologue grâce à l’instruction de traitement:
<?xml-stylesheet type="application/xslt+xml" href="url fichier
xslt"?>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
10 / 33
.
Principe de XSLT
Une feuille de style XSLT est un ensemble de règles de
transformation (templates).
Un template est caractérisé par:
une expression XPath (pattern) permettant de sélectionner
les nœuds du document auxquels s’applique le template
un contenu (content) destiné à remplacer l’élément d’origine
dans le document XML résultat
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
11 / 33
.
template
Le document XML est lu de manière séquentielle et chaque
élément reconnu par un template est traité par ce template. Le
résultat du traitement est inséré dans le document XML résultat.
Un template est exprimé de la manière suivante:
<xsl:template match="xpath">

</xsl:template>
L’attribut match permet de désigner l’ensemble des nœuds
auxquels s’applique le template.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
12 / 33
.
Exemple
<carnet>
<contact type="perso">
<nom>Karkar</nom>
<prenom>Farid</prenom>
<telephone fixe="true"></telephone>
</contact>
<contact type="pro">
<nom>Boudoukha</nom>
<prenom>Said</prenom>
<prenom>Ali</prenom>
<telephone fixe="false">06 61 85 20 41</telephone>
<adresse>
<numero>8</numero>
<rue>rue des frères Habeche</rue>
<ville>Sétif</ville>
</adresse>
</contact>
.
. . . . . . .
</carnet>
. .
.
. . . . . .
M. BENZINE
. . .
. .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
13 / 33
.
Exemple
Exemple:
<xsl:template match="contact">
Contact
</xsl:template>
Résultat:
Contact Contact
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
14 / 33
.
value-of
La règle <xsl:value-of select="xpath"/> permet de renvoyer
dans le résultat la valeur des nœuds retournée par la requête de
l’attribut select.
Pour chaque nœud contexte sur lequel est appelée la requête
XPath, seul le premier nœud retourné par la requête est affiché.
Pour insérer le contenu d’un élément ou d’un attribut comme
valeur d’un attribut, il suffit de le placer entre {}.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
15 / 33
.
Exemple
Exemple:
<a href="#{nom}">
<xsl:value-of select="nom"/>
</a>
</xsl:template>
Résultat:
<a href="#Karkar">Karkar</a>
<a href="#Boudoukha">Boudoukha</a>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
16 / 33
.
Exemple
Exemple:
<xsl:value-of select="telephone"/>
</xsl:template>
Résultat:
036 84 47 12 036 93 54 10

.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
17 / 33
.
XML bien formé
Le résultat d’une transformation XSLT étant un document XML,
celui-ci doit être bien formé.
Chaque template XSLT doit produire des éléments XML bien
formés, car le texte contenu dans le template est lui même
considéré comme étant une partie du document XSLT.Il doit donc
être bien formé.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
18 / 33
.
Exemple
Exemple:
<xsl:template match="carnet">
<html>
<head></head>
<body>
Carnet d'adresses
</body>
</html>
</xsl:template>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
19 / 33
.
apply-templates
L’instruction apply-templates
<xsl:apply-templates select="xpath">
</xsl:apply-templates> recherche et applique le template
(défini ailleurs dans la feuille de style) permettant de transformer
chacun des nœuds retournés par la requête XPath contenu dans
l’attribut select. Si l’attribut select n’est pas spécifié, tous les
nœuds enfants du nœud courant seront traités.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
20 / 33
.
Exemple
Exemple:
<xsl:template match="carnet">
<html>
<head></head>
<body>
Carnet d'adresses:<br/>
<xsl:apply-templates select="contact" />
</body>
</html>
</xsl:template>
<xsl:value-of select="nom"/><br/>
</xsl:template>
Résultat:
<html>
<head></head>
<body>
carnet d'adresses:<br/>
Karkar<br/>
Boudoukha<br/>
</body>
</html>
M. BENZINE
.
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
21 / 33
.
if
L’instruction if permet d’appliquer une transformation
uniquement si une condition est vérifiée.
<xsl:if test="prédicat">...</xsl:if>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
22 / 33
.
Exemple
Exemple:
<xsl:template match="telephone">
<li>
<xsl:if test="@fixe=true()">
Ligne fixe:
</xsl:if>
<xsl:if test="@fixe=false()">
Portable:
</xsl:if>
<xsl:value-of select="." />
</li>
</xsl:template>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
23 / 33
.
choose
L’instruction choose permet d’appliquer une transformation
correspondant à la branche when qui est vérifiée. Quand aucune
condition when n’est vérifiée, la branche otherwise est exécutée.
<xsl:choose>
<xsl:when select="predicat1">...</xsl:when>
<xsl:when select="predicat2">...</xsl:when>
...
<xsl:otherwise>...</xsl:when>
</xsl:choose>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
24 / 33
.
Exemple
Exemple:
<xsl:template match="nom">
<xsl:choose>
<xsl:when test="../@type='perso'">
<h2 style="background-color: blue; width: 20%">
</h2>
</xsl:when>
<xsl:when test="../@type='pro'">
<h2 style="background-color: green; width: 20%">
</h2>
</xsl:when>
</xsl:choose>
</xsl:template>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
25 / 33
.
for-each
L’instruction for-each permet d’itérer sur un ensemble de nœuds
pour effectuer un transformation sur chacun de ces nœuds.
<xsl:for-each select="xpath">
...
</xsl:for-each>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
26 / 33
.
Exemple
Exemple:
<xsl:for-each select="telephone">
Telephone: <xsl:value-of select="." />
</xsl:for-each>
</xsl:template>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
27 / 33
.
text
L’instruction text permet d’insérer du texte dans document en
sortie (pouvant être utilisé pour insérer des espaces, des sauts de
ligne...). <xsl:text>...</xsl:text>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
28 / 33
.
sort
L’instruction sort permet de trier un ensemble de nœuds sur un
critère donné.
<xsl:sort select="critère xpath" order="ascending ou
descending" />
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
29 / 33
.
Exemple
Exemple:
<xsl:apply-templates select="contact">
//Le template est applique sur les contacts
//tries par noms croissants
<xsl:sort select="nom" order="ascending" />
</xsl:apply-templates>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
30 / 33
.
template et apply-templates: attribut mode
Il est possible d’associer plusieurs templates à un même type de
nœuds.
L’attribut mode permet de distinguer ces différents templates.
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
31 / 33
.
Exemple
Exemple:
<xsl:apply-templates select="contact" mode="resume">
<xsl:apply-templates select="contact" mode="details">
...
<xsl:template match="contact" mode="resume">
...
</xsl:texmplate>
<xsl:template match="contact" mode="details">
...
</xsl:texmplate>
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
32 / 33
.
Quelques moteurs XSLT
Parmi les moteurs de transformation XSLT disponibles sur le
marché:
Xalan
Saxon
libxslt
MSXML
Mozilla
...
.
M. BENZINE
.
.
.
.
.
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
.
.
2015/2016
.
.
.
.
.
.
.
33 / 33
.

Développement d`Applications Web - Feuilles de style XML: CSS et

Transcription

Documents pareils

Technologie XML: XML, DTD, CSS, XSL

Fiche Cours PDF - Ociensa Technologies

DocBook

DFB - Changement heure ete hiver sur SoMachine

plan de cours - Iris Training

XML

Version PDF

LES ECONOMIES LATINO-AMERICAINES, FORCES ET FAIBLESSES

Synthese de lecture XML DOM XSL - membres

XSLT avec