Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

XML Style Language XSL-T Recommandation 16 Novembre 1999 Sadok Ben Yahia, PhD F

XML Style Language XSL-T Recommandation 16 Novembre 1999 Sadok Ben Yahia, PhD Faculté des Sciences de Tunis Sadok.benyahia@fst.rnu.tn 2 Objectifs Définir un langage de feuilles de style pour XML Transformation de documents Sélection Filtrage Présentation de documents HTML, XHTML RTF, Word, WAP, PS, PDF, ... 3 Notre exemple d ’annuaire <annuaire> <entete> <responsable>Samir</responsable> <dateRevision>20 septembre 2011</dateRevision> </entete> <membre> <prenom>Chiraz</prenom><nom>Cherif</nom> <tel type="fax"> + 216 71 885 890</tel> <tel type="bureau"> + 216 71 560 830</tel> <adresse> <rue>Campus Universitaire, BP 1060</rue> <ville> Tunis</ville> <codePostal>54506</codePostal> <pays>TUNISIE</pays> </adresse> <département href="departements.xml#informatique"/> </membre> </annuaire> 4 Une feuille de style... Cher moteur XSL, quand tu rencontres la racine du document, fait quelque chose… Cher moteur XSL, si tu rencontres l’élément annuaire, fait telle chose… Cher moteur XSL, si tu rencontres l’élément membre, fait telle autre chose… Et ainsi de suite ...  Une feuille de style XSL est une suite de règles (templates). 5 Exemple de structure XSL <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> … <xsl:template match="/"> … </xsl:template> <xsl:template match="annuaire"> … </xsl:template> … </xsl:stylesheet> 6 Structure des règles (template) Chaque règle possède deux parties Un motif (XPath) qui identifie le/les nœud(s) XML du document qui est/sont concerné(s) par la règle et sur le(s) quel(s) il faut appliquer une action Une action qui effectue la transformation et/ou spécifie les caractéristiques de la présentation 7 Structure d ’une règle <xsl:template match="un motif"> [action] </xsl:template> 8 Structure d ’une règle (exemple) <xsl:template match=‘annuaire’> <xsl:apply-templates/> </xsl:template> Cher moteur XSL, quand tu parses un document XML et que tu tombes sur un élément <annuaire> , utilise cette règle Va vers chacun de mes fils ( <entete> et <membre> ) et applique les règles qui les concernent 9 Création d’une feuille de style (1) Créer une règle pour chacun des types de nœuds dans notre document (DTD en fait) <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:apply-templates/> </xsl:template> <xsl:template match="annuaire"> <xsl:apply-templates/> </xsl:template> ... <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:apply-templates/> </xsl:template> <xsl:template match="annuaire"> <xsl:apply-templates/> </xsl:template> ... ... <xsl:template match="departement"> <xsl:apply-templates/> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="."/> </xsl:template> ... <xsl:template match="departement"> <xsl:apply-templates/> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="."/> </xsl:template> 10 Explication <xsl:value-of select > <xsl:value-of select="."/> Renvoie la valeur de la chose qui est sélectionnée. Dans notre cas, la chose est un nœud de type texte donc ce qui est retourné est la valeur d'un nœud texte : le contenu textuel lui-même. 11 Création d’une feuille de style (2) Pour les nœuds/éléments qui ne nous intéressent pas (sans action) ainsi que leur descendance : supprimer l'instruction : <xsl:apply-templates/> supprimer les règles concernant les fils qui ne seront jamais appelées donc pourquoi les garder ? 12 Création d’une feuille de style (3a) Mettre les balises HTML correspondantes autour des contenus concernés Pour obtenir quelque chose qui ressemble à ceci : <HTML> <HEAD>Annuaire</HEAD> <BODY> ... </BODY> </HTML> <HTML> <HEAD>Annuaire</HEAD> <BODY> ... </BODY> </HTML> 13 Création d’une feuille de style (3b) <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Annuaire</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> ... <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Annuaire</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> ... Ajout Ajout 14 HTML: Mise en forme du texte  Gras[Bold] <B>...</B> <STRONG>...</STRONG> Début et fin de zone en gras  Italique[Italic] <I>...</I> <EM>...</EM> Début et fin de zone en italique  Taille de caractère [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone avec cette taille  Couleur de caractère [Font color] <FONT COLOR="#$$$$$$"> </FONT> Début et fin de zone en couleur  A la ligne[Line break] <BR> Aller à la ligne  Commentaires[Comments] Ne pas afficher  Centrage[Center] <CENTER></CENTER> Centrer 15 HTML: Les titres  En-têtes [Heading] <Hn></Hn> avec n=1 à 6 : Afficher une en-tête de niveau n et sauter une ligne  Liste non-ordonnée [Bullet list]<UL></UL> :Afficher le texte sous forme d'une liste non- ordonnée.  <U> ... </U> : Pour souligner le texte.  <S> … </S> : Pour barrer le texte  <TT> ... </TT> : Caractères de machine à écrire.  <CENTER> … </CENTER> : Le texte va être centré.  <SUB> ... </SUB> : Texte en indice.  <SUP> ... </SUP> : Texte en exposant.  <FONT…> ... </FONT> : Agit sur la police, la couleur et la taille des caractères. 16 HTML: Les titres Liste ordonnée[Numbered list]<OL></OL>:Afficher le texte sous forme d'une liste ordonnée. Elément de liste[List items] : <LI>Voici un élément de la liste Paragraphe[Paragraph] <P></P>:Saut de ligne, insérer une ligne vierge et commencer un paragraphe 17 HTML: Les titres (exemple) <H1>Les mois du printemps</H1> <UL><LI>avril <LI>mai <LI>juin</UL> <P> <H3>Les mois d'automne </H3> <OL><LI>octobre <LI>novembre <LI>décembre</OL> 18 HTML: Les images <IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse... La balise image possède de nombreux attributs. Texte alternatif alt="****  Pour les browser n'ayant pas l'option "image" activée Dimensions width=? Height=? Hauteur et largeur (en pixels) Bordure border=? (en pixels) Alignement align=top align=middle align=botton align=left align=right 19 HTML: Les images … L'attribut align positionne l'image par rapport au texte : <IMG SRC="HELP.gif" align=TOP>Fichier d'aide <IMG SRC="HELP.gif" align=CENTER>Fichier d'aide <IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide Image et lien: <A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A> 20 HTML: Les tableaux [Table] <TABLE></TABLE>Début et fin de tableau Définition d'une ligne[Table Row] <TR></TR>Début et fin de ligne Définition d'une cellule[Table Data] <TD></TD>Début et fin de cellule <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 21 HTML: Les tableaux Bordure de cadre [Border] <TABLE border=? ></TABLE> <TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 22 HTML: Les tableaux …  L'espace entre les cellules ou l'épaisseur des lignes du quadrillage <TABLE cellspacing=?>  La largeur de la table <TABLE width=?> <TABLE width=%> <TABLE border=2 cellspacing=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 23 HTML: Les tableaux …  L'enrobage des cellules ou l'espace entre le bord et le contenu <TABLE cellpadding=?> <TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 24 Création d’une feuille de style (4a) Indiquer au moteur XSL : Lorsqu'il rencontrera un élément <membre>, mettre une ligne horizontale <HR> Traiter ses fils Et ceci pour tous les autres éléments <membre> 25 Création d’une feuille de style (4b) ... <xsl:template match="membre"> <HR/> <xsl:apply-templates/> </xsl:template> ... ... <xsl:template match="membre"> <HR/> <xsl:apply-templates/> </xsl:template> ... (a) ... <xsl:template match="membre"> <HR></HR> <xsl:apply-templates/> </xsl:template> ... ... <xsl:template match="membre"> <HR></HR> <xsl:apply-templates/> </xsl:template> ... (b) ... <xsl:template match="membre"> <HR> <xsl:apply-templates/> </HR> </xsl:template> ... ... <xsl:template match="membre"> <HR> <xsl:apply-templates/> </HR> </xsl:template> ... (c) 26 Règles par défaut (1) Toute feuille de style XSL possède deux règles par défaut Elles sont appliquées si le moteur XSL ne trouve pas de règles correspondant pour : / ou * text() 27 Règles par défaut (2) Correspond au document ou à n'importe quel élément. Renvoie le résultat des templates pour les fils <xsl:template match="/|*"> <xsl:apply-templates/> </xsl:template> <xsl:template match="/|*"> <xsl:apply-templates/> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="."/> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="."/> </xsl:template> Correspond à un nœud texte. Renvoie la valeur du nœud, ie. le texte Dans le cas ou plusieurs règles peuvent s'appliquer, la plus spécifique gagne ! 28 Factorisation des motifs Pour éviter les répétitions inutiles de règles, on peut factoriser les motifs sur une seule règle : <xsl:template match="nom | prenom"> <B> <xsl:apply-templates/> </B> </xsl:template> <xsl:template match="nom | prenom"> <B> <xsl:apply-templates/> </B> </xsl:template> Cette règle s'applique à la fois aux éléments <nom> et <prenom> 29 Contrôler le parcours du document (1) Pour l'instant, nous avons vu que XSL parcourt le document dans l'ordre de ses éléments annuaire, entete, responsable, …, membre, prenom, nom, tel, adresse, etc. de la racine vers les feuilles de l'arbre Comment contrôler l'ordre dans lequel les choses peuvent être effectuées ? Exemples : codePostal avant ville nom avant prenom 30 Contrôler le parcours du document (2) <xsl:apply-templates select="motif"> Sans attribut select, l'instruction apply-templates traite les éléments dans l'ordre où ils apparaissent dans le document. L'attribut select permet d'indiquer au moteur XSL de traiter uniquement les éléments qui vont correspondre au motif. On contrôle l'ordre maintenant !... 31 Contrôler le parcours du document - exemple ... <xsl:template match="membre"> <xsl:apply-templates select="nom"/> <xsl:apply-templates select="prenom"/> <xsl:apply-templates select="tel"/> <xsl:apply-templates select="departement"/> <xsl:apply-templates select="adresse"/> </xsl:template> ... ... <xsl:template match="membre"> <xsl:apply-templates select="nom"/> <xsl:apply-templates select="prenom"/> <xsl:apply-templates select="tel"/> <xsl:apply-templates select="departement"/> <xsl:apply-templates select="adresse"/> </xsl:template> ... 32 Les boucles (for-each) Pour chaque élément qui correspond à un motif, fait l'action … Exemple : la liste des membres <xsl:for-each select="motif"> [action] </xsl:for-each> <xsl:for-each select="motif"> [action] </xsl:for-each> 33 Les boucles : exemple ... <xsl:template match="annuaire"> <xsl:apply-templates select="entete"/> <TABLE BORDER="1" WIDTH="100%"> <xsl:for-each select="membre"> <TR> <xsl:apply-templates/> </TR> </xsl:for-each> </TABLE> </xsl:template> ... ... <xsl:template match="annuaire"> <xsl:apply-templates select="entete"/> <TABLE BORDER="1" WIDTH="100%"> <xsl:for-each select="membre"> <TR> <xsl:apply-templates/> </TR> </xsl:for-each> </TABLE> </xsl:template> ... Pour chaque membre, crée une ligne du tableau et traite les fils 34 Le tri avec xsl:sort Le tri est effectué en utilisant des éléments xsl:sort dans les 2 instructions : xsl:apply-templates xsl:for-each Possibilité de définir des clés primaire, secondaire, etc... ... <xsl:template match="annuaire"> <xsl:apply-templates select="membre"> <xsl:sort select="nom" order="ascending"/> </xsl:apply-templates> </xsl:template> ... ... <xsl:template match="annuaire"> <xsl:apply-templates select="membre"> <xsl:sort select="nom" order="ascending"/> </xsl:apply-templates> </xsl:template> ... 35 Le test avec xsl:if ... <xsl:template match="entete">  <xsl:if test="not(dateRevision)"> <text>???</text> </xsl:if> ... </xsl:template> ... ... <xsl:template match="entete">  <xsl:if test="not(dateRevision)"> <text>???</text> </xsl:if> ... </xsl:template> ... <xsl:if test="position()=2">... <xsl:if test="name(.)='nom'">... <xsl:if test="@id">... 36 Choix multiple avec xsl:choose ... uploads/s3/ form-xsl-intro.pdf