Solved

tree menu

Posted on 2002-04-10
12
4,136 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
Comment Utility
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
Comment Utility
BigRat,

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

Vijay
0
 
LVL 1

Author Comment

by:vijayneema
Comment Utility
Hi, Bigrat

Points are increased now,
Help me now, its urgent

Vijay
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Good Answer B1XML2

Thanks
Vijay
0
 

Expert Comment

by:princehyderabad
Comment Utility
But its working only in IE. NOT WORKING in Netscape.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction In my previous article (http://www.experts-exchange.com/Microsoft/Development/MS-SQL-Server/SSIS/A_9150-Loading-XML-Using-SSIS.html) I showed you how the XML Source component can be used to load XML files into a SQL Server database, us…
I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

762 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

6 Experts available now in Live!

Get 1:1 Help Now