CentraleSupélecDépartement informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
TD 7 — XPath, XSLT

Ce TD correspond à ce tuto.

Dans ce TD, nous allons continuer sur le thème de la météo. Nous allons utiliser XPath et XSLT comme langage de template pour créer une petite page html à partir du fichier XML généré par openweathermap.

Le fichier dont nous allons partir se trouve ici:

1 - Apprivoisons XPath

On dispose d'un outil qui permet de visualiser graphiquement le résultat d'une expression XPath : Évaluateur XPath (originellement codé par Christophe Jacquet et Cécile Hardebolle).

Donnez les expressions XPath qui permettent de sélectionner les fragments suivants du document :

  • tous les éléments
  • les éléments time
  • les dates (attribut day) des éléments times
  • les éléments humidity dont la valeur est inférieure à 20%
  • les éléments time pour lesquels l'humidité est inférieure à 20%
  • les éléments time pour lesquels la température pendant la journée est au dessus de 5 degrés
  • les dates (attribut day) auxquelles la température pendant la journée est au dessus de 5 degrés

2 - Transformation de documents XML avec XSLT

Nous allons transformer ce document en un document affichant les prévisions dans un format HTML.

Vers du HTML5

Écrire une transformation XSLT qui transforme le fichier forecast.xml en une page web affichant les prévisions données dans le fichier. N'utilisez que quelques données, par exemple:

Vous pouvez les placer dans une liste ou dans un tableau, comme vous préférez.

Pour appliquer la transformation :

  • En local sur votre machine:
    • téléchargez saxon9he.jar et enregistrez-le dans votre dossier de travail
    • en ligne de commande tapez une commande du type :
java -jar saxon9he.jar nom_document.xml nom_transformation.xslt
  • pour enregistrer le résultat dans un fichier, ajoutez à la fin de la ligne précédente une mention du type > fichier_xml_sortie
  • Sur le web:
    • Par exemple ici.

Automatiser la transformation

Votre navigateur parle nativement XSLT. Essayer la manip suivante:

  • Éditez le fichier forecast.xml en lui ajoutant en deuxième ligne, après la bannière <?xml... la ligne
<?xml-stylesheet type="text/xsl" href="transfo.xsl" ?>

en remplaçant transfo.xsl par le nom de votre fichier XSLT.

  • Ouvrez maintenant le fichier XML avec votre navigateur: en principe la feuille de style XSLT est appliquée et le HTML produit s'affiche...

On peut aussi utiliser javascript dans le navigateur pour faire la transformation. Par exemple, si vous faites un appel ajax pour le document XML vous pouvez en suivant faire la transformation:

// les variables :
// - xsl : contient l'arbre DOM du fichier XSLT
// - xml : contient l'arbre DOM du fichier XML a transformer
// - result : contient l'arbre DOM du resultat de la transformation

// Pour IE qui ne fait rien comme tout le monde
if (window.ActiveXObject) {
    result = new ActiveXObject("MSXML2.DOMDocument");
    xml.transformNodeToObject(xsl, result);

// Pour tout le reste du monde:
} else {
    result = new XSLTProcessor();
    result.importStylesheet(xsl);
    result = result.transformToDocument(xml);
}

Finalement, on peut le faire cote serveur... Avec NodeJS il y a comme d'habitude des paquets npm qui le font, par exemple node_xslt.