Tutoriel: Apprendre les feuilles de style XSL(T)

Publié par Gui dans Développement, Tutoriels, XML

Intermédiaire

xml, xsl, xslt

Le XML est un format très répandu, utilisable dans de nombreuses applications:

  • Site Internet
  • Application Mobile
  • Progiciel
  • Application Flash

Il est donc très intéressant de penser à stocker ses données ou les exporter si celles-ci sont préalablement stockées dans une base de données, dans ce format là.

Mais les données sont alors brutes, sans mise en page particulière. C’est ici qu’intervient XSL(T).

DEMO DOWNLOAD

XSL(T) est un langage de transformation XML qui permet d’extraire les informations contenues dans un fichier XML, soit de manière graphique (vers un affichage HTML le plus souvent) soit de manière texte ou binaire (pour des utilisations tierces).

Nous allons donc voir dans ce tutoriel comment réaliser une page web simple à partir d’un document XML en s’appuyant sur une feuille de style XSL. Nous allons créer un CV en ligne.

Création du fichier XML

Tout d’abord, nous allons créer un fichier XML simple resume.xml avec le contenu suivant :

< ?xml version="1.0" encoding="UTF-8"?>
< ?xml-stylesheet type="text/xsl" href="resume.xsl"?>
<resume>

	<title>Spy</title>

	<identity>
		<firstname>John</firstname>
		<lastname>Doe</lastname>
		<address>
			<street>7, Lombard Street</street>
			<zip>90210</zip>
			<city>Los Angeles</city>
		</address>
	</identity>

	<educations>

		<education from="2003" to="2005">
			<school>Université UCLA</school>
			<degree>Diplôme d'ingénieur en informatique</degree>
		</education>

		<education from="2005" to="2008">
			<school>Université de Boston</school>
			<degree>License de marketing</degree>
		</education>

	</educations>

</resume>

Pour plus d’informations concernant la création  de documents XML, suivez ce lien: Création de document XML.

Nous avons défini dans ce document différents noeuds XML:

  • <resume> correspond à la racine du document
  • <identity> reprend les informations générales sur la personne
  • <educations> correspond aux différentes formations suivies

Vous avez sans doute remarqué la ligne :

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

Celle-ci permet de lier le document XML à une feuille de style XSL(T).

Création de la feuille de style XSL(T)

Nous allons donc créer un fichier resume.xsl et renseigner le type de document dont il s’agit ainsi que du format d’encodage :

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

Ensuite, nous allons informer le navigateur que nous utilisons une feuille de style XSL

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

</xsl:stylesheet>

Cette balise fonctionne comme la balise « html », elle encadre tout le contenu que l’on va mettre dans le fichier.

De la même façon que l’on définir une doctype pour un fichier XHTML, ici nous pouvons définir une doctype pour notre feuille de style :

<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

Maintenant, nous pouvons commencer la transformation/extraction des données XML pour l’afficher en XHTML !

Transformation

Nous allons donc commencer à extraire les données du document XML. Pour cela, nous définissons un noeud template :

<xsl:template match="/">

</xsl:template>

L’attribut match indique que la transformation s’applique à partir de la racine du document XML.

Nous pouvons ensuite ajouter un peu de markup pour habiller la page.

Extraction de valeur

<html>
	<head>
		<title><xsl:value-of select="resume/title"/></title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
	</head>
	<body>
		<div class="resume">

Nous avons extrait le titre de la page à partir du fichier XML via la balise  <xsl:value-of> dont on précise le noeud à partir duquel il doit récupérer l’information select= »resume/title ».

Il est important de toujours préciser le chemin vers la balise concernée depuis la racine du document resume/.

<h2><xsl:value-of select="resume/identity/firstname" /> <xsl:value-of select="resume/identity/lastname" /></h2>
<p><xsl:value-of select="resume/identity/address/street" />, <xsl:value-of select="resume/identity/address/zip" />, <xsl:value-of select="resume/identity/address/city" /></p>

Boucles

Il est possible d’utiliser des boucles en XLS(T). Dans notre exemple, pour afficher les différentes formations, il nous faut parcourir les noeuds contenus dans <educations>.

On peut donc pour ça utiliser la syntaxe suivante :

<xsl:for-each select="resume/educations/education">

</xsl:for-each>

Comme toujours, l’attribut select permet de cibler le noeud qui nous intéresse. Ici, nous allons itérer sur le noeud <education>.

Tri

Nous pouvons également trier selon un attribut grâce à la commande suivante :

<xsl:sort select="@from" data-type="number" order="descending"/>

L’attribut <select> permet de sélectionner le paramètre de tri, qui est dans notre cas l’attribut « from ». On définit que ce paramètre est un nombre data-type= »number » et que l’on tri de manière décroissante order= »descending ».

Conditions

Il est possible de faire des tests conditionnels grâce à la méthode <xsl:choose>.

<xsl:choose>

	<xsl:when test="position() mod 2 = 0">
		<li class="even">From <xsl:value-of select="@from"/> to <xsl:value-of select="@to"/>, <xsl:value-of select="school"/>, <xsl:value-of select="degree"/></li>
	</xsl:when>

	<xsl:otherwise>
		<li class="odd">From <xsl:value-of select="@from"/> to <xsl:value-of select="@to"/>, <xsl:value-of select="school"/>, <xsl:value-of select="degree"/></li>
	</xsl:otherwise>

</xsl:choose>

L’équivalent XSL(T) du if() else() est donc <xsl:when> <xsl:otherwise>.

Ici, nous voulons simplement zébrer la liste des formations, grâce au test modulaire position() mod 2 = 0 qui renvoit 0 ou 1.

Conclusion

Et voilà, notre fichier XML et sa feuille de style sont prêts !

C’est ici pour la demo ou ici pour les sources.

Aller plus loin

4 commentaires

  1. Fall

    Merci Guillaume!!!
    Votre article m’a bcp appris.

    Bonne continuation

    Cordialement

  2. yacin

    wi c formidable mé il ya un probleme incomprenable

    quand je vx modifier le css a la prochaine exécution de la page xml le style ne s’applique meme pas é meme quand j’annule les modifiacations il ne s’applique pas ( j’ai juste tester d’ajouter un espace null part dans le fichier css en considérons que les espaces ne font aucun effet sur le style mé quand j’ai annulé il n’as pas maché comme s’il n »existait po »

    pq ?

  3. マイナチュレ 無添加育毛剤

    Have you ever thought about creating an e-book or guest authoring on other blogs?
    I have a blog based upon on the same topics you discuss
    and would love to have you share some stories/information. I know my viewers would appreciate your work.
    If you are even remotely interested, feel free to shoot me an e mail.

  4. エクオールサプリ

    In fact no matter if someone doesn’t understand afterward
    its up to other visitors that they will assist, so here it
    happens.

Laisser une réponse


Post shadow