VII.1 Problématique

Un collectionneur díimages de trains désire créer un petit document XML pour afficher par ordre alphabétique les photos de ces trains ainsi quíune légende. Ce document est finalement proposé sous format HTML sur le web.

Pour corser un peu líexercice la présentation doit se faire en ajoutant un numéro díordre à la légende et en couplant les images par lignes. Lorsque líinternaute clique sur líimage, celle ñci síaffiche dans sa taille díorigine dans une autre fenêtre.

VII.2 Analyse

Le document XML doit proposer pour chaque train :

ÿ Son nom

ÿ Sa photo

On suppose que les images sont au même niveau que le document html final.

VII.3 Le DIT

La gestion est simple. Chaque train va posséder deux attributs :

ÿ nom

ÿ photo

Le DIT (Document Information Tree) est représenté ci-dessous.

AppleMark

VII.4 Réalisation

a. Le document XML

Pour faire simple, la grammaire (DTD) est directement insérée dans le document XML.

Nous allons créer un document XML contenant 4 références de trains.

ÿ La partie entête et DTD

q Le code source

<?xml version="1.0" encoding="ISO8859-1" standalone="yes"?>

<!DOCTYPE TRAINS [

<!ELEMENT TRAINS (train+)>

<!ELEMENT train EMPTY>

<!ATTLIST train

photo CDATA #REQUIRED

nom CDATA #REQUIRED>

q Explications

Nƒ	Explications
1	Entête du document xml indiquant le type de codage utilisé (encoding="ISO8859-1") ainsi que la non présence díune DTD externe (standalone="yes")
2	Déclaration de la DTD interne (<!DOCTYPE) avec líindication de líélément racine de ce document xml (TRAINS). Cette DTD interne se termine à la ligne 8 (]>).
3	Déclaration de líélément TRAINS racine du document. Cet élément contient de 1 à n éléments train (train+). On retrouve cet élément dans la déclaration de la DTD ligne 2.
4	Déclaration de líélément de niveau 2 train. Chaque élément train ne contient pas díélément. Il est vide (EMPTY). Par contre à líélément sont associés deux attributs déclarés aux lignes 5,6 et 7.
5	Déclaration indiquant que líélément train possède un ou plusieurs attributs.
6	Déclaration de líattribut photo qui doit toujours être présent (#REQUIRED) comme composant de líélément train.
7	Déclaration de líattribut nom qui doit toujours être présent (#REQUIRED) comme composant de líélément train.
8	Fin de la déclaration de la DTD (]>).

ÿ Description díun train

q Le code source

</TRAINS>

q Explications

Nƒ	Explications
10	Insertion de líélément racine. Cet élément ne peut être présent quíune seule fois. Il doit être fermé à la fin du document XML (ligne 15).
11	Insertion díun élément train. Cet élément possède deux attributs : ÿ photo qui possède la valeur 4019b.jpg ÿ nom qui possède la valeur BigBoy 4019 Líélément est vide comme líindique la DTD díoù sa fermeture à la fin de la ligne (/>).
15	Fin du document XML avec la fermeture de líélément racine (</TRAINS>).

ÿ Le document XML complet

Ce document décrit 4 trains.

Cela permet de tester et díeffectuer le tri sur le nom indiqué lors de la problématique.

<?xml version="1.0" encoding="ISO8859-1" standalone="yes"?>

<!DOCTYPE TRAINS [

<!ELEMENT TRAINS (train+)>

<!ELEMENT train EMPTY>

<!ATTLIST train

photo CDATA #REQUIRED

nom CDATA #REQUIRED>

</TRAINS>

La validité de ce document xml est testée en utilisant le validateur du W3C.

Vous avez deux possibilités :

ÿ Address : ce choix vous oblige à mettre votre document xml sur internet pour que le validateur puisse y accéder. Si vous possédez une DTD externe vous devez aussi la mettre sur internet et modifier líentête de votre document XML en indiquant líadresse web de cette DTD (Voir exemples suivants).

ÿ Local File : en cliquant sur Browse, vous accédez à votre disque local. Il suffit díaller y chercher votre document XML. Attention, vous ne pouvez avoir de DTD externe dans ce cas.

Si aucune erreur níest détectée, vous devez obtenir un message indiquant que votre document est valide.

b. Le document XSL

ÿ La partie entête

q Le code source

<?xml version="1.0" encoding="ISO-8859-1"?>

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

<xsl:output method="html" indent="yes"/>

q Explications

Nƒ	Explications
1	Code qui débute le document XSL. Souvenez vous quíun document XSL níest rien díautre quíun document XML. Vous retrouvez donc le même début que dans le document XML.
3-4	Déclaration du ´ rôle ª du document, transformation en feuille de style avec líutilisation díune notation NameSpace (espace de noms) xmlns.
5	Indication du type de sortie. Il en existe 3 xml, html et text. En fonction du type de sortie choisie, certains éléments comme les espaces, les balises ne seront pas exactement gérés de la même façon. Par exemple, en sortie html, un élément <BR/> sera transformé en <BR></BR> en sortie xml il restera dans la syntaxe xml <BR/>.

ÿ La première phase de transformation

q Le code source

<xsl:template match="TRAINS">

<TABLE>

<TR>

La page des Trains

Cliquez sur les images pour les agrandir

</TD>

</TR>

<TR>

<xsl:apply-templates select="train">

<xsl:sort select="@nom"/>

</xsl:apply-templates>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

</xsl:template>

q Explications

Nƒ	Explications
7	Cette règle permet de sélectionner un núud, en líoccurrence la racine et díeffectuer des transformations. Cette première sélection permet généralement de générer le code HTML de déclaration de la page HTML. Les éléments qui ne vont pas être répétés (<BODY> Ö). Cette partie de transformation se termine par la fermeture de la balise en ligne 30.
8-20	Génération du code HTML caractéristique díun page HTML. Le résultat provenant des trains étant inséré dans un tableau, la balise TABLE ne doit être dans ce cas présent quíune fois díoù son apparition à ce niveau.
21	Avant de faire líaffichage et la récupération des contenus des trains il est nécessaire díeffectuer un tri. Ce tri doit se placer avant líextraction des contenus díun train sinon il ne peut être fait. En effet une fois descendu dans líarborescence caractérisant un train ce train est déjà sélectionné. Le premier sélectionné par défaut est le premier trouvé dans le document XML. Il faut donc bien trier avant la descente. Cette règle ne peut être incluse que dans une apply-templates. Grâce à cette règle, les núuds train sont sélectionnés. Rappelez vous que lorsque une règle est rencontrée, tous les núuds concernés sont ´ balayés ª. Il va bien y avoir une sélection de tous les núuds, un tri en ensuite le passage aux autres règles.
22	Cette règle permet le tri. Nous sommes au niveau des noeuds train dans líarborescence. Le tri doit se faire sur le nom. Cet élément est un fils direct de líélément train (núud courant à ce moment de la transformation). Il suffit donc de sélectionner pour le tri líélément nom.
23	Cette ligne va de pair avec la ligne 21. Elle est très importante et il faut bien voir sa portée. Elle dit simplement de passer aux autres règles de transformation si il en existe. A ce moment de la transformation, on passe non pas à líinsertion du code de la ligne 24 mais à líapplication de la règle située ligne 32. Le code des lignes24 à 29 ne sera inclus lors de la transformation que si toutes les autres règles sont terminées. On retrouve donc bien ces codes HTML en fin du document html créé. Avant cela vont síinsérer díautres codes html créés par les autres règles.
30	Fin de la règle de transformation débutée ligne 7.

ÿ La deuxième phase de transformation

q Le code source

<xsl:template match="TRAINS/train">

<xsl:number value="position()"/> :

<xsl:value-of select="@nom"/>

<xsl:attribute name="HREF">

<xsl:value-of select="@photo"/></xsl:attribute>

<xsl:attribute name="SRC">

<xsl:value-of select="@photo"/></xsl:attribute>

</IMG>

</A>

<xsl:if test="position() mod 2 = 0">

</xsl:if>

</xsl:template>

q Explications

Nƒ	Explications
32	Cette nouvelle règle va síappliquer sur les núuds fils du núud TRAINS à savoir train. Cíest ce quíindique la partie incluse dans le match. Souvenez vous bien que précédemment la transformation est passée par la règle 1 qui a permis notamment de créer la balise TABLE. Cette règle se termine ligne 48. Important : cette règle va être utilisé autant de fois quíil y a díélément train. Tous les codes qui suivent vont être crées pour chaque élément train rencontré. Dans notre exemple, nous en avons 4.
33-35	Création dans la cellule du tableau des éléments légende en texte vert avec le numéro díordre.
33	On insère le numéro díordre en calculant la position du núud train en cours et ceci après le tri de la règle 1.
35	On ajoute à la légende le contenu de líattribut nom associé à líélément train.
36-43	Insertion de líimage et du lien hypertexte qui permet en cliquant sur líimage de taille définie (200 pixels) díouvrir une autre fenêtre contenant líimage taille réelle. Il níest pas possible de créer directement une balise HTML avec ses options du fait de la présence de caractères XML tels < et >. On peut être tenté díutiliser la syntaxe suivante : <A HREF="<xsl:value-of select=\"@photo\"/>">lien</A> Hélas vous aurez une erreur indiquant que le premier < doit être fermé avant díen ouvrir un deuxième. Il faut donc utiliser la règle xsl:attribute.
36	Insertion du lien hypertexte incluant líoption TARGET pour líaffichage dans une autre fenêtre du lien indiqué dans la partie HREF.
37	Utilisation e la règle xsl:attribute pour insérer lors e la transformation à la balise A (Ancre) líoption HREF qui va contenir líadresse de líimage taille réelle. Cette image se situe au même niveau que le futur fichier HTML.
38	Le nom de líimage est contenu dans líattribut photo. Il est récupéré via la règle xsl:value-of Ö
39	Insertion à líintérieur du lien hypertexte de líimage avec une taille fixe de 200 pixels (option width de la balise IMG). Líoption ALIGN est aussi ajoutée afin que la légende soit alignée par rapport à líimage. Là aussi, líinclusion de líoption SRC doit être faite grâce à la règle xsl:attribute.
40	Insertion de líoption SRC.
41	Ajout de la valeur à líoption SRC. Cette valeur est associée à líattribut photo de líélément courant train.
42	Fermeture de la balise IMG.
43	Fermeture de la balise A.
44-47	Les images doivent apparaître par deux sur une ligne ; Il est donc nécessaire toutes les deux images de passer à la ligne dans la cellule du tableau,
44	La fonction position() rencontrée ligne 33 permet de compter et de numéroter les images affichées. Il suffit donc de faire un test pour savoir si ce chiffre est un multiple de 2. si cíest le cas, il faut passer à la ligne. Si le reste de la division par 2 est 0 le chiffre est bien un multiple de 2 díoù líinsertion du bloc de test.
45-46	Insertion de deux balises BR permettant un saut de ligne. Cette balise est vide. Lors de la transformation, du fait de la méthode demandée (ligne 5), <BR/> est transformé en <BR></BR>.
47	Fin du bloc de test.
48	Fin de la règle 2.

ÿ Fin de la transformation

q Le code source

</xsl:stylesheet>

q Explications

Nƒ	Explications
51	Cette instruction est la dernière du document XSL et elle clos cette transformation.

ÿ Le document XSL complet

<?xml version="1.0" encoding="ISO-8859-1"?>

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

<xsl:output method="html" indent="yes"/>

<xsl:template match="TRAINS">

<TABLE>

<TR>

La page des Trains

Cliquez sur les images pour les agrandir

</TD>

</TR>

<TR>

<xsl:apply-templates select="train">

<xsl:sort select="@nom"/>

</xsl:apply-templates>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

</xsl:template>

<xsl:template match="TRAINS/train">

<xsl:number value="position()"/> :

<xsl:value-of select="@nom"/>

<xsl:attribute name="HREF">

<xsl:value-of select="@photo"/></xsl:attribute>

<xsl:attribute name="SRC">

<xsl:value-of select="@photo"/></xsl:attribute>

</IMG>

</A>

<xsl:if test="position() mod 2 = 0">

</xsl:if>

</xsl:template>

</xsl:stylesheet>

c. Le document html

La transformation est effectuée en utilisant le logiciel Xalan.

Xalan ño train.html train.xml train.xsl

Le résultat de la transformation donne le fichier html qui suit.

Le tri est bien effectué par nom.

<HTML>

<HEAD>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD ALIGN="CENTER">La page des Trains

Cliquez sur les images pour les agrandir

</TD>

</TR>

<TR>

1 : BigBoy 4004

</A>

2 : BigBoy 4019

</A>

3 : TGV eurostar

</A>

4 : TGV sud-est

</A>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

d. Le visuel

Si vous cliquez sur líimage 1 :