Tree View avec XML et XSL

**Drooxy** · 19/04/2003, 07h39

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

**Zarathoustra** · 21/04/2003, 12h22

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é

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

**Drooxy** · 22/04/2003, 08h07

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

Bonne journée
Drooxy

**demo** · 22/04/2003, 10h21

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 :

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

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 :

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

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

A+!

Tree View avec XML et XSL

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager