?
Solved

tree menu

Posted on 2002-04-10
12
Medium Priority
?
4,146 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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 492 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
Suggested Courses
Course of the Month13 days, 16 hours left to enroll

800 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