Mise en forme et affichage de fichiers XML sur le web avec XSL et XSLT
![Mise en forme et affichage de fichiers XML sur le web avec XSL et XSLT](/images/remos_downloads/id-5828.5828.pdf_thumb_prev.jpg)
Publication de fichiers XML orientés documents
Plutôt pour des fichiers XML orientés documents. eXtensible HyperText Markup Language,
Format XML pour la publication sur le web,
Fichier XHTML = Fichier XML orienté document.
Idéalement (bonne pratique), décrit la structure du document (titre, paragraphe, etc), la présentation est prise en charge par un fichier de feuille de style CSS.
Dans la pratique, les balises de présentation disponibles dans XHTML sont souvent utilisées (, , etc) afin de ne pas avoir à écrire un fichier de feuille de style CSS associé.
Une structure "seule" (sans information de présentation).
titre du doc : CV de Martin Durant titre niveau 1 : Coordonnées titre niveau 1 : Expérience professionnelles
titre niveau 1 : Diplomes titre niveau 2 : 2008 - Licence pro CNAM La licence pro cnam est un cursus
titre niveau 2 : 2000 - DUT génie industriel titre niveau 2 : 1998 - BAC C
A partir de la structure seule, les navigateurs Web sont capables (interpréteur (X)HTML intégré) d’inférer une présentation associée simple.
→ Renvoie un affichage basique du fichier XHTML en mettant les titres en gras, en affichant les listes avec des puces et en retrait, en souligant les liens, etc.
Figure 1: Affichage basique à partir d’une structure
Situation idéale titre du doc : CV de Martin Durant
titre niveau 1 : Coordonnées
titre niveau 1 : Expérience professionnelles
titre niveau 1 : Diplomes titre niveau 2 : 2008 - Licence pro CNAM La licence pro cnam est un cursus titre niveau 2 : 2000 - DUT génie industriel titre niveau 2 : 1998 - BAC C
le titre du doc est en lettres capitales
les titres niveau 1 sont en gras police Times 12pt, vert les titres niveau 2 sont en gras police Times 10pt, bleu le texte est du verdana 10pt, noir
le fond du document est
beige
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-000.jpg)
Fichier XHTML Fichier CSS associé
(suite)
Souvent, dans la pratique (pas de fichier CSS associé, informations de format incluses dans le fichier contenant les données).
fond du document : beige titre du doc : En lettres capitales "CV de Martin Durant" titre niveau 1 : En times, 12pt, vert, gras "Coordonnées" titre niveau 1 : En times, 12pt, vert, gras "Expérience professionnell
titre niveau 1 : En times, 10pt, bleu, gras "Diplomes"
titre niveau 2 : En times, 10pt, bleu, gras "2008 - Licence pro CNAM" En verdana, 10pt, noir "La licence pro cnam est un cursus " titre niveau 2 : En times, 10pt, bleu, gras "2000 - DUT génie industri titre niveau 2 : 1998 - En times, 10pt, bleu, gras "BAC S"
XHTML, Structure d’un document
Balise : contient des méta-données du document p.e. author, copyright, generator, mots clef pour indexation par les moteurs de recherche, titre de la page XHTML, etc. et aussi la référence au fichier CSS associé.
Balise : englobe le document en lui-même, sa partie visible. Lien W3C : http
Paragraphes, saut de lignes forcés
Martin Durant, Chef de projet informatique
Né le 1er janvier 1972
Marié, quatre enfants
Nationalité Française
Coordonnées
: paragraphe
: balise ouvrante-fermante pour saut de ligne forcé (là, on commence à introduire des balises de présentation dans XHTML i.e. XHTML ne contient pas juste des informations structurelles)
Principe : permet d’appliquer des propriétés de présentation évoluée aux balises XML via des règles.
Cascading Style Sheets ;
Langage non XML pour la définition de présentation de document XML (souvent XHTML);
Trois niveaux (versions) 1, 2 et 3. Niveau 2 le plus utilisé (niveau 3 pas encore entièrement supporté par les navigateurs);
[?]
Règle CSS : selecteur { proriete : valeur }
selecteur champ d’application de la règle par exemple la balise h1
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-004.jpg)
propriete la propriété de la balise à instancier par exemple la couleur color
valeur valeur de la propriété par exemple green
h1 {color : green}
De façon plus générale
sel1, , selk { p1 : v1; ; pn : vn
}
h1, h2, h3 { color : green; font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif text-decoration : underline }
Il existe plus d’une centaine de propriétés CSS
Un fichier CSS est composé d’un ensemble de règles CSS
Un fichier CSS est lié au fichier X(HT)ML à présenter par la balise :
Si on veut pouvoir définir des styles différents pour une même balise, utiliser l’attribut class. On retrouvera ce principe avec l’attribut mode de XSLT Par exemple :
h1.commun { color : green; font: normal small "Trebuchet MS", Arial, Helvetica, sans−serif; text−decoration : underline } h1.coord { color : red; font: bold small "Trebuchet MS", Arial, Helvetica, sans−serif; text−decoration : underline } h2, h3 { color : green; ![]() font: normal small "Trebuchet MS", Arial, Helvetica, sans−serif; text−decoration : underline } |
Listing 1 – Fichier CSS simple ()
Fichier XHTML :
CV de Martin Durant
Martin Durant, Chef de projet informatique
Né le 1er janvier 1972
Marié, quatre enfants
Nationalité Française
Coordonnées
Adresse3 Allée du Lac, 91400 OrsayTéléphone01 23 45 67 89 (répondeur)Messagerie
Expériences professionelles
Chef de projet junior chez Alcatel
J’ai occupé ce poste de 2004 à 2009. Intégré à l’équipe Réseaux et télécommunication, j’ai maintenu
Listing 2 – Fichier XHTML (cv.xhtml)
Interprété par Firefox :
Figure 6: Affichage d’un fichier XHTML par un navigateur
Une feuille de style peut devenir assez compliquée (des règles peuvent rentrer en conflit, une notion de priorité est définie, etc). Le langage des feuilles de style CSS est un langage assez puissant qui, s’il est maitrisé, permet d’élaborer des présentations sophistiquées.
XHTML seul (structure et présentation "mélangées”) |
XHTML pour la structure et CSS pour la présenta- tion |
|
Facilité de définition |
Simple à écrire |
Plus compliqué à écrire ![]() |
Langage de définition de la présentation |
Verbeux |
Compact |
Informations concernant la présentation |
"mélangées" au contenu, répétées pour chaque tag |
Indépendantes non répétées |
Maintenance |
Difficile si plusieurs fichiers à uniformiser (voir même un seul!) |
Un grand plus par exemple si tous les fichiers d’un site web pointent vers une même feuille de style CSS car il suffit de mettre à jour le fichier CSS pour changer l’apparence de toutes les pages du site |
Profil administrateur |
"lambda" |
Demande une connaissance de CSS |
XSLT
XSL : Extensible Stylesheet Language.
Composé de deux dialectes de XML :
XSL-FO (XSL Formatting Objects) – dialecte XML permettant de décrire un rendu attendu sur une page de texte. Langage technique plutôt destiné à des typographes. À partir d’un document XSL-FO, un formateur XSL-FO peut créer un document final, par exemple un document pdf.
XSLT (XSL Transformations) – dialecte XML permettant de définir des transformations pour transformer un document XML en autre un document XML. Ce document XML peut (par exemple) être :
XHTML (pour afficher "élégamment" le contenu d’un fichier XML); XSL-FO si l’objectif est un rendu très perfectionné ou papier.
XSLT (suite)
Figure 7: Fonctionnement de XSLT/XSL-FO
XSLT : d’un fichier XML à un autre fichier XML
Figure 8: D’un fichier XML à un autre fichier XML
XSLT : d’un fichier XML à un autre fichier XML (suite)
Figure 9: Publication d’un fichier XML orienté données à l’aide de XSLT
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-019.jpg)
XSLT : exemple
Diagramme de classes
Modélise les objets du système étudié et leurs relations.
Acteurs, cas d’utilisation
Diagramme de cas dutilisation
Modélise l’ensemble des actions réalisées par le système étudié d’un utilisateur extérieur au système
Classes, associations
Diagramme de séquence
Modélise des interactions entre éléments du système
Rôle, ligne de vie, messages.
Diagramme d’activité
Modélise une activité
Noeuds, activité, action, partitions.
Listing 3 – Extrait d’un simple fichier XML ()
Feuille de style XSLT
Une feuille de style (stylesheet) XSLT est un fichier XML (puisque XSLT est un dialecte XML).
Listing 4 – Un simple fichier XSL () contenant une seule règle de transformation
Lignes 4 à 12 : Règle de transformation XSL (template rule)
Ensemble de règles de transformation (template rules).
Une règle est composée de :
une expression XPath appelée pattern identifiant les éléments que la règle traite
un fragment de code XML (bien formé) appelé corps créé lorsque la règle est instanciée.
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-024.jpg)
La règle est instanciée lorsque des éléments correspondant au pattern sont trouvés dans le fichier XML à transformer.
Syntaxiquement, une règle est décrite par un élément xsl:template contenant le corps entre son tag ouvrant et son tag fermant, et ayant un attribut match dont la valeur est le pattern.
Test
Étant donnée cette description, écrivez la forme d’une règle ayant pour pattern req_XPath et pour corps Well-formed_XML_fragment.
(suite)
Intuition du mécanisme de base de l’exécution
Initialement, un processeur XSLT cherche à appliquer, à la racine du fichier XML à transformer (nœud contexte initial), un template ayant le pattern /.
Pour chaque règle, étant donné un nœud contexte dans le document à transformer, le processeur XSLT sélectionne un ensemble de nœuds N résultant de l’évaluation de l’expression XPath de son pattern. Pour chaque nœud n ∈N , le processeur XSLT instancie le corps de la règle, cela l’amenant éventuellement à choisir d’autres règles à appliquer avec le nœud contexte n.
(suite)
Associer une feuille de style à un fichier XML
Diagramme de classes
Modélise les objets du système étudié et leurs relations.
Acteurs, cas d’utilisation
Diagramme de cas dutilisation
Modélise l’ensemble des actions réalisées par le système étudié d’un utilistaeur extérieur au système
Classes, associations
Diagramme de séquence
Modélise des interactions entre éléments du système
Rôle, ligne de vie, messages.
Listing 5 – Extrait d’un simple fichier XML
()
Référence à la feuille de style en ligne 2.
Transformation d’un fichier XML avec XSLT
Listing 6 – Fichier XHTML (xslcallHelloWorld.xhtml) généré(∗) par application de la feuille de style au fichier
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-032.jpg)
XML
(∗)
Ici, généré par Xalan [?] (fichier indenté manuellement pour lisibilité)
Transformation d’un fichier XML avec XSLT (suite)
Figure 10: Ouverture du fichier Listing ?? avec Firefox (v. 6.0.1)
Transformation d’un fichier XML avec XSLT (suite)
Voici une autre feuille de style :
Test
1 Quel type de fichier cherche-t-on à générer par cette transformation?
2 Quel est le contenu du fichier obtenu par transformation du fichier XML du Listing 3 par cette feuille de style?
3 Aurait-on pu générer un fichier SVG contenant le texte “Hello World” à la place de générer un fichier XHTML?
Transformation d’un fichier XML avec XSLT (suite)
Voici une variante de la feuille de style précédente.
Test
1 Quelle différence voyez-vous avec la feuille de style du Listing ?? ()?
2 Voyez-vous des espaces de noms déclarés dans ce fichier XML? Si oui, lesquels?
3 Sachant qu’au plus un espace de nom peut être associé à un élément, indiquez pour chaque élément si un namespace lui est associé et si oui lequel.
Voici le résultat du fichier généré par Xalan en appliquant la feuille de style précédente au fichier du Listing 3 ().
Listing 7 – Fichier XHTML (listeUML_xslcallHelloWorld3.xhtml) généré
(par Xalan) par application de la feuille de style au fichier XML
(suite)
Pour forcer l’indentation du fichier de sortie (et éventuellement changer l’encodage de celui-ci) (ligne 6).
Listing 8
– Fichier XHTML (listeUML_xslcallHelloWorld4.xhtml) généré
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-047.jpg)
(par Xalan) par application de la feuille de style au fichier XML
Voici une feuille de style un peu plus complexe.
<xsl:for−each select="diagramme">
- <xsl:value−of select="name"/>:<xsl:value−of select="description"/>
Listing 9 – Fichier XSLT
Test
Sachant que
contient un code instancié pour chaque nœud résultat de l’expression XPath XPath_expr évaluée dans le contexte courant.
évalue l’expression XPath_expr et convertit son résultat en chaîne de caractères.
1 Quel est le résultat de l’application de cette feuille de style au fichier du Listing 3 ()?
2 La ligne 5 devient . Modifier la suite de la feuille de style afin que celle-ci puisse produire le même fichier XHTML en sortie.
Réponse à 1.
- Diagramme de classes:Modélise les objets du système étudié et leurs relations.
- Diagramme de cas dutilisation:Modélise l’ensemble des actions réalisées par le système étudié d’un utilisateur extérieur au système
- Diagramme de séquence:Modélise des interactions entre éléments du système
- Diagramme d’activité:Modélise une activité
- Diagramme d’états−transitions:Modélise le comportement d’un objet
- Diagramme de communication:Modélise les interactions (messages échangés) entre objets
- Diagramme de composants:Montre l’architecture physique d’une application en terme de modules : fichiers sources, exécutables, librairies,etc.
- Diagramme de déploiement:Montre la configuration physique des différents matériels nécessaires à lexécution du système, ainsi que des artefacts quils supportent.
Listing 10 – Extrait du fichier XHTML (listeUML_xslcall_AfficheListe.xhtml) généré (par
Xalan) par application de la feuille de style au fichier XML
Réponse à 1.
Figure 11: Ouverture du fichier avec Firefox
Réponse à 2.
<xsl:for−each select="diagrammesUML/diagramme">
- <xsl:value−of select="name"/>:<xsl:value−of select="description"/>
Listing 11 – Fichier XSLT ()
Une autre feuille de style pour un résultat équivalent
<xsl:for−each select="diagramme">
<xsl:apply−templates select="."/>
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-057.jpg)
- <xsl:value−of select="name"/>:<xsl:value−of select="description"/>
Listing 12 – Fichier XSLT
Test
1 Écrire une feuille de style équivalente à la précédente en ajoutant une règle pour le pattern "/".
2 Réduiser le fichier à ses trois premiers diagrammes (voir listing 3). Pour chaque règle de votre nouvelle feuille de style, indiquer dans quel(s) contexte(s) la règle est instanciée si la feuille de style est appliquée au fichier XML contenant les trois diagrammes.
Rappel de l’intuition du mécanisme de base de l’exécution
Initialement, un processeur XSLT cherche à appliquer, à la racine du fichier XML à transformer (nœud contexte initial), un template ayant le pattern /.
Pour chaque règle, étant donné un nœud contexte dans le document à transformer, le processeur XSLT sélectionne un ensemble de nœuds N résultant de l’évaluation de l’expression XPath de son pattern. Pour chaque nœud n∈N , le processeur XSLT instancie le corps de la règle, cela l’amenant éventuellement à choisir d’autres règles à appliquer avec le nœud contexte n.
Encore une autre feuille de style pour un résultat équivalent
<xsl:for−each select="diagramme">
<xsl:apply−templates select="."/>
- <xsl:value−of select="name"/>:<xsl:value−of select="description"/>
Listing 13 – Fichier XSLT
Utilisation de l’attribut mode dans l’élément XSLT template.
- <xsl:value−of select="name"/>
- <xsl:value−of select="name"/>:<xsl:value−of select="description"/>
Listing 14 – Extrait d’un fichier XSLT utilisant l’attribut mode dans l’élément template
Liste courte
<xsl:for−each select="diagramme">
<xsl:apply−templates select="." mode="short"/>
Liste avec description
<xsl:for−each select="diagramme">
<xsl:apply−templates select="." mode="long"/>
Liste courte
![](/images/remos_downloads/detail/58/id-5828.5828.pdf-067.jpg)
- Diagramme de classes
- Diagramme de cas dutilisation
- Diagramme de séquence
- Diagramme d’activité
- Diagramme d’états−transitions
- Diagramme de communication
- Diagramme de composants
- Diagramme de déploiement
- Diagramme de structure composite
- Diagramme global d’interaction
- Diagramme de packages
- Diagramme de temps
Liste avec description
Listing 16 – Extrait du fichier XHTML (listeUML_xslcall_AfficheListeMode.xhtml) généré
(par Xalan) par application de la feuille de style au fichier XML
<xsl:for−each select="diagrammesUML/diagramme">
<xsl:apply−templates select="."/>
- <xsl:copy−of select="."/>
- <xsl:value−of select="name"/>:<xsl:value−of select="description"/>
Listing 17 – Fichier XSLT
Diagramme de classes:Modélise les objets du système étudié et leurs relations.
- Diagramme de cas dutilisation:Modélise l’ensemble des actions réalisées par le système étudié d’un utilisateur extérieur au système
- Diagramme de séquence:Modélise des interactions entre éléments du système
- Diagramme d’activité:Modélise une activité
- Diagramme d’états−transitions:Modélise le comportement d’un objet
- Diagramme de communication:Modélise les interactions (messages échangés) entre objets
- Diagramme de composants:Montre l’architecture physique d’une application en terme de modules : fichiers sources, exécutables, librairies,etc.
- Diagramme de déploiement:Montre la configuration physique des différents matériels nécessaires à lexécution du système, ainsi que des artefacts quils supportent.
Listing 18 – Extrait du fichier XHTML (listeUML_xslcall_AfficheListeConflit.xhtml) généré
(par Xalan) par application de la feuille de style au fichier XML
XSLT
On s’arrête là mais XSLT peut aller beaucoup plus loin (variables, etc).
Pour aller plus loin :
[?] Wed Data Management and Distribution de Serge Abiteboul, Ioana Manolescu, Philippe Rigaux, Marie-Christine Rousset, et Pierre Senellart.
[?] Comprendre XSLT (2002) de Philippe Rigaux et Bernd Amann.
[?] XSLT : Mastering XML Transformations (2008) de Doug Tidwell.
Exercice à effectuer en cours Voici un fichier XML ().
Exercice à effectuer en cours (suite)
Test
1 Écrire un fichier XSLT permettant d’écrire sous forme d’un fichier XHTML la liste des noms des magasins contenus dans .
2 Compléter ce fichier en lui permettant d’afficher, en dessous de la liste des magasins, pour chaque magasin la liste des produits vendus dans le magasin (libellé du produit et sa marque entre parenthèses).
Vous pouvez trouver une solution pour cet exercice dans le fichier (téléchargeable sur Plei@d)