Lors de la mise en page de document de type XML on oublie bien souvent de faire appel au fichier XSL. Couplé à la force de Xpath et XQuery, une simple arborescence peut se coupler à la complexité d'une mise en page élaborée. Au travers de ce tutorial, vous approcherez XSL au travers des modules WYSIWYG de Dreamweaver, cela vous permettra de mieux en comprendre les principales mécaniques et les relations avec XML, CSS, et XSLT.
Liens indiqués au cours de l'article
http://www.w3.org/TR/REC-html40/sgml/entities.html
Accès aux fichiers
Utiliser XSL, XML et CSS pour mettre en page des fiches.
Il est parfois nécessaire de présenter les informations sous la forme de vignettes, un peu à la manière des petites annonces. Il existe plusieurs approches qui se valent toutes, aujourd'hui nous allons explorer ce que les standards du Web nous proposent, c'est-à-dire une structure de page XSL, un fichier XML contenant les datas et une mise en forme en CSS. La bonne nouvelle, c'est que Dreamweaver 8, nous propose divers outils qui permettent de réaliser tous cela sana avoir à écrire une seule ligne de code.
Mise en place du document de base.
Dans un premier temps il n'est pas nécessaire de créer un document XSL, on peut tout à fait utiliser une base HTML que l'on convertira ensuite en document XSLT. Partons d'une base HTML qui ne contient que le strict nécessaire. (Les fichiers sont dispos sur le site). Ouvrez la page "baseHTML.htm". Cette page contient une partie #enTete composée des divers textes de présentation (titre, sous titre, chapô…) et une partie #contenu, qui va accueillir nos vignettes. Ce document possède une feuille de style liée qui prend en charge la mise en forme du document.
Transformation en document XSLT.
Pour convertir le en document XSLT, avec Dreamweaver 8, rien de plus simple. Il suffit d'utiliser le menu Fichier > Convertir > XSLT 1.0. Il se peut que vous soyez amenés à déclarer des entités absentes. Il suffit de les définir en entête de document sous la forme de par exemple <!ENTITY eacute "é">. Vous pouvez accéder à l'ensemble des définitions sur http://www.w3.org/TR/REC-html40/sgml/entities.html
Notes: pVous pouvez modifier le contenu du document par défaut. Faites une sauvegarde du fichier …Configuration\DocumentTypes\MMDocumentTypeDeclarations.xml puis ajoutez y l'ensemble des entités souhaitées dans la partie
<documenttypedeclaration id="mm_xslt_1">
Le document XML.
Il nous faut maintenant renseigner une structure XML, datas.xml qui contient l'ensemble des informations à importer dans la page Web.
<?xml version="1.0" encoding="iso-8859-1"?>
<catalogue>
<magasine>
<numero> … </numero>
<couverture> …</couverture>
<date> …</date>
<gallerie> …</gallerie>
<dossier> …</dossier>
<tests> …</tests>
<pratique> …</pratique>
<lien> …</lien>
</magasine>
… // répéter pour chaque parution …
</catalogue>
Mise en relation du document XSL avec le document XML
Dreamweaver 8 s'oriente définitivement vers les standards du Web et propose des outils qui vont simplifier la construction des pages Web. Le document HTML convertit en document XSL, permet de lier un document XML. Utilisez pour cela la palette Application > Liaisons, (ctrl + F10). Cliquez sur le lien Joindre un document XML, et pointez vers le fichier XML, "datas.xml". Aussitôt, la palette reflète l'arborescence du document et présente les diverses balises qui le compose.
Il est maintenant très facile, par simple glissé déposé, de remplir le document. Glissez par exemple la balise numero, sous le titre
<h2>catalogue d'anciens numéros</h2>
et validez ensuite par un retour chariot afin de générer un nouveau paragraphe
<p> </p>.
Placez aisni toute les informations les unes après les autres. Seule l'insertion d'image et le lien sont utilisés différemment. Positionnez le curseur à l'endroit désiré, et activer le menu Insertion > Image (Ctrl + Alt + I). Cette fois ci au lieu d'utiliser 'système de fichier', utilisez 'Sources de données'. La boite de dialogue se modifie et présente l'arborescence du fichier XML. Il ne reste plus qu'à sélectionner la balise {couverture}.
Notes : si les images ne se trouvent pas au même niveau d'arborescence que le document XSL, il faudra manuellement modifier le chemin depuis la boite de dialogue.
Ajoutez la phrase "En savoir plus…" au bas de la vignette, puis ouvrez l'accès au lien depuis la palette des propriétés. De la même manière que pour l'insertion d'image, utilisez le 'Système de données' et indiquez la balise {lien}.
Mise en style des informations
Le document construit, il ne reste plus grand-chose à faire si ce n'est d'appliquer des styles à nos éléments. Sélectionnez un à un ces éléments et depuis l'inspecteur de propriété appliquez le style adéquat. L'élément <numero> avec la classe .numero, l'élément <date> avec la classe .date, utilisez la classe .texte pour tout les autres. Sélectionnez les tous et appliquez leur le style .vignette, afin de définir la vignette globale.
Utilisation de Xpath.
Le document XML contient plus d'une balise <magasine> et il nous faut les répéter afin de présenter la totalité du fichier. Rien de plus simple, commencez par sélectionner l'ensemble des éléments ajoutés à la page puis en utilisant l'onglet XSLT de la fenêtre Insertion (Ctrl + F2), cliquez sur le deuxième icône (région répétée). Sélectionnez alors la balise <magasine> pour indiquer que la répétition s'effectue sur cette balise précisément.
Conclusion
Il ne nous reste plus qu'à tester dans un navigateur et de vérifier le bon fonctionnement de cette présentation. A ce sujet, vous remarquerez que lors des tests depuis Dreamweaver la page s'affiche correctement, par contre si vous ouvrez cette même page depuis le navigateur vous obtenez le code XML de la page. Ceci est dû au fait que Dreamweaver transforme la page pour nous. Lors de la mise en ligne il faut utiliser un script serveur qui rempliera cette tâche, mais cela fera l'objet d'un prochain article. En attendant, ouvrez depuis votre navigateur le document 'datas.xml'. Vous obtenez une arborescence XML et l'information qu'aucune feuille de style n'est liée. Maintenant ajoutez la ligne suivante comme seconde ligne de votre document XML et réouvrez le depuis le navigateur. <?xml-stylesheet type="text/xsl" href="/baseXSL.xsl" ?>. Cette opération ne sera possible qu'avec des navigateurs compatibles avec les standards.
Vous vous apercevez à quel point il est simple de mettre en place une présentation à base de XML… de là à se dire que ce fichier XML puisse être issus d'un fil RSS, il n'y a qu'un pas que je vous invite à franchir…
