TP 5

XML — Licence Pro BDISE — 6 janvier 2017

Préambule

Le but de la séance est de produire plusieurs feuilles de styles pour transformer du XML laid en une jolie page HTML.

Première transformation

De XML (laid) vers XML (beau)

On considère le fichier hockey.xml, qui respecte une certaine DTD. Le but de cette partie est de construire une feuille XSLT qui le transforme en un document XML tel que celui-ci. (Une DTD est disponible.)

  1. Fichier et préambule.
    1. Créer un nouveau fichier nommé hockey_beautifier.xsl.
    2. Y mettre l'entête <?xml...>.
    3. Y mettre les balises xsl:stylesheet et xsl:output.
      Attention: on ne produit pas du html mais du xml (version 1.0).
    4. Ajouter à xsl:output l'adresse où vous avez enregistré la DTD.
    5. Ajouter à xsl:output l'option indent="yes", qui permet que le XML produit soit correctement indenté.
    6. Mettre une balise xsl:template pour la racine qui affiche un petit texte (type "Hello world!") dans un élément XML.
    7. Tester la transformation: xsltproc -o beautiful_hockey.xml hockey_beautifier.xsl hockey.xml
    8. Tester la validation (qui devrait échouer): xmllint --valid --loaddtd beautiful_hockey.xml > /dev/null
    9. Effacer le contenu (bidon) de la template.
  2. Observer dans les documents XML d'où dans la source proviennent les informations présentes dans la cible.
    1. Regarder d'abord les informations de infomatch.
    2. Regarder ensuite les informations des trois autres parties: equipes, deroulement, resultat.
    3. En déduire le contenu de la template pour la racine.
  3. Procéder de même pour les sous-éléments. Quelques points délicats sont détaillés ci-après.
  4. Les incident:
    1. Pour traiter les incident, on les sépare selon leur attribut incident_code. On traite d'un coté les buts, de l'autre les cartons, on oublie (pour l'instant) les assistants buteurs, et on mettra le reste dans les autreevenement (cf. la DTD; même s'il n'apparaissent pas ceci est une bonne pratique de penser au cas "autre").
      On va gérer chaque cas (but, carton) avec une template différente, qui pourra donc être appelée par xsl:call-template.
    2. Construire la template pour les cartons.
    3. Construire la template pour les buts. Dans ce cas, il va falloir aller récupérer les éventuels assistants. On s'aidera pour ça de l'attribut elapsed qui est le même lors de l'incident du but et de l'assistant.
  5. Le score: bien noter qu'on ne veut que le score final.
  6. Produire des templates avec des messages d'erreur pour les nœuds qui ne devraient jamais être le nœud courant.
  7. Tester et valider le résultat.

Seconde transformation

De XML (beau) vers HTML (moyennement beau)

On désire maintenant produire une page HTML avec le contenu de la page XML simplifiée. Vous trouverez ici un exemple du résultat d'une telle transformation.

  1. Fichiers, préambules, inclusions:
    1. Créer un nouveau fichier nommé hockey_html.xsl.
    2. Y mettre l'entête <?xml...>.
    3. Y mettre les balises xsl:stylesheet et xsl:output.
      Attention: on revient à du html.
    4. Récupérer le fichier datetime_fr_templates.xsl et l'inclure dans votre fichier (en fils de xsl:stylesheet): <xsl:include href="datetime_fr_templates.xsl"/>
    5. Observer le contenu du fichier datetime_fr_templates.xsl: il contient deux templates utilisables (via un xsl:call-template) sur un nœud contenant une date au format ISO 8601: YYYY-MM-DD HH:mm:ss, les transformant dans un format de date ou d'heure en français.
    6. Dans la suite, pour tester la transformation: xsltproc -o hockey.html hockey_html.xsl beautiful_hockey.xml
  2. Écrire le contenu de la feuille de style XSLT.
    On prendra soin de faire en sorte que les éléments suivants se retrouvent sur la page HTML:
    • Le titre de la page provient de l'affiche du match.
    • Le nom des deux équipes en titre de plus haut niveau (h1).
    • En sous titres: le tournoi (nom et saison), la date du match.
    • Ensuite, vient la composition des équipes.
    • Puis le résumé du match avec la date de chaque évènement (ne pas oublier de traiter le cas des potentiels autreevenement).
    • Le score final, avec un moyen de savoir qui a gagné (par exemple, le vainqueur en premier).
    • Enfin, et seulement à la fin, viennent les métadonnées de autreinfo
  3. Tester et valider le résultat.

Habillage

De HTML (moyennement beau) vers HTML+CSS (beau)

  1. Ajouter dans feuille de style XSLT suffisament d'attributs class et id pour permettre un habillage CSS. On peut au besoin ajouter des <div> et <span>.
  2. Écrire une CSS (simple) pour cette page.
  3. Ajouter à la feuille de style XSLT la ligne <link rel="stylesheet" href="hockey.css"/> (dans le head) afin que le code généré lise la CSS.