RE: [xsl] Container HTML around recursive collection

Subject: RE: [xsl] Container HTML around recursive collection
From: "Chris Bayes" <Chris@xxxxxxxxxxx>
Date: Wed, 20 Jun 2001 09:22:36 +0100
David,
Have a look on my site in the Tutorials/How To Do This section it does
something similar to what you want. Make sure you check the XSLT stylesheet
and not the XSL one.

Ciao Chris

XML/XSL Portal
http://www.bayes.co.uk/xml


>-----Original Message-----
>From: owner-xsl-list@xxxxxxxxxxxxxxxxxxxxxx
>[mailto:owner-xsl-list@xxxxxxxxxxxxxxxxxxxxxx]On Behalf Of
>divaqs@xxxxxxxxx
>Sent: 20 June 2001 08:24
>To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
>Subject: [xsl] Container HTML around recursive collection
>
>
>Hi XSL-List,
>
>I am afraid that I am a newbie to the list. After browsing your
>archives and FAQ it appears you are the people to come to with my
>question. Please include my email address in your responses
>(divaqs@xxxxxxxxx).
>
>I am attempting to write some recursive XSL to iterate through XML
>containing site navigation data. The reason it is recursive is to
>allow for unlimited levels of sub-menus.
>
>The issue I am struggling with is how to enclose my collections of
>items within their own DIV HTML. For such knowledgeable people as
>yourselves this may seem like a simple problem that is easily
>solved, but this is something I have been struggling with for most
>of today. I really would appreciate any direction you might have.
>
>An outline of the intended XSL functionality is:
>  A) Build first level of items
>  B) If first level item has child items then call DIV template
>  C) DIV template creates submenu DIV and lists child items by
>calling Item template for childnode
>  D) Child items are created in item template
>  E) If Child item has its own child items then recursively call
>DIV template again
>
>Resulting HTML is hoped to look something like this:
><Master Table>
>  <Level 1 Table>
>    Item
>  </Level 1 Table>
>  <Level 1 Table>
>    Item with childnodes
>  </Level 1 Table>
>    <DIV>
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>    </DIV>
></Master Table>
>
>Actual Resulting HTML looks something like this:
><Master Table>
>  <Level 1 Table>
>    Item
>  </Level 1 Table>
>  <Level 1 Table>
>    Item with childnodes
>  </Level 1 Table>
>    <DIV>
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>    </DIV> <---------------------This should not be here
>    <DIV> <---------------------This should not be here
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>    </DIV>
></Master Table>
>
>HELP!!!! I am desperate and extremely frustrated.
>
>Here is a copy of the XSL:
>
><?xml version="1.0" encoding="iso-8859-1"?>
><xsl:stylesheet version="1.0"
>xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
>
>  <!-- Begin Parent Table and TableRow -->
>  <xsl:template match="/">
>  <TABLE class="menu" id="leftnav" border="0" cellpadding="0"
>cellspacing="0" style="background-color:#deefff;" width="146px">
>    <xsl:attribute name="onmouseout">if
>(document.readyState=='complete') if
>(!leftnav.contains(window.event.toElement))
>{removePopup(this);}</xsl:attribute>
>    <TR valign="top">
>      <TD width="5"><IMG src="/images/Trans.gif" height="7"
>width="5" /></TD>
>      <TD class="menuTD" valign="top">
>        <!-- Begin Call Tier1 Template -->
>          <xsl:call-template name="Tier1">
>            <xsl:with-param name="item" select="globalmenu/menu/item" />
>          </xsl:call-template>
>        <!-- End Call Tier1 Template -->
>      </TD>
>    </TR>
>  </TABLE>
>  </xsl:template>
>  <!-- End Parent Table and TableRow -->
>
>  <!-- Begin the Tier1 Template -->
>  <xsl:template name="Tier1">
>    <xsl:param name="item" />
>    <xsl:for-each select="$item">
>      <TABLE>
>      <!-- Set Table Attributes -->
>      <xsl:attribute name="ID">ID_<xsl:value-of select="@id"
>/></xsl:attribute>
>      <!-- Children Conditionals -->
>      <xsl:attribute name="class"><xsl:choose>
>        <xsl:when test="./item">menuBar</xsl:when>
>        <xsl:otherwise>InactiveMenuBar</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseover"><xsl:choose>
>        <xsl:when test="./item">rollon(this);
>popup(ID_<xsl:value-of select="@id" />);</xsl:when>
>        <xsl:otherwise>rollon(this);</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseout"><xsl:choose>
>        <xsl:when test="./item">if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) &amp;&amp; !DIV<xsl:value-of
>select="./item/@id" />.contains(window.event.toElement))
>{rolloff(this);cancelPopup();</xsl:when>
>        <xsl:otherwise>rolloff(this); cancelPopup();</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <!-- URL Conditional -->
>      <xsl:attribute name="onclick"><xsl:if test="@url !=
>''">javascript:location.href='<xsl:value-of select="@url"
>/>'</xsl:if></xsl:attribute>
>      <!-- Begin Test for Name -->
>      <xsl:choose>
>        <xsl:when test="@name != ''">
>          <TR>
>            <TD width="5"><img src="/images/Trans.gif" height="1"
>width="5" border="0" /></TD>
>            <TD align="left" width="100%"
>class="menuBarFont"><xsl:value-of select="@name" /></TD>
>            <xsl:if test="./item">
>              <TD width="20" align="RIGHT"><img id="arrow"
>src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
>            </xsl:if>
>          </TR>
>        </xsl:when>
>        <xsl:otherwise>
>          <TR><TD><BR /></TD></TR>
>        </xsl:otherwise>
>      </xsl:choose>
>      <!-- End Test for Name -->
>    </TABLE>
>    <!-- Call SubTemplate 'DIV' (If children exist) -->
>      <xsl:if test="./item">
>        <xsl:for-each select="./item">
>        <xsl:call-template name="DIV">
>          <xsl:with-param name="item" select="." />
>        </xsl:call-template>
>        </xsl:for-each>
>      </xsl:if>
>    <!-- End Call SubTemplate 'DIV' -->
>    </xsl:for-each>
>  </xsl:template>
>  <!-- End Tier1 Template -->
>
>  <!-- Begin Item Template -->
>  <xsl:template name="Item">
>    <xsl:param name="item" />
>    <xsl:for-each select="$item">
>      <TABLE>
>      <!-- Set Table Attributes -->
>      <xsl:attribute name="ID">ID_<xsl:value-of select="@id"
>/></xsl:attribute>
>      <!-- Children Conditionals -->
>      <xsl:attribute name="class"><xsl:choose>
>        <xsl:when test="./item">SubMenu</xsl:when>
>        <xsl:otherwise>Inactive</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseover"><xsl:choose>
>        <xsl:when test="./item">rollon(this);
>popup(ID_<xsl:value-of select="@id" />);</xsl:when>
>        <xsl:otherwise>rollon(this);</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseout"><xsl:choose>
>        <xsl:when test="./item">if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) &amp;&amp; !DIV<xsl:value-of
>select="./item/@id" />.contains(window.event.toElement))
>{rolloff(this);cancelPopup();</xsl:when>
>        <xsl:otherwise>if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) )
>{rolloff(this);cancelDelay()</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <!-- URL Conditional -->
>      <xsl:attribute name="onclick"><xsl:if test="@url !=
>''">javascript:location.href='<xsl:value-of select="@url"
>/>'</xsl:if></xsl:attribute>
>      <!-- Begin Test for Name -->
>      <xsl:choose>
>        <xsl:when test="@name != ''">
>          <TR>
>            <TD width="5"><img src="/images/Trans.gif" height="1"
>width="5" border="0" /></TD>
>            <TD align="left" width="100%"
>class="menuBarFont"><xsl:value-of select="@name" /></TD>
>            <xsl:if test="./item">
>              <TD width="20" align="RIGHT"><img id="arrow"
>src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
>            </xsl:if>
>          </TR>
>        </xsl:when>
>        <xsl:otherwise>
>          <TR><TD><BR /></TD></TR>
>        </xsl:otherwise>
>      </xsl:choose>
>      <!-- End Test for Name -->
>    </TABLE>
>    <!-- Call SubTemplate 'DIV' (If children exist) -->
>      <xsl:if test="./item">
>        <xsl:for-each select="./item">
>        <xsl:call-template name="DIV">
>              <xsl:with-param name="item" select="." />
>        </xsl:call-template>
>        </xsl:for-each>
>      </xsl:if>
>    <!-- End Call SubTemplate 'DIV' -->
>    </xsl:for-each>
>  </xsl:template>
>  <!-- End Item Template -->
>
>  <!-- Begin DIV Template  -->
>  <xsl:template name="DIV">
>    <xsl:param name="item" />
>    <DIV width="90" class="floatingMenu" name="floatingMenu"
>style="POSITION:absolute;Z-INDEX:15;LEFT:30px;TOP:100px;DISPLAY:none;">
>      <xsl:attribute name="ID">DIV<xsl:value-of
>select="./item/@id" /></xsl:attribute>
>      <xsl:attribute
>name="onmouseout">if(document.readyState=='complete'){if(!leftnav.c
>ontains(window.event.toElement)&amp;&amp;!DIV<xsl:value-of
>select="./item/@id"
>/>.contains(window.event.toElement)){removePopup(this);}if(!DIV<xsl
>:value-of select="./item/@id"
>/>.contains(window.event.toElement)){rolloff(DIV<xsl:value-of
>select="@id" />);}}</xsl:attribute>
>        <!-- Call SubTemplate 'Item' (If children exist) -->
>          <xsl:for-each select=".">
>          <xsl:call-template name="Item">
>                <xsl:with-param name="item" select="." />
>          </xsl:call-template>
>          </xsl:for-each>
>        <!-- End Call SubTemplate 'Item' -->
>    </DIV>
>  </xsl:template>
>  <!-- End DIV Template -->
>
></xsl:stylesheet>
>
>What is happening is that rather then the collection of menu items
>(each in their own table) being all enclosed within the DIV, the
>items instead have a DIV around each of them.
>
>Here is some example XML:
><globalmenu>
>   <menu name="Foo Menu" url="">
>      <item id="1" url="" name="Foo Information">
>        <item id="1_1" url="10025overview.asp" name="Overview" />
>        <item id="1_2" url="10025req.asp" name="Foo Requirements" />
>        <item id="1_3" url="10025faq.asp" name="Downloadable FAQs" />
>        <item id="1_4" url="10025info.asp" name="Foo Information" />
>        <item id="1_5" url="10025related.asp" name="Related Foo" />
>        <item id="1_7" url="10025features.asp" name="Foo Features" />
>      </item>
>      <item id="2" url="" name="Foo Tools">
>        <item id="2_1" url="/tools.asp?dirID=Pleasure" name="Pleasure" />
>        <item id="2_2" url="/tools.asp?dirID=Anti-Foo" name="Anti Foo" />
>     </item>
>   </menu>
></globalmenu>
>
>Please, please, I really could use some insight on how to get this to work.
>
>Thanks
>David S.
>
>
> XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
>
>


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Current Thread