Le XML et ses normes associées partie I TechnofuturTIC (formateur : Luc Libert, ULB) Exercice à distance Version complète (et plus complexe) 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 : http://www.ulb.ac.be/xml-demo Luc.Libert@ulb.ac.be page 1/17
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 web actuel est la suivante : http://www.ulb.ac.be/sciences/biodic. Le site actuel 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. C est pour cette raison qu il est constitué d une multitude de pages HTML, créées «manuellement» à l aide du logiciel Dreamwaever. Le site devant prochainement évoluer, il a été décidé de le remanier afin d intégrer les nouvelles technologies XML dans sa conception. Le nouveau site sera décrit dans un seul document XML qui, grâce à une feuille de style XSLT, va servir à générer l ensemble des pages HTML du nouveau site. Ce nouveau site existera, comme le site actuel, 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 : http://www.ulb.ac.be/xml-demo (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 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/17
est le même que celui utilisé lors du cours sur les ordinateurs de la salle («forma401», «forma402»). Le 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 (http://www.ulb.ac.be/xmldemo, lien «exercices à distance»), 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/17
Les catégories 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). Le nom peut être suivi de mots-clés éventuels, également dans les deux langues. On aura, par exemple : <catégorie> <nom lang="fr">embryologie</nom> <nom lang="uk">embryology</nom> <mot-clé lang="fr">oursin</mot-clé> <mot-clé lang="uk">sea urchin</mot-clé> Un attribut «répertoire-images» existe dans certaines catégories pour indiquer le nom du sous-répertoire qui contient les images de la catégorie en question (ainsi que celles de ses sous-catégories, si celles-ci ne possèdent pas leur propre attribut «répertoire-images»). Toutes les explications sont données ci-après (voir : Emplacement des images). <catégorie répertoire-images="embryologie/amphib"> <nom lang="fr">amphibiens</nom> <nom lang="uk">amphibians</nom> 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 des attributs «id» et «type» obligatoires. Ils vont permettre de reconstituer l URL des fichiers qui contiennent les images (comme expliqué ci-après). <image id="7125" type="jpg"> <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. Les images en question sont déjà stockées sur le site web, dans un répertoire «images» organisé en différents sous-répertoires (voir ci-après : Emplacement des images). Leur nom est donné par l attribut «id» suivi de l extension donnée par l attribut «type». 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». page 4/17
Emplacement des images Les images ont déjà été placées dans un répertoire appelé «images» sur le site web. Elles sont réparties dans différents sous-répertoires qui correspondent aux différentes sous-catégories. C est l attribut «répertoire-images» des différents éléments <catégorie> qui va servir à mentionner le nom du sousrépertoire en question dans le document XML. Pour bien comprendre l organisation des images, connectez-vous à l application et sélectionnez un exercice. Ensuite, cliquez sur «voir le contenu du répertoire résultat» afin de naviguer dans le répertoire «images» et de visualiser concrètement la manière dont les images sont stockées. Comme on l a déjà mentionné, toutes les images existent en petit format (thumbnails ou vignettes) et en grand format. Le nom complet des fichiers contenant ces images sera construit par la feuille de style XSLT à l aide des attributs «répertoire-images» des éléments <catégorie> et des attributs «id» et «type» des éléments <image>. Dans l exemple suivant : <catégorie répertoire-images="embryologie/amphib"> <image id="7125" type="jpg"> <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/embryologie/amphib/tn_7125.jpg» et l image en grand format sera donnée par «images/embryologie/amphib/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/embryologie/amphib/tn_7125.jpg» et «../images/embryologie/amphib/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 «répertoire-images», puis la chaîne de caractères «/» ou «/tn_» suivie de l attribut «id», de la chaîne de caractères «.» et finalement de la valeur de l attribut «type». Un niveau de difficulté supplémentaire réside dans le fait que toutes les catégories ne possèdent pas d attribut «répertoire-images», dans ce cas, il faut remonter dans les catégories «parents» jusqu à trouver la première de ces catégories qui possède cet attribut. Par exemple : <catégorie répertoire-images="zoologie/divers"> <nom lang="fr">zoologie</nom> <nom lang="uk">zoology</nom> <catégorie> <nom lang="fr">cnidaires</nom> <nom lang="uk">cnidaria</nom> <image id="cnidaire01" type="jpg"> <nom-latin>hydra viridis</nom-latin> <nom lang="fr">hydre d'eau douce</nom> </image> Dans cet exemple, la sous-catégorie «Cnidaires» ne possède pas d attribut «répertoire-images». Les images de celle-ci vont donc être placées dans le répertoire donné par l attribut «répertoire-images» de la catégorie immédiatement supérieure, c est-à-dire la catégorie «Zoologie». Les images seront donc données page 5/17
par les URL suivantes : «images/zoologie/divers/cnidaire01.jpg» et «images/zoologie/divers/tn_cnidaire01.jpg». page 6/17
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="http://www.w3.org/1999/xsl/transform"). 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="http://xml.apache.org/xalan/redirect"): 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="http://icl.com/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-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:saxon="http://icl.com/saxon"> <xsl:output method="html"/> <xsl:template match="/"> <xsl:apply-templates select="photothèque/catégorie"/> </xsl:template> <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 «http://saxon.sourceforge.net/». Certaines de ces extensions sont des plus intéressantes. page 7/17
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 (http://www.ulb.ac.be/xml-demo, lien «exercices à distance»), 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 cette première version, 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-8859-1"?> <xsl:stylesheet version="1.0 xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmls:saxon="http://icl.com/saxon"> <xsl:output method="html"/> <xsl:template match="/"> <ul> <xsl:apply-templates select="photothèque/catégorie"/> </ul> </xsl:template> <xsl:template match="catégorie"> <ul> <xsl:apply-templates select="catégorie"/> </ul> </xsl:template> <xsl:template match="image"> </xsl:template> <xsl:template match="p"> </xsl:template> </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 8/17
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 7. 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 9/17
<xsl:value-of select="nom[@lang = '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 le nom en français des catégories («Embryologie», «Zoologie», «acariens») 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»). Malheureusement, cela va poser des problèmes lorsque le nom contient des espaces (par exemple «Biologie animale») ou des accents («Aranéïdes»). En effet, le serveur web utilisé étant une machine Unix, il n est jamais conseillé de mettre des espaces et des accents dans un nom de fichier. Pour éviter ces problèmes, on peut faire appel à la fonction «translate()» de Xpath qui permet de remplacer certains caractères dans une chaîne de caractères par d autres caractères (remplacer une espace par un «_», par exemple). Cette fonction translate() utilise un premier paramètre qui est la chaîne de caractères à convertir, un deuxième qui est la liste des caractères à remplacer et un troisième paramètre qui sont les nouveaux caractères à utiliser. Pour remplacer dans le nom d une catégorie tous les espaces par des «_» et tous les e accentués par la lettre «e» sans accent, on peut écrire : <saxon:output href="{translate(nom[@lang = 'fr'], ' éèëê', '_eeee')}.html"> On ajoutera, bien entendu, à cette liste tous les autres caractères accentués qui peuvent poser problème (à, â, ù, û, ü, ï). Remarque : dans notre exemple de document XML, une dernière catégorie va encore poser problème, c est la catégorie : «Fécondation de l oursin» du fait de la présence de l apostrophe. Il faut donc également remplacer celle-ci par un autre caractère, par exemple un «_». La syntaxe pour effectuer cela est assez complexe (pour vous éviter des cauchemars, elle vous est donnée ci-après). On ne peut en effet pas utiliser l apostrophe telle quelle dans la liste des caractères à remplacer de la fonction translate, car celle-ci utilise déjà des apostrophes. La solution consiste donc à remplacer les apostrophes de la fonction translate par des «"» qui rappelez-vous, est une entité de caractère XML qui représente un guillemet (on ne peut pas utiliser un guillemet tel quel, car l attribut «href» en utilise déjà). Ces «"» seront traités comme des guillemets par la fonction, et donc entre ces guillemets on peut placer l apostrophe à remplacer. Voici la syntaxe : <saxon:output href="{translate(nom[@lang = 'fr'], " 'éèëê", ' eeee')}.html"> Ou encore : <saxon:output href="{translate(nom[@lang = 'fr'], " 'éèëê", " eeee")}.html"> Bonne chance pour comprendre cette syntaxe. 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> page 10/17
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 d un point et de la valeur de l attribut «type» («gif» ou «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}.{@type}"/> 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. Ce dernier est donné par le premier attribut répertoire-images rencontré dans les éléments <catégorie> qui contiennent l élément <image> (toutes les explications ont déjà été données, voir Emplacement des images). Ces éléments sont donnés par «ancestor::catégorie[@répertoire-images]» (le prédicat entre les crochets est nécessaire pour ne garder que les éléments qui possèdent cet attribut). Si plusieurs de ces éléments contiennent cet attribut, il faudra prendre le premier de ceux-ci (le plus proche du noeud courant). Cela se résoudra en utilisant un deuxième prédicat «[1]». On utilisera donc pour créer cette image la construction suivante : <img src="{ancestor::catégorie[@répertoire-images][1]/@répertoire-images}/tn_{@id}.{@type}"/> Essayez de bien comprendre ce qui se passe : la première étape (ancestor::catégorie) sélectionne tous les éléments <catégorie> trouvés parmi les ancêtres. Le premier prédicat ([@répertoire-images]) va filtrer pour ne garder que ceux qui possèdent un attribut répertoire-images. Le deuxième prédicat ([1]) va filtrer pour ne garder que le premier de ceux-ci (dans l ordre inverse du document, car l axe ancestor:: est un axe arrière). Finalement la dernière étape (/@répertoire-images) sélectionnera le contenu de cet attribut. 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> page 11/17
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>). Placez ces documents HTML dans un répertoire particulier, propre à chaque catégorie (prenez exemple sur l exemple que vous obtenez en cliquant sur «exemple de résultat à obtenir»). 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> </xsl:template> <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> <xsl:template match="catégorie"> <xsl:param name="lang"/> page 12/17
<xsl:param name="catid"/> <saxon:output href="{$lang}/cat{$catid}_{position()}.html"> </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». Remarque : vous pouvez également compliquer cet exercice en ne liant pas uniquement les sous-catégories appartenant à une même catégorie, mais en liant toutes les sous-catégories entre elles (de sorte que, en partant de la première et en cliquant sur «catégorie suivante» à chaque fois, on parcourt l ensemble du site web). 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 le nom 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. 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> page 13/17
</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 14/17
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>. 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 15/17
Exercice 6 Le dernier exercice consiste à générer un index reprenant par ordre alphabétique toutes les catégories et tous les mots-clés. 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> </xsl:template> 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 le nom 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 16/17
Installer votre propre parseur Le plus simple à utiliser est le parseur XT (http://www.blnz.com/xt/index.html). 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 : http://www.altova.com/download_components.html Sinon, vous pouvez installer les parseurs Java suivants : Saxon : http://saxon.sourceforge.net/ Xalan : http://xml.apache.org/xalan-j/ page 17/17