Il est temps de réellement mettre en pratique vos connaissances sur les transformations XSLT dans un TP.
Le sujet
L'énoncé
Dans ce TP, le travail demandé consiste à transformer un document XML comportant un répertoire téléphonique en un document HTML dont le rendu final doit être le suivant :
Comme vous pouvez le constater sur la capture d'écran ci-dessus, il vous faudra également styliser le document HTML à l'aide d'un peu de CSS en respectant les règles suivantes :
Le nom et le prénom d'une personne sont des titres de catégories 1. L'adresse d'une personne doit être écrite en italique.
Les entêtes des listes des numéros de téléphone et des adresses e-mails sont des titres de catégories 2. Les listes sont des vraies listes HTML.
La couleur de fond est bleue pour un homme et rose pour une femme.
Le document XML
Le document XML à transformer est le suivant : Code : XML
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <repertoire>
<!-- John DOE -->
<personne sexe="masculin">
<nom>DOE</nom>
<prenom>John</prenom>
<adresse>
<numero>7</numero>
<voie type="impasse">impasse du chemin</voie>
<codePostal>75015</codePostal>
<ville>PARIS</ville>
<pays>FRANCE</pays>
</adresse>
<telephones>
<telephone type="fixe">01 02 03 04 05</telephone>
<telephone type="portable">06 07 08 09 10</telephone>
</telephones>
<emails>
<email type="personnel">john.doe@wanadoo.fr</email>
<email type="professionnel">john.doe@societe.com</email>
</emails>
</personne>
<!-- Marie POPPINS --> <personne sexe="feminin">
<nom>POPPINS</nom>
<prenom>Marie</prenom>
<adresse>
<numero>28</numero>
<voie type="avenue">avenue de la république</voie>
<codePostal>13005</codePostal>
<ville>MARSEILLE</ville>
<pays>FRANCE</pays>
</adresse>
<telephones>
<telephone type="professionnel">04 05 06 07 08</telephone>
</telephones>
<emails>
<email type="professionnel">contact@poppins.fr</email>
</emails>
</personne>
<!-- Batte MAN -->
<personne sexe="masculin">
<nom>MAN</nom>
<prenom>Batte</prenom>
<adresse>
<numero>24</numero>
<voie type="avenue">impasse des héros</voie>
<codePostal>11004</codePostal>
<ville>GOTHAM CITY</ville>
<pays>USA</pays>
</adresse>
<telephones>
<telephone type="professionnel">01 03 05 07 09</telephone>
</telephones>
</personne> </repertoire>
Comme à chaque fois, je vous fais part de ma solution !
La transformation XSLT
Code : XML <?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" encoding="UTF-8" doctype-public="-//W3C//DTD HTML 4.01//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd" indent="yes" /> <xsl:template match="/"> <html> <head><title>Mon répertoire téléphonique</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
<xsl:for-each select="repertoire/personne">
<xsl:choose>
<xsl:when test="@sexe = 'masculin'">
<xsl:call-template name="homme">
<xsl:with-param
name="personne" select="." />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="femme">
<xsl:with-param
name="personne" select="." />
</xsl:call-template> </xsl:otherwise> </xsl:choose> </xsl:for-each> </table> </body> </html> </xsl:template>
<xsl:template name="homme">
<xsl:param name="personne" />
<tr>
<td class="homme">
<xsl:call-template name="afficherPersonne">
<xsl:with-param name="personne"
select="$personne" /> </xsl:call-template> </td> </tr> </xsl:template>
<xsl:template name="femme">
<xsl:param name="personne" />
<tr>
<td class="femme">
<xsl:call-template name="afficherPersonne">
<xsl:with-param name="personne"
select="$personne" />
</xsl:call-template>
</tr>
</xsl:template>
<xsl:template name="afficherPersonne">
<xsl:param name="personne" />
<h1>
<xsl:value-of select="$personne/nom" />
 
<xsl:value-of select="$personne/prenom" />
</h1>
<xsl:call-template name="afficherAdresse">
<xsl:with-param name="adresse" select="$personne/adresse" />
</xsl:call-template>
<xsl:if test="count($personne/telephones) != 0">
<xsl:call-template name="afficherTelephones">
<xsl:with-param name="telephones"
select="$personne/telephones" />
</xsl:call-template>
</xsl:if>
<xsl:if test="count($personne/emails) != 0">
<xsl:call-template name="afficherEmails">
<xsl:with-param name="emails" select="$personne/emails" />
</xsl:call-template>
</xsl:if>
</xsl:template>
<xsl:template name="afficherAdresse">
<xsl:param name="adresse" />
<p class="adresse" >
<xsl:value-of select="$adresse/numero" />
 
<xsl:value-of select="$adresse/voie" />
<br/>
<xsl:value-of select="$adresse/codePostal" />
 
<xsl:value-of select="$adresse/ville" />
<br/>
<xsl:value-of select="$adresse/pays" />
</p>
</xsl:template>
<xsl:template name="afficherTelephones">
<xsl:param name="telephones" />
<h2>Numéros de téléphones :</h2>
<ul>
<xsl:for-each select="$telephones/telephone">
<xsl:call-template name="afficherTelephone">
<xsl:with-param name="telephone" select="." />
</xsl:call-template>
</xsl:for-each>
</ul>
</xsl:template>
<xsl:template name="afficherTelephone">
<xsl:param name="telephone" />
<li>
<xsl:value-of select="$telephone/@type" /> : <xsl:value- of select="$telephone" />
</li>
</xsl:template>
<xsl:template name="afficherEmails">
<xsl:param name="emails" />
<h2>Adresses Emails :</h2>
<xsl:for-each select="$emails/email">
<xsl:call-template name="afficherEmail">
<xsl:with-param name="email" select="." />
</xsl:call-template>
</xsl:for-each>
</ul>
</xsl:template>
<xsl:template name="afficherEmail">
<xsl:param name="email" />
<li>
<xsl:value-of select="$email/@type" /> : <xsl:value-of
select="$email" />
</li>
</xsl:template> </xsl:stylesheet>
Comme vous pouvez le constater, la transformation que j'ai choisie est basée sur la capture de l'élément racine du document XML puis sur l'appel de différents templates par la fonction <xsl:call-template /> auxquels je fais passer les paramètres nécessaires au rendu HTML. Il ne s'agit bien évidemment pas de LA solution unique et un résultat identique peut être atteint en choisissant d'utiliser la fonction <xsl:apply-templates />.