RE: [xsl] stylesheet for tree-like view of an xml (for html or/and pdf)

Subject: RE: [xsl] stylesheet for tree-like view of an xml (for html or/and pdf)
From: "M. David Peterson" <m.david@xxxxxxxxxx>
Date: Thu, 25 Mar 2004 02:21:03 -0700
Here's a simple solution that uses inline CSS and the left margin value
of the margin: property (of the second template, adjusting the first
template will adjust the offset from top, right, bottom, or left of the
container DIV) to determine the indent value for each child node from
there parent (in pixels).  You can use the other values to adjust the
top, right, and bottom margins to expand the distance accordingly from
the DIV(s) within a relative position of each other.  This CSS works on
IE5+, Netscape 7.x, Mozilla 1.3+(could work on previous but Ive never
tested it), and Firebird 0.7+ (again, havent tested it on anything
prior -- could work just fine).  For some reason (surprise, surprise)
Netscape 6.x wants to layer some of the children over there parents (if
this was more than a sample to showcase XSL I would probably care more
but it's not so I dont).

Hope this helps!

<M:D/>

Sample XML:

<?xml version="1.0"?>
<tree>
  <item name="top">
    <item name="child">
      <item name="child"/>
      <item name="child"/>
      <item name="child"/>
    </item>
    <item name="child">
      <item name="child">
        <item name="child"/>
        <item name="child"/>
        <item name="child">
          <item name="child">
            <item name="child"/>
            <item name="child">
              <item name="child"/>
              <item name="child"/>
            </item>
          </item>
          <item name="child"/>
        </item>
      </item>
      <item name="child"/>
      <item name="child"/>
    </item>
  </item>
</tree>

Sample XSL:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
version="1.0">
<xsl:output method="html" indent="yes"/>
<xsl:template match="tree">
  <div style="position:absolute top:0px left:0px">
    <div style="position:relative; float:left; clear:both; margin:0px
0px 0px 0px">
      <xsl:apply-templates select="item"/>
    </div>
  </div>
</xsl:template>
  
<xsl:template match="item">
  <div style="position:relative; float:left; clear:both; margin:0px 0px
0px 5px">
    <font color="red">
      <xsl:value-of select="@name"/>
      <xsl:apply-templates/>
    </font>
  </div>
</xsl:template>
</xsl:stylesheet>

Sample Result:

<div style="position:absolute top:0px left:0px">
  <div style="position:relative; float:left; clear:both; margin:0px 0px
0px 0px">
    <div style="position:relative; float:left; clear:both; margin:0px
0px 0px 5px">
      <font color="red">top
    <div style="position:relative; float:left; clear:both; margin:0px
0px 0px 5px">
          <font color="red">child
      <div style="position:relative; float:left; clear:both; margin:0px
0px 0px 5px">
              <font color="red">child</font>
            </div>
      
            <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
              <font color="red">child</font>
            </div>
      
            <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
              <font color="red">child</font>
            </div>
    
          </font>
        </div>
    
        <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
          <font color="red">child
      <div style="position:relative; float:left; clear:both; margin:0px
0px 0px 5px">
              <font color="red">child
        <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
                  <font color="red">child</font>
                </div>
        
                <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
                  <font color="red">child</font>
                </div>
        
                <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
                  <font color="red">child
          <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
                      <font color="red">child
            <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
                          <font color="red">child</font>
                        </div>
            
                        <div style="position:relative; float:left;
clear:both; margin:0px 0px 0px 5px">
                          <font color="red">child
              <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
                              <font color="red">child</font>
                            </div>
              
                            <div style="position:relative; float:left;
clear:both; margin:0px 0px 0px 5px">
                              <font color="red">child</font>
                            </div>
            
                          </font>
                        </div>
          
                      </font>
                    </div>
          
                    <div style="position:relative; float:left;
clear:both; margin:0px 0px 0px 5px">
                      <font color="red">child</font>
                    </div>
        
                  </font>
                </div>
      
              </font>
            </div>
      
            <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
              <font color="red">child</font>
            </div>
      
            <div style="position:relative; float:left; clear:both;
margin:0px 0px 0px 5px">
              <font color="red">child</font>
            </div>
    
          </font>
        </div>
  
      </font>
    </div>
  </div>
</div>

-----Original Message-----
From: Jonny Pony [mailto:jonnypony666@xxxxxxxxxxx] 
Sent: Thursday, March 25, 2004 1:03 AM
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
Subject: [xsl] stylesheet for tree-like view of an xml (for html or/and
pdf)

Hi,

I'm looking for a stylesheet that displays my xml in a tree-like view
for 
html or/and pdf output.
Guess it is somehow recursive, but I don't know where to start.

Thanks
Jonny

_________________________________________________________________
Wu_ten Sie, da_ Sie Ihren Hotmail-Posteingang auch |ber den MSN
Messenger 
abrufen kvnnen? http://www.msn.de/messenger Jetzt kostenlos downloaden
und 
einfach testen!

Current Thread