There are probably smarter ways of doing it, but for a demo I hacked
together recently, I used a technique like what I show below.
At the moment I'm studying the default stylesheet that IE5 uses
to render XML in the browser because it is a showcase example
of using almost every supported feature of XSL to build a sophisticated
rendering.
My (more simpleton) technique looked like...
Considering an XML document like:
<?xml version="1.0" ?>
<?xml:stylesheet type="text/xsl" href="tree.xsl" ?>
<tree title="Your Itinerary">
<node icon="itinerary.gif" id="1" title="1" open="Y">
<node icon="flight.gif" id="2" title="1.1" open="Y"/>
<node icon="flight.gif" id="3" title="1.2" open="Y"/>
<node icon="city.gif" id="4" title="1.3" open="N">
<node icon="flight.gif" id="5" title="1.3.1" open="Y"/>
<node icon="city.gif" id="6" title="1.3.2" open="Y"/>
</node>
<node icon="flight.gif" id="7" title="2.1" open="Y">
<node icon="flight.gif" id="8" title="2.1.1" open="N">
<node icon="flight.gif" id="12" title="2.1.1.1" open="N"/>
<node icon="flight.gif" id="13" title="2.1.1.2" open="N"/>
<node icon="flight.gif" id="14" title="2.1.1.3" open="N"/>
</node>
<node icon="city.gif" id="9" title="2.1.2" open="N"/>
</node>
<node icon="flight.gif" id="10" title="2.2" open="Y"/>
<node icon="flight.gif" id="11" title="2.3" open="Y"/>
</node>
</tree>
I used the following stylesheet to format an HTML tree (not using DIV's,
but you could extend to use a different technique for the tree that
did use DIV's). The technique I was using for the tree is just using
a "Stretchable" 1x1-pixel gif and <BR> tags so it works on any browser...
The "plus.gif", "minus.gif" and "nothing.gif" are little gifs that look
like the plus sign, minus sign, and leaf node of the Windows Explorer.
The end result of browsing tree.xml, looks like this:
http://www.geocities.com/~smuench/xsl-dev1.gif
Here's the code...
<?xml version="1.0" ?>
<!-- This XSL Stylesheet that transforms <NODE>'s into a DHTML Tree -->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl";>
<xsl:template>
<xsl:apply-templates match="tree"/>
</xsl:template>
<xsl:template match="tree">
<xsl:apply-templates match="node"/>
</xsl:template>
<xsl:template match="node[@open = 'N']">
<img align="absmiddle" src="s.gif" height="1">
<xsl:attribute name="width">
<xsl:eval>(depth(this)-1)*24</xsl:eval>
</xsl:attribute>
</img>
<img align="absmiddle">
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="src">
<xsl:eval>
this.firstChild == null ? "nothing.gif" : this.getAttribute("open") ==
"Y" ? "minus.gif" : "plus.gif"
</xsl:eval>
</xsl:attribute>
</img>
<img align="absmiddle">
<xsl:attribute name="src"><xsl:value-of select="@icon"/></xsl:attribute>
</img>
<xsl:value-of select="@title"/>
<BR/>
</xsl:template>
<xsl:template match="node[@open = 'Y']">
<img align="absmiddle" src="s.gif" height="1">
<xsl:attribute name="width">
<xsl:eval>(depth(this)-1)*24</xsl:eval>
</xsl:attribute>
</img>
<img align="absmiddle">
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="src">
<xsl:eval>this.firstChild == null ? "nothing.gif" :
this.getAttribute("open") == "Y" ? "minus.gif" : "plus.gif"
</xsl:eval>
</xsl:attribute>
</img>
<img align="absmiddle">
<xsl:attribute name="src"><xsl:value-of select="@icon"/></xsl:attribute>
</img>
<xsl:value-of select="@title"/>
<BR/>
<xsl:apply-templates match="node"/>
</xsl:template>
</xsl:stylesheet>
Have fun...
____________________________________________________________________________
Steve | Consulting PM & XML Technology Evangelist | smuench@xxxxxxxxxx
Muench | Java Business Objects Dev Team | geocities.com/~smuench
Get to know JBO at http://javatools/jbo/owa/walkthrough
Do you XML? http://xml.us.oracle.com
--- Begin Message ---
Subject: navigating through recursive defined tree
From: Dietmar Dold <dd@xxxxxxxxxxx>
Date: 02 Dec 98 06:43:42
|
Hi experts,
I was playing around with IE5beta for a while and tried to build a
navigation-screen with XSL. Finally I gave up and build a JavaScript with
400lines. Maybe you can find a solution to my problem in XSl( maybe it`s
simple)
------------------------
aim:
My aim was to produce a DIV for the first hirachie level of the following
XML file. A click on one of the element-texts should bring up another div
with the content of his next (and only the next child-level). And so on.
-------------------------
the (recursive) DTD: // by the way AUSWAHL(German) means CHOICE
<!ELEMENT TEST (AUSWAHL)*>
<!ELEMENT AUSWAHL (#PCDATA|AUSWAHL)*>
------------------------
a sample xml-document:
<?xml:stylesheet type="text/xsl" href="auswahl2.xsl"?>
<!DOCTYPE TEST SYSTEM "auswahl1.dtd">
<TEST>
<AUSWAHL><!-- first Level -->
Belletristik
<AUSWAHL><!-- second Level -->
Architektur und Design
<!-- third Level -->
<AUSWAHL>Architektur und Design, Deutschland</AUSWAHL>
<AUSWAHL>Architektur und Design, Europa</AUSWAHL>
<AUSWAHL>Computergrafik</AUSWAHL>
</AUSWAHL>
<AUSWAHL><!-- second Level -->
Regionen und Epochen
</AUSWAHL>
...
</AUSWAHL>
<AUSWAHL>Schmuck</AUSWAHL>
</TEST>
----------------
the result should be:
first DIV:
"Belletristik"
"Schmuck"
if you click on "Beletristik" the next DIV should appear (without
Serverrequest -> <copy> as solution I guess)
with the choices of:
"Architektur und Design"
"Regionen und Epochen"
if you click on "Architektur und Design" the next DIV and so on and so
on....
"Architektur und Design, Deutschland"
"Architektur und Design, Europa"
"Computergrafik"
----------------
Main Problem:
How can I get all siblings which are "direkt" children of the Element for
example "Belletristik" without getting all descendants? Remember all
Elements are called "AUSWAHL".
Will be an attribute with a logical numeration a solution, like "a0-n)
for the first level, (b0-n) for the second...?
Did someone had the same problems and found a solution?
Sorry for such a long message! ):
Dietmar
XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list
--- End Message ---
