[XSL] Chapitre 1 - Première approche

[XSL] Chapitre 1 - Première approche - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [XSL] Chapitre 1 - Première approche (/showthread.php?tid=1718)

[XSL] Chapitre 1 - Première approche - Roworll - 06-09-2007

Cela fait plusieurs fois que j'interviens sur le forum en parlant de XML et de XSLT.

Apparemment, peu de gens connaissent et ou utilisent cette technologie (pourtant validée par le W3C fin 1999).
Je vais donc essayer de vous présenter un peu mieux ce langage en m'appuyant sur les quelques connaissances que je possède.

XSLT, c'est quoi

XSLT veut dire eXtensible Stylesheet Language Transformations.
C'est un langage fonctionnel de transformation XML, les documents XSLT étant eux même des documents XML.

Basiquement, XSLT permet de mettre en forme des documents XML.
En général, le résultat donnera un document XHTML, affichable dans un navigateur.

XSLT inclus également un petit language d'interrogation des fichiers XML nommé XPath. Xpath permet d'extraire certaines parties du document XML et de faire des traitements dessus via XSLT.

Voila pour les quelques définitions.
(Il est conseillé à ceux qui ont déja attrapé mal à la tête de prendre une aspirine avant de continuer)

De quoi ai-je besoin pour faire du XSLT

A la base, un simple éditeur de texte et un navigateur capable de faire des transformations XSL suffit.
Avec ça, vous pourrez commencer à expérimenter le XSL.

Les avantages du XSL

Séparation des données et du rendu.
XSL prend en entrée des données brutes au format XML et les mets en page.
Plus besoin de modifier son code PHP (avec les risques que cela implique) lorsque l'on souhaite réorganiser les données sur une page. En modifiant le XSL, on peut modifier toute la mise en page sans toucher au reste.
Moins gourmand en bande passante
les fichiers XSL se mettent naturellement en cache sur les postes client (comme les fichiers js ou css).
Avec un analyseur de flux HTTP, c'est flagrant.
J'avais une page qui pesait 36Ko générée à partir de PHP seul.
En mettant en place ma procédure XML/XSL, j'en suis arrivé à un fichier XSL de 30Ko et un fichier XML généré par PHP de 18 Ko.
Lorsque la page est chargée la première fois, le serveur envoie 30Ko + 18Ko soit 48Ko.
Si je réactualise la page, je ne charge plus que la partie dynamique (le XML généré par PHP) pour un total de 18Ko seulement car le fichier XSL est en cache. Sur des pages accédées souvent, le gain en bande passante est impressionnant au final.
Moins de traitements effectués par PHP
Avantage non négligeable. Plus besoin de travailler la mise en page dans le code PHP. Que ce soit directement ou par le biais d'un moteur de template, toute la partie affichage est gérée par le client. C'est autant de puissance économisée et utilisable pour autre chose. De plus, XSL est capable de faire des boucles, des tests, des tris sur les fichiers XML. Ce sont autant de traîtements qui pourront soulager votreserveur PHP
Les Templates
XSL utilise un système de templates assez intéressant.
Le premier type de template permet d'appliquer des des transformations XSL sur certains noeuds du document XML.
Le deuxième type de template ressemble à s'y méprendre à un appel de fonction (avec ou sans paramètres évidemment) ce qui est inestimable pour afficher des éléments qui se retrouvent souvent sur le site (entêtes/pieds de page/menus/...). Utilisé avec la capacité d'import/inclusion de fichiers externes XSL, cela permet une grande modularité.

Les désavantages du XSL

Evidemment, il y en a.

Apprendre un nouveau "langage"
Etape obligatoire, pour faire du XSL, il faut apprendre certaines choses. Les instructions XSL et XPath sont incontournables.
Plus de travail
Si la tâche est simplifiée pour la partie PHP, il faut mettre en place la couche XSL.
Cela implique plus de fichiers à gérer et plus d'espace disque consommé.
Pas supporté correctement par tous les navigateurs
Et oui, il y a encore des réfractaires. Rassurez vous, pour les quelques irréductibles, il reste la possibilité de faire la transformation XSL via PHP.
Pas de variables dynamiques.
Même si XSL possède un système de variables, il n'a pas dans sa version 1.0 la possibilité de faire des variables dynamiques (a=a+1). Jusque là, cela ne m'a pas dérangé.

Apprendre par l'exemple

Un exemple étant souvent bien plus efficace que de longues explications, entrons directement dans le vif du sujet.

Nous allons partir d'un petit fichier XML basique, non optimisé, contenant quelques informations.
On compliquera par la suite.
Le fichier contient la description d'une troupe d'aventuriers avec l'ID du joueur, son nom, sa classe, sa race et ses compétences.

Voici un exemple pour un joueur unique

Code PHP :
<?php 

<joueur>

    <id>4</id>

    <nom>Altinae</nom>

    <classe>Voleur</classe>

    <race>Humain</race>

    <competences>

        <competence>

            <nom>Crochetage</nom>

            <niveau>2</niveau>

        </competence>

        <competence>

            <nom>Pièges</nom>

            <niveau>3</niveau>

        </competence>

        <competence>

            <nom>Epée Courte</nom>

            <niveau>3</niveau>

        </competence>

        <competence>

            <nom>Armure Légère</nom>

            <niveau>2</niveau>

        </competence>

    </competences>

</joueur>

Le fichier complet est visible ici

Maintenant, il faut préparer le fichier de mise en forme XSL.
Voici son contenu.

Code PHP :
<?xml version="1.0" encoding="UTF-8"? >

<!--<? /*ceci est juste un faux tag PHP (<?) pour permettre la colorisation du code*/ -->

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

<xsl:template match="/">

<html>

<body>

<table cellpadding="2" cellspacing="0" border="1">

    <tr>

        <th>ID</th>

        <th>Nom</th>

        <th>Classe</th>

        <th>Race</th>

        <th>Compétence</th>

        <th>Niveau</th>

    </tr>

    <xsl:for-each select="/page/joueur">

        <tr>

            <td valign="top"><xsl:value-of select="id"/></td>

            <td valign="top"><xsl:value-of select="nom"/></td>

            <td valign="top"><xsl:value-of select="classe"/></td>

            <td valign="top"><xsl:value-of select="race"/></td>

            <td>

                <xsl:for-each select="competences/competence">

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

                </xsl:for-each>

            </td>

            <td>

                <xsl:for-each select="competences/competence">

                    <xsl:value-of select="niveau"/><br />

                </xsl:for-each>

            </td>

        </tr>

    </xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

A première vue, cela ressemble fort à un fichier HTML normal excepté les balises qui commencent par <xsl:
Ces balises vont être interprétées par votre navigateur pour faire la mise en page.

Maintenant, analysons le fichier XSL.

Comme expliqué plus haut, une feuille XSL doit respecter le format XML.
On commence donc par la déclaration adéquate

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

Il faut ensuite prévenir que le document est une feuille de style XSL.
<xsl Confused

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

Ensuite, on rentre dans le vif du sujet.
<xsl:template match="/page">
L'élément <xsl:template> définit un modèle à appliquer que la partie du fichier XML spécifié par l'attribut match.
Ici, on veut travailler sur tout le document donc on part de la racine de celui-ci "/"

Les éléments contenus à l'intérieur de la balise <xsl:template> contiennent du HTML qui sera renvoyé à l'écran.

On commence a préparer l'entête du tableau avant d'arriver au moment ou on doit afficher le contenu du fichier XML.
<xsl:for-each select="/page/joueur">
Cette instruction permet de parcourir tous les élements du fichier XML spécifié dans l'attribut select.
Ici, on demande à parcourir tous les noeuds "joueur" placés sous noeud "page".

Il faut ensuite afficher les informations contenues dans le XML. Cela se fait au moyen de l'instruction xsl:value-of
<xsl:value-of select="id"/>
l'attribut select permet de spécifier les valeurs à afficher.
On demande ici à XSL de renvoyer le contenu du noeud "id" placé dans le noeud courant.
Je vous rappelle que nous sommes actuellement en train de parcourir les noeuds "joueur" qui contiennent tous un noeud fils "id".
On fait la même chose pour le nom, la classe et la race.

On continue en faisant la liste des compétences et de leur niveau.
<xsl:for-each select="competences/competence">
On recommence alors une boucle sur les noeuds "competence" du noeud "joueur" en cours.
La première sert à afficher la compétence, la deuxième le niveau.

Chaque boucle XSL doit être terminée par une balise </xsl:for-each>.

Le document lui même doit être fermé correctement dans le respect des règles XML
</xsl:template>
</xsl Confused

tylesheet>

Le lien entre le XML et le XSL se fait via PHP par un simple code

Code PHP :
<?php

$xml='<?xml version="1.0" encoding="iso-8859-1" ?>';

$xml.='<?xml-stylesheet type="text/xsl" href="xsl/tuto_xsl_1.xsl"?>';

$xml.=file_get_contents('xml/tuto_xsl_1.xml');

header('content-type: text/xml');

echo $xml;

?>

Fichiers utilisés pour ce tutorial
Fichier XML
Fichier XSL
Résultat

RE: XSL : Chap 1 - Première approche - orditeck - 05-10-2007

L'aide pour ce tutoriel ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=2586