Vue d'ensemble du code XSL

Configuration supplémentaire

Dreamweaver MX 2004 ou plus récent facultatif

• Version d'évaluation
• Version complète

• Pour suivre les exemples de ce didacticiel il est recommandé de disposer de Dreamweaver. Vous pouvez utiliser un autre éditeur de texte, mais ne pourrez pas bénéficier de la prise en charge native du code XSL offerte par Dreamweaver.
• Aucune connaissance précédente du code XSL n'est requise. Cet article a été conçu pour expliquer comment utiliser le code XSL pour traiter les données XML.
• Il est recommandé d'avoir une bonne connaissance préalable du code HTML, du Web et de la création de pages Web.

Lecture de mon article précédent : Vue d'ensemble du code XML.

Comme indiqué dans mon précédent article, Vue d'ensemble du code XML, le code XML a été conçu pour transférer des données. Cependant, la plupart des applications Web sont conçues en vue de leur utilisation finale. Par conséquent, les informations doivent être présentées sous une forme lisible, d'où toute l'utilité du code XSL : il extrait les données de l'arborescence XML et les traite de façon à obtenir une sortie intelligible. Naturellement, vous pouvez utiliser les formats Perl, Java ou PHP pour contourner les problèmes de transformation des documents XML. Cependant, dans la mesure où le code XML est de plus en plus répandu, il devient indispensable de maîtriser le code XSL et ses principes de fonctionnement.

Heureusement, Dreamweaver 8 adopte une approche visuelle des transformations XSL, ce qui facilite le traitement des données XML en évitant le codage manuel. Pour mieux comprendre l'interaction des codes XML et XSL pour traiter et afficher les informations, cet article présente le code XSL et quelques-unes de ses applications pratiques. Je vais couvrir la syntaxe XSL de base, vous donner des exemples d'utilisation du code XSL pour mettre en forme vos données et expliquer les différences entre les transformations côté serveur et côté client.

Le code XSL est au code XML ce que les feuilles de style CSS sont au code HTML. Son nom complet est EXtensible Stylesheet Language. Ce langage a été conçu pour présenter les données XML sous une forme compréhensible par l'utilisateur. Le code XSL peut être divisé en deux parties :

• XSLT : un langage de transformation des documents XML ;
• XPath : un langage de navigation au sein des documents XML.

XSLT signifie XSL Transformations et constitue la majeure partie du code XSL.

Le code XSLT transforme un document XML en un autre document XML, en une sortie XHTML ou en texte clair. Pour ce faire, chaque élément XML est généralement transformé en un élément HTML. XSL est indispensable dans la mesure où les balises XML sont définies par les utilisateurs et, par conséquent, les navigateurs ne savent pas comment interpréter ou rendre ces balises. En effet, elles ont été conçues pour être comprises par des humains et non pas des machines.

Le code XSLT peut effectuer les opérations sur une arborescence XML :

• ajouter et supprimer des éléments ;
• ajouter et supprimer des attributs ;
• réorganiser et trier des éléments ;
• masquer et afficher certains éléments ;
• rechercher ou sélectionner des éléments spécifiques.

Si vous devez vérifier de la syntaxe XML, consultez la section Syntaxe XML de mon article précédent sur le code XML.

Syntaxe XML

Comme indiqué dans l'article Vue d'ensemble du code XML, tous les documents XML commencent par une déclaration XML. La même chose s'applique aux feuilles de style XSL. La première ligne de chaque document XSL est en fait une déclaration XML :

Est-ce que XSL est un synonyme de XML ?

Oui et non. Oui, dans la mesure où la syntaxe est identique (à quelques exceptions près, que j'aborderai plus loin). Non, parce que les objectifs sont différents : le code XML transmet les données alors que le code XSL les met en forme.

La déclaration XSL suit la déclaration XML, par exemple :

ou

Dans la pratique, la déclaration XSL est un peu plus complexe :

Ceci est dû au fait qu'elle inclut l'espace de nom et la version de la spécification XSL, conformément aux recommandations de W3 Consortium.

Contrairement à la déclaration XML, qui est écrite sur une ligne et ne comporte pas de balise de fermeture, la déclaration XSL doit disposer d'une balise de fin, qui marque la fin de la feuille de style XSL :

Les règles de syntaxe XML sont respectées : une feuille de style XSL est un document XML valide en soi, dans la mesure où elle dispose d'un élément racine unique, spécifié par la balise <xsl:stylesheet>.

Dans quelles circonstances dois-je utiliser le code XSL ?

Le code XSL a été conçu en fonction de différents objectifs, ce qui en fait la solution idéale pour certains projets de développement et le langage à éviter absolument pour d'autres.

• Le code XSL a été conçu pour traiter les documents XML et respecter la syntaxe XML. Par conséquent, vous devez uniquement l'utiliser en conjonction avec le code XML dans des applications compatibles XML. La combinaison XML/XSL est à préférer dans les situations suivantes : portails Web, regroupement d'articles d'actualités, sites Web de communautés ou toute autre application Web nécessitant la livraison d'informations à différents périphériques et à un grand nombre de clients.
• Le langage XSLT repose sur les concordances. Il recherche les nœuds remplissant une condition particulière et leur applique les règles requises. Par conséquent, il reste beaucoup plus limité que la plupart des langages de programmation. Par exemple, le code XSL ne permet pas de modifier les variables pendant l'exécution. Il ne permet pas de calculer les valeurs des sources de données dynamiques à l'aide de formules compliquées (dans le cas des magasins en ligne par exemple). Les langages de programmation Web sont mieux adaptés dans ce cas.
• Le code XSL n'a pas été conçu pour compléter ou remplacer les feuilles de style CSS. Il ne doit pas, et d'ailleurs ne peut pas, être utilisé pour mettre en forme du contenu HTML. Vous pouvez cependant l'utiliser pour les sites Web qui changent souvent de présentation et doivent manipuler les données à l'aide d'un format souple.
• Le code XSL n'est pas un outil de gestion du contenu. Il ne doit pas, et d'ailleurs ne peut pas, être utilisé pour changer le contenu des documents XML ou pour en modifier les informations. Vous pouvez, cependant, exploiter la combinaison XML/XSL au sein d'un système de gestion du contenu qui traite des documents édités sous différents formats.

Quel est le rôle général du code XSL ? Pour produire les pages HTML finales à l'intention des visiteurs de votre site Web, vous devez appliquer une feuille de style XSL à la source de données XML. La transformation réelle peut intervenir au niveau du serveur Web ou du navigateur du client. La sortie finale peut être une page HTML complète ou un fragment de page repris sur différentes pages.

Côtés client et serveur

Les approches côté client et serveur ont chacune leurs avantages et leurs inconvénients. Les transformations côté serveur permettent de traiter les documents XML à partir du serveur ou de tout autre emplacement, sur Internet. Le serveur effectue le traitement, ce qui donne une sortie HTML pouvant être chargée par n'importe quel navigateur, quelle que soit sa version. Ceci dit, pour effectuer une transformation XSL côté serveur, vous devez disposer d'un serveur d'applications configuré correctement et prenant en charge la combinaison XML/XSL. Seuls certains serveurs d'hébergement offrent ce service. C'est pourquoi je vais expliquer comment installer et configurer les bibliothèques XML/XSL des serveurs PHP dans l'un de mes articles suivants. Dreamweaver 8 prend en charge les transformations XSL pour les pages ColdFusion, ASP, ASP.NET et PHP.

Le processus de transformation côté serveur est illustré par le diagramme ci-dessous :

Le document XML ne doit pas nécessairement résider sur le serveur Web. Il peut également figurer sur un site Web distant, auquel cas il doit être chargé dans votre serveur à la demande.

Lors d'une transformation côté client, le navigateur du client effectue tout le traitement. Le désavantage de cette approche est que seuls certains navigateurs prennent en charge la combinaison XML/XSL, ce qui implique que certains clients ne pourront pas voir vos pages. Pour consulter la liste des navigateurs qui prennent en charge les fonctionnalités XML/XSL, consultez cette page sur le site Web de W3 Consortium. En outre, lorsque vous appliquez l'approche côté client, vous êtes limité au traitement des fichiers XML locaux uniquement. Si vous devez, par exemple, consommer un flux RSS provenant d'un autre site Web, vous devez en télécharger une copie et la charger sur votre serveur. Si le fichier RSS d'origine du site Web change, vous devez le télécharger de nouveau et remplacer celui qui figure sur votre serveur.

Pour indiquer au navigateur la feuille de style XSL à utiliser pour traiter le document XML, vous devez inclure la déclaration suivante dans le fichier XML, juste après la déclaration XML :

L'attribut href spécifie le chemin de la feuille de style XSL à utiliser. Ce mécanisme est similaire au processus de référencement d'une feuille de style CSS externe au début d'une page HTML. Le diagramme suivant illustre le processus côté client des transformations XSL :

J'ai indiqué plus haut qu'une déclaration XSL comporte également l'espace de nom du document. Le terme espace de nom s'explique de lui-même : un espace réservé aux noms. Il spécifie l'ensemble des noms d'élément et d'attribut pouvant être utilisés dans un document. L'objectif de l'espace de nom est d'éviter les conflits d'appellation. Dans la mesure où le code XML, et tous ses langages dérivés, sont définis par l'utilisateur, des conflits d'appellation risquent de se produire. Par exemple, <table> peut faire référence à une table de base de données, un tableau de données, un meuble ou une place dans un restaurant. Dans la mesure où la plupart des applications traitent plusieurs documents XML à la fois, il n'est pas rare de mélanger plusieurs documents XML lorsque des éléments ont un nom ambigu. L'utilisation d'un espace de nom pour plusieurs documents permet de garantir l'unicité des éléments. Par contre, l'utilisation de plusieurs espaces de nom garantit que les éléments auront plusieurs significations possibles.

Dans le code XML, les espaces de nom sont spécifiés par l'attribut xmlns de la déclaration du document. Ils comprennent un URI (Uniform Resource Identifier), ce qui correspond à l'adresse d'un site Web (telle que http://www.w3.org/1999/XSL/Transform). Ceci est dû au fait que les URI sont uniques, ce qui implique que les espaces de nom seront également uniques.

Remarque : L'URI située dans la déclaration du document est simplement utilisée sous forme de nom. Elle n'a pas été conçue en tant que lien vers un schéma XML ou pour désigner le propriétaire d'un document (la société ou le site Web d'origine du document).

Maintenant que nous avons défini l'espace de nom, je vais revenir à la syntaxe XSL. Tout comme les documents XML comprennent un ensemble hiérarchisé d'éléments, les documents XSL sont formés à partir de modèles ou de règles. Chaque modèle définit les règles qui s'appliquent à un nœud XML spécifique. Un modèle XSL a la forme suivante :

L'attribut « match » associe un modèle XSL à un élément XML. Le nœud correspondant est indiqué par une expression XPath. Je vais aborder XPath dans la section suivante.

Le code XSL utilise les expressions XPath pour identifier les différents éléments de l'arborescence XML à traiter. En termes clairs, XPath est un outil de navigation permettant de rechercher des éléments XML. Il applique la même syntaxe que les chemins de systèmes de fichiers dans les systèmes d'exploitation (par exemple, C:\Program Files\Macromedia\ ou /usr/bin/perl). De la même façon, company/department/employee correspond à l'expression XPath qui pointe vers l'élément employee d'un document XML regroupant des données sur une société et ses services. Dreamweaver 8 bénéficie d'une interface intuitive, permettant de simplement faire glisser les éléments et de créer des expressions XPath de façon indolore. Néanmoins, vous devez comprendre les principes de base de XPath pour pouvoir manipuler les données XML des feuilles de style XSL.

En résumé, la spécification XPath suit les mêmes règles d'adressage que les systèmes de fichiers :

• Si l'expression XPath commence par une barre de fraction (/), elle représente le chemin absolu de l'élément XML (en commençant par la racine du document XML).
• Lorsque l'expression XPath commence par deux barres de fraction (//), tous les éléments du document actif répondant aux critères spécifiés seront sélectionnés, quelle que soit leur position dans le document XML. Par exemple, //employee recherche l'ensemble des nœuds « employee » du document XML.
• L'astérisque (*) sélectionne tous les éléments XML trouvés par le chemin précédent. Par exemple, /company/department/* sélectionne tous les nœuds enfant d'un service (department), ce qui correspond bien sûr à tous les employés de ce service.
• Le point (.) sélectionne le nœud actif, alors que les deux points (..) sélectionnent le nœud parent. Par exemple, l'expression XPath qui sélectionne le service d'un employé est ../employee.
• Pour sélectionner des attributs, utilisez le caractère @. Par exemple, /company/department/employee[@retired] sélectionne tous les employés ayant l'attribut retired.

Le contenu de l'élément <xsl:template> correspond à la règle à appliquer. Il s'agit généralement du code HTML qui sera transmis au navigateur.

Je vais reprendre le document company.xml de mon article précédent comme exemple. Supposons que vous deviez appliquer une règle au nœud employé, afin d'afficher les employés dans un tableau ayant la forme suivante :

La règle XSL prendrait alors la forme suivante :

Vous pouvez constater que le contenu situé entre les balises table est en code HTML pur. Ces instructions permettent d'afficher les données sous forme de tableau dans le navigateur, avec les titres de colonne suivants : Name (Nom), Job (Fonction) et Salary (Salaire).

La balise <xsl:template> permet de définir l'aspect du nœud dans le navigateur. Cependant, de façon à afficher le contenu réel dans le nœud, vous devez utiliser la construction XSL : <xsl:value-of>. Son nom s'explique de lui-même. Le nœud dont la valeur va s'afficher est spécifié par l'attribut sélectionné, qui prend une expression XPath en tant que valeur. Supposons que vous deviez afficher le nom d'un employé figurant dans le document company.xml. Le code prend alors l'aspect suivant :

Pour revenir à l'exemple précédent, soit l'affichage du document company.xml, de façon à afficher les valeurs des nœuds <name>, <job> et <salary> dans le modèle XSL, vous devez écrire le code suivant :

Pour voir comment ce code se traduit dans un navigateur, procédez comme suit :

1. Téléchargez et décompressez le fichier xsl_overview_samples.zip dont le lien figure au début de cet article.
2. Ouvrez le fichier company.xml et recherchez la déclaration de document au début du fichier :
   
   <?xml version="1.0" encoding="iso-8859-1"?>
3. Insérez une ligne à la suite de cette balise et collez le code suivant :

Remarque : J'ai couvert les effets de ce code dans la section transformation côté client plus haut dans cet article. Il indique au navigateur la feuille de style XSL à utiliser pour traiter le document XML. L'attribut href spécifie le chemin de la feuille de style XSL à utiliser.

4. Enregistrez le fichier et appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour obtenir un aperçu dans le navigateur. Notez que seul le premier employé s'affiche :

Pour afficher l'ensemble des employés dans le tableau, vous devez utiliser une autre construction XSL très courante :

La valeur de l'attribut « select » est une expression XPath qui spécifie l'ensemble des nœuds à afficher. Si vous avez déjà utilisé d'autres langages de programmation, la construction <xsl:for-each> correspond à une boucle for.

Nous allons afficher l'ensemble des employés de la société :

Vous pouvez alors constater que les expressions XPath correspondant aux colonnes name, job et salary ne doivent pas nécessairement inclure les nœuds parents ou commencer à partir de la racine du document. En effet, le chemin de ces éléments sera calculé en fonction de l'expression XPath spécifiée dans la construction <xsl:for-each>. Pour afficher le résultat du code dans votre navigateur, ouvrez de nouveau le fichier company.xml et remplacez la valeur de l'attribut href par ex_02.xsl. Ensuite, affichez son aperçu dans le navigateur. Vous devez obtenir le tableau HTML suivant :

Le code XSL permet de filtrer et trier les éléments, ainsi que d'afficher le contenu en fonction de conditions.

Eléments de filtrage

La construction <xsl:for-each> permet également de filtrer la sortie en fonction d'une condition. Supposons que vous deviez afficher uniquement les programmeurs.

Pour afficher le résultat du code dans votre navigateur, ouvrez de nouveau le fichier company.xml et remplacez la valeur de l'attribut href par ex_03.xsl. Ensuite, affichez son aperçu dans le navigateur. Vous pouvez alors constater que seuls les programmeurs figurant dans le dossier company.xml s'affichent dans le tableau HTML :

Pour définir des conditions sur les nœuds XML, utilisez l'un des opérateurs suivants :

• égal (=)
• différent (!=). Par exemple, name!='Ben Walker'
• inférieur à (<). Par exemple, salary<2750
• inférieur ou égal à (<=)
• supérieur à (>)
• supérieur ou égal à (<=)

Tri des éléments

Il est également possible de trier les éléments par ordre alphabétique. Appliquez simplement la construction <xsl:sort /> et spécifiez le nœud à utiliser pour le tri. L'élément <xsl:sort /> doit être incorporé dans un élément <xsl:for-each> pour garantir que l'application parcourt tous les éléments. Procédez de la façon suivante pour afficher les employés par ordre alphabétique :

Vous pouvez alors constater que les éléments de tri ne disposent pas d'une balise de fermeture. Pour afficher le résultat du code dans votre navigateur, ouvrez de nouveau le fichier company.xml et remplacez la valeur de l'attribut href par ex_04.xsl. Ensuite, affichez son aperçu dans le navigateur. Vous pouvez alors constater que les employés figurant dans le document company.xml sont triés par ordre alphabétique dans le tableau HTML :

Naturellement, vous pouvez facilement basculer de l'ordre croissant vers l'ordre décroissant en ajoutant un attribut à l'élément <xsl:sort /> :

Le code XSL ci-dessus ne modifie pas la structure réelle du document XML d'origine. Les employés s'affichent uniquement par ordre alphabétique dans le code HTML qui est généré et envoyé au navigateur, après la transformation XSL.

Conditions simples et multiples

Comme pour la plupart des langages, le code XSL permet également d'afficher le contenu selon des conditions.

Une condition simple est définie à l'aide de la syntaxe suivante :

Pour exécuter le test conditionnel sur plusieurs éléments, de façon à afficher uniquement ceux qui répondent aux critères, la construction xsl:if doit être incorporée dans un élément xsl:for-each. L'exemple suivant indique comment afficher la liste des employés dont le salaire est supérieur à 2 700 $ :

Les caractères inférieur à (<) et supérieur à (>) sont remplacés par les séquences d'échappement HTML correspondantes (< et >) en raison des risques de confusion avec le début ou la fin d'une balise. Pour afficher le résultat du code dans votre navigateur, ouvrez de nouveau le fichier company.xml et remplacez la valeur de l'attribut href par ex_05.xsl. Ensuite, affichez son aperçu dans le navigateur. Seuls les employés figurant dans le document company.xml et dont le salaire est supérieur à 2 700 $ figurent dans le tableau HTML :

Les opérateurs de l'expression de test sont des opérateurs conditionnels types :

• < (inférieur à)
• > (supérieur à)
• = (égal)
• != (différent)

Les chaînes de comparaison doivent être placées entre guillemets (par exemple <xsl:if test="job = 'Software Analyst'">).

Vous pouvez également définir des conditions plus complexes, similaires à la construction IF-ELSE de la plupart des langages de programmation. La syntaxe s'explique d'elle-même :

Pour tester les conditions de plusieurs nœuds XML, la construction <xsl:choose> doit être incorporée dans une boucle <xsl:for-each>.

Supposons que vous deviez surligner en vert les employés qui gagnent moins de 2 700 $ et en bleu ceux qui gagnent plus de 2 700 $ :

L'élément <xsl:otherwise> spécifie les règles à appliquer par défaut, si la condition de test initiale n'est pas satisfaite par le nœud XML.

Pour afficher le résultat du code dans votre navigateur, ouvrez de nouveau le fichier company.xml et remplacez la valeur de l'attribut « href » par ex_06.xsl. Ensuite, affichez son aperçu dans le navigateur. Vous devez obtenir le tableau HTML suivant :

Les employés qui gagnent moins de 2 700 $ sont surlignés en vert alors que ceux dont le salaire est supérieur à cette valeur sont surlignés en bleu.

La construction <xsl:choose> peut facilement être étendue pour tester plusieurs conditions, en ajoutant un ou plusieurs éléments <xsl:when>. Quel que soit le nombre d'éléments <xsl:when>, vous devez toujours disposer d'un élément <xsl:otherwise> unique qui traite les cas non couverts par les conditions de test. Comme exercice, essayez d'afficher la liste d'employés en utilisant les couleurs suivantes :

• Jaune, pour les employés gagnant moins de 2 500 $.
• Vert, pour les employés gagnant entre 2 500 et 3 000 $.
• Bleu, pour les employés gagnant plus de 3 000 $.

Aperçu rapide de Dreamweaver 8 : saisie automatique de code

La saisie automatique de code est l'une des grandes nouveautés de Dreamweaver 8 et permet d'accélérer et faciliter le codage. Lorsque vous tapez <xsl: Dreamweaver affiche une liste suggérant différentes possibilités de saisie :

Pour sélectionner le nœud ou la fonction voulue, sélectionnez l'entrée correspondante dans la liste et appuyez sur Entrée Windows ou Retour Macintosh . Vous pouvez parcourir la liste de suggestions à l'aide des touches fléchées. Cette fonctionnalité permet d'éviter de nombreuses erreurs lors de la saisie ou de la modification du code.

Autres sources d'informations

Dans cet article, j'ai présenté brièvement le code XSL, ce qui donnera quelques indications quant à son utilisation dans vos projets de développement Web. Cet article comporte également quelques aperçus des fonctionnalités de programmation XML de Dreamweaver 8, qui constitueront sans aucun doute un outil de développement précieux pour vos applications de type XML. N'hésitez pas à explorer les nombreuses possibilités offertes par les codes XML et XSL.

• Pour plus de détails sur les fonctionnalités XML/XSL de Dreamweaver 8, consultez l'aperçu de session MAX d'Alexandru Costin : Using the Power of XML with Dreamweaver Mettez la puissance du code XML à votre service avec Dreamweaver . Vous pouvez également vous joindre à lui et d'autres développeurs MAX 2005 pour voir comment utiliser Macromedia Studio 8 dans la pratique.
• Maîtrisez les expressions XPath grâce à ce didacticiel de W3 Schools.
• Pour pratiquer vos compétences XSL, consultez ce didacticiel interactif sur ZVON.org.

Au cours de mes deux prochains articles, je vais vous montrer comment consommer un flux RSS dans votre site avec Dreamweaver 8 et comment configurer votre serveur pour les transformations XSL côté serveur. Dreamweaver 8 est déjà disponible pour les précommandes. Si vous achetez ce programme à partir de la page Macromedia Affiliate d'InterAKT vous recevrez également une version gratuite d'ImpAKT.