Mes Travaux Pratiques de WSIA
Le TP numéro 3
Ce TP permet de montrer une parte de la puissance qu'offre le langage XML. Ainsi, voyons l'utilité d'un langage comme XSL.
Exercice 1 : Réalisation de notre première feuille de style XSL
La consigne de cet exercice était de créer un fichier XSL permettant de prendre un fichier XML en entrée (typiquement, les fichiers de l'exercice 4 du TP 1) afin de le transformer et d'avoir un certain rendu à l'écran. Ces fichiers XML représentant des arbres avec des feuilles, des branches, etc., nous avons pu créé une véritable foret à l'écran en utilisant le système de "Template" offert par XSL.
Ainsi, pour chaque balise du fichier XML, nous avons créé un Template qui s'y applique. Chacun de ces templates créé alors une boite (un bloc div), dans lequel il affiche une image correspondant à la balise. Ainsi, une balise feuille va être transformée à l'écran en une boite contenant l'image d'une feuille.
Afin de simplifier un peu l'écriture du code, nous avons en outre mêlé à ce code un fichier CSS afin de faire correspondre directement, à une classe précise, une image. Ainsi, il nous a uniquement fallu préciser la classe à laquelle appartient un div. Selon la classe définie, le div met en arrière plan la bon image.
Le code XHTML Strict généré montre en fait que les blocs div sont empilés les dans les autres, un peu à la manière de poupées russes.
Exercice 2 : Allons encore plus loin en XSL
Pour mener à bien cet exercice, il faut récupérer le fichier XML que l'on a fait dans le TP précédent concernant les planètes. A partir de ce fichier, il faut créer une feuille de style XSL qui va permettre de transformer le fichier XML des planètes en un fichier XHTML Strict n'utilisant pas les tableaux.
Le fichier XSL doit aussi :
- faire en sorte que le titre occupe toute la largeur de la page
- afficher une image de la planète en question sur la droite de la page (la source doit être distance, et non locale)
- une zone de texte qui affiche les caractéristiques de la planète, de la même largeur que l'image.
Dans la pratique, on utilise un Template qui va récupérer le nom de la planète courante, et l'afficher en tant que titre 'h2'.
Ensuite, un premier bloc 'div', appelé "description", va contenir toutes les caractéristiques de la planète (qui sont contenues en attribut de la balise 'planète' du fichier XML.
Puis, un second bloc 'div', qui s'occupera du traitement des satellites d'une planète, va effectué un test sur le nombre de satellite. La feuille de style se chargera alors de n'afficher le nombre de satellite et d'anneaux que s'il est supérieur à 0. Autrement, il sera affiché une courte phrase indiquant que la planète courante n'a pas de satellites ou d'anneaux.
Ensuite, un troisième bloc 'div' contiendra l'image de la planète. Les images n'étant pas locale, elles ont été téléchargées, redimensionnées, et uploadée sur le serveur de mon binôme. En outre, cela garantit qu'elles seront toujours accessibles.
Enfin, le fichier XSL sera relié à une feuille de style CSS afin de permettre au code générée d'être XTHML Strict et de respecter les contraintes de l'énoncé. En effet, les blocs 'div' sont définis flottant et le nom de la planète se voit modifié avec le style "letter-spacing"
Exercice 3 : Astérix
Pour cette exercice, et dans le cadre des 50 ans des Drôles de Gaulois, il nous a fallu utiliser la technologie XML afin de mettre en valeur les bandes dessinées d'Astérix. Ainsi nous avons créé un fichier XML contenant toutes les données importantes des BD d'Astérix. On retrouve alors une racine nommée "catalogue". Elle peut contenir des "album". Un album est constitué d'une balise "numéro", d'une balise "adresse_couverture" contenant l'URL où on peut trouver une image de la couverture de l'album courant, une balise "titre", "editeur" et une balise "annee" contenant l'année de parution de l'album.
Pour faire en sorte que le fichier XML ait une grammaire correcte, nous avons créé un fichier XML de définition (XSD).
Enfin, nous avons créé la feuille de style associée (XSL). Elle permet alors de générer le code XHTML Strict correspondant au fichier XML reprenant les données des albums d'Astérix. Elle permet de mettre un album complet dans un premier bloc 'div'. Un second bloc contiendra les caractéristiques de l'album. Il sera contenu dans le premier bloc. Enfin, un troisième bloc contiendra l'image de la couverture et sera, lui aussi, contenu dans le premier bloc.
Zone de téléchargement
- Sources disponibles dans le répertoire du TP 3