Nous avions vu il y a quelques temps les capacités de Dreamweaver pour interfacer du XML en utilisant un modèle XSL. Nous allons cette fois ci, ouvrir le capot, et voir comment encore mieux explorer ce langage de présentation et de mise en forme afin de comprendre un minimum de règle et d’en ressortir le meilleur. Au travers de ce tutorial, vous approcherez XSL afin de mieux en comprendre les principales mécaniques.
Liens associés à cet article
http://www.w3schools.com/xsl/xsl_browsers.asp
http://webmaster.lycos.fr/references/chars/
Accès aux fichiers
XSL dans le code.
Nous avions vu il y a quelques temps les capacités de Dreamweaver pour interfacer du XML en utilisant un modèle XSL. Nous allons cette fois ci, ouvrir le capot, et voir comment encore mieux explorer ce langage de présentation et de mise en forme afin de comprendre un minimum de règle et d’en ressortir le meilleur.
En premier lieu, XSL ou XSLT?
Les documents XSL sont à XML ce que les CSS sont à HTML. Par contre, si un grand nombre de navigateurs sont capables d’interpréter, tant bien que mal, les feuilles de styles en cascades, seules les versions les plus récentes de nos navigateurs préférés sont équipés d’un processeur de transformation XSL. Vous pouvez avoir la liste des navigateurs compatibles sur http://www.w3schools.com/xsl/xsl_browsers.asp.
En lisant directement XML / XSL depuis un navigateur, on dira alors qu’on effectue une transformation côté client. Afin d’assurer une parfaite lisibilité pour des navigateurs plus anciens, il faut avoir recours à cette transformation du coté du serveur (XSLT). Attention, ce n’est pas un service proposé par défaut par un grand nombre d’hébergeurs, il est donc préférable de s’en assurer avant de choisir votre prestataire.
L’une et l’autre des possibilités ont leurs avantages et leurs inconvénients, toutefois, si vous souhaitez utilisez des flux RSS fournis par un tiers et que vous ayez opté pour une transformation coté serveur, vous serez alors contraint de systématiquement chargé ce flux sur votre serveur afin d’en proposer une version ‘transformé’, au lieu de pouvoir directement l’utiliser au sein de votre page.
XSL ou langage serveur ?
Dans le but de mettre en forme un document XML, il est vrai que nous pourrions tout aussi bien utiliser un langage serveur tel que PHP pour parcourir le document de base et le réécrire en suivant de nouvelles règles. Mais XSL, nous propose bien plus que cela, il peut directement s’appuyer sur l’arborescence en naviguant et en jonglant avec les nœuds et les attributs, et de plus reste parfaitement portable de par sa nature XML.
Couplé à Xpath on sélectionne tout… ou presque. Xpath fonctionne aussi bien en chemin relatif (balise/autrebalise) qu’en chemin absolu par rapport à la racine du document (/racine/balise/autrebalise) . Sa syntaxe est simple d’utilisation, comme vous pouvez le voir sur les exemples suivants balise/* sélectionne tout les nœuds enfants d’une balise, ./balise sélectionne le nœud courant, et ../balise le nœud parent, balise[@attribut] permet de sélectionner l’attribut d’un nœud et enfin //unebalise sélectionne tous les nœuds ‘unebalise’ du document.
Euh… et en français cela donne quoi ?
Voyons voir sur un cas plus terre à terre comme cela s’imbrique et s’utilise. Prenons un simple cas de figure XML tel qu’une liste de magasine divers « liste.xml ». Vous trouverez l’ensemble des fichiers nécessaires sur http://www.puce-et-media.com/creanum. La structure du document XML est très simple. Notez au passage qu’il est lié à une feuille de style XSL. (Afin de tester, modifiez ce lien en fonction de l’avancée de l’article)
<catalogue>
<magasine id=« »>
<numero> </numero>
<date> </date>
<lien> </lien>
</magasine>
…
</catalogue>
Mettons en place un modèle XSL d’accueil. Depuis la boite de dialogue « nouveau fichier » de Dreamweaver, il est possible de créer soit un document XSLT (page entière), soit un document XSLT (fragment). La différence entre les deux est que le premier est une page autonome, alors que le second devra être intégré dans une page HTML déjà existante. Lors de cette création Dreamweaver vous invite à lier un document XML. Je vous invite à annuler cette boite de dialogue.
Alors y a quoi sous ce capot ?
Regardons de plus près le document « liste_01.xsl ». On retrouve un document de nature XML encodé en ISO-8859-1 et donc pourvu d’un DOCTYPE qui convertit la référence d’entité HTML des caractères spéciaux en référence décimale. Vous pouvez obtenir une liste assez détaillée sur le site http://webmaster.lycos.fr/references/chars/. Il vous faudra ajouter les descriptions nécessaires et absentes. Vous pouvez modifier les valeurs renvoyées par défaut lors de la création du document, sur le fichier Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml vers la ligne 160.
Les lignes qui suivent décrivent la nature du document XSL, le mode de transformation utilisé pour la sortie et enfin le modèle de création proprement dit qui pour l’instant ne contient rien mais c’est là que nous ajouterons notre code HTML.
Justement affichons… affichons…
Créons un simple tableau et ajoutons y des valeurs piochées depuis le document XML ceci grâce à la balise <xsl :value-of/>.
<tr>
<td>
<xsl:value-of select="catalogue/magasine/numero"/>
</td>
…
</tr>
Lancez votre navigateur préféré, si celui-ci est compatible, et ouvrez le document XML. Vous devriez voir apparaître le tableau et la première ligne des valeurs de la liste. Pensez à modifier le lien vers la feuille « liste_02.xsl ».
<?xml-stylesheet type="text/xsl" href="/liste_02.xsl"?>
Conditions, répétions, etc… sont aussi de la partie.
Du fait que nous souhaitons récupérer et afficher l’ensemble des balises <magazine>, il suffit d’envelopper notre affichage de sortie par une construction de boucle de type <xsl :for-each> qui se présente sous la forme suivante :
<xsl:for-each select="catalogue/magasine"> … </xsl:for-each>
Allons plus loin en ne filtrant que les nœuds <magazine> qui possède l’attribut id ayant pour valeur «cn». Poussons le luxe en restituant un affichage classé par numéro, et bien entendu n’affichons que les numéros de l’année 2006. Enfin nous pouvons peaufiner la chose, en plaçant le lien comme un vrai lien HTML. Vous pouvez voir le code détaillé sur le fichier « liste_03.xsl ».
<xsl:for-each select="catalogue/magasine[attribute::id = 'cn']">
<xsl:sort select="numero" order="ascending"/>
<xsl:if test="date < 2006">
…
</xsl:if>
</xsl:for-each>
Conclusions
XSL regorge d’encore bien plus de commandes et jeux d’instructions qui permettent de trier et formater l’affichage de nos documents XML à volonté. Cette version 8 de Dreamweaver ouvre la voie et propose des palettes et outils qui en interface les principales. Espérons que la prochaine mouture enfoncera le clou et offrira encore plus de transparence pour générer du code de plus en plus précis.
