Le XML et ses normes associées partie I

Transcription

1 Le XML et ses normes associées partie I TechnofuturTIC (formateur : Luc Libert, ULB) Exercice à distance Version simplifiée Le but de l exercice est de mettre en pratique de manière concrète toutes les notions apprises au cours. Il consiste à réaliser à l aide d une seule feuille de style XSLT un site web complet de plusieurs dizaines de pages HTML, et ce à partir d un seul document XML. Adresses utiles : Luc.Libert@ulb.ac.be page 1/15

2 Introduction But de l exercice : réalisation d un site web d histologie Le but de cet exercice est de réaliser un site web de facture professionnelle qui va présenter une photothèque d images. La technologie XML et les feuilles de style XSLT sont particulièrement bien adaptées à ce type de sujet. Le format du document XML à manipuler est particulièrement simple et on arrive assez rapidement à un résultat tout à fait satisfaisant. Pour réaliser le site en question, on utilisera des images d ultrastructures animales et végétales qui proviennent du site web du laboratoire Biodic de l Université Libre de Bruxelles (Prof. Louis Devos) 1. L URL du site en question est la suivante : Le site d'origine a été réalisé il y a plusieurs années par M. Eddy Therwinghen, à une époque où le langage XML et les techniques d interfaçage web/base de données étaient encore inexistants. Il était constitué d une multitude de pages HTML, créées «manuellement» à l aide du logiciel Dreamwaever. Le site actuel fait appel aux technologies XML afin d'alléger considérablement sa gestion. Ce site est décrit dans un seul document XML qui, grâce à une feuille de style XSLT, va servir à générer les milliers des pages HTML qui le constituent. Ce site dans une version française et dans une version anglaise. L exercice est constitué en réalité de plusieurs exercices différents qui correspondent chacun à une étape particulière dans la création du site. Chaque étape sera l occasion d appréhender une difficulté ou une technique particulière. Environnement de développement Afin de décharger l étudiant du travail, parfois fort complexe, de créer sur sa machine un environnement de développement adéquat, une application dédiée a été créée sur un des serveurs web de l ULB. L adresse de cette application est la suivante : (lien «exercices à distance»). Son utilisation est des plus intuitive. Dans le cas de l exercice, elle permet de télécharger sur le serveur de l ULB la feuille de style écrite par l étudiant, de démarrer la transformation XSLT pour créer le site web, puis de visualiser celui-ci dans une fenêtre du navigateur. Toutes les petites difficultés inhérentes à ce processus sont prises en charge par l application. Une fois l exercice terminé, l étudiant aura tout intérêt à poursuivre celui-ci en essayant de se créer son propre environnement de développement sur son ordinateur. Quelques pistes pour ce faire seront données à la fin de ce document. L accès à l application est protégé par nom d utilisateur/mot de passe (essentiellement pour que chaque étudiant puisse travailler dans son propre environnement sans être gêné par les autres). Le nom d utilisateur est le même que celui utilisé lors du cours sur les ordinateurs de la salle («forma401», «forma402»). Le 1 Notice légale d utilisation de ces images : Toutes les images de ce site sont des "oeuvres originales" protégées par des droits d'auteur. Elles sont la propriété exclusive de l'université Libre de Bruxelles. Le téléchargement des images est admis dans un contexte privé. Les images peuvent être utilisées gratuitement à des fins pédagogiques ou éducatives, à condition d'en mentionner la provenance et de nous informer de leur utilisation. Toute copie, utilisation ou reproduction dans un but commercial ou lucratif ou en vue d une "publication", quel qu'en soit le support (papier, page web, présentation) est soumise à l'accord préalable de l'auteur. Dans ce cas, veuillez contacter M. Louis Devos (ldevos@ulb.ac.be) préalablement à toute utilisation. Attention: l'auteur et les instances universitaires poursuivront toute utilisation nonautorisée des images de Biodic. page 2/15

3 mot de passe initial est égal au nom d utilisateur. Lors de la première connexion, l application demande à l utilisateur de changer celui-ci. Analyse du document XML Avant toute chose, il faut prendre le temps d analyser longuement le document XML source. Celui-ci porte le nom de l exercice en cours suivi de l extension «.xml» (par exemple : exercice1.xml, exercice2.xml). Quel que soit l exercice, le document XML sera toujours le même. Une DTD est associée au document XML (elle s appelle du nom de l exercice suivi de l extension «.dtd». Par exemple : exercice1.dtd, exercice2.dtd). Pour bien comprendre la structure du document XML, il est toujours très utile d analyser sa DTD. Pour obtenir le document XML et la DTD, connectez-vous à l application ( lien «exercices à distance - version simplifiée»), sélectionnez l exercice 1, puis cliquez sur les liens «récupérer le document XML» et «récupérer la DTD de validation». Dans le cas qui nous occupe, à savoir une photothèque d images, le document XML contient non seulement la définition de chaque image ainsi que sa description, mais également toutes les données nécessaires à son classement en différentes catégories (chaque catégorie sera présentée dans une page HTML distincte du site à construire). L élément principal s appelle <photothèque>. Celui-ci contient différents éléments <catégorie> (appelés ciaprès catégories de plus haut niveau). Chaque <catégorie> peut contenir des sous-catégories et des images. Les sous-catégories sont également représentées par des éléments <catégorie> (une sous-catégorie est une <catégorie> placée dans une autre <catégorie>). Les images sont représentées par des éléments <image>. Le squelette du document XML ressemble donc à ceci : <photothèque> <catégorie> <catégorie> <catégorie> <image></image> <image></image> <catégorie> <image></image> <image></image> <image></image> <image></image> </photothèque> Comme on le voit, la structure adoptée est très souple. On ne connait pas au départ le nombre de catégories existantes ainsi que leur organisation respective en différentes sous-catégories. On peut y ajouter autant de catégories et de sous-catégories que l on veut, en fonction des besoins rencontrés lors de l encodage. page 3/15

4 Les catégories Chaque catégorie possède un identificateur sous la forme d'un attribut id. <catégorie id="zoologie"> Chaque catégorie est encodée avec un nom en français (élément <nom lang="fr">) et un nom en anglais (élément <nom lang="uk">). Remarque : on a préféré utiliser un attribut lang pour spécifier la langue plutôt que d utiliser des noms d éléments différents (par exemple <nom-fr> et <nom-uk>). Cela facilite le développement de la feuille de style pour la génération du site dans les différentes langues (dans le cas de noms d éléments différents, il aurait fallu dédoubler le code XSLT de la feuille de style). On aura, par exemple : <catégorie id="embryologie"> <nom lang="fr">embryologie</nom> <nom lang="uk">embryology</nom> Une catégorie peut contenir, après les noms, soit des sous-catégories, soit des images, soit les deux : <catégorie id="embryologie"> <nom lang="fr">embryologie</nom> <nom lang="uk">embryology</nom> <catégorie id="echinodermes"> <nom lang="fr">fécondation de l'oursin</nom> <nom lang="uk">fertilization of the sea urchin</nom> <image> </image> <image> </image> Les images Chaque image (élément <image>) possède un nom scientifique en latin (élément <nom-latin>) suivi d un nom en français (élément <nom lang="fr">) et d un nom en anglais (élément <nom lang="uk">). Ces noms sont optionnels (car leur traduction n est pas connue dans tous les cas). Les éléments <image> possèdent un attribut «id» obligatoire. Il va permettre de reconstituer l URL des fichiers qui contiennent les images (comme expliqué ci-après). <image id="7125"> <nom-latin>abatus sp.</nom-latin> <nom lang="fr">sperme d'oursin</nom> <nom lang="uk">urchin spermatozoon</nom> <légende lang="fr"> <p>spermatozoïdes d'oursin à la surface de l'ovule; vue tangentielle.</p> </légende> </image> Chaque image peut être accompagnée d une légende en français et/ou en anglais (éléments <légende lang="fr"> et <légende lang="uk">). Chaque légende est constituée d un ou de plusieurs éléments <p> (paragraphes de texte). Les légendes sont optionnelles. page 4/15

5 Emplacement des images Les images ont déjà été placées dans un répertoire appelé «images» sur le site web. Leur nom est donné par l attribut «id» suivi de l extension «.jpg». Cela donnera pour l exemple précédent : «7125.jpg». Une version réduite (vignette ou «thumbnail») de l image existe également avec le même nom que l image grand format, mais précédé de «tn_». Cela donne, pour notre exemple : «tn_7125.jpg». Le nom complet des fichiers contenant ces images sera construit par la feuille de style XSLT à l aide des attributs «id» des éléments <image>. Dans l exemple suivant : <catégorie répertoire-images="embryologie/amphib"> <image id="7125"> <nom-latin>abatus sp.</nom-latin> <nom lang="fr">sperme d'oursin</nom> <nom lang="uk">urchin spermatozoon</nom> </image> L image en petit format sera donnée par l URL «images/tn_7125.jpg» et l image en grand format sera donnée par «images/7125.jpg». Si le document HTML généré par la feuille de style se trouve dans un sous-répertoire du site web, on utilisera des URL relatives pour remonter jusqu au répertoire «images», comme «../images/tn_7125.jpg» et «../images/7125.jpg». La feuille de style XSLT devra construire ces URL en concaténant à la chaîne de caractères «images/» (ou «../images/») la valeur de l attribut «id» et de la chaîne de caractères «.jpg». Pensez à utiliser des expressions XPath entre accolades dans vos feuilles de style. L'exemple qui suit devrait vous mettre sur la piste de la solution: <xsl:template match="image"> <img src="../images/tn_{@id}.jpg"/> page 5/15

6 Parseur XSLT utilisé Comme l exercice va consister à créer un site complet à partir d un seul document XML et d une seule feuille de style XSLT, il est nécessaire d utiliser un parseur XSLT qui puisse créer dynamiquement autant de pages HTML que l on désire. Dans la norme XSLT 1.0, cette possibilité n existe malheureusement pas, une feuille de style XSLT appliquée à un document XML ne peut fournir qu une seule page HTML en résultat (remarque : on n aura plus ce problème dans la version 2.0 du langage XSLT, car une commande supplémentaire <xsl:document> a été prévue dans le langage). La plupart des parseurs XSLT 1.0 ont donc développé une extension à la norme (une «commande» supplémentaire) afin d offrir cette possiblité en attendant la version 2.0. Dans le cas du parseur XT, cette extension est la commande <xt:document> (qui ne fonctionnera que si vous déclarez l espace de noms lié à ce parseur : xmlns:xsl=" Dans le cas du parseur Xalan, cette extension est la commande <redir:write> (qui ne fonctionnera que si vous déclarez l espace de nom lié à ce parseur : xmlns:redir=" Dans le cas du parseur SAXON, qui est le parseur que l on va utiliser, cette extension est la commande <saxon:output> (qui ne fonctionnera que si vous déclarez l espace de nom lié à ce parseur : xmlns:saxon=" Cette commande permet de créer un nouveau fichier résultat dont le nom est donné par l attribut href (ou file dans le cas de Xalan). Par défaut, le fichier mentionné par cet attribut sera créé dans le répertoire courant, mais l attribut href peut mentionner un nom de répertoire complet. Voici un exemple d une feuille de style utilisée pour créer avec le parseur SAXON un fichier HTML différent pour chaque catégorie de premier niveau (remarquez l utilisation d une expression Xpath entre accolades au sein de l attribut «href», qui va créer les noms de fichiers suivants : page1.html, page2.html, page3.html) : <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" xmlns:saxon=" <xsl:output method="html"/> <xsl:template match="/"> <xsl:apply-templates select="photothèque/catégorie"/> <xsl:template match="catégorie"> <saxon:output href="page{position()}.html"> <html> </html> </saxon:output> </xsl :template> </xsl:stylesheet> Pour une question de sécurité, le serveur SAXON a été bridé dans l application que vous allez utiliser (sinon, votre feuille de style pourrait «écraser» n importe quel fichier du serveur web de l ULB) : le répertoire mentionné dans l attribut «href» ne peut jamais être absolu et sera toujours relatif par rapport à la racine du site web (<saxon:output href="/test/page.html"> sera incorrect, par contre <saxon:output href="test/page.html"> sera accepté et le répertoire «test» automatiquement créé). Pour en savoir plus sur les autres extensions offertes par SAXON, consultez « Certaines de ces extensions sont des plus intéressantes. page 6/15

7 Exercice 1 : première feuille de style XSLT Le premier exercice consiste à développer une feuille de style XSLT pour générer une version rudimentaire du site. Un exemple du résultat à obtenir est visible dans l application. Pour visualiser cet exemple, connectez-vous à l application ( lien «exercices à distance - version simplifiée»), sélectionnez le premier exercice et cliquez sur le lien «exemple de résultat à obtenir». L exercice consiste à créer la feuille de style pour essayer de reproduire cet exemple. Prenez donc le temps de bien analyser celui-ci (essayez de comprendre le code HTML qui a été généré, au besoin visualisez le code source à partir de votre navigateur). Dans ce premier exercice, on ne s intéressera qu à la version française du site. La mise en page y sera volontairement réduite (on l améliorera au fur et à mesure des exercices). Il est vivement conseillé de déjà mettre en oeuvre des règles modèles différentes au sein de la feuille de style à réaliser (template rules). Quatre règles modèles devraient largement suffire. L ossature générale de la feuille de style à écrire sera la suivante (vous devez, bien sûr, remplacer les par du code XSLT et HTML que vous devez écrire) : <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0 xmlns:xsl=" xmls:saxon=" <xsl:output method="html"/> <xsl:template match="/"> <ul> <xsl:apply-templates select="photothèque/catégorie"/> </ul> <xsl:template match="catégorie"> <ul> <xsl:apply-templates select="catégorie"/> </ul> <xsl:template match="image"> <xsl:template match="p"> </xsl:stylesheet> La première règle modèle (<xsl:template match="/">) va servir à construire le code HTML de la page principale du site. Cette page principale va être nommée automatiquement «index.html» par l application. Cette page principale va contenir un titre suivi d une liste à puces (balise <ul>) reprenant le nom de toutes les catégories de premier niveau. Le contenu placé entre les balises <ul> et </ul> de cette première page, à savoir un ensemble de balises <li> et </li> pour chaque catégorie de premier niveau, sera quant à lui créé par une commande <xsl:applytemplates select="photothèque/catégorie"/>. Cette commande va, pour chaque catégorie de premier niveau, appeler la deuxième règle modèle (<xsl:template match="catégorie">). page 7/15

8 La deuxième règle modèle sera responsable de la création d une paire de balises <li> et </li> contenant un lien hypertexte entourant le nom (en français) de la catégorie en question. Elle est également responsable de la création de la page HTML de cette catégorie, à l aide de la commande <saxon:output> que nous avons vue précédemment (voir Parseur XSLT utilisé). Cette page HTML liée à la catégorie va à son tour contenir une liste à puces qui va reprendre toutes les souscatégories éventuelles. Le contenu de cette liste à puces sera créé par une nouvelle commande <xsl:applytemplates select="catégorie"/>, comme le montre l ossature générale ci-dessus. La deuxième règle modèle va donc s appeler de manière récursive, tant qu une catégorie contient une ou plusieurs sous-catégories. Si des images sont présentes dans une des sous-catégories, la deuxième règle modèle devra également créer dans la page HTML un tableau (élément <table> en HTML) dont le contenu sera construit par une commande <xsl:apply-templates select="image"/>. Cette commande va avoir pour effet d exécuter la troisième règle modèle pour chaque élément <image> trouvé. Cette règle modèle va créer une ligne dans le tableau cité ci-dessus (élément <tr>), avec une cellule qui contient l image (éléments <td><img src=""></td>) en version réduite et une deuxième cellule qui va contenir le nom latin, le nom en français et les légendes françaises éventuelles. L image réduite devra être entourée d un lien hypertexte qui va renvoyer vers l URL de l image en grand format. Trucs & astuces pour réaliser cet exercice : Vous trouverez ci-après quelques recettes pour réaliser cet exercice plus facilement. Lisez-les attentivement avant de commencer. Un premier conseil qu on peut vous donner est d y aller progressivement. N essayez pas de construire l entièreté de votre feuille de style en une seule fois. Construisez-la pas à pas en testant au fur et à mesure vos différentes versions. Commencez, par exemple, par reproduire l exemple simple donné à la page 6. Pour tester une version de votre feuille de style, connectez-vous à l application et sélectionnez le premier exercice. Ensuite cliquez sur «charger une nouvelle feuille de style XSLT», puis sélectionnez et transférez votre fichier en cliquant sur «parcourir» (ou «browse») et «enregistrer». Attention : pour simplifier les choses, votre feuille de style doit toujours s appeler «exercice1.xsl». Si des erreurs sont présentes dans votre feuille de style (lorsque celle-ci n est pas bien formée ou «wellformed»), elles seront affichées à l écran (vous devez alors les corriger et retransférer une nouvelle version sans erreur). Ensuite, cliquez sur «démarrer la transformation XSLT». Si tout se passe bien, un message de confirmation apparaîtra en indiquant le nombre de pages HTML créées. Sinon la liste des erreurs rencontrées sera affichée (vous devez alors y remédier en corrigeant votre feuille de style, et la retransférer jusqu à ce que tout soit correct). Si plus aucune erreur ne subsiste, vous pouvez visualiser le site que vous venez de créer en cliquant sur «voir le résultat». Vous pouvez également parcourir les documents HTML et les répertoires créés, à l aide de «voir le contenu du répertoire résultat». Comment sélectionner le nom français? Chaque catégorie et chaque image possède un élément <nom> dont l attribut «lang» donne la langue du nom en question (<nom lang="fr"> ou <nom lang="uk">). Pour sélectionner le nom français, il faut utiliser un prédicat qui va imposer que «lang» soit égal à «fr», par exemple : page 8/15

9 <xsl:value-of = 'fr']"/> Comment créer le nom des pages HTML des catégories? Différentes techniques peuvent être utilisées. Une première manière de procéder est d utiliser une information du document XML pour créer le nom des pages HTML. On pourrait, par exemple, utiliser l'identificateur des catégories (donné par l'attribut "id") pour construire les noms de fichier «embryologie.html», «zoologie.html», «acariens.html» C est cette manière de procéder qui a été utilisée dans l exemple qui illustre le premier exercice (lien «exemple de résultat à obtenir»). On utilise pour créer cette page l'instruction <saxon:output> dont l'attribut href donne le nom de la page à créer. On peut dans cet attribut utiliser une expression Xpath entre parenthèses. Par exemple, on peut inclure l'identificateur d'une catégorie, à l'aide de l'expression "@id" comme le montre cet exemple: <xsl:template match="catégorie"> <saxon:output href="{@id}.html"> </saxon:output> Une deuxième manière de procéder est de numéroter les pages de manière séquentielle comme on l a déjà mentionné plus haut (cette deuxième manière a été utilisée dans l exemple du deuxième exercice). Par exemple : <saxon:output href="cat_{position()}.html"> </saxon:output> Dans cet exemple, les pages vont être nommées cat_1.html, cat_2.html, cat_3.html Cela ne pose pas de problème tant qu on se consacre aux catégories de plus haut niveau. Par contre, dès qu on va traiter les sous-catégories, les noms de celles-ci vont entrer en conflit (la première sous-catégorie va s appeler également cat_1.html et va effacer la page HTML de la première catégorie de plus haut niveau). Il faudra donc ajouter de l information supplémentaire dans ces noms de fichiers (par exemple numéroter toutes les imbrications des catégories les unes dans les autres). On pourrait, par exemple, nommer les sous-catégories de la première catégorie cat_1_1.html, cat_1_2.html, cat_1_3.html Et si la deuxième sous-catégorie contient elle-même des sous-catégories, les nommer : cat_1_2_1.html, cat_1_2_2.html, cat_1_2_3.html Pour réaliser cela, la manière la plus simple est d utiliser des paramètres (<xsl:param> et <xsl:with-param>) qui vont maintenir un identificateur pour la catégorie qu on est en train de traiter (par exemple, pour les catégories de premier niveau, «_1» pour la première sous-catégorie, «_2» pour la deuxième, etc.). Il suffira alors d utiliser cet identificateur pour créer le nom des pages en question. Par exemple, si cet identificateur se trouve dans le paramètre «$catid» : <saxon:output href="cat{$catid}_{position()}.html"> </saxon:output> Comment afficher la petite image? Le nom du fichier de la petite image est donné par la chaîne de caractères «tn_» suivi de la valeur de l attribut «id» de l image, suivi de l'extension «jpg». Pour construire ce nom au sein de l attribut «src» d une balise HTML <img>, on peut utiliser des expressions Xpath entre accolades. Par exemple : <img src="tn_{@id}.jpg"/> page 9/15

10 Cela ne marchera que si l image est placée dans le même répertoire que le document HTML à créer. Si l image n est pas dans le même répertoire, ce qui est le cas ici, il faut encore générer dans cet attribut src le nom du répertoire qui contient l image, par exemple: <img src="../images/tn_{@id}.jpg"/> Comment rendre la petite image cliquable pour faire apparaître la grande image? Pour cela, il suffit d entourer la balise <img src=""/> d un lien hypertexte qui renvoit vers l URL de la grande image : <a href=""><img src="" border="0"/></a> En ayant pris soin d ajouter border="0" dans la balise <img>, sinon un bord bleu disgracieux apparaîtra. L URL de la grande image se construit de la même manière que celle de la petite image. Exercice 2 Le deuxième exercice est une évolution du précédent. Pour visualiser le résultat attendu, sélectionnez le deuxième exercice (cliquez sur «changer d exercice» ou reconnectez-vous), puis cliquez sur le lien «exemple de résultat à obtenir». Cette fois-ci, on va générer le site dans ses deux versions : la version française et la version anglaise. La première page sera chargée d aiguiller l internaute vers l une des deux versions. Faites également en sorte que les images en grand format ne soient plus directement affichées via leur URL comme dans l exemple précédent, mais affichées dans une page HTML qui va centrer l image au milieu du navigateur et ajouter au-dessus un titre et en-dessous les légendes des images (éléments <légende>). Si vous faites les choses correctement, votre site devrait contenir 141 pages HTML. Trucs & astuces : Utilisez des répertoires séparés pour les langues Il est beaucoup plus facile de concevoir votre site en utilisant des répertoires séparés pour chacune des langues. Utilisez comme nom de répertoire les valeurs possibles de l attribut «lang», à savoir : «fr» ou «uk». Vous pouvez alors commencer votre feuille de style par les règles modèles suivantes, où un paramètre «lang» est transmis de règle en règle contenant l identificateur («fr» ou «uk») de la langue que vous êtes en train de traiter : <xsl:template match="/"> <html> <body> <h1>biodic - Université Libre de Bruxelles</h1> <ul> <li><a href="fr/index.html">français</a></li> <li><a href="uk/index.html">english</a></li> </ul> <saxon:output href="fr/index.html"> <xsl:apply-templates select="photothèque"> <xsl:with-param name="lang" select="'fr'"/> </xsl:apply-templates> </saxon:output> <saxon:output href="uk/index.html"> <xsl:apply-templates select="photothèque"> <xsl:with-param name="lang" select="'uk'"/> </xsl:apply-templates> </saxon:output> </body> </html> page 10/15

11 <xsl:template match="photothèque"> <xsl:param name="lang"/> <ul> <xsl:apply-templates select="catégorie"> <xsl:with-param name="lang" select="$lang"/> </xsl:apply-templates> </ul> <xsl:template match="catégorie"> <xsl:param name="lang"/> <saxon:output </saxon:output> </xsl :template> Exercice 3 Le troisième exercice consiste à ajouter tous les liens hypertextes de navigation dans le site web : «page d accueil» dans toutes les pages françaises, «home» dans toutes les pages anglaises ; «english version» dans toutes les pages françaises, «version française» dans toutes les pages anglaises ; «retour à la catégorie» dans les pages des images en version française, «back to category» dans les pages des images en version anglaise ; «image précédente» et «image suivante» dans les pages des images en version française, «previous picture» et «next picture» dans les pages des images en version anglaise ; «catégorie précédente» et «catégorie suivante» dans les pages des catégories en version française, «previous category» et «next category» dans les pages des catégories en version anglaise ; «catégorie parent» et «parent category» pour les sous-catégories. Dans ces liens, n oubliez pas que la dernière image ou la dernière catégorie ne possèdent pas de «xxx suivant» ; de même, la première image ou la première catégorie ne possèdent pas de «xxx précédent». Attention : suivant la manière dont vous avez nommé les pages HTML de vos catégories, cela peut devenir très compliqué, car il vous faudra pour chacune des catégories retrouver le nom de sa page HTML. Si vous avez utilisé la première méthode discutée dans l exercice 1 (en utilisant l'identificateur de la catégorie), pas de problème : vous n aurez aucun problème à retrouver le nom de la page HTML correspondante. Par contre, si vous avez utilisé la deuxième méthode, en numérotant les catégories, il vous faudra user d ingéniosité pour retrouver ce nom. Pensez à la fonction «count()». Par exemple, «count(precedingsibling::catégorie)+1» permet de retrouver l indice d une catégorie en comptant le nombre de catégories qui la précèdent. page 11/15

12 Trucs & astuces : Générez la bonne langue Le code XSLT étant commun aux deux langues, il faudra chipoter pour générer le libellé d un lien hypertexte dans la bonne langue. Pensez à l instruction conditionnelle <xsl:choose> et au fait qu elle peut se placer sans problème au sein même du lien : <a href=""> <xsl:choose> <xsl:when test="$lang='uk'">next picture</xsl:when> <xsl:otherwise>image suivante</xsl:otherwise> </xsl:choose> </a> Pensez aux axes de recherche Les liens du type «xxx suivant» et «xxx précédent» se réalisent souvent simplement en utilisant l axe de recherche adéquat (pensez aux «following::», «following-sibling::», ) ou en testant la position de contexte. page 12/15

13 Exercice 4 L ossature générale du site est en place. On peut maintenant y apporter certains raffinements. Par exemple, essayez de mettre dans chaque catégorie non plus les petites images les unes en-dessous des autres, mais de les regrouper par 3 sur une même ligne (avec cette fois-ci, le nom des images en-dessous de celles-ci). Connectez-vous à l application sous l exercice 4 pour bien comprendre. Trucs & astuces : Pensez à l opérateur «mod» qui donne le reste d une division entière. Si vous introduisez, par exemple, «image[(position() mod 3) = 1]» dans le motif d une règle modèle, celle-ci ne sera appelée que pour la première image, la quatrième image, la septième image. bref toutes les images qui commencent une nouvelle ligne. Il suffira alors dans cette règle modèle de créer la ligne dans la table (balises <tr> et </tr>), puis de créer le contenu de cette ligne en exécutant une autre règle modèle pour l image courante, la suivante et encore la suivante. Cette dernière règle créant une cellule différente (balises <td> et </td>) pour chaque image. Pensez à utiliser l attribut «mode» dans les commandes <xsl:apply-templates> et <xsl:template>. Avec cet attribut, vous pouvez choisir la règle modèle qui sera appelée, même si deux règles modèles ont le même motif (attribut match). Inspirez-vous de ce qui suit: <xsl:template match="catégorie"> <table> <xsl:apply-templates select="image[(position() mod 3) = 1]" mode="tableau"/> </table> <xsl:template match="image" mode="tableau"> <tr> <xsl:apply-templates select="."/> <xsl:apply-templates select="following-sibling::image[1]"/> <xsl:apply-templates select="following-sibling::image[2]"/> </tr> <xsl:template match="image"> <td> </td> Exercice 5 Le moment est venu de rendre le design du site un peu plus attractif. Laissez libre cours à votre imagination. L idéal pour ceux qui connaissent, est d utiliser une feuille de style CSS. Ici, aucune difficulté particulière n est liée à XML et XSLT. Les seules difficultés que vous pouvez rencontrer sont liées à la mise en page HTML (et CSS) que vous désirez réaliser. Conseil : placez votre feuille de style CSS et vos images éventuelles dans le répertoire «design» qui est créé au même niveau que le répertoire «images». Ce répertoire en effet n est pas effacé à chaque fois que vous regénérez votre site (contrairement aux autres répertoires). page 13/15

14 Exercice 6 Le dernier exercice consiste à générer un index reprenant par ordre alphabétique toutes les catégories. Comme pour les autres exercices, connectez-vous à l application, sélectionnez le sixième exercice (cliquez sur «changer d exercice» ou reconnectez-vous), et cliquez ensuite sur le lien «exemple de résultat à obtenir» pour voir un exemple de ce qui est attendu. La page d index que vous devez créer est visible en cliquant sur le lien «index» qui apparaît dans toutes les pages, sauf dans la première. Trucs & astuces : Pour arriver à ce résultat, vous avez besoin de parcourir (de «boucler») toutes les lettres de l alphabet. Une façon pratique de faire est d appeler une règle modèle via une instruction <xsl:call-template> en passant en paramètre la liste de toutes les lettres possibles. La règle modèle appelée va traiter la première lettre de cette liste, puis va s appeler de manière récursive en passant en paramètre la liste des lettres qu elle a reçue, sauf la première. Basez-vous sur le code suivant : <xsl:call-template name="keyword"> <xsl:with-param name="letters" select="'abcdefghijklmnopqrstuvwxyz'"/> <xsl:with-param name="lang" select="$lang"/> </xsl:call-template> <xsl:template name="keyword"> <xsl:param name="lang"/> <xsl:param name="letters"/> <xsl:variable name="letter" select="substring($letters,1,1)"/> effectuez ici le traitement de la lettre donnée par la variable $letter <xsl:if test="substring($letters,2)!=''"> <xsl:call-template name="keyword"> <xsl:with-param name="letters" select="substring($letters,2)"/> <xsl:with-param name="lang" select="$lang"/> </xsl:call-template> </xsl:if> Même remarque que dans l exercice 3 : suivant la manière dont vous avez nommé les pages HTML de vos catégories, cela peut devenir très compliqué, car il vous faudra pour chacune des catégories retrouver le nom de sa page HTML. Si vous avez utilisé la première méthode discutée dans l exercice 1 (en utilisant l'identificateur de la catégorie), pas de problème : vous n aurez aucun problème à retrouver le nom de la page HTML correspondante. Par contre, si vous avez utilisé la deuxième méthode, en numérotant les catégories, il vous faudra user d ingéniosité pour retrouver ce nom. Pensez à la fonction «count()». Par exemple, «count(precedingsibling::catégorie)+1» permet de retrouver l indice d une catégorie en comptant le nombre de catégories qui la précèdent. page 14/15

15 Installer votre propre parseur Le plus simple à utiliser est le parseur XT ( Il s utilise en ligne de commande DOS de la manière suivante (pour autant que la machine virtuelle Java de Microsoft soit correctement installée) : C:>xt nom-du-document-xml nom-de-la-feuille-de-style nom-du-fichier-résultat Ce parseur fonctionne parfaitement, malheureusement son concepteur ne l a plus fait évoluer depuis longtemps (inutile d attendre la version 2.0 de XT). Un autre parseur tout aussi simple est le parseur développé par Altova, AltovaXML 2006., disponible à l adresse de suivante : Sinon, vous pouvez installer les parseurs Java suivants : Saxon : Xalan : page 15/15