Mise en forme et affichage de fichiers XML sur le web avec XSL et XSLT

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

                         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

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 :

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.

 

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

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.

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

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é

(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="."/>

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

• 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)