Représentation arbre sous client léger - behavior

L'arbre XML et XSL

Cette dernière partie nécessite quelques pré-requis : XML, XSL, CSS et PHP. En effet, les exemples qui suivent vont nous permettre de représenter notre arbre au format XML et, en lui appliquant une transformation XSL, afficher du code HTML comme les premiers exemples de cet article. Nous verrons par la suite à quoi nous sert le PHP.

Principe

Nous définissons un format XML pour représenter notre arbre et chacun des noeuds. Dans notre exemple chaque noeud sera représenté dans un fichier XML différent portant l'id du noeud comme nom de fichier. Une transformation XSL unique permettra de transformer chacun des noeuds en code HTML pour le présenter sur un navigateur. Une feuille de style sera associée au fichier HTML pour rendre l'arbre un peu plus sympathique.
Cette fois-ci notre fichier "htc" récupérera l'id du noeud "cliqué" et ira charger le fichier XML correspondant pour l'insérer et l'afficher.
En fait la fonction de chargement n'ira pas directement chercher le fichier XML correspondant mais toujours la même page PHP en lui passant l'id du noeud en paramètre. Nous utilisons le PHP car il possède un analyseur XSLT capable de générer du code HTML à partir d'un fichier XML et XSL. Il est bien évident que tout autre language possédant les mêmes méthodes peut être utilisé comme JSP par exemple.

Voici une partie de notre arbre au format XML. Tout d'abord la racine de l'arbre qui sera la page principale : 


<?xml version="1.0" encoding="utf-8"?>
<Xtree Entete='OUI' Nom='Arbre Principale'>
<node id="P1" Img1="close.gif" Img2="open.gif" Nom="Pere1" />
<node id="P2" Img1="close.gif" Img2="open.gif" Nom="Pere2" />
<node id="P3" Img1="close.gif" Img2="open.gif" Nom="Pere3" />
<node id="P4" Img1="close.gif" Img2="open.gif" Nom="Pere4" />
<node id="P5" Img1="close.gif" Img2="open.gif" Nom="Pere5" />
</Xtree>

Puis le premier fils : 


<?xml version="1.0" encoding="utf-8"?>
<Xtree Entete='NON' Nom='Arbre Fils'>
<document id="F1.1.1" Img0="doc.gif" Img1="close.gif" Img2="open.gif" Nom="Doc 1.1.1" />
<document id="F1.1.2" Img0="doc.gif" Img1="close.gif" Img2="open.gif" Nom="Doc 1.1.2" />
</Xtree>

Le fichier "htc" est modifié pour appeler cette fois-ci notre page PHP en lui passant en paramètre l'id du noeud. A noter que la page appelée est la même que celle dans laquelle on se trouve : on utilise en fait toujours la même page pour charger le code manquant d'où le code suivant (window.document.location.href -> la page courante). 


oDownload.startDownload(window.document.location.href + '?node='+imgTag.id, onDownloadDone);

Le fichier XSL permet donc de transformer le code XML en HTML. Le but de ce sujet n'est pas de faire un cours de XSL donc je ne m'attarderai pas sur le code de ce fichier. Je le met à disposition tout de même mais retenez simplement qu'il parse les différents fichiers XML et analyse les noeuds et attributs de ceux-ci pour créer le bon HTML. Par exemple le fait que le noeud "<Xtree>" possède l'attribut Entete égal à OUI va indiquer au XSL qu'il faut écrire l'entête du fichier HTML. 


...
<xsl:template match="Xtree">
    <xsl:choose>
        <xsl:when test="@Entete[.='OUI']">
            <HTML>
                <HEAD>
                    <LINK rel="stylesheet" href="style.css" />
                    <LINK rel="stylesheet" href="toc.css" />
                    <style>IMG {behavior: url(insert.htc);}</style>
                </HEAD>
                <BODY>
                    <ul>
                        <li>
                            <p>
                                <xsl:attribute name="align">center</xsl:attribute>
                                <xsl:value-of select="@Nom"/>
                            </p>
                        </li>
                        <xsl:apply-templates/>
                    </ul>
                </BODY>
            </HTML>
        </xsl:when>
        <xsl:otherwise>
            <xsl:apply-templates/>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>
...

De même que pour le fichier XSL, je ne m'attarderai pas sur la page PHP. Elle récupère en argument l'id du noeud et appelle la méthode de génération de HTML grâce à un analyseur XSLT en lui passant en argument le fichier XSL et le bon fichier XML. S'il n'y a pas d'argument "node" en paramètre on va chercher la racine de l'arbre. 


/* Initialisation des arguments sour forme de fichiers */
$arguments = array(
	'/_xsl' => file_get_contents('arbre.xsl'),
	'/_xml' => file_get_contents($node)
);

/* Traitement du document xml avec une transformation xsl et Récupération du résultat en html */
$result = xslt_process($xh, 'arg:/_xml', 'arg:/_xsl', NULL, $arguments);

/* Ecriture du résultat */
echo $result;

Exemples

Voici les sources complètes de cet exemple :

- l'arbre XML principal : voir
- le fichier htc : voir
- le fichier XSL : voir
- la page dynamique PHP : voir
- l'exemple : voir