TP 3IF XML, XSL, XQuery, Javascript, DOM 2018-2019

Introduction

Lisez attentivement et suivez les consignes!

Le but de ce TP est de vous initier à la manipulation des documents XML avec des outils dédiés et dans le contexte d'un navigateur web. Vous allez pour cela étudier, valider, modifier et interroger un fichier XML. Pour la première partie du TP, vous allez utilisez l'outil EditiX (disponible dans l'archive Outils pour le TP sur Moodle) et Firefox, pour la deuxième partie essentiellement le navigateur Firefox.

Un site très utile pour le TP: W3Schools (référence et tutoriels sur XML, DTD/Schema, XSL, javascript, ...)

Pour le compte rendu, vous allez créer un fichier B3XXX_TPXML.zip (XXX est votre numéro de binôme) dans laquelle vous allez mettre : un document texte ou html "chapeau" contenant vos réponses commentées aux questions de la première partie (XPath), la DTD modifié, la feuille de style XSL finale, le résultat de la transformation en html, le document réponse à la partie DOM/Ajax, des commentaires sur la feuille de style XSL, ainsi que les réponses à la deuxième partie. Numérotez les réponses et recopiez leurs énoncés. Pour "colorier " vos morceaux de code vous pouvez utiliser le site : http://www.tohtml.com/ ou des bibliothèques de style en javascript. Commencez le fichier texte/html chapeau compte rendu par le numéro de votre binôme ainsi que vos noms et numéros d'étudiant!

Lors de la correction, nous allons copier/coller des fragments de votre compte rendu pour vérifier des expressions XPath, ouvrir le fichier XML pour la partie XSL dans le navigateur (Firefox) et regarder le résultat, ainsi que la page html pour la partie Ajax.

Cette archive est à déposer sur Moodle avant 14h00 le lendemain de la deuxième séance.

Préparation

• Créez un répertoire appelé TPXML sur C:\temp.
• Récupérez le dossier compacté TPXML.zip et copiez son contenu dans le répertoire créé avant.
• Dans ce dossier, vous trouverez :
  • cet énoncé (sujetTP.html).
  • dans le répertoire fichiers contenant :
    • une instance XML (countriesTP.xml) qui contient des informations sur les pays du monde,
    • une DTD pour le document XML (countries.dtd),
    • un fichier HTML (resultatTP.html) qui donne le résultat à obtenir pour la partie XSL,
    • un répertoire ajax contenant :
      • un fichier html PartieAjaxDOM.html, base pour la partie ajax
      • des fichiers xml, javascript, svg et xsl pour la partie ajax
• Prenez le temps de bien observer et comprendre les fichiers XML, javascript et DTD que vous allez manipuler.

Une petite explication des élements (voir la source des données) :

• name
  • common - common name in english
  • official - official name in english
  • native - list of all native names
    • key: three-letter ISO 639-3 language code
    • value: name object
      • key: official - official name translation
      • key: common - common name translation
• country code top-level domain (tld)
• code ISO 3166-1 alpha-2 (cca2)
• code ISO 3166-1 numeric (ccn3)
• code ISO 3166-1 alpha-3 (cca3)
• code International Olympic Committee (cioc)
• ISO 4217 currency code(s) (currency)
• calling code(s) (callingCode)
• capital city (capital)
• alternative spellings (altSpellings)
• infosContinent
• subregion
• list of official languages (languages)
  • key: three-letter ISO 639-3 language code
  • value: name of the language in english
• latitude and longitude (latlng)
• name of residents (demonym)
• landlocked status (landlocked)
• land borders (borders)
• attribute land area in km² (area)

Première partie : XML, DTD, XPath, XSLT

Etape 1 : Exploration de l'instance [XPath]

Dans cette étape, vous allez construire des expressions XPath absolues ou relatives pour sélectionner les noeuds (les balises XML) indiqués. Ces expressions pourront vous resservir (en les adaptant) dans l'étape suivante.

Dans le compte rendu, rappelez les questions avec leur numéro, donnez l'expression XPath correspondant ainsi que quelques lignes du résultat de l'évaluation de l'expression XPath.

Pour tester les expressions XPath, utilisez EditX. Téléchargez le depuis Moodle, décompressez le dans C:\Temp (important!). Lancez le en exécutant run.bat (ou run.sh sous linux) dans le sous réperoire bin. Dans EditX : Ouvrez la boîte de dialogue XPath (XML/XPath view). Entrez votre expression XPath.

1. Donnez les expressions XPath pour sélectionner les éléments suivants:
   1. toutes les capitales
   2. les noms officiels des pays
   3. la superficie de chaque pays
   4. les éléments ayant exactement un attribut
   5. les noms officiels des pays exprimés français, pour ceux qui en ont
   6. les deuxièmes noms natifs officiels des pays
   7. la somme des superficies (area) des pays d'Europe
   8. les pays qui n'ont pas de nom natif
   9. les pays dont la superficie est inférieure à 100 km²
   10. les noms officiels des pays ayant plus de 7 voisins (neighbour)
   11. la position de la France dans le document XML
   12. les noms officiels des royaumes (nom officiel contient "Kingdom")
   13. les langues des noms natifs des pays sans doublons

Etape 2  : Mise à jour de l'instance [XML, DTD]

1. L'instance countriesTP.xml ne correspond pas tout à fait à la DTD countries.dtd. Trouvez les élements qui sont mal déclarés et corrigez/complétez leurs déclarations dans la DTD. Donnez les définitions corrigées.
2. Certains élements enfants de l'élement country sont indiqués avec une occurrence minimale 0 alors qu'ils sont sont présents partout. Trouvez les et modifiez la DTD en conséquence. Donnez la définition modifiée de leurs éléments parent.

Etape 3 : Mise en forme du corpus des pays du monde [XSLT]

Vous allez maintenant produire une feuille de style XSL qui permet la transformation de l'instance du document XML en document HTML. Cette feuille va comprendre des éléments de mise en forme HTML et des commandes XSLT permettant de gérer le contenu. Le fichier HTML généré devra être le plus similaire possible à ce résultat. Tout au long de cette partie, n'hésitez pas à vous inspirer du code source de la page résultat.

Utilisez sous EditiX la fonction File/New/XSL Transformations 1.0 for HTML Output pour créer le fichier feuille de style, sauvegardez-le ensuite sous le nom de pays_du_monde_tableau_3IF.xsl dans le répertoire de votre projet. Vous pouvez utiliser un autre traitement de texte pour modifier votre feuille de style. Testez la systèmatiquement en ouvrant le fichier xml avec Firefox pour voir le résultat!

Voici les caractéristiques attendues de cette feuille de style (recopiez l'en-tête et les premières règles puis inspirez-vous en pour créer les règles suivantes) :

Testez votre feuille de style dans un navigateur, rajoutez dans l'en-tête de votre document XML un appel à la feuille de style que vous allez créer

 <?xml-stylesheet type="text/xsl" href="pays_du_monde_tableau_3IF.xsl"?> 

Lors de la corrections, nous allons ouvrir le fichier countries_TP.xml que vous nous rendez et nous allon regarder le résultat fourni par le navigateur en plus de votre feuille de style.

3.1 En-tête du fichier

L'en-tête de la feuille de style a été créé automatiquement par le système.

<?xml version = "1.0" encoding = "UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Si vous voulez que le résultat s'affiche en HTML, ajouter la ligne :

 <xsl:output method="html" /> 

comme premier élément fils de l'élément <xsl:stylesheet>. Pour afficher le résultat dasn un navigateur sous forme XML, remplacer 'html' par 'xml' (notamment pour les premières questions).

3.2 Contexte HTML du document

On commence par définir un template correspondant à la racine du document (défini par le chemin XPath : " / "). Il débute par les informations HTML qui seront reportées dans le document résultat. On retrouve ainsi la structure d'un document HTML classique. Les templates suivants seront appliqués à l'emplacement de la commande <xsl:apply-templates/ à insérer au bon endroit. Remplacer la chaîne de caractères : moi, mon binôme (B3XXXX) par vos noms et votre numéro de binôme.

<xsl:template match="/"> 
<html> 
 <head> 
    <title> 
    Pays du monde 
  </title> 
 </head> 
 
 <body style="background-color:white;">  
   <h1>Les pays du monde</h1> 
      Mise en forme par : moi, mon binôme (B3XXX)
 </body> 
</html> 
</xsl:template> 

3.3 Affichage des méta données

Le premier template va définir le traitement à apporter à l'élément "metadonnees". Il s'agit ici des instructions html : alignement, taille et couleur de la police.

<xsl:template match="metadonnees">
 <p style="text-align:center; color:blue;">
	Objectif : <xsl:value-of select="objectif"/>
 </p><hr/>
</xsl:template>

3.4 Affichage des informations de base sur les pays

Affichez tous les pays dans un seul tableau.

• Aide sur la syntaxe des tableaux en html :

<table border="3" width="600" align="center">

<tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr>

</table>

Créez une règle (template) pour les élements country affichant une ligne de tableau par pays.

1. Commencez par le nom commun du pays en vert dans la première cellule (<td>..</td>)
2. Rajoutez ensuite entre parenthèses le nom officiel du pays
3. Si le pays a un nom en Français, affichez le en marron
4. Affchez le nom de la capitale dans une seconde cellule
5. a.Dans une troisième cellule, énumérez les noms communs des voisins (quand il y en a). Les voisins sont référencés dans la balise country/borders avec leur code cca3. (générez les virgules entre les noms à l'aide de xsl).
   b. Si le pays n'a pas de voisin et a accès à la mer (landlocked='false'), afiicher le texte : "Île".
6. Dans une quatrième cellule, affichez la latitude et la longitude des pays
7. Dans une cinquième cellule, affichez le drapeau du pays. Les images sont accessibles depuis l'adresse : http://www.geonames.org/flags/x/code_cca2.gif où code_cca2 est à remplacer par le code cca2 du pays en lettres minuscules. Les balises à générer sont de format :

   <img src="http://www.geonames.org/flags/x/fr.gif" alt="" height="40" width="60"> 
   

8. Rajoutez une cellule au début de chaque ligne avec le numéro de pays lors de l'affichage

 

3.5 Séparation des pays par continents et sous-continents

1. Séparez les pays d'abord par contients, puis par sous-continents en générant un tableau séparé pour chaque groupe
2. Pour chaque souscontinent, indiquez son nom et le nombre de pays avant le tableau

3.6 Affichage des statistiques sur les pays

1. Affichez les noms communs des pays ayant 6 voisins
2. Affichez le nom commun du pays ayant le plus court nom commun

Deuxième partie : DOM et ajax

Cette partie a pour but de vous faire découvrir la technologie AJAX. Sur une page HTML des boutons permettent de déclencher des fonctions Javascript: celles-ci vont dynamiquement manipuler des documents XML, notamment la page HTML elle-même, mais aussi charger un document XML, en extraire des informations, appliquer une feuille de style XSL, etc. Les fonctions javascript sont incluses dans le code source de la page HTML ou peuvent être dans un fichier à part.

Le premier bouton ci-dessous appelle la fonction Javascript setNom modifiant le contenu d'une balise <span id="id_nom_a_remplacer"> à partir du contenu du champ texte situé à côté, ayant lidentifiant myText1.

Le deuxième bouton fait appel à une fonction plus complexe en chargeant les fichiers exemples ajax.bib.xml et ajax.bib.xsl, en appliquant la feuille de style au fichier XML, et en extrayant une liste HTML (balise <ul>) du résultat de la transformation qui remplace le contenu de la balise <span id="id_element_a_remplacer">

Le troisième bouton remplace le contenu de la balise <span id="id_nom_a_remplacer">, en récupérant les noms à partir du fichier Employees.xml parcouru en javascript.

Consultez le code source de la page exemple pour comprendre le fonctionnement du code Javascript et l'organisation des éléments HTML concernés. Testez et comprenez le fonctionnement des 3 boutons.

Utilisez les outils de développement de Firefox (bouton F12) pour inspecter les éléments, consultez les messages d'erreur dans l'onglet : Console, exécutez pas à pas le javascript dans l'onglet Débogueur.

Utilisez un éditeur de texte, par exemple Notepad++, Netbeans ou Brackets.io (portable si nécessaire) pour modifier le code source de la page.

Vous trouverez des informations complémentaires sur le site de w3schools.com sur les méthodes DOM en général et sur les méthodes DOM spécifique html

Travail à réaliser

Créez une page web (appelée PartieAjaxDOM.html en vous inspirant de ce fichier (vous pouvez carrément le modifier et le compléter)) contenant les boutons et champs de saisi pour effectuer les actions suivantes :

1. Bouton 1 : modifie la couleur de l'arrière plan de la page en bleu et la couleur du texte du bouton en blanc.
2. Bouton 2 : remet la couleur de l'arrière plan en blanc
3. Bouton 3 / Champ de saisi : affiche le nom officiel et la capitale du pays dont le nom est sélectionné dans le champ de saisie. Chargez le fichier XML countriesTP.xml en ajax. Ecrivez une feuille de style : cherchePays.xsl, qui prend un paramètre NomPays, chargez le en ajax également. Cette feuille de style appliquée au fichier xml : countriesTP.xml retourne les éléments recherchés correspondant qu pays. Utilisez la fonction javascript XSLTProcessor.setParameter pour passer le paramètre à la feuille de style.
4. Bouton 4: charge et afiche le dessin svg contenu dans le fichier : exemple.svg
5. Bouton 5 : rend les éléments du fichier svg "clickables" et affiche la valeur de leur attribut title quand ils sont cliqués (utilisez la méthode addEventListener)
6. Bouton 6 : charge et affiche la carte du monde en svg contenu dans le fichier worldHigh.svg
7. Bouton 7 : rend les pays clickables et affiche leur attribut title au click
8. Bouton 8 : captez l'évènement de passage (mouseover) et sorti (mouseleave) de la souris sur les pays de la carte. Au passage: changez leur couleur et affichez leur : nom, capitale et drapeau dans un tableau au dessus de la carte
9. Bouton 9 : complétez le champ de saisie du bouton 3 avec une fonction d'autocomplétion
10. Proposez une visualisation intéressante mettant en jeu le fichier XML countriesTP.xml , la carte svg worldHigh.svg ainsi que des informations enrichies depuis des services web (par exemple : geonames, dbpedia, ....)