Présentation en XSL, méthode avec boucles, puis en multitemplates

Transcription

1 /travaux-dirigés/semaine 3 Présentation en XSL, méthode avec boucles, puis en multitemplates sur 3 séances d'1h30 Dans ce TP, il s'agit d'explorer les possibilités du langage XSL, et de comprendre comment ce fichier est utilisé avec un fichier XML pour produire un affichage particulier sous la forme d'une arborescence HTML. Les ordinateurs de travail sont des Mac sous système OS Les logiciels utilisés sont : oxygen-editor pour travailler sur les fichiers XML (en particulier le débogueur XSLT ), Firefox pour visualiser les fichiers XML transformés en HTML par l'exploitation des feuilles de styles XSL. Concrêtement, il s'agit de définir 2 versions de fichiers de style à associer au même fichier XML pour obtenir le même résultat, le premier grâce à l'utilisation de la balise <xsl:for-each> le second exploitant plusieurs fois la balise <xsl:template> La deuxième méthode oblige à réfléchir différement pour construire le fichier XSL, même si la méthode incrémentale suivie dans ce TP peut laisser imagine qu'on commence toujours par des <xsl:for-each select="..."> déplace dans le code et remplace par des <xsl:template match="..."> et des <xsl:apply-templates select="..."> Ci-dessous sont listées quelques balises xsl utilisée pendant le TD : <xsl:template match="..."> <xsl:for-each select="..."> <xsl:value-of select="..."> <xsl:choose> <xsl:when test="..."> <xsl:otherwise> <xsl:apply-templates select="..."> Peu de choses ont été essayées sur la manipulaiton du XPath (ce qui peut être mis à la place des... dans les balises ci-dessus) : select="." select="position() mod 2 = 0" select="@type" pour se placer sur le noeud courant pour se placer sur les noeuds dont le numéro (parmi ses frères) est pair pour se placer sur la valeur de l'attribut type du noeud courant Un compte-rendu de TP est attendu pour mémoriser le contenu de ces travaux. 1

2 CR-sem 3-XSL-ABourguignon.pdf CR-sem 3-XSL-AHely.pdf CR-sem 3-XSL-BAngebault.pdf CR-sem 3-XSL-ELamourre.pdf CR-sem 3-XSL-FRaulet.pdf CR-sem 3-XSL-JMatray.pdf CR-sem 3-XSL-JRousseaux.pdf CR-sem 3-XSL-TJankowski.pdf CR-sem 3-XSL-TPersyn.pdf CR-sem 3-XSL-TPineau.pdf EnteteTD3-XSL.pdf 2

3 Bourguignon Adrien Licence Professionnelle TP XSL extensible Stylesheet Language 1. Nous avons tout d abord commencé par modifier notre fichier CV.xml, nous lui avons appliqué le chemin vers notre fichier xsl par les commandes suivantes : Document > Document XML > Associer une feuille de style XSLT Il s incère alors automatiquement la ligne suivante : <?xml-stylesheet type="text/xsl" href="xsl_template.xsl"?> Voici l en tête qui en découle: NB : il existe dans oxygene un debugger qui nous permet de voir les erreurs de code en temps réel. 2. On a également incorporé le fichier CV.html dans notre fichier.xsl avec les balises suivantes : <xsl:stylesheet xmlns:xsl=" version="1.0"> Cette balise pour que l html puisse être pris en compte : <xsl:output method="html"/> Et celle ci pour que l html soit dans une boucle : <xsl:template match="cv">fichiers CV.html CV.html </xsl:template> </xsl:stylesheet> 3. Puis nous avons vu comment faire appel à des choses que nous souhaitions voir apparaître dans notre présentation html, grâce à la balise XML : <xsl:value-of select=" "/>

4 On a avec cette méthode afficher notre nom et adresse sur notre fichier : Nb : Il faut à l intérieur de cette balise spécifié le chemin correspondant à notre fichiers XML. 4. Puis nous nous sommes rendu compte que dans le cas de notre CV, qui principalement composé de tableau, nous pourrions réalisé l habillage en utilisant un seul code qui pourrait se répéter pour chaque nœud de notre fichier XML. Par exemple écrire un seul code xsl, pour écrire les quatre formations que j avais rentrées dans mon CV. Pour se faire, nous avons vue deux méthodes, la première avec des boucles et la seconde avec des templates. 4.1 Boucles Pour faire une boucle, il s agite de placer le code que l on veut répéter entre la balise for-each : <xsl:for-each select="formation/diplome"> code </xsl:for-each> Puis pour nous nous sommes rendu compte que nos tableaux étaient devenu monochrome nous avons alors vue comment créer des conditions dans notre code html, grâce à des balises qui ont une logique proche de ce que nous pouvons rencontrer avec Python. Tout d abord indiquer un choix : <xsl :choose> à </xsl:choose> Puis un «si» : <xsl:when> à </xsl:when> Et «alors» : <xsl:otherwise> à </xsl:otherwise> Nous avons alors pu afficher les formations que nous avions fait avec un tableau à deux teintes de gris:

5 Et grâce au code suivant :

6 4.2 Template : Pour cette méthode, il nous a fallu changer l entête du fichiers xml pour qu il puisse avoir le chemin du fichier CV_xsl_template : Dans cette methode, il s agit de remplacer les balises «for-each» par la balise suivante : <xsl:apply-templates select="formation/diplome"/> Qui fait référence à un code placer en-dehors de la page proprement dite, dans ce cas le code correspondant à formation/diplôme se trouve dans la balise : <xsl:template match="formation/diplome"> code </xsl:template> Exemple dans cet extrait, où le code pour les diplômes est remplacé dans le code html par la simple balise «apply-template» : NB : Le template est bien entendu autant de fois qu il est nécessaire c est pourquoi le résultat final n est pas différent.

7 On peut alors afficher notre code de manière plus lisible comme cidessous ; avec cette vue, on a l impression de faire appel à des fiche de style externe car on ne voit pas les appels symbolisés par la balise apply template.

8 HELY Adrien Licence Professionnelle 23 novembre 2009 XML Compte-Rendu de T.P. 3 Feuille de style XSL Le XSL va permettre de générer l'affichage du document XML. Grâce à ce langage, notre document XML va être exploité pour générer une page en HTML. Objectifs du TP Créer une feuille de style XSL Utiliser le XSL pour générer du HTML Avoir 2 approches différentes pour créer l'arborescence HTML Logiciels utilisés Plan I - Création XSL Introduction <oxygen/> et XSL Générer du HTML 2 - Syntaxe XSL XSL, avant tout du XML Appel du contenu XML Eléments multiples et répétés <oxygen/> Editor (version Mac OS X) Safari Firefox 1

9 I - Création XSL 4Introduction Nous avions, dans un précédent TP, abordé l'affichage du XML. Nous avions vu que le XML permettait de séparer le contenu, c'est à dire la structure et l'information, de l'affichage. Nous avions utilisé un langage spécialisé, le CSS, très largement répandu pour afficher des sites internet. Dès lors que le XML était lié à une feuille de style CSS, on pouvait définir des règles d'affichage pour les navigateurs internet. Toutefois l'affichage grâce au css n'était pas très adapté dans la mesure où il nous était impossible d'intervenir sur la structure même du XML. Nous étions contraint à respecter l'ordre et la logique du XML. Grâce au XSL (pour extensible Stylesheet Language), le XML va subir une réelle transformation basé sur des règles de gabarits. Chaque régle de gabarit va s'appliquer à un noeud ou élément de notre XML et l'on va donc pouvoir restructurer complètement l'arbre XML d'origine. Le XSL va pouvoir transformer le XML en Postscript, RTF, HTML ou bien dautres formats. Pour afficher notre CV, nous allons nous appuyer sur le html créé lors du cours HTML et CSS. 4<oXygen/> et XSL Le logiciel <Oxygen/> va être utilisé pour créer notre feuille de style XSL. Fichier > Nouveau > xsl stylesheet 1,0 On enregistre le document sous le nom " xslcv.xsl" Il faut désormais lier notre fichier xml à cette feuille de style. On ouvre donc le fichier cv.xml bien formé et on passe en commentaire (pour la rendre inactive) la déclaration de la feuille de style CSS: On remplace <?xml-stylesheet type= "text/css" href="style.css"?> par : <!--?xml-stylesheet type= "text/css" href="style.css"? --> La ligne <?xml-stylesheet type="text/xsl" href="xslcv.xsl"?> s'insère automatiquement dans le prologue de notre xml Une fonction pratique du logiciel est le "bebugger XSLT", cet outil va nous permettre de visionner la transformation de notre xml en temps réel et, le cas échéant, détecter où il y a des erreurs. 4Génerer du HTML Dans le fichier xsl, entre les balises <xsl:stylesheet xmlns:xsl=" version="1.0"> et </xsl:stylesheet> on colle l intégralité du contenu de la page html cv.html Attention : pour que l interpréteur prenne en compte le html, on va insérer avant le html l élément vide : <xsl:output method="html"/> puis on va mettre le code html précédemment collé entre les balises <xsl:template match="cv"> et </xsl:template>` On clique alors sur Document > Document XML > Associer une feuille de style XSLT On sélectione alors le chemin et le nom de ne notre feuille de style. 2

10 2 - Syntaxe XSL 4XSL, avant tout du XML Nous venons d'en avoir un avant-goût le xsl, à l'instar du xsd, est avant tout du xml. Il est en effet écrit en XML et interprété grâce à des balises reconnus par un espace de nom. <xsl:stylesheet xmlns:xsl=" Transform" version="1.0"> C'est l'attribut xmlns et son url comme valeur qui nous indique l'espace de nom. 4Appel du contenu XML Pour que le HTML qui va être généré intègre les informations de notre document XML, on va les appelé via la ligne : <xsl:value-of select="chemin_de_l élément_à_afficher"/> Exemple : On veut remplacer le nom Fleur Lambrouille inscrit dans le html par notre nom inscrit dans le document xml. On va donc remplacer la ligne : <P align="left">fleur Lambrouille</P> Par : <P align="left"> <xsl:value-of select="identite/etatcivil/prenom"/> <xsl:value-of select="identite/etatcivil/nom"/> </P> Si on veut appeler toutes les données du xml on obtient : <table CELLSPACING="0" CELLPADDING="5" WIDTH="100%"> <tr> <td width="170"> <P align="left"> <xsl:value-of select="identite/etatcivil/prenom"/> <xsl:value-of select="identite/etatcivil/nom"/><br/> <xsl:value-of select="identite/contact/adresse/rue"/><br/> <xsl:value-of select="identite/contact/adresse/codepostal"/> <xsl:value-of select="identite/contact/adresse/ville"/><br/> <xsl:value-of select="identite/contact/teleph"/><br/> <xsl:value-of select="identite/contact/adelect"/> </P> </td> </tr> </table> Remarque : On peut appeler également la valeur d un attribut d un élément xml : si en xml on a : <poste type="stage"> On pourra appeler la valeur de l attribut dans le xsl avec : <xsl:value-of select="@type"/> 4Eléments multiples et répétés Pour chaque nœud «diplôme» on veut afficher un même style de ligne, on cherche donc un moyen de répéter automatiquement l affichage de cette ligne autant de fois qu il y a de diplômes. Nous avons vu deux méthodes, qui offrent le même résultat mais qui reposent sur deux logiques complètement différentes. 41ère méthode : Les boucles : A l'endroit souhaité nous allons créer une boucle à l'aide des balises : <xsl:for-each select="formation/diplome"> </xsl:for-each> puis dans cette boucle nous allons définir les éléments à afficher (anneeobt, intitule, etablissement ) nous obtenons le code suivant : <xsl:for-each select="formation/diplome"> <tr bgcolor="#bbbbbb"> <td> <P align="center"><xsl:value-of select="anneeobt"/></p> </td> <td valign="top"> <P align="left"><xsl:value-of select="intitule"/></p> </td> <td width="200" valign="top"> <P align="left" font-size="xx-small"><xsl:value-of select="etablissement/nom"/></p> </td> <td width="35" valign="top"> <P align="center"><xsl:value-of select="mention"/></p> </td> </tr> </xsl:for-each> Résultat : 3

11 Il faudra donc définir dans le fichier xsl, un autre template que «cv» que l on appelera «fomation/diplôme» Notre document xsl ressemble alors à : Si nous ajoutons ou supprimons un diplôme dans le fichier xml, ce diplôme apparaitra ou disparaitra automatiquement dans le html généré par le xsl. Création d une condition sur la boucle : Initialement, le html permettait d afficher une ligne sur deux avec une couleur différente. La boucle telle que nous l avons créée répète rigoureusement la même ligne (avec la même couleur de fond). Pour afficher une ligne sur deux avec une couleur différente, nous allons définir une condition avec un modulo : <xsl:for-each select="formation/diplome"> <xsl:choose> <xsl:when test="position() mod 2 = 0"> <tr bgcolor="#bbbbbb"> <!-- contenu Ligne n 1 -- > </tr> </xsl:when> <xsl:otherwise> <tr bgcolor="#dddddd"> <!-- contenu Ligne n 2 -- > </tr> </xsl:otherwise> </xsl:choose> </xsl:for-each> Résultat : 42nde méthode : Multi-templates: On duplique le fichier xml, on le modifie pour appeler le nouveau xsl «xslcv_template.xsl» que l on va créer en modifiant le xsl précédent. <?xml-stylesheet type="text/xsl" href="xslcv_template.xsl"?> Dans le xsl on va remplacer les boucles appelées par <xsl:for-each select=" "> par un l appel d un template à part entière : <xsl:apply-templates select="formation/diplome"/> <xsl:stylesheet xmlns:xsl=" version="1.0"> <xsl:output method="html"/> <xsl:template match="cv">... <xsl:apply-templates select="formation/diplome"/>... </xsl:template> <xsl:template match="formation/diplome">... </xsl:template> </xsl:stylesheet> Le template «formation/diplôme» est appelé dans le template «cv» et s affichera autant de fois qu il y a de nœuds diplomes. Dans le template «formation/diplôme» l on gardera tout le contenu préalablement écrit dans le <xsl:for-each» : <xsl:template match="formation/diplome"> <xsl:choose> <xsl:when test="position() mod 2 = 0"> <tr bgcolor="#bbbbbb"> <td> <P align="center"> <xsl:value-of select="anneeobt"/> </P> </td> <td valign="top"> <P align="left"> <xsl:value-of select="intitule"/> </P> </td> <td width="200" valign="top"> <P align="left" font-size="xx-small"> <xsl:value-of select="etablissement/ nom"/> </P> </td> <td width="35" valign="top"> <P align="center"> <xsl:value-of select="mention"/> </P> </td> </tr> 4

12 </xsl:when> <xsl:otherwise> <tr bgcolor="#dddddd"> <td> <P align="center"> <xsl:value-of select="anneeobt"/> </P> </td> <td valign="top"> <P align="left"> <xsl:value-of select="intitule"/> </P> </td> <td width="200" valign="top"> <P align="left" font-size="xxsmall"> <xsl:value-of select="etablissement/ nom"/></p> </td> <td width="35" valign="top"> <P align="center"> <xsl:value-of select="mention"/> </P> </td> </tr> </xsl:otherwise> </xsl:choose> </xsl:template> 5

13 Angebault Baptiste le 30/11/2009 Licence professionnelle flux numérique Compte rendu du TP3 (XML/XSL)!: le CV Xml et xsl? XML est un langage de structuration des données, et non de représentation des données. Ainsi XSL (extensible StyleSheet Language) est un langage pour effectuer la représentation des données de documents XML. XSL est lui-même défini avec le formalisme XML, cela signifie qu'une feuille de style XSL est un document XML bien formé. XSL est un langage permettant de définir des feuilles de style pour les documents XML. Un document XSL étant un document XML, il commence obligatoirement par la balise suivante : <?xml version="1.0" encoding="iso "?> D'autre part, toute feuille de style XSL est comprise entre les balises <xsl:stylesheet...> et </xsl:stylesheet>. La balise «xsl:stylesheet» encapsule des balises «xsl:template» définissant les transformations à faire subir à certains éléments du document XML. Manipulations réalisées dans le logiciel Oxygène au cours du Tp: - Ouvrir le fichier «cv.xml» - Ouvrir le fichier «cv.html» corriger - Crréer un nouveau document «xsl-cv.xsl» - Copier le contenu du fichier «cv.html corriger», dans le fichier «xsl-cv.xsl» - Les template sont des balises XSL qui permettent de définir des opérations à réaliser sur certains éléments du document XML, en utilisant la page XSL. Le navigateur reçoit les informations du fichier «cv.xml», et celui-ci sait qu il doit aller chercher certaines informations qui sont indiquées dans le fichier sont contenant dans le fichier «xsl-cv.xsl» - L'attribut "match" de la balise <xsl:template> permet de définir le ou les éléments du document XML sur lesquels s'applique la transformation.

14 - Ensuite, dans le document xsl, on remplace par exemple le prénom «Fleur» par la ligne : < xsl :value-of selecte =«identite/etatcivil/prenom/> correspondant au prénom «Baptiste». Cet éléments : < xsl :value-of selecte =«identite/etatcivil/prenom/> permet de remplacer le prénom «Fleur» par la valeur de la balise prenom («Baptiste»). Par la suite nous avons procédé à ces opérations pour divers autres éléments. - Par la suite, on a réalisé une présentation qui sert à répéter les informations concernant les diplômes, sans devoir tout recommencer pour chaque information. Cette opération réalise une boucle. Pour cela nous avons utilisé la balise «for each»

15 Dans la feuille de style xsl, l élément value-of prend pour valeur d attribut «anneobt», «niveau», et «select» a chaque fois qu il y a formation/diplôme dans le doc xml. Le contenu de cet attribut se trouve dans le document xml. On copie alors le «modulo» sous la nouvelle balise <xsl :for-each select = «formation/diplôme»> <xsl :choose> <xsl :when test = «position() mod 2 = 0»> #bbbbbbb modulo </xsl :when> <xsl :otherwise> #ddddddd modulo </xsl :otherwise> </xsl :choose> Ceci indique que si le nombre de fois du modulo est impaire alors le texte sera de la couleur : #bbbbbbb. Sinon, si ce nombre de fois est paire alors, le texte sera de la couleur : #ddddddd. Le faite modulo sera recopié autant de fois que l opération doit être réalisée. Par la suite nous avons réaliser les mêmes opérations pour «experience professionnelle»

16 On remarque que l on à utilisé «@type», pour réaliser la transformation pour indiquer un attribut caractéristique. Voilà la page web :

17 Par la suite : - On a copié les fichiers xml et xsl pour les modifier. Les nouveaux fichiers sont renommés : «cv.xml» et «xsl-cv.xsl». le fichier xsl s applique toujours à l arbre du fichier xml. On met en lien le nouveau xsl avec le nouveau fichier xml. - On a remplacé les balises <for each> par les balises «template». Les balises <template match> sont utilisée pour indiquer ou se situe - On utilise les balises <apply-template> pour indiquer que des informations sont à récupérer plus loin. La balise < template match> situé en dehors de la l arbre html, indique que le contenue de cette balise fait référence à la balise <apply-template> portant le même nom. Dans cette balise se trouve le contenue désiré. On effectue cette opération plusieurs fois dans la page, afin de remplacer toutes les balises <for each> qui sont très peut utilisées dans le langage xml.

18 - Dans un deuxième temps on va remplacer, certaines balises «value-of select» par des balises template???? voir la suite avec thomas

19 Lamourre Étienne Séance du 30 novembre 2009 Compte rendu T.P 3 : XSL Le but de cette séance de T.P était la découverte du format de fichier XSL. XSL est défini avec le format XML, cela signifie qu une feuille de style XSL est un document XML bien formé. XSL est un langage permettant de définir des feuilles de style pour les documents XML (comme le CSS et pour le langage HTML). Toutefois, contrairement aux CSS, XSL permet aussi de retraiter un document XML afin d en modifier totalement sa structure, ce qui permet à partir d un document XML d être capable de générer d autres types de documents (PostScript, HTML, PDF,...) ou bien un fichier XML de structure différente. Ainsi la structuration des données (définie par XML) et leur représentation (définie par un langage tel que XSL) sont séparées. Cela signifie qu il est possible à partir d un document XML de créer des documents utilisant différentes représentations (HTML pour créer des pages web, PDF,...). I-Création du fichier XSL Comme lors de la séance précédente, pour cette séance de TP nous avons uniquement utilisé le logiciel oxygen et Firefox pour la visualisation de nos travaux. Nous avons alors commencé par ouvrir notre fichier XML de CV, son css ainsi que le fichier HTML du CV de fleur lambrouille. Nous créons alors notre document XSL et nous l associons à notre CV.xml. Cela à pour effet d ajouter une ligne dans le fichier XML précisant le chemin d accès du fichier XSL. Afin de ne pas créer de conflit entraînant des bugs, nous avons placé en commentaire la ligne décrivant le chemin d accès du css déjà présente dans le XML. Un document XSL étant un document XML, il commence obligatoirement par la balise suivante : <?xml version= 1.0 encoding= ISO ?> document XSL a sa création Ensuite, dans le XSL, on ajoute le contenu du fichier HTML (rendu au TP précédent bien formé et valide). On le place entre les balises : <xsl:stylesheet xmlns:xsl=» version=»1.0»> et </xsl:stylesheet> On ajoute deux balise indispensable pour l utilisation d un template : <xsl:output method= html /> <xsl:template match= cv > avec sa balise de fin. Module 2 xsl

20 II- Dépersonnalisation du XSL Afin de pouvoir appliquer ce fichier XSL à n importe quel document XML, il est nécessaire de remplacer les information personnelles en provenance du CV. On utilise alors la balise : <xsl:value-of select= chemin/nom_balise /> Cette balise indique ainsi au document qu il doit prendre le contenu s appelant «nom_balise» se situant dans le XML auquel il est rattaché. avant les modifications avec les modifications aperçu des modifications avec Firefox Module 2 xsl

21 III-Création de boucles Il arrive que la structure du document XML comporte un nombre indéterminé de fois un même élément, c est pourquoi il est possible de créer des boucles. Dans notre cas, nous allons créer des boucles pour avoir un remplissage automatique des diplômes et expériences professionnelles. On utilise alors la balise for-each et on lui spécifie un rayon d action (dans l exemple : formation/diplome). Chaque ligne du tableau sera alors composée de la même façon et automatiquement. balises de mise en forme résultat Seulement, cette modification nous a fait perdre un élément du CV : l alternance des deux gris. Afin de récupérer cet élément, nous utilisons les balises choose et when : Grâce à cette balise, nous indiquons que le fond du tableau devra être alternativement de la couleur #bbbbbb sinon #dddddd. Module 2 xsl

22 IV-Création d un document avec plusieurs templates Afin de réaliser cette manipulation, nous utilisons un nouveau document XSL. Ceci implique de modifier le fichier XML, et en particulier la ligne indiquant le fichier XSL utilisé. On associe alors notre nouveau fichier XSL avec le XML (Document / Document XML / Associer une feuille de style XSLT / CSS). Afin de structurer le document, nous allons créer un template pour chaque noeud de l arbre. On déplace la boucle concernant diplôme sous la balise template déjà présente dans le document. On la remplace par une balise permettant de faire le lien avec la partie que l on a déplacé plus bas. Dans la partie déplacée, on a remplace les balise for-each par template et select par match. Module 2 xsl

23 XML - Compte Rendu 4 Introduction XSL (extensible Stylesheet Language) est le langage de description de feuilles de style du W3C associé à XML. Une feuille de style XSL est un fichier qui décrit comment doivent être présentés (c est-à-dire affichés, imprimés, épelés) les documents XML basés sur une même DTD ou un même schéma. La spécification est divisée en trois parties : XSLT, le langage de transformation XPath, le langage de navigation dans un document XML XSL-FO, le vocabulaire XML de mise en forme Nous nous intéresserons davantage au XSLT. Objectif : Utilisation du XSl pour mettre en page un cv au format HTML. Etape concernant l association d un fichier XSL à un fichier XML. I - Première méthode 1. Création du fichier XSL: Création d un nouveau fichier en selectionnant XSL Stylesheet comme indiqué ci dessous:

24 Nous allons travailler avec le version 1.0 Notre feuille XST est donc créée. 2. Association de XSL à XML Il faut associer le fichier xsl (xslcv.xsl) au fichier xml cv_xsl1.xml. Pour cela il faut sélectionner Associer une feuille de style XSLT/CSS (Document -> Document XML)

25 Ce qui nous donne cette ligne de code supplémentaire dans le fichier xml Toutefois comme on peut pas utiliser la feuille de style css et xsl, on met en commentaire la ligne qui associe le css à page comme ceci: Cette ligne de code sera ainsi pris comme un commentaire et ne sera plus pris en compte lors de son exécution. A partir de là il ne faut plus modifier le fichier xml. 3 - Contenu XSL. Une fois l association réalisé, nous allons insérer le contenu d un cv au format HTML dans XSL, entre les bornes <xsl:stylesheet> et </xsl: stylesheet>. En rafraichissant la page de firefox on a un message d erreur (image6) c est normal il manque une instruction. Mais pour que l interpréteur prenne bien en compte le code HTML, il est nécessaire d ajouter les lignes suivantes avant la balise <html> et mettre </xsl:template> après la balise </htlm> On vérifie ensuite si le document est toujours bien formé. 4 - Transformation du code XSL. Pour le moment notre fichier XML puise les données qu il doit afficher dans le contenu du fichier HTML. Du coup il ne prends pas en compte ses propres balises. Pour empêcher qu il prenne les valeurs des balises du fichiers xml et non plus du html.

26 Exemple: modification de fleur par le prenom du fichier xml. On remplace fleur par la ligne de code suivante: <xsl:value-of select="identite/etatcivil/prenom" />

27 Ce qui nous donne: Il faut procéder de la même manière pur toutes les balises du fichier xml. On remarque qu il n y a pas d espace entre le prénom et le nom

28 Pour incorporer un espace il faut rajouter &nbsp au code de la manière suivante: <xsl:value-of select="identite/etatcivil/prenom" /> <xsl:value-of select="identite/etatcivil/nom" /> 5 - Les boucles: L un des intérêt à opter pour les boucles, se situe au niveau des différentes variables qui se répètent un nombre x. Nous avons dans notre cv des données qui se répètent. Par exemple les formations ou encore les diplômes. Pour éviter comme avec le HTML a devoir tout taper nous allons utiliser une variable qui transformera chaque suite par les données contenu dans le fichier XML. Nous allons créer une boucle pour les formations. Il faudra rajouter les lignes de codes en gras dans le fichier HTMl comme ceci: <h2>formation</h2> <center> <table border="1" cellpadding="2" cellspacing="0" width="95%"> <tbody> <tr bgcolor="#808080"> <th width="70"> <p align="center">année</p> </th> <th> <p align="center">diplome</p> </th> <th width="200"> <p align="center">etablissement</p> </th> <th width="35"> <p align="center"> </p> </th> </tr> <xsl:for-each select="formation/diplome"> <tr bgcolor="#bbbbbb"> <td><xsl:value-of select="anneeobt"/></td> <td><xsl:value-of select="intitule"/></td> <td><xsl:value-of select="etablissement/nom"/></td> </tr> </xsl:for-each>

29 On remarque par contre que contrairement au code HTML précédent nous n avons plus aucune nuance entre les tables. Pour corriger ce problème il faut ajouter les lignes en gras au programme comme ceci: <xsl:for-each select="formation/diplome"> <xsl:choose> <xsl:when test="position () mod 2=0"> <tr bgcolor="#bbbbbb"> <td><xsl:value-of select="anneeobt"/></td> <td><xsl:value-of select="intitule"/></td> <td><xsl:value-of select="etablissement/nom"/></td> </tr> </xsl:when> <xsl:otherwise> <tr bgcolor="#dddddd"> <td><xsl:value-of select="anneeobt"/></td> <td><xsl:value-of select="intitule"/></td> <td><xsl:value-of select="etablissement/nom"/></td> </tr> </xsl:otherwise> </xsl:choose> </xsl:for-each> Nous allons procéder de la même manière pour les expériences professionnelles: Code avant transformation:

30 Code après transformation: Après ces multiples transformations voici le résultat final du cv:

31 II - Deuxième méthode Nous avons dans un premier temps dupliquer notre fichier xsl précédent pour travailler dessus sans écraser l ancien. Nous avons ensuite déplacer tout le contenu entre les balises <xsl:for-each> </xsl:for-each> après la balise </xsl:template> comme ci dessous: Après quoi nous avons utilisé la balise «apply-templates». Elle permet lorsqu elle est placée au sein de la balise <xsl:template/> d appliquer la règle de transformation qui est dans la balise template. Une fois le contenue entre les balises <xsl:for-each> </xsl:for-each> déplacé, on peut placer la balise apply-templates de la manière suivante:

32 Comme avec la première méthode on peut toujours utiliser le système de boucle de la manière suivante:

33 MATRAY Jérémy Oxygen Compte rendu Ce TD consiste à associer un fichier XML avec un fichier XSL Dans Oxygen, on ouvre notre CV.xml et on l enregistre en CV-xsl1.xml. On crée également un nouveau fichier xsl que l on nomme xslcv.xsl On retourne sur notre fichier CV-xsl1.xml et on lui associe la feuille de style xslcv.xsl que l on vien de créer (assoxmlxsl). Dans cette feuille de style, on copie toute la partie de CV-xsl1.xml et on la colle dans le fichier xslcv.xsl. On modifie la ligne qui appel le fichier style.css afin que celle ci devienne une information. <!--?xml-stylesheet type="text/css" href="style-t.css"?--> Ensuite on ouvre notre fichier.html et on copie l intégralité de celui ci afin de le coller dans le fichier xslcv.xsl 1 Licence professionnel flux numérique

34 On effectue des modifications sur notre fichier.xsl afin de remplacer toute les lignes de renseignement sur les formations suivit ainsi que les expériences professionnels par un ensemble de ligne de code qui vont appeler les différentes formations. 2em séance : On recrée 2 autres fichiers : CV-xsl-template.xsl et CV-xsl2-template.xml Ces 2 fichiers reprennes les lignes de code des fichiers précédent sauf que l on modifie une partie du code du fichier xsl. On modifie la partie for-each par <xsl:apply-templates select="formation/diplome" /> et l on colle la partie <xsl:template... </xsl:template> a la fin du fichier. Cela permet entre autre d avoir une meilleure visibilité au niveau de la programmation qui facilitera une éventuelle modification du fichier. 2

35 XSL : extensible Stylesheet Lanquage Introduction : XSL (extensible Stylesheet Lanquage) est le langage de description de feuilles de style du W3C associé à XML Une feuille de style XSL est un fichier qui décrit comment doivent être présentés (c'est-à-dire affichés, imprimés ) les documents XML basés sur un même DTD ou un même schéma. La spécification est divisée en trois parties : XSLT, le langage de transformation, XPath, le langage de navigation dans un document XML, XSL-FO, le vocabulaire XML de mise en forme. I. Création d'une feuille de style XSL correcte : 1) Association du fichier XML et XSL à partir du document XML : Afin de pouvoir réaliser l'association entre le fichier XML de base et la nouvelle feuille de style XSL créée il est nécessaire de respecter un certain nombres de manipulation que voici : - Il faut tout d'abord créer notre fichierxsl du type : xslcv.xsl - On remplace ensuite dans notre fichier XML la ligne en tête du fichier suivante : <?xml-stylesheet type="text/css" href="style.css"? >, en lui ajoutant les caractères inscrit ici en rouge : <!--?xml-stylesheet type="text/css" href="style.css"? --> - L' association du fichier xml avec le fichier xsl donc alors être réalisé. Une fois l'association (décrite grâce aux impressions écran ci-dessous) génèrée, une extension sur votre fichier s'affiche alors du type : <?xml-stylesheet type="text/xsl" href="xslcv.xsl"?>

36 Une fois votre association réalisé il suffit de copier le contenue de votre fichier HTML (que vous aurez préalablement ouvert dans Oxigen XML Editor) du CV, puis de le coller dans le document XSL. 2) Prise en compte du fichier HTML par l'interpréteur : Afin que l'interpréteur prenne en compte le fichier HTML, il est nécessaire d'incorporer au fichier les lignes suivantes : <xsl:output method= «html»/> <xsl:template match= «cv»> 3) Changement du HTML en données de type XML : Il faut maintenant changer le contenu HTML du XSL par les données du CV de type XML, afin d'appeller les donnés du XML dans le XSL pour chaque registre désirant être modifier rentrer ce type de ligne de code : <xsl:value-of select="chemin de l'élément à afficher"/>

37 Ici l'on appelle les donnés de l'arbre XML se référençant au «nom». 4) Création d'une boucle : Afin de créer une boucle il suffit de changer le noeud, c'est à dire que le chemin sera automatiquement redirigé ver le nouveau noeud indiquer : <xsl:for-each select="formation/diplome"> Ici tout les chemin partiront automatiquement de formation/diplome. Afin d'appler les nouvelles donner dans le tableau taper alors le type de ligne suivante: <tr color="#bbbbbb"> <td><xsl:value-of select="anneeobt" /></td> <td><xsl:value-of select="niveau" /></td> <td><xsl:value-of select="intitule" /></td> <td><xsl:value-of select="etablissement/nom" /></td> </tr>

38 Visuelle du document XML un fois les nouvelles données appelées. 5) Création d'une condition sur la boucle : Initialement le document HTML génère une couleur différente pour chaque ligne du tableau, ici nous voulons reproduire la même chose mais avec un système de condition sur la boucle qui génère automatiquement un ligne d'une couleur et une ligne dans le tableau d'une autre couleur. Ci-dessous le type de codage à introduire dans le fichier XSL pour que la condition soit introduite au bouclage :

39 Résultat obtenu sur le tableau une fois la condition appliquée au bouclage. III. Deuxième méthode d'écriture du XSL : 1) Modification des fichiers de bases : Dupliquer votre fichier XSL déjà existant puis renommer le, ici nous avons xslcv.xsl qui sera renommer en xslcv2.xsl. Dans votre fichier XML il faut modifier également la référence du fichier d'association auquel il se rapporte: <?xml-stylesheet type="text/xsl" href="xslcv2.xsl"?> 2) Déplacement des contenue : Déplacer tout le contenu entre les balises <xsl:for-each> </xsl:for-each> après la balise fermante </xsl:template>.

40 3) Mise en place de la balise «apply-templates» L'élément apply-templates utilisé au sein de la balise : <xsl:template/> permet d'appliquer la règle de transformation contenu dans la balise template. Une fois le contenue entre les balises <xsl:for-each> </xsl:for-each> déplacé, à l'endroit du maintenant vide du codage placer la balise apply-template: <xsl:apply-templates select="formation:diplome"/> 4) Application du bouclage : Afin de réaliser le bouclage placer en dessous de la balise fermante </for-each> que vous avez déplacés précédemment le codage qui suit avec les chemins liant le ficher XML au fichier XSL :

41 5) Résultat sur le codage : - Fichier de départ :

42

43 - Fichier après modification :

44 Nous pouvons remarquer que grâce aux deux méthodes le résultat est identique malgré un système de codage différent.

45 Thomas Jankowski Licence Pro Flux numériques Compte rendu sur le langage XSL Objectif de la séance : - Découvrir le langage XSL - Découvrir de nouvelles balises - Savoir les placer au bon endroit Introduction : XSL (extensible Stylesheet Language) est le langage de description de feuilles de style du W3C associé à XML. Une feuille de style XSL est un fichier qui décrit comment doivent être présentés (c'est-àdire affichés, imprimés, épelés) les documents XML basés sur une même DTD ou un même schéma. La spécification est divisée en trois parties : XSLT, le langage de transformation. XPath, le langage de navigation dans un document XML. XSL-FO, le vocabulaire XML de mise en forme. TP : Le but de cette première partie de TP est d associer le fichier XML de base à une feuille de style XSL. Nous avons commencé par créer un fichier XSL en le renomment : xslcv.xsl. Ensuite, dans notre fichier XML nous avons remplacé la ligne : <?xml-stylesheet type="text/css" href="style.css"?> ; par cette ligne : <!--?xml-stylesheet type="text/css" href="style.css"?--> Nous avons donc associé le fichier XML et le fichier XSL. Une fois que les 2 fichiers ont été associés, une extension s affiche : <?xml-stylesheet type=»text/xsl» href=»xslcv.xsl»?>

46 Thomas Jankowski Licence Pro Flux numériques Une fois que nous avons réalisé cette association, nous avons copié le contenu de notre fichier HTML du CV puis, nous l avons collé dans le document XSL.

47 Thomas Jankowski Licence Pro Flux numériques Ensuite, nous avons incorporé ces 2 lignes pour que l interpréteur prenne en compte le fichier HTML : <xsl :output method= «html»/> <xsl :Template match= «cv»> Ensuite, nous avons remplacé le contenu HTML du XSL par nos données du CV XML afin d appliquer les données du XML dans le fichier XSL pour chaque partie désirant être modifié. Il faut rajouter cette ligne de code : <xsl :value-of select= «mettre le chemin de l élément à afficher»/>

48 Thomas Jankowski Licence Pro Flux numériques Nous avons ensuite créé une boucle grâce à la fonction for-each. Pour avoir les nouvelles données dans le tableau, il faut rajouter des lignes avec value-of select. Maintenant, nous voulons que chaque ligne des formations/diplômes soit d une couleur différente. Il faut écrire ces lignes dans le fichier XSL :

49 Thomas Jankowski Licence Pro Flux numériques Nous avons vu une autre méthode pour créer un fichier XSL valide. Nous avons commencé par dupliquer notre fichier XSL déjà existant puis, nous l avons renommé en xslcv2.xsl. Dans le fichier XML, nous avons modifié la référence du fichier qui est associé. <?xml-stylesheet type="text/xsl" href="xslcv2.xsl"?> Ensuite, nous avons déplacé tout le contenu entre les balises <xsl :for-each> </xsl :for-each> après la balise fermante </xsl :Template> Nous avons utilisé la balise apply-templates qui permet d appliquer la transformation contenu dans la balise template. Enfin, nous avons utilisé template match.

50 Théry PERSYN XML Compte Rendu 3 Objectif : Réaliser un CV en utilisant le language de programmation XML sous Oxygen. Après avoir défini un fichier DTD qui nous fournit le shchéma détaillé du XML, nous allons créer un fichier XSL stylesheet v.1.0 Définition : XSL (extensible Stylesheet Language) est le langage de description de feuilles de style du W3C associé à XML. Une feuille de style XSL est un fichier qui décrit comment doivent être présentés (c est-àdire affichés, imprimés, épelés) les documents XML basés sur une même DTD ou un même schéma. On associe ainsi notre fichier XML à notre XSL : -1-

51 Notre fichier XSL sera complété par notre fichier HTML que nous avions créé auparavant pour notre CV. Pour cela il nous suffit de copier entièrement le contenu du fichier HTML et de le coller entre les balises <xsl:stylesheet>. XSL:for-each : On modifie le style de notre XML à travers notre fichier XSL, on utilise alors la fonction foreach. <xsl:for-each select= formation/diplome > <tr bgcolor= #bbbbbb > <td><p align= center ><xsl:value-of select= anneeobt /></p> </td> <td valign= top > <p align= left ><xsl:value-of select= intitule /></p> </td> <td valign= top > <p font-size= xx-small align= left > <xsl:value-of select= etablissement/nom /> </p> </td> <td valign= top > <p align= center ><xsl:value-of select= mention /></p> </td> </tr> </xsl:for-each> XSL:choose : Nous avons également put voir comment appliquer deux tons différents à appliquer à une surface : <xsl:choose> <xsl:when test = position( ) mod 2=0 > #bbbbbb </xsl:when> <xsl:otherwhise> #dddddd </xsl:otherwhise> </xsl:choose> -2-

52 XSL:template : On peut également utiliser l outils XSL:template pour appliquer un style à notre fichier XML. <xsl:template match= formation/diplome > <tr bgcolor= #bbbbbb > <td> <p align= center ><xsl:value-of select= anneeobt /></p> </td> <td valign= top > <p align= left ><xsl:value-of select= intitule /></p> </td> <td valign= top > <p font-size= xx-small align= left > <xsl:value-of select= etablissement/nom /> </p> </td> <td valign= top > <p align= center ><xsl:value-of select= mention /></p> </td> </tr> </xsl:template> -3-

53 PINEAU Thomas TP3 : Utilisation d'oxygen L'objectif du TP est, à l'aide du logiciel Oxygen, de "mettre en page" le fichier XML en s'appuyant sur un fichier XSL. Pour créer ce dernier, nous avons besoin d'un fichier XML et d'un fichier HTML. Dans ce TP, nous allons utiliser cv_xsl1.xml, cv_xsl1.xsl et cv.html. Pour commencer, nous avons créé un nouveau fichier XSL (cv_xsl.xsl). Ce fichier, nous l'avons mis en relation avec le fichier XML, déjà utilisé dans le TP précédent, avec la fonction : Document / Document XML / Associer une feuille de style XSLT / CSS Ensuite, nous avons copié le contenu du fichier HTML dans le fichier XSL entre les balises "<xsl: stylesheet>" et "</xsl: stylesheet>". On rajoute également les deux balises suivantes dans le fichier XSL, juste avant les balises HTML, pour que le fichier XSL comprenne les balises HTML que l'on vient de copiet : On obtient la visualisation suivante dans Firefox : 1

54 Il faut donc maintenant que l'on adapte ce CV avec les paramètres que l'on a rentrés dans le fichier XML. Pour cela, on importe les données du fichier XML avec la balise "<xsl:value-of select=".../.../..." />" en respectant bien les différents niveau de l'arbre (arborescence). Comme nous avons plusieurs "diplome" et plusieurs "expériences professionnelles", il est possible, dans le codage, de faire une boucle pour ne pas ré-écrire plusieurs fois la même chose. Cela permet également de pouvoir rajouter des "diplomes" et des "expéreinces professionnelles" sans modifier le fichier XSL. boucle diplome 2

55 boucle expérience professionnelle Détails des différentes balises utilisées : - <xsl:for-each select".../.../..."> : permet de ne pas ré-écrire le chemin entier à chaque fois et de cibler les données dans une zone précise de l'arbre ; - <xsl:choose> : indique qu'il va y avoir des choix à faire ; - <xsl:when> : pose les conditions pour le choix qu'il y a à effectuer avec le "choose" ; - <xsl:otherwise> : c'est le choix alternatif de la balise "when" ; - " " permet de mettre une espace entre deux mots. - select="." pour se placer sur le noeud courant - select="position() mod 2 = 0" pour se placer sur les noeuds dont le numéro est pair - select="@type" pour se placer sur la valeur de l'attribut type du noeud courant Dans notre exemple, la condition sert à déterminer la couleur de la case du "diplome" et de "l'expérience professionelle". On obtient donc ceci dans Firefox : 3

56 Nous pouvons également obtenir ce rendu du fichier XML dans un navigateur comme Firefox en structurant le fichier XSL différemment (cv_xsl2.xsl). Pour créer ce fichier, on reprend le cv_xsl1.xsl puis on applique les modifications suivantes. Cette nouvelle façon de s'organiser consiste à créer un "template" pour chaque nœud de l'arbre (ici, on fera que les principaux nœuds). Prennons l'exemple du "diplome" : On coupe toute la boucle concernant le "diplome" (cf. p2) puis on la copie sous la balise "template" déjà présente dans le document. On met à la place une balise permettant de faire le lien avec le bloc que l'on a copié en-dessous. Dans le bloc que l'on a copié, on a remplacé la balise "for-each" par "template" et le "select" par "match". 4

57 Pour résumer, on peut comparer les deux structures des fichiers XSL créés. <xsl:stylesheet <xsl:output method="html"/> <xsl:template match="cv"> <html> <head> </head> <body> <xsl:for-each select="exp_prof/poste"> <xsl:choose> <xsl:when test="position() mod 2 = 0"> </when> <xsl:otherwise> </xsl:otherwise> </xsl:choose> </xsl:for-each> <xsl:for-each select="exp_prof/poste"> <xsl:choose> <xsl:when test="position() mod 2 = 0"> </when> <xsl:otherwise> </xsl:otherwise> </xsl:choose> </xsl:for-each> </body> </html> </xsl:template>.... </xsl:stylesheet> <xsl:stylesheet <xsl:output method="html"/> <xsl:template match="cv"> <html> <head> </head> <body> <xsl:apply-template select="exp_prof/poste"> </xsl:apply-templates> <xsl:apply-template select="formation/diplome"> </xsl:apply-templates> </body> </html> </xsl:template> <xsl:template match="exp_prof/poste"> <xsl:choose> <xsl:when test="position() mod 2 = 0"> </when> <xsl:otherwise> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template match="formation/diplome"> <xsl:choose> <xsl:when test="position() mod 2 = 0"> </when> <xsl:otherwise> </xsl:otherwise> </xsl:choose> </xsl:template>.... </xsl:stylesheet> Cela permet de bien visualiser que les deux structures sont construites différemment. 5

58 Petit récapitulatif de cours : XML : extensible Markup Language Le XML est un langage informatique de balisage générique. Il sert essentiellement à stocker/transférer des données de type texte Unicode structurées en champs arborescents. Ce langage est qualifié d'extensible car il permet à l'utilisateur de définir les balises des éléments. L'utilisateur peut multiplier les espaces de nommage des balises et emprunter les définitions d'autres utilisateurs. HTML : Hypertext Markup Language SGML : Standard Generalized Markup Language DTD : Document Type Definition La Document Type Definition est un document permettant de décrire un modèle de document XML. Une DTD indique les noms des éléments pouvant apparaître et leur contenu, c'est-à-dire les sous-éléments et les attributs. CSS : Cascading Style Sheets CSS est un langage informatique qui sert à décrire la présentation des documents HTML et XML. XSL : extensible Stylesheet Language XSL est le langage de description de feuilles de style du W3C associé à XML. W3C : World Wide Web Consortium Le W3C est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. 6