Ce TD correspond à ce tuto.
Code de Livraison : H9E5
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:
- http://api.openweathermap.org/data/2.5/forecast/daily?q=Orsay,fr&appid=22e21ef649526ef2b1be4db6d2b0857d&mode=xml&units=metric&lang=fr
- Une copie se trouve ici si le lien ne marche pas.
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émentstimes
- 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:
- La température
- L'icone.
- Le code est utilisé comme suit: http://openweathermap.org/img/w/10d.png
- L'humidité
- La couverture nuageuse
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.
- Avec Firefox, il faut mettre la valeur
fileprivacy.file_unique_origin
àFalse
dansabout.config
- 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.transformToFragment(xml, window.document); }
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.