À propos de XML et de XSLT

Le langage XML (Extensible Markup Language) permet de structurer les informations. Tout comme HTML, XML utilise des balises pour structurer les informations, mais les balises XML ne sont pas prédéfinies comme c’est le cas des balises HTML. En effet, XML permet de créer des balises sur mesure, adaptées à la structure des données (schéma). Les balises sont imbriquées dans d’autres balises afin de créer un schéma de balises parentes et enfants. Comme la plupart des balises HTML, toutes les balises d’un schéma XML comprennent une balise d’ouverture et une balise de fermeture.

L’exemple suivant illustre la structure de base d’un fichier XML :

Dans cet exemple, chaque balise parente <book> contient trois balises enfants : <pubdate>, <title> et <author>. Toutefois, chaque balise <book> est elle-même un enfant de la balise <mybooks>, située à un niveau hiérarchique plus élevé du schéma. Vous pouvez nommer et structurer les balises XML à votre guise, sous réserve qu’elles soient imbriquées en conséquence et qu’une balise de fermeture corresponde à chaque balise d’ouverture.

Les documents XML ne contiennent pas d’instructions de formatage, ce sont de simples conteneurs d’informations structurées. Après avoir créé un schéma XML, vous pouvez utiliser le langage XSL (Extensible Stylesheet Language) pour afficher les informations. Tout comme les feuilles de style en cascade (CSS) permettent de formater le contenu HTML, le langage XSL permet de formater les données XML. Vous pouvez définir des styles, des éléments de page, la mise en page, etc. dans un fichier XSL, puis associer celui-ci à un fichier XML. Lorsqu’un utilisateur affiche les données XML dans un navigateur, elles sont mises en forme conformément aux éléments définis dans le fichier XSL. Le contenu (les données XML) et la présentation (définie par le fichier XSL) sont entièrement séparés, ce qui offre un meilleur contrôle sur la façon dont les informations sont affichées dans une page web. En bref, le langage XSL constitue une technologie de présentation pour les données XML, la sortie principale correspondant à une page HTML.

Le langage XSLT (Extensible Stylesheet Language Transformations) est un sous-ensemble du langage XSL qui permet d’afficher des données XML sur une page web et de les « transformer », parallèlement aux styles XSL, en informations lisibles et mises en forme au format HTML. Vous pouvez utiliser Dreamweaver pour créer des pages XSLT permettant d’effectuer des transformations XSL dans un serveur d’application ou un navigateur. Lorsqu’une transformation XSL est effectuée sur le serveur, ce dernier prend en charge toutes les opérations de transformation des données XML et XSL et de leur affichage dans la page. Lorsque cette transformation a lieu côté client, c’est le navigateur (par exemple, Internet Explorer) qui se charge de ces opérations.

La méthode que vous adoptez (transformations côté serveur ou client) dépend du résultat final que vous souhaitez obtenir, des technologies à votre disposition, du niveau d’accès aux fichiers XML source dont vous disposez et d’autres facteurs. Les deux méthodes présentent des avantages et des inconvénients. Les transformations côté serveur, par exemple, gèrent tous les navigateurs, alors que les transformations côté client prennent uniquement en charge les navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Les transformations côté serveur vous permettent d’afficher les données XML dynamiquement à partir de votre propre serveur ou de n’importe où sur le web. En revanche, les données XML utilisées par les transformations côté client doivent impérativement être hébergées localement sur votre propre serveur web. Enfin, les transformations côté serveur requièrent le déploiement des pages sur un serveur d’application configuré, tandis que les transformations côté client exigent uniquement l’accès à un serveur web.

Vous trouverez un tutoriel expliquant le langage XML à l’adresse www.adobe.com/go/vid0165_fr.

Transformations XSL côté serveur

Dreamweaver propose des méthodes de création de pages XSLT permettant d’effectuer des transformations XSL côté serveur. Lorsqu’un serveur d’application effectue la transformation XLS, le fichier contenant les données XML peut résider sur votre propre serveur ou n’importe où sur le web. Par ailleurs, tout navigateur peut afficher les données transformées. En revanche, le déploiement de pages pour les transformations côté serveur est plus complexe et nécessite un accès à un serveur d’application.

Lorsque vous faites appel à des transformations XSL côté serveur, vous pouvez utiliser Dreamweaver pour créer des pages XSLT générant des documents HTML complets (des pages XSLT entières) ou des fragments XSLT générant une partie seulement d’un document HTML. Une page XSLT entière est semblable à une page HTML classique. Elle contient une balise <body> et une balise <head>, et permet d’afficher des données HTML et XML sur la page. Un fragment XSLT est un segment de code utilisé par un document distinct et qui affiche des données XML formatées. A la différence d’une page XSLT, un fragment XSLT est un fichier indépendant qui ne contient pas de balises <body> ou <head>. Pour afficher des données XML sur une page distincte, vous pouvez créer une page XSLT entière et la lier à vos données XML. Si, en revanche, vous souhaitez afficher les données XML dans une section particulière d’une page dynamique existante (par exemple, la page d’accueil dynamique d’un magasin d’équipement sportif, sur laquelle des scores issus d’un fil RSS sont affichés sur le côté gauche), vous pouvez créer un fragment XSLT et insérer une référence à ce fragment dans la page dynamique. La création de fragments XSLT et leur utilisation avec d’autres pages dynamiques afin d’afficher des données XML constituent le cas de figure le plus courant.

La première étape de création de ces types de pages consiste à créer le fragment XSLT. Il s’agit d’un fichier distinct qui contient la mise en page, le formatage etc. des données XML que vous souhaitez afficher dans la page dynamique. Une fois le fragment XSLT créé, vous insérez une référence à ce fichier dans la page dynamique (par exemple, une page PHP ou ColdFusion). Cette référence au fragment XSLT a le même effet qu’une SSI (Server Side Include) : les données XML mises en forme (le fragment) résident dans un fichier distinct. En mode Création, un emplacement réservé au fragment apparaît dans la page dynamique. Lorsqu’un navigateur demande la page dynamique qui contient la référence au fragment, le serveur traite l’instruction d’inclusion et crée un nouveau document dans lequel le contenu mis en forme du fragment apparaît là où se trouvait l’emplacement réservé.

Pour insérer une référence à un fragment XSLT dans une page dynamique, utilisez le comportement de serveur Transformation XSL. Lorsque vous insérez la référence, Dreamweaver crée dans le dossier racine du site un sous-dossier includes/MM_XSLTransform/ et y copie un fichier contenant une bibliothèque d’exécution. Le serveur d’application utilise les fonctions définies dans ce fichier lors de la transformation des données XML spécifiées. Le fichier extrait les données XML et les fragments XSLT, exécute la transformation XSL et affiche le résultat sur la page web.

Pour que la page puisse être affichée correctement, les fichiers contenant respectivement le fragment XSLT, vos données XML et la bibliothèque d’exécution doivent tous les trois se trouver sur le serveur. (Si vous sélectionnez un fichier XML distant comme source de données, par exemple un fil RSS, celui-ci doit bien entendu résider ailleurs sur Internet.)

Vous pouvez également utiliser Dreamweaver pour créer des pages XSLT entières à utiliser dans les transformations côté serveur. Une page XSLT entière fonctionne exactement comme un fragment XSLT. Toutefois, lorsque vous insérez la référence à la page XSLT entière au moyen du comportement de serveur Transformation XSL, vous insérez le contenu intégral d’une page HTML. Par conséquent, vous devez effacer tout le contenu HTML de la page dynamique (la page .cfm, .php ou .asp qui sert de conteneur) avant d’insérer la référence.

Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP et PHP.

Transformations XSL côté client

Vous pouvez exécuter des transformations XSL sur le client, sans utiliser de serveur d’application. Dreamweaver permet de créer une page XSLT entière qui se chargera de cette opération. Toutefois, les transformations côté client nécessitent la manipulation du fichier XML contenant les données à afficher. Par ailleurs, les transformations côté client utilisent uniquement des navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). 

Créez d’abord une page XLST entière et associez-lui une source de données XML. (Dreamweaver vous invite à associer la source de données à la création de la page.) Vous pouvez créer une page XSLT entièrement nouvelle ou convertir une page HTML existante en page XSLT. Lorsque vous convertissez une page HTML existante en page XSLT, vous devez lui associer une source de données XML au moyen du panneau Liaisons (Fenêtre > Liaisons).

Une fois que vous avez créé votre page XSLT, vous devez la lier au fichier .xml qui contient les données XML en insérant une référence à la page XSLT dans le fichier XML (tout comme vous insérez une référence à une feuille de style en cascade (CSS) externe dans la section <head> d’une page HTML). Les visiteurs de votre site doivent consulter le fichier XML (et non la page XSLT) dans un navigateur. Lorsqu’ils affichent la page, le navigateur exécute la transformation XSL et affiche les données XML, qui sont mises en forme par la page XSLT liée.

D’un point de vue conceptuel, la relation entre les pages XSLT et XML liées est similaire, tout en étant différente, au modèle de page CSS externe/HTML. Lorsqu’une page HTML contient du contenu (tel que du texte), vous utilisez une feuille de style externe pour formater ce contenu. La page HTML détermine le contenu, tandis que le code CSS externe, qui est totalement invisible pour l’utilisateur, détermine la présentation. Avec XSLT et XML, la situation est inversée. Le fichier XML (que l’utilisateur ne voit jamais sous forme brute) détermine le contenu alors que la page XLST définit la présentation. La page XSLT contient les tableaux, la mise en forme, les graphiques etc. que contient d’ordinaire le code HTML standard. Lorsqu’un utilisateur affiche le fichier XML dans un navigateur, la page XSLT met le contenu en forme.

Dreamweaver insère le code approprié en haut de la page XML lorsque vous utilisez le logiciel pour lier une page XSLT à une page XML. Si la page XML liée vous appartient (autrement dit, si le fichier XML réside exclusivement sur votre serveur web), il vous suffit d’utiliser Dreamweaver pour insérer le code approprié liant les deux pages. Lorsque vous êtes le propriétaire du fichier XML, les transformations XSL exécutées par le client sont totalement dynamiques. En d’autres termes, toute mise à jour des données du fichier XML est automatiquement répercutée sur toute sortie HTML utilisant la page XSLT liée.

Si la page XML liée ne vous appartient pas (si, par exemple, vous souhaitez utiliser des données XML provenant d’un fil RSS sur le web), le processus est légèrement plus compliqué. Pour exécuter des transformations côté client utilisant des données XML issues d’une source externe, vous devez d’abord télécharger le fichier XML source dans le répertoire contenant votre page XSLT. Une fois la page XML sur votre site local, vous pouvez utiliser Dreamweaver pour ajouter le code approprié afin de la lier à la page XSLT et envoyer les deux pages (la page XML téléchargée et la page XSLT liée) à votre serveur web. Lorsque l’utilisateur affiche la page XML dans un navigateur, la page XSLT met le contenu en forme, tout comme dans l’exemple précédent.

Les transformations XLS côté client de données XML provenant d’une source externe présentent toutefois un inconvénient : les données XML ne sont que partiellement « dynamiques ». Le fichier XML que vous téléchargez et modifiez est un simple « instantané » du fichier qui réside autre part sur le web. Si le fichier XML d’origine change sur le web, vous devez à nouveau le télécharger, le lier à la page XSLT et envoyer le fichier XML à votre serveur web. Le navigateur assure uniquement le rendu des données qu’il reçoit du fichier XML sur votre serveur web, non des données que contient le fichier XML source d’origine.

Données XML et éléments répétés

L’objet XSLT Région répétée permet d’afficher sur une page des éléments répétés provenant d’un fichier XML. Toute zone contenant un emplacement réservé pour données XML peut être convertie en région répétée. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les séries de lignes de tableau.

L’exemple ci-dessous indique comment l’objet XSLT Région répétée s’applique à une ligne de tableau qui affiche le menu d’un restaurant. La ligne initiale contient trois éléments différents du schéma XML : item (plat), description et price (prix). Lorsque l’objet XSLT Région répétée est appliqué à la ligne et que la page est traitée par un serveur d’application, le tableau est répété et des données uniques sont insérées dans chaque nouvelle ligne.

Lorsque vous appliquez un objet XSLT Région répétée à un élément dans la fenêtre de document, un contour fin de couleur grise délimite la région répétée. Lors de l’affichage de l’aperçu dans un navigateur (Fichier > Aperçu dans le navigateur), le contour gris disparaît et la sélection est développée pour afficher les éléments répétés spécifiés dans le fichier XML, comme illustré ci-dessus.

Lorsque vous ajoutez l’objet XSLT Région répétée à la page, la longueur de l’emplacement réservé aux données XML dans la fenêtre de document est réduite. En effet, Dreamweaver met à jour le chemin XPath (langage XML Path) de l’espace réservé aux données XML afin qu’il se réfère au chemin de l’élément répété.

Le code suivant, par exemple, crée un tableau contenant deux espaces réservés dynamiques, sans appliquer d’objet XSLT Région répétée au tableau:

Le code suivant crée le même tableau et lui applique l’objet XSLT Région répétée :

Dans l’exemple ci-dessus, Dreamweaver a mis à jour le chemin XPath des éléments qui sont compris dans la région répétée (titre et description) afin qu’il se réfère au chemin XPath compris entre les balises <xsl:for-each>, plutôt qu’au document entier.

Dreamweaver génère également des expressions XPath relatives au contexte dans d’autres cas. Si, par exemple, vous faites glisser un espace réservé pour données XML vers un tableau auquel un objet Région répétée est déjà appliqué, Dreamweaver affiche automatiquement un chemin XPath relatif au chemin XPath existant qui figure entre les balises <xsl:for-each>.

Aperçu des données XML

Lorsque vous utilisez l’option Aperçu dans le navigateur (Fichier > Aperçu dans le navigateur) pour afficher un aperçu des données XML que vous avez insérées dans un fragment XSLT ou une page XSLT entière, le moteur qui exécute la transformation XSL varie d’une situation à l’autre. Pour les pages dynamiques contenant des fragments XSLT, c’est toujours le serveur d’application qui exécute la transformation. Dans d’autres cas, Dreamweaver ou un navigateur pourrait exécuter la transformation.

Le tableau suivant passe en revue les cas de figure dans lesquels l’option Aperçu dans le navigateur est utilisée et indique le moteur qui exécute les transformations respectives :

Les rubriques suivantes vous permettent de déterminer la méthode d’aperçu adaptée à vos besoins:

Aperçu de pages pour des transformations côté serveur

Dans le cas de transformations côté serveur, le contenu que le visiteur du site affiche est transformé par votre serveur d’application. Lors de la génération de fragments XSLT et de pages dynamiques à utiliser dans des transformations côté serveur, il est toujours préférable d’effectuer un aperçu de la page dynamique qui contient le fragment XSLT, plutôt que de ce dernier. Dans le premier cas, vous utilisez le serveur d’application et avez ainsi la garantie que votre aperçu représente le contenu qui s’affichera lorsque les visiteurs de votre site consulteront votre page. Dans le deuxième cas, Dreamweaver exécute la transformation, mais les résultats ne sont pas nécessairement garantis. Vous pouvez utiliser Dreamweaver pour afficher un aperçu du fragment XSLT pendant sa création, mais pour obtenir un rendu précis des données, utilisez plutôt le serveur d’application pour afficher un aperçu de la page dynamique après y avoir inséré le fragment XSLT.

Aperçu de pages pour des transformations côté client

Dans le cas de transformations côté client, le contenu que le visiteur du site affiche est transformé par un navigateur. Pour ce faire, vous liez le fichier XML à la page XSLT. Si vous ouvrez le fichier XML sous Dreamweaver et visualisez son aperçu dans un navigateur, vous obligez ce dernier à charger le fichier XML et exécuter la transformation. Vous obtenez donc le même résultat que le visiteur de votre site.

Cette méthode présente toutefois un inconvénient : il vous en effet plus difficile de déboguer votre page car le navigateur transforme le fichier XML et génère le contenu HTML en interne. Si vous sélectionnez l’option Afficher la source du navigateur pour déboguer le contenu HTML généré, vous avez uniquement accès au code XML que le navigateur a reçu à l’origine et non à la totalité du code HTML (balises, styles, etc.) qui a effectué le rendu de la page. Pour afficher la totalité du code HTML lorsque vous consultez le code source, vous devez effectuer l’aperçu de la page XSLT dans un navigateur.

Aperçu de pages XSLT entières et de fragments XSLT

Lorsque vous créez des pages XSLT entières et des fragments XSLT, il est souhaitable d’afficher un aperçu de votre travail pour vous assurer que les données s’affichent correctement. Dreamweaver exécute la transformation au moyen d’un moteur de transformation intégré pour afficher une page XSLT entière ou un fragment XSLT en cas de recours à l’option Aperçu dans le navigateur. Cette méthode garantit des résultats rapides et vous permet de facilement générer et de déboguer votre page au fur et à mesure. Elle vous permet aussi d’afficher la totalité du code HTML (balises, styles, etc.) par le biais de l’option Afficher la source du navigateur.