Solved

tree menu

Posted on 2002-04-10
12
4,137 Views
Last Modified: 2012-06-21
Hi all,

I want to design a tree menu on my site, I am getting menu details in a XML file/string/Island at the
starting of page now I want to transform it in a html & javascript code that can open pages in right
side frame. XML is more over like this.

<root>
<menu1 caption="master">
 <submenu1 caption="master1" url="master1.jsp">
 <submenu2 caption="master2" url="master2.jsp">
</menu1>
<menu2 caption="transaction">
 <submenu1 caption="receipt">
  <subsubmenu1 caption="add" url="receiptadd.jsp">
  <subsubmenu1 caption="modify" url="receiptmodify.jsp">
 </submenu1>
 <submenu2 caption="payment" url="payment.jsp">
  <subsubmenu1 caption="add" url="paymentadd.jsp">
  <subsubmenu1 caption="modify" url="paymentmodify.jsp">
 </submenu2>
</menu2>
</root>

please give me some working example with code for javascript or XSL.

Thanks
Vijay
0
Comment
Question by:vijayneema
12 Comments
 
LVL 27

Expert Comment

by:BigRat
ID: 6933614
One of the problems I have had with this sort of thing is that a client side transformation results in HTML Javascript code being set into a DIV element which does not seem to update document.all and then dosn't work.
   I resorted to server side transformation sending the HTML/Javascript into the appropiate frame.
   I also only use one element type namely menu which either contains text or further menu elements (but not both) which simplifies the design.
   If these dependancies are acceptable to you we shall proceed further, but I must say, in line with b1xml2's policy, that seventeen points is a bit small for such a question with working code.

HTH
0
 
LVL 1

Author Comment

by:vijayneema
ID: 6933642
BigRat,

now its ok... i think
explain me more what you want to say ...

Vijay
0
 
LVL 1

Author Comment

by:vijayneema
ID: 6941142
Hi, Bigrat

Points are increased now,
Help me now, its urgent

Vijay
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6942136
vijayneema, in the absence of BigRat, I have the following questions,

1. Do you wish client-side transformation?
2. Is your tree menu similar to that found in msdn.microsoft.com/library (left menu) ?
3. What is your client browser scope ?
0
 
LVL 1

Author Comment

by:vijayneema
ID: 6943931
hi, bixml2

here are you answers
1. yes, i want client-side transformation.
2. My menu is moreover similar as msdn, my requirement is my bean will generate a XML depends upon user(login) and my JSP or Javascript function have to create the tree menu that doesn't require server trip to refresh.
3. We are stick to use IE5.5 & above.

Thanks
Vijay
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6944329
Method 1 - widest possible range using old namespace

loading the XML Document inside the HTML FRAME element
<FRAME SRC="tree.xml" >

=========
XML Document (tree.xml)
============
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="tree.xsl" type="text/xsl"?>
<root>
<menu1 caption="master">
<submenu1 caption="master1" url="master1.jsp" />
<submenu2 caption="master2" url="master2.jsp" />
</menu1>
<menu2 caption="transaction">
<submenu1 caption="receipt">
 <subsubmenu1 caption="add" url="receiptadd.jsp" />
 <subsubmenu1 caption="modify" url="receiptmodify.jsp" />
</submenu1>
<submenu2 caption="payment" url="payment.jsp">
 <subsubmenu1 caption="add" url="paymentadd.jsp" />
 <subsubmenu1 caption="modify" url="paymentmodify.jsp" />
</submenu2>
</menu2>
</root>

XSLT Document (tree.xsl)
=============
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title>Tree Menu Through MSIE Transformation</title>
<script language="javascript" defer="defer">
<![CDATA[
var oImgExpand = new Image();
oImgExpand.src = "/experts-exchange/images/expand.gif";
var oImgContract = new Image();
oImgContract.src = "/experts-exchange/images/collapse.gif";
function toggleMenu(el) {
 var eImg = el.children[0];
 var ePar = el.parentElement;
 var eLast = ePar.children[ePar.children.length - 1];
 if (eLast.style.display == "none") {
  eLast.style.display = "inline";
  eImg.src = oImgContract.src;
 } else {
      eLast.style.display = "none";
      eImg.src = oImgExpand.src;
 }
 return (el.href == "#" ? false : true);
}
]]>
</script>
<style type="text/css">
<xsl:comment>
body {font-family:Verdana;letter-spacing:0.3mm;font-variant:small-caps;font-size:8pt;background:#fffffe;}
a {text-decoration:none;color:#4682b4;}
a:hover {text-decoration:underline;color:#800000;}
div.root, div.container, div.item {padding-left:10px;}
</xsl:comment>
</style>
</head>
<body>
<div class="root">
<xsl:apply-templates select="root/*" />
</div>
</body>
</html>
</xsl:template>
<xsl:template match="*">
 <div class="item">
 <a>
 <xsl:attribute name="href">
 <xsl:choose>
 <xsl:when test="@url"><xsl:value-of select="@url" /></xsl:when>
 <xsl:otherwise>#</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>
 <xsl:if test="@url">
 <xsl:attribute name="target">left</xsl:attribute>
 </xsl:if>
 <xsl:attribute name="onclick">return toggleMenu(this);</xsl:attribute>
 <img hspace="4" border="0">
 <xsl:attribute name="src">
 <xsl:choose>
 <xsl:when test="*">/experts-exchange/images/expand.gif</xsl:when>
 <xsl:otherwise>/experts-exchange/images/leaf.gif</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>
 </img><xsl:value-of select="@caption" /></a>
 <xsl:if test="*">
 <div class="container" style="display:none;"><xsl:apply-templates select="*" /></div>
 </xsl:if>
 </div>
</xsl:template>
</xsl:stylesheet>

HTML Output
===========
<html>
<head>
<title>Tree Menu Through MSIE Transformation</title>
<script language="javascript" defer="defer">

var oImgExpand = new Image();
oImgExpand.src = "/experts-exchange/images/expand.gif";
var oImgContract = new Image();
oImgContract.src = "/experts-exchange/images/collapse.gif";
function toggleMenu(el) {
 var eImg = el.children[0];
 var ePar = el.parentElement;
 var eLast = ePar.children[ePar.children.length - 1];
 if (eLast.style.display == "none") {
  eLast.style.display = "inline";
  eImg.src = oImgContract.src;
 } else {
      eLast.style.display = "none";
      eImg.src = oImgExpand.src;
 }
 return (el.href == "#" ? false : true);
}
</script>
<style type="text/css">
<!--
body {font-family:Verdana;letter-spacing:0.3mm;font-variant:small-caps;font-size:8pt;background:#fffffe;}
a {text-decoration:none;color:#4682b4;}
a:hover {text-decoration:underline;color:#800000;}
div.root, div.container, div.item {padding-left:10px;}
-->
</style>
</head>
<body>
<div class="root">
<div class="item">
<a href="#" onclick="return toggleMenu(this);">
<img hspace="4" border="0" src="/experts-exchange/images/expand.gif" />master</a>
<div class="container" style="display:none;"><div class="item">
<a href="master1.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/leaf.gif" />master1</a>
</div>
<div class="item">
<a href="master2.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/leaf.gif" />master2</a>
</div>
</div>
</div>
<div class="item">
<a href="#" onclick="return toggleMenu(this);">
<img hspace="4" border="0" src="/experts-exchange/images/expand.gif" />transaction</a>
<div class="container" style="display:none;"><div class="item">
<a href="#" onclick="return toggleMenu(this);">
<img hspace="4" border="0" src="/experts-exchange/images/expand.gif" />receipt</a>
<div class="container" style="display:none;"><div class="item">
<a href="receiptadd.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/leaf.gif" />add</a>
</div>
<div class="item">
<a href="receiptmodify.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/leaf.gif" />modify</a>
</div>
</div>
</div>
<div class="item">
<a href="payment.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/expand.gif" />payment</a>
<div class="container" style="display:none;"><div class="item">
<a href="paymentadd.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/leaf.gif" />add</a>
</div>
<div class="item">
<a href="paymentmodify.jsp" target="left">
<img hspace="4" border="0" src="/experts-exchange/images/leaf.gif" />modify</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


Notes
=====
1. This question requires at least 200 points.

(I don't care if I offend any expert in this topic area. The solution involves an understanding of javascript, Browser DOM and XSLT as well as the implementation of XSL as well as XSLT.)

2. The XSL implementation provides the widest range possible for all your clients. As long as they have an MSXML Parser, regardless of version, this will work.

Images
======
1. The example here uses images copied from MSDN, the plus and minus images.

2. The javascript has the following features. If the href is just "#", the function will return false thereby preventing a loading of the document. If the href contains a valid document url, the function toggleMenu will return true thereby allowing the document to be loaded. The target attribute will hold the name of the frame on the left that will host the loading of the new document.

The toggleMenu will both expand and load documents for nodes where there is both a valid url as well as children menu items.

Similar code can be written via scripting with MSXML3. You can only use XSLT and not XSL via the xml-stylesheet pi if you have MSXML3 on every client AND run xmlinst.exe to ensure MSXML3 is installed in REPLACE mode.

MSIE6 has MSXML3 SP2 installed in replace mode and there is nothing further that needs to be done.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 23

Expert Comment

by:b1xml2
ID: 6944351
Method 2 Scripted Transforms using MSXML3 -- no need for replace mode
==========================================

XML Document (xml/tree3.xml)
===========================
<?xml version="1.0" encoding="iso-8859-1"?>
<root>
<menu1 caption="master">
<submenu1 caption="master1" url="master1.jsp" />
<submenu2 caption="master2" url="master2.jsp" />
</menu1>
<menu2 caption="transaction">
<submenu1 caption="receipt">
 <subsubmenu1 caption="add" url="receiptadd.jsp" />
 <subsubmenu1 caption="modify" url="receiptmodify.jsp" />
</submenu1>
<submenu2 caption="payment" url="payment.jsp">
 <subsubmenu1 caption="add" url="paymentadd.jsp" />
 <subsubmenu1 caption="modify" url="paymentmodify.jsp" />
</submenu2>
</menu2>
</root>


XSLT Document (xslt/tree3.xsl)
==============================
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes" />
<xsl:template match="/">
<div class="root"><xsl:apply-templates select="root/*" /></div>
</xsl:template>
<xsl:template match="*">
<xsl:variable name="href">
 <xsl:choose>
 <xsl:when test="@url"><xsl:value-of select="@url" /></xsl:when>
 <xsl:otherwise>#</xsl:otherwise>
 </xsl:choose>
</xsl:variable>
<xsl:variable name="src">
<xsl:choose>
 <xsl:when test="*">/experts-exchange/images/expand.gif</xsl:when>
 <xsl:otherwise>/experts-exchange/images/leaf.gif</xsl:otherwise>
 </xsl:choose>
</xsl:variable>
 <div class="item">
 <a href="{$href}" onclick="return toggleMenu(this);">
 <xsl:if test="@url"><xsl:attribute name="target">left</xsl:attribute></xsl:if>
 <img hspace="4" border="0" src="{$src}" />
 <xsl:value-of select="@caption" /></a>
 <xsl:if test="*">
 <div class="container" style="display:none;"><xsl:apply-templates select="*" /></div>
 </xsl:if>
 </div>
</xsl:template>
</xsl:stylesheet>


HTML Document (tree.html)
=========================
<html>
<head>
<title>Tree Menu Through MSIE Transformation</title>
<script language="javascript">
<!--
var oImgExpand = new Image();
oImgExpand.src = "/experts-exchange/images/expand.gif";
var oImgContract = new Image();
oImgContract.src = "/experts-exchange/images/collapse.gif";
function toggleMenu(el) {
 var eImg = el.children[0];
 var ePar = el.parentElement;
 var eLast = ePar.children[ePar.children.length - 1];
 if (eLast.style.display == "none") {
  eLast.style.display = "inline";
  eImg.src = oImgContract.src;
 } else {
     eLast.style.display = "none";
     eImg.src = oImgExpand.src;
 }
 return (el.href.indexOf("#") != -1 ? false : true);
}
var oXML = new ActiveXObject("Msxml2.DOMDocument.3.0");
var oXSLT = new ActiveXObject("Msxml2.DOMDocument.3.0");
oXML.async = oXSLT.async = false;
oXML.load("xml/tree3.xml");
oXSLT.load("xslt/tree3.xsl");
window.onload = init;
function init() {
 document.body.innerHTML = oXML.transformNode(oXSLT);
}

// -->
</script>
<style type="text/css">
<!--
body {font-family:Verdana;letter-spacing:0.3mm;font-variant:small-caps;font-size:8pt;background:#fffffe;}
a {text-decoration:none;color:#4682b4;}
a:hover {text-decoration:underline;color:#800000;}
div.root, div.container, div.item {padding-left:10px;}
-->
</style>
<body>
</body>
</html>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6944352
amendment to tree.xsl
(minor adjustment to the scripted code)
======================================
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title>Tree Menu Through MSIE Transformation</title>
<script language="javascript" defer="defer">
<![CDATA[
var oImgExpand = new Image();
oImgExpand.src = "/experts-exchange/images/expand.gif";
var oImgContract = new Image();
oImgContract.src = "/experts-exchange/images/collapse.gif";
function toggleMenu(el) {
 var eImg = el.children[0];
 var ePar = el.parentElement;
 var eLast = ePar.children[ePar.children.length - 1];
 if (eLast.style.display == "none") {
  eLast.style.display = "inline";
  eImg.src = oImgContract.src;
 } else {
     eLast.style.display = "none";
     eImg.src = oImgExpand.src;
 }
 //amendment here
 return (el.href.indexOf("#") != -1 ? false : true);
}
]]>
</script>
<style type="text/css">
<xsl:comment>
body {font-family:Verdana;letter-spacing:0.3mm;font-variant:small-caps;font-size:8pt;background:#fffffe;}
a {text-decoration:none;color:#4682b4;}
a:hover {text-decoration:underline;color:#800000;}
div.root, div.container, div.item {padding-left:10px;}
</xsl:comment>
</style>
</head>
<body>
<div class="root">
<xsl:apply-templates select="root/*" />
</div>
</body>
</html>
</xsl:template>
<xsl:template match="*">
 <div class="item">
 <a>
 <xsl:attribute name="href">
 <xsl:choose>
 <xsl:when test="@url"><xsl:value-of select="@url" /></xsl:when>
 <xsl:otherwise>#</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>
 <xsl:if test="@url">
 <xsl:attribute name="target">left</xsl:attribute>
 </xsl:if>
 <xsl:attribute name="onclick">return toggleMenu(this);</xsl:attribute>
 <img hspace="4" border="0">
 <xsl:attribute name="src">
 <xsl:choose>
 <xsl:when test="*">/experts-exchange/images/expand.gif</xsl:when>
 <xsl:otherwise>/experts-exchange/images/leaf.gif</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>
 </img><xsl:value-of select="@caption" /></a>
 <xsl:if test="*">
 <div class="container" style="display:none;"><xsl:apply-templates select="*" /></div>
 </xsl:if>
 </div>
</xsl:template>
</xsl:stylesheet>
0
 
LVL 1

Author Comment

by:vijayneema
ID: 6944620
Hi, B1XML2,

Thanks a lot for your answer,
please solve my one more query related to this,
as i told you, i am getting XML in the form of
Island not as XML file, when i go to copy the
xml into XML Island it crashes IE.

check this HTML file

<html>
<head>
<title>Tree Menu Through MSIE Transformation</title>
<script language="javascript">
<!--
var oImgExpand = new Image();
oImgExpand.src = "expand.gif";
var oImgContract = new Image();
oImgContract.src = "collapse.gif";
function toggleMenu(el) {
     var eImg = el.children[0];
     var ePar = el.parentElement;
     var eLast = ePar.children[ePar.children.length - 1];
     if (eLast.style.display == "none") {
          eLast.style.display = "inline";
          eImg.src = oImgContract.src;
     } else {
          eLast.style.display = "none";
          eImg.src = oImgExpand.src;
     }
     return (el.href.indexOf("#") != -1 ? false : true);
}
//var oXML = new ActiveXObject("Msxml2.DOMDocument.3.0");
//var oXSLT = new ActiveXObject("Msxml2.DOMDocument.3.0");
//oXML.async = oXSLT.async = false;
//oXML.load("tree2.xml");
//oXSLT.load("tree2.xsl");
window.onload = init;
function init() {
     document.body.innerHTML = oXML.transformNode(oXSLT);
}
// -->
</script>
<style type="text/css">
<!--
body {font-family:Verdana;letter-spacing:0.3mm;font-variant:small-caps;font-size:8pt;background:#fffffe;}
a {text-decoration:none;color:#4682b4;}
a:hover {text-decoration:underline;color:#800000;}
div.root, div.container, div.item {padding-left:10px;}
-->
</style>
<body>
<XML id="oXML" src="tree2.xml"></XML>
<XML id="oXSLT" src="tree2.xsl"></XML>
</body>
</html>

Thanks
Vijay
0
 
LVL 23

Accepted Solution

by:
b1xml2 earned 123 total points
ID: 6944704
tree2.xsl
=========
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<div class="root">
<xsl:apply-templates select="root/*" />
</div>
</xsl:template>
<xsl:template match="*">
 <div class="item">
 <a>
 <xsl:attribute name="href">
 <xsl:choose>
 <xsl:when test="@url"><xsl:value-of select="@url" /></xsl:when>
 <xsl:otherwise>#</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>
 <xsl:if test="@url">
 <xsl:attribute name="target">left</xsl:attribute>
 </xsl:if>
 <xsl:attribute name="onclick">return toggleMenu(this);</xsl:attribute>
 <img hspace="4" border="0">
 <xsl:attribute name="src">
 <xsl:choose>
 <xsl:when test="*">/experts-exchange/images/expand.gif</xsl:when>
 <xsl:otherwise>/experts-exchange/images/leaf.gif</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>
 </img><xsl:value-of select="@caption" /></a>
 <xsl:if test="*">
 <div class="container" style="display:none;"><xsl:apply-templates select="*" /></div>
 </xsl:if>
 </div>
</xsl:template>
</xsl:stylesheet>

Corrected vijayneema's HTML
============================
<html>
<head>
<title>Tree Menu Through MSIE Transformation</title>
<script language="javascript">
<!--
var oImgExpand = new Image();
oImgExpand.src = "expand.gif";
var oImgContract = new Image();
oImgContract.src = "collapse.gif";
function toggleMenu(el) {
    var eImg = el.children[0];
    var ePar = el.parentElement;
    var eLast = ePar.children[ePar.children.length - 1];
    if (eLast.style.display == "none") {
         eLast.style.display = "inline";
         eImg.src = oImgContract.src;
    } else {
         eLast.style.display = "none";
         eImg.src = oImgExpand.src;
    }
    return (el.href.indexOf("#") != -1 ? false : true);
}
window.onload = init;
function init() {
 // use the  += operator which appends
 // using the = replaces the innerHTML and removes the reference to the data islands
 // that would generate errors
    document.body.innerHTML += oXML.transformNode(oXSLT);
}
// -->
</script>
<style type="text/css">
<!--
body {font-family:Verdana;letter-spacing:0.3mm;font-variant:small-caps;font-size:8pt;background:#fffffe;}
a {text-decoration:none;color:#4682b4;}
a:hover {text-decoration:underline;color:#800000;}
div.root, div.container, div.item {padding-left:10px;}
-->
</style>
<body>
<XML id="oXML" src="tree2.xml"></XML>
<XML id="oXSLT" src="tree2.xsl"></XML>
</body>
</html>

Notes
=====
document.body.innerHTML = oXML.transformNode(oXSLT) will result in a crashing of IE as you are removing the data islands by resetting the innerHTML and you are at the same time using the data islands to perform the transformation

the correct syntax is:

document.body.innerHTML += oXML.transformNode(oXSLT);

for safer syntax, using Data Islands
=====================================
function init() {
    document.body.innerHTML += oXML.XMLDocument.transformNode(oXSLT.XMLDocument);
}


0
 
LVL 1

Author Comment

by:vijayneema
ID: 6944754
Good Answer B1XML2

Thanks
Vijay
0
 

Expert Comment

by:princehyderabad
ID: 11484601
But its working only in IE. NOT WORKING in Netscape.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
character entities and entity references in XML 17 111
Nessus Scan 1 68
C# XDocument.Save adds unwanted encoding information 5 42
XML Data Missing in PHP SimpleXML 8 44
The Problem How to write an Xquery that works like a SQL outer join, providing placeholders for absent data on the outer side?  I give a bit more background at the end. The situation expressed as relational data Let’s work through this.  I’ve …
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now