TreeView

**Pierre FORAZ** · 10/04/2003, 15h52

Bonjour

Est-ce-que quelqu'un sait comment ajouter dynamiquement des items dans un TreeView. En effet, j'ai généré un menu avec XMLRAD et ça marche. Seulement les Items sont dans le fichier xsl. Est-il possible de les mettre dans un fichier xml (qui peut-être par utilisateur comme un profile) et de les importer.

Merci par avance

**Nicolas.Cogi** · 11/04/2003, 14h47

Yep, pas de probleme ! c'est ca la joie de XML/XSL

Alors, c'est parti pour une ptite explication du Treeview.

Le composant Treeview est assez simple : il se compose d'un fichier .js pour le scripting, d'un fichier xsl avec quelques templates et des ressources graphiques pour les branches de l'arbre.

Ce qui nous interesse, c'est le fichier xsl treeview.xsl.
A l'interieur, on va trouver une template name="xslc:Treeview" qui accepte un paramètre Tree. Ce paramètre est un node-set, c'est à dire un fragment de document XML qui va être utilisé pour construire l'arbre.
C'est à partir du contenu de ce node-set que les différents noeuds vont être créés, par un appel récursif sur la template match="Item".

Pour créer dynamiquement des noeuds dans un treeview (on y arrive

), il va falloir créer dynamiquement des éléments <Item> et les passer dans le node-set.
Imaginons qu'on veut afficher sous forme d'arbre la liste des organisations. On a une extraction qui me crée le XML suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ORGS>
  <ORG>
    <ORG_ID>1001</ORG_ID>
    <ORG_NAME>Duschmoll SA</ORG_NAME>
  </ORG>
  ...
<ORGS>

On va créer une <template match="ORG"> qui créera des <Item> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<template match="ORG">
  <Item Cation="{ORG_NAME} HRef="{/document/Aliases/MonProjectDLL}FormORGANIZATION?ORG_ID={ORG_ID}" ImagePath="{$XMLC_PictosPath}Organization.gif">
</template>

On va maintenant appeller cette template à l'intérieur du call-template name"treeview" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<xsl:call-template name="xslc:Treeview">
  <xsl:with-param name="Tree">
    <Item ...>
      <Item ...>
      <Item Caption="Organisations">
        <apply-templates match="/document/ORGS/ORG" />
      </Item>
    </Item>
  </xsl:with-param>
</xsl:call-template>

Ce code XSL va créer un arbre simple avec quelques noeuds directement décrit dans le XSL (les <Item ...> dans l'exemple) et des noeuds créés par la template. Le résultat de cette transformation sera passée au moteur d'affichage du Treeview qui calculera l'arbre correspondant.

Avec ce genre de technique, on commence à avoir un composant réellemetn dirigé par les données : le branches de l'arbre sont créées en fonction du contenu de la base. Si on rajoute une nouvelle organisation dans la base, elle apparaitra automatiquement dans l'arbre. Shazaaam !

Dernier conseil : n'hésite pas à regarder le code des composants fournis avec XMLRAD, à savoir le fichier xslc.xsl, treeview.xsl et les autres. Ca fourmille d'informations et de "best-practices" là-dedans

**Pierre FORAZ** · 14/04/2003, 11h28

Merci pour la réponse mais ce n'est pas exactement ce que je recherche. En fait, pour ce que je veux, imagine que tu génère un menu avec XMLRAD. Tu ouvre le menu.xsl, tu prends tous les <Item Caption=.......>, tu les mets dans un fichier xml que tu importe dans menu.xmlgram. La question est la suivante : comment dans le template treeview faire en sorte de parser correctement tous les <Item ....>.

**Nicolas.Cogi** · 14/04/2003, 12h23

Ca me fait de la peine qu'un post aussi long tombe à coté de la plaque

Pour faire ca, pas de probleme non plus, il te suffit de "copier" les noeuds du document XML vers le node-set. On utilise pour ca <xsl:copy-of>
Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<xsl:call-template name="xslc:Treeview"> 
  <xsl:with-param name="Tree"> 
    <Item ...> 
      <Item ...> 
      <Item Caption="Organisations"> 
        <xsl:copy-of select="/document/Items/Items" /> 
      </Item> 
    </Item> 
  </xsl:with-param> 
</xsl:call-template>

La différence entre copy-of et value-of :
value-of récupère les noeuds type texte d'un élement et la copie en sortie.
copy-of récupère toute la structure (balises, attributs, etc.) d'un élément et la recopie intégralement en sortie.

C'est plus simple donc

**Pierre FORAZ** · 14/04/2003, 14h47

Mais non mais non, ce n'est pas tombé à côté de la plaque. C'était fort intéressant et je pense que ça en intéressera plus d'un.
J'ai bien noté la seconde solution et je l'avais déjà expérimentée. Elle ne fonctionne pas !!

En fait le problème se situe au niveau de l'interprétation de {$XMLC_PictosPath} et de Caption="{/document/Locales/MaVariableMultiLingue}". Le TreeView est bien construit mais sans image, titre, et href.
Si tu as une idée et une solution c'est cool

**Nicolas.Cogi** · 15/04/2003, 15h31

héhé

voui, je vois ce que tu veux dire... Ici, le XSL n'essaye pas d'interpréter le contenu du XML, il en fait juste une copie sans essayer de faire les value-of. Normal, quand on y pense...

Si il s'agit juste pour toi de déplacer les Items du Treeview dans un autre fichier, sans faire du vrai dynamique comme dans la 1ere solution, tu peux utiliser un fichier XSL au lieu d'un XML pour stocker tes Items.

Par exemple :

fichier TreeItems.xsl :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<xsl:stylesheet ...>
  <xsl:template name="DefaultItems">
    <Item Caption="{...}" ... />
    ...
  </xsl:template>
</xsl:stylesheet>

Dans ton fichier xsl principal, tu utilises un <xsl:import href="TreeItems.xsl"/> en haut, et tu appelles ta template dans le paramètre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<xsl:import href="TreeItems.xsl"/>
...
<xsl:call-template name="xslc:Treeview"> 
  <xsl:with-param name="Tree"> 
    <xsl:call-template name="DefaultItems" /> 
  </xsl:with-param> 
</xsl:call-template>

Et zou ! puisque tes items sont maintenant dans un fichier XSL, chargé par l'interpreteur par un import, les <xsl:value-of> fonctionneront correctement.

Si cette solution ne te satisfait pas, il te faudra passer par une grammaire intermédiaire, transformée par une template pour créer les bons Items avec les bonnes valeurs dans les attributs. Ca te permettra d'avoir les éléments dans du XML, de les transformer en éléments <Item> avec les bonnes valeurs dans les attributs et de les passer finallement en paramètre au treeview. A vue de nez, mettre tout ca dans un autre xsl semble plus simple

**Pierre FORAZ** · 17/04/2003, 08h59

Il est clair que je préfère largement la solution xml à la solution xsl. Concernant la grammaire de transformation, je ne vois pas trop comment dans la mesure où c'est au moment du parsage qu'il y a visiblement un problème. Serait-ce trop tôt ?
Une explication ou un petit exemple serait le bienvenu.

Merci

**Nicolas.Cogi** · 17/04/2003, 14h58

ok, ok... un ptit exemple, alors

Il faut que tu découples ta grammaire XML décrivant tes éléments du treeview avec une template xsl qui transforme tes éléments en noeud <Item> correcte. Voilà l'exemple :

document XML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<document>
  ...
  <Nodes>
    <Node>
      <Caption>Microsoft</Caption>
      <Image Path="Pictos">organization.gif</Image>
      <HRef Alias="MonProjetDLL">http://www.microsoft.com</HRef>
    </Node>
    <Node>
      <Caption>Liste complète</Caption>
      <Image Path="Pictos">ListOrg.gif</Image>
      <HRef AddAlias="1">ListORGANIZATION</HRef>
    </Node>
  </Nodes>
</document>

La template qui transforme cette grammaire en Item pour le Treeview :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<xsl:template match="Node">
  <Item Caption="{Caption}">
    <xsl:attribute name="ImagePath">
      <xsl:choose>
        <xsl:when test="@Path = 'Pictos'">
          <xsl:value-of select="$XMLC_PictosPath"/>
        </xsl:when>
        <xsl:when test="@Path = 'Skin'">
          <xsl:value-of select="$XMLC_SkinPath"/>
        </xsl:when>
        <xsl:when test="@Path = 'Skin'">
          <xsl:value-of select="$XMLC_Portal"/>
        </xsl:when>
      </xsl:choose>
      <xsl:value-of select="Image"/>
    </xsl:attribute>
    <xsl:attribute name="HRef">
      <xsl:if test="(@Alias) and (@Alias != '')">
        <xsl:value-of select="/document/Aliases/*[name() = @Alias]"/>
      </xsl:if>
      <xsl:value-of select="Image"/>
    </xsl:attribute>
    <xsl:if test="(Target) and (Target != '')">
      <xsl:attribute name="Target">
        <xsl:value-of select="Target"/>
      </xsl:attribute>
    </xsl:if>
    <!-- Recursion pour la hiérarchie -->
    <xsl:apply-template match="Node"/>
  </Item>
</xsl:template>

Pour lire ca, il vaut mieux faire un copier-coller et lire ca dans un editeur xsl style xslstudio ou xmlspy ou ie.

Pourquoi faire tout ce xsl ? Si tu mets un <xsl:value-of> dans le XML, il ne sera pas interpreté, ce qui doit sembler normal... Quand tu écris dans ton xml un attribut ImagePath="{$XMLC_PictosPath}...", c'est exactement comme si tu écrivais un xsl:value-of, c'est strictement pareil. Les {...} ne sont donc pas interprétées. Tu es donc obligé de découpler ta description XML qui ne contient que des données et de transformer cette grammaire vers la bonne grammaire attendue par le Treeview grâce à une template.

La grammaire choisie, à base de Nodes, Node peut-être remplacé par n'importe quoi (cf. l'exemple ORGS/ORG du début du post). A toi d'écrire la Template xsl qui permet de transformer ta grammaire vers la grammaire du Treeview. Tu remarques qu'on est obligé de passer par des tests pour pouvoir prendre en compte différents cas : chemin d'accès de l'image, si elle est dans un sous-répertoire du Portail, de la skin ou des pictos; chemin du HRef : si c'est une action, quel est l'alias d'application ? etc...

Le dernier point est la récursivité XSL, avec un simple xsl:apply-templates. Le Treeview accepte une hiérarchie d'éléments pour construire son arbre. Pour prendre ca en compte, il suffit de lui fournir des éléments <Item> imbriqués les uns dans les autres. Pour notre transformation, il suffit de dire de répéter la transformation pour tous les sous-éléments Node à l'intérieur d'un Node, ce qui sera récursif et construira la bonne hiérarchie, facilement.

Finallement, pour appeller ton treeview :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<xsl:call-template name="xslc:Treeview"> 
  <xsl:with-param name="Tree"> 
    <xsl:apply-templates match="/document/Nodes/Node" /> 
  </xsl:with-param> 
</xsl:call-template>