Tree View avec XML et XSL

Version imprimable

19/04/2003, 07h39
Drooxy

Tree View avec XML et XSL

Bonjour,

Je souhaiterais produire une page HTML sous format "tree view" (comparable à l'explorateur windows), les valeurs des différents noeuds provenant d'un fichier XML, la transformation étant prise en charge par un fichier XSL...

Quelqu'un peut-il m'aider (ou me dire où je peux trouver des infos sur ce sujet !).

Merci d'avance,
Drooxy
21/04/2003, 12h22
Zarathoustra

alors, là tu ne pouvais pas mieux tomber, j'ai justement fait exactement ce que tu cherches lors d'un stage. L'arbre lui était fait en SVG par contre, je ne sais pas si c ce que tu cherches ???

J'ai également vu la même chose mais faite directement en HTML en utilisant les CSS, et cette solution me parait un peu mieux.

Quant à trouver des infos là dessus, c top secret, désolé :lun:

Plus sérieusement, je ne connais pas d'endroit ou tu pourrais trouver des infos gratuites là-dessus, mais techniquement, ce n'est si dur que ça à faire, c juste que ça prend un certain temps.

Par contre, si tu décide de te lancer là dedans et que tu tombes sur des pbs concret, le forum sera là pour t'aider :wink:
22/04/2003, 08h07
Drooxy

Voilà une réponse qui me fait bien avancer...

:wink:

Bonne journée
Drooxy

Bonjour,
Pour faire un treeview à l'aide du XML+xsl, c'est extrêmement simple!
(dans les exemples qui suivent, je n'ai pas mis les en-tête et le code complet, et ce n'est qu'un exemple, à toi de le compléter)

1- tu crées ta structure arborescente avec ton xml
Ex:tree.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<root>
    <folder id="1" name="premier répertoire">
          <item id="11" name="premier element" link="monlien.htm"/>
          <item id="12" name="deuxième element" link="monlien.htm"/>
     </folder>
    <folder id="2" name="deuxième répertoire">
          <item id="21" name="premier element" link="monlien.htm"/>
          <item id="22" name="deuxième element" link="monlien.htm"/>
     </folder>
</root>

Ensuite, tu mets en forme l'affichage de ton xml à l'aide d'une feuille xsl
Ex:tree.xsl

Code:

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
33
34
35
36
37
 
.....
<body onClick="action();">
  <xsl:apply-templates />
</body>
<xsl:template match="root">
   <xsl:apply-templates/>
</xsl:template>
<xsl:template match="folder">
   <p class="Folder">
   <img src="imgDuFolder.gif" >
      <xsl:attribute name="id">
        <xsl:value-of select="@id"/>
      </xsl:attribute>
   </img>
  </p>
   <div style="Display:none ;margin-top=0px;margin-bottom=0px" >
             <xsl:attribute name="id">
                        Dis_<xsl:value-of select="@id" />
            </xsl:attribute>
            <ol style="margin-left=10px" >
	        <xsl:apply-templates />
            </ol>
    </div>
</xsl:template>
<xsl:template match="item
   <p class="item">
     <img src="imgDeItem >
         <xsl:attribute name="id">
            <xsl:value-of select="@id"/>
         </xsl:attribute>
         <xsl:attribute name="link">
            <xsl:value-of select="@link"/>
         </xsl:attribute>
     <xsl:apply-templates/>
  </p>
</xsl:template>

Après, tu n'as plus qu'à écrire une petite feuille javascript
Ex:tree.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function action()
{
	if (window.event.srcElement.className == "Folder")
	{
                     //j'affiche ou je masque le reste de mon treeview
                     var disp='Dis_'+id;
                    if(window[disp].style.display=='block')
                    {
		window[disp].style.display='none';
                    }
                    else
                    {
                                window[disp].style.display='block';
                     }
                }
                if (window.event.srcElement.className == "Item")
	{
                     //je charge monLien.htm dans la frame voulue
                }
}

Voilà, en espérant avoir pu t'aider !
:wink: A+!