JeuWeb - Crée ton jeu par navigateur
[XSL] Chapitre 2 - Attributs, tests et tris - 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 2 - Attributs, tests et tris (/showthread.php?tid=1719)

[XSL] Chapitre 2 - Attributs, tests et tris - Roworll - 06-09-2007

Continuons la découverte du XSL avec un petit chapitre pour traiter de plusieurs choses
  • Les attributs dans le fichier XML
  • Les tests en XSL
  • définir un attribut HTML via XSL.
  • Les Tris
Le premier tutorial utilisait un fichier XML avec ce format:
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>

Maintenant, nous allons simplifier le fichier XML en utilisant les attributs.
Après un peu de travail, on en arrive à ce modèle
Code PHP :
<?php 

<joueur id="4" nom="Altinae" classe="Voleur" race="Humain">

    <competences>

        <competence nom="Crochetage" niveau="2"/>

        <competence nom="Pièges" niveau="3"/>

        <competence nom="Epée Courte" niveau="3"/>

        <competence nom="Armure Légère" niveau="2"/>

    </competences>

</joueur>
Moins de texte, plus compact... que du mieux donc.
Le fichier complet est visible ici.

Pour récupérer la valeur d'un atributs XML, il suffit de faire précéder son nom par un @
Ainsi, si je suis sur un noeud "joueur", <xsl:value-of select="@nom"/> me renverra son nom.

Il serait aussi intéressant de faire une petite colorisation de la liste, disons une ligne sur deux.
Nous pouvons travailler pour ce faire avec les tests XSL et les fonctions XPath

Un test XSL ressenble à ça
<xsl:if test="mettre_ici_la_condition">
... informations à afficher ...
</xsl:if>

Il n'y a pas de "else" en XSL. Par contre, pour les tests multiples, il existe un "case"/"otherwise"

Si je veux colorier une ligne sur deux, je dois savoir si je suis sur une ligne paire ou impaire.
La fonction XPath position() va m'aider à le faire.
Position() renvoie l'index du noeud en cours dans l'arbre ou il se trouve.
Mod renvoie le modulo entre deux chiffres.

<xsl:if test="position() mod 2 = 0"> renverra vrai une ligne sur deux.

Reste a mettre à jour l'attribut HTML
<xsl:attribute> permet de définir les attributs HTML à la volée.
Dans l'exemple qui m'intéresse, je veux mettre l'arrière plan en gris, une ligne sur deux.
Je dois donc spécifier le background-color du style de mon tag TR

Cela se fait comme ceci.
<xsl:attribute name="style">background-color:lightgrey;</xsl:attribute>

Cette instruction doit être placée juste après mon tag TR.

Enfin, pour finir cet exercice, je souhaite trier les compétences par ordre alphabétique, histoire de faire joli.
J'utilise pour cela xslConfusedort qui permet de trier les données à l'intérieur d'un xsl:for-each
xslConfusedort doit être placé juste après xsl:for-each.
Pour trier sur plusieurs critères à la fois, on peut mettre plusieurs xslConfusedort l'un après l'autre.

Dans certains cas, il est nécessaire de spécifier si on tri des dates, des nombres, des chaines de caractère et dans quel ordre.
Les attributs order et data-type sont là pour ça.
Donc, pour trier par nom, je dois mettre juste après ma boucle sur les compétences
<xslConfusedort select="@nom" data-type="text" order="ascending"/>
(ne pas oublier de le mettre dans le deux boucles pour la cohérence des données.

En prenant compte des informations et restrictions spécifiées au dessus, mon fichier XSL ressemble maintenant à
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>

            <!--// je fais ici mon test sur le N° du noeud -->

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

                <!--// je définis mon attribut de style -->

                <xsl:attribute name="style">background-color:lightgrey;</xsl:attribute>

            </xsl:if>

            <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">

                    <!--// Un petit tri pour organiser les données -->

                    <xsl:sort select="@nom" data-type="text" order="ascending"/>

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

                </xsl:for-each>

            </td>

            <td>

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

                    <!--// Même tri pour la cohérence -->

                    <xsl:sort select="@nom" data-type="text" order="ascending"/>

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

                </xsl:for-each>

            </td>

        </tr>

    </xsl:for-each>

</table>

</body>

</html>



</xsl:template>

</xsl:stylesheet>

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

RE: XSL : Chap 2 - Attributs, tests et tris - orditeck - 05-10-2007

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