XSL pour visualiser arbre XML sous forme de tableau en HTML

**mattmat** · 26/03/2003, 11h48

Salut !

Je cherche à créer une feuille de style XSL qui affiche (en HTML) n'importe quel document XML sous forme d'un arbre "visuel" (en utilisant des tableaux HTML par ex).

Un exemple...
A partir du XML suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="style4.xsl"?>
  <parents>
    <enfant1>
      <petitenfant11/>
      <petitenfant12/>
    </enfant1>
    <enfant2/>
    <enfant3>
      <petitenfant31/>
    </enfant3>
  </parents>

on obtiendrait dans le navigateur qqchose comme ça :

Voici le code xsl que j'au fait :

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
 
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
 
 
	<xsl:template match="*">
		<table width="100%" align="center" border="1">
			<tr bgcolor="coral">
				<td align="center">
					<xsl:attribute name="colspan"><xsl:value-of select="count(child::*)"/></xsl:attribute>
					<xsl:value-of select="name()"/>
				</td>
			</tr>
 
			<tr bgcolor="#9CCDA9">		
				<xsl:for-each select="child::*">
					<td align="center" valign="top">
					<table width="100%" align="center" border="1">
						<tr bgcolor="coral">
							<td align="center">
							<xsl:attribute name="colspan"><xsl:value-of select="count(child::*)"/></xsl:attribute>
							<xsl:value-of select="name()"/><xsl:apply-templates/></td>
						</tr>
						<tr></tr>
					</table>
 
					</td>
				</xsl:for-each>
			</tr>
 
		</table>
	</xsl:template>	
</xsl:stylesheet>

mais ca ne marche pas térrible...

Il s'agit quelque part de refaire le feuille de style par défaut de IE.

Si quelqu'un a déjà fait ça ou aurait des idées?

Grand merci d'avance !
matt

**abubu** · 26/03/2003, 16h21

Arf, exercice amusant, merci ;-)

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
38
 
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" encoding="Windows-1252" />
	<xsl:template match="/*">
		<html>
			<body>
				<table align="center" border="1">
					<tr>
						<td><xsl:value-of select="name()"/></td>
					</tr>
					<tr>
						<xsl:apply-templates select="*"/>
					</tr>
				</table>
			</body>
		</html>
	</xsl:template>
	<xsl:template match="*">
		<td>
			<xsl:choose>
				<xsl:when test="*">
					<table align="center" border="1">
						<tr>
							<td><xsl:value-of select="name()"/></td>
						</tr>
						<tr>
							<xsl:apply-templates select="*"/>
						</tr>
					</table>
				</xsl:when>
				<xsl:otherwise>
					<xsl:value-of select="name()"/>
				</xsl:otherwise>
			</xsl:choose>
		</td>
	</xsl:template>
</xsl:stylesheet>

**mattmat** · 26/03/2003, 19h34

C'est moi qui te remercie, je me prend la tête depuis hier dessus !!!
Je me rend compte que je suis loin d'être bien au clair avec xsl...mais j'ai décidé de lire ("XSLT fondamental" de Philippe Prix, il paraît que c'est très bien !....ou alors "XSLT programmer's reference, 2nd edition de Michael Kay)

Dans le code de cet "exercice agréable", j'ai encore quelques soucis avec les "collspan" dans le tableau pour que les noeuds ayant des enfants apparaîssent dans une cellule qui prend toutes la largeur du tableau.
j'y travaille !

Je vais essayer d'y ajouter les attributs et de rendre l'abre le plus ergonomique possible avec peut être des + et - pour déplier l'arborescence du document xml, de même que la feuille de style par défaut d'IE.
Je mettrais le code à disposition ici (euh si j'y arrive évidemment

) pour ceux que ça interesse.

en gros ça permet de visualiser la structure d'un document xml d'une manière plus agréable que le code source (un peu à la gridview d'XMLspy mais en html)

Et pendant que j'y suis, je le mettrai (encore plus tard) sous forme de formulaire de manière à éditer directement le document XML à partir de cette vue...avec possibilité d'ajouter ou de supprimer des noeuds (tout en respectant une dtd ou un schéma spécifique évidemment) !

enfin...j'essayerai

**abubu** · 27/03/2003, 08h09

Quand ça marchera, poste le résultat :-D

**mattmat** · 28/03/2003, 10h55

Voici la première étape :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" encoding="Windows-1252"/>
 
	<xsl:template match="/*">
		<html>
 
		<style type="text/css">
		.FERME {background-color:#BBBBCC; font-family: Verdana; font-size: 8pt; cursor:pointer;}
		.OUVERT { background-color:#EEF3FB; font-style:blod;font-family: Verdana; font-size: 8pt; cursor:pointer;}
		.DERNIER { font-style:blod;font-family: Verdana; font-size: 8pt;}
		.VALEURNOEUD { background-color:#FFFFCC; font-family: Verdana; font-size: 8pt;}
		.ATTRIBUT {color:#999999;}
		</style>
 
 
		<script language="javascript">
			function affiche_cache(objet){
			ObjetCible=objet.parentNode.nextSibling;
			if (ObjetCible.style.display=="none"){
			    ObjetCible.style.display="block";
			    objet.className="OUVERT";
			      }
			else{    
			    ObjetCible.style.display="none";
			    objet.className="FERME";
			    }
			}
		</script>
 
			<body>		
				<table width="100%" align="center" border="1">
					<tr>
						<td width="100%" align="center" class="OUVERT" onclick="javascript:affiche_cache(this);">
							<xsl:attribute name="colspan"><xsl:value-of select="count(child::*)"/></xsl:attribute>
							<b><xsl:value-of select="name()"/></b>
	                				(<span class="ATTRIBUT"><xsl:for-each select="@*"><b><xsl:value-of select="name()"/></b> : <i><xsl:value-of select="."/></i>  </xsl:for-each></span>)    
                  				</td>
					</tr>
					<tr>
						<xsl:apply-templates select="*"/>
					</tr>
				</table>
			</body>
		</html>
	</xsl:template>
 
 
	<xsl:template match="*">
		<td valign="top" bgcolor="white">
			<xsl:choose>
 
				<xsl:when test="*">
					<table width="100%" align="center" border="1">
						<tr>
							<td width="100%" align="center" class="FERME" onclick="javascript:affiche_cache(this);">
								<xsl:attribute name="colspan"><xsl:value-of select="count(child::*)"/></xsl:attribute>
								<b>	<xsl:value-of select="name()"/></b>
								 (<span class="ATTRIBUT"><xsl:for-each select="@*"><b><xsl:value-of select="name()"/></b> : <i><xsl:value-of select="."/></i>  </xsl:for-each></span>)
							 </td>		
						</tr>
						<tr style="display:none">
							<xsl:apply-templates select="*"/>
						</tr>
					</table>
				</xsl:when>
 
				<xsl:otherwise>
					<div class="DERNIER">
					<b><xsl:value-of select="name()"/></b>						
					 (<span class="ATTRIBUT"><xsl:for-each select="@*"><b><xsl:value-of select="name()"/></b> : <i><xsl:value-of select="."/></i> </xsl:for-each></span>)
					 </div>
					 <div class="VALEURNOEUD"><xsl:value-of select="."/></div>
         			</xsl:otherwise>
 
			</xsl:choose>
		</td>
	</xsl:template>
</xsl:stylesheet>

A tester sur n'importe quel document XML.

J'aurais aimer qu'il n'y ait pas de "mémoire" de ce qui est déplier/replier : c'est-à-dire que si je déplis tous les noeuds et qu'ensuite je referme le noeud racine (par ex), alors lorsque je déplierai à nouveau le noeud racine, ses enfants ne seront pas dépliés...
c'est un peu la galère à coder !
dans la fonction affiche_cache je voulais ajouter dans le "else"un truc du genre :

Code :

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

1
2
3
 
objetCible.children[1].style.display="none"
(ou childNode pour Netscape)

mais ça marche pas du tout

Sinon, j'aimerai tout simplement un bouton qui déplit tout l'arbre d'un coup, mais c'est pareil j'ai essayer un code qui ne marche pas non plus...

Peut-être que ma fonction affiche_cache n'est pas des plus judicieuse (je devrait plus utiliser XSL et les capacités de XPath)

Bref, appel aux bonnes âmes !

Je vais essayer de me pencher sur le problème d'édition du XML directement dans cet affichage...
Je vous tiens au courant

XSL pour visualiser arbre XML sous forme de tableau en HTML

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager