RE: [xsl] Help with tree menu

Subject: RE: [xsl] Help with tree menu
From: cknell@xxxxxxxxxx
Date: Fri, 30 Nov 2007 18:07:19 -0500
So, your problem really concerns how to get Javascript to interact with the browser's document object model, and only concerns XSLT as a secondary matter.

This list is for supporting XSLT questions so I don't think I should go into much detail on your Javascript problem. Generally speaking, though, you should be putting your Javascript in the <head> element. When I have done this sort of thing, I created a DOM object and manipulated it by trapping the DHMTL events on the objects that raised the event.

You may have better luck on a Javascript/DHTML/Ajax site for getting specific suggestions on animating web page elements.
-- 
Charles Knell
cknell@xxxxxxxxxx - email



-----Original Message-----
From:     Lucas Gongalves Grossi <lggrossi@xxxxxxxxxx>
Sent:     Fri, 30 Nov 2007 20:25:01 -0200
To:       "xsl-list" <xsl-list@xxxxxxxxxxxxxxxxxxxxxx>
Subject:  RE: [xsl] Help with tree menu

Hi,

First thanks for your help. About the code, the problem is: where i put my javascript inside this code that you made for me? Like i told you, this <h4> is used to create the button for the tree menu, as you can see in the function ativaSubMenus() on that line --> var h3s = quem.getElementsByTagName('h4').
So, i need to put this tag <h4> inside an <html> tag, thus the program understand that this <h4> is a "call" for the tree menu button. In the code that you gave me, I tried to do, but didn't work.
I tried to put the javascript inside the first <xsl:template match="/">, inside an <html> tag, with <body> and so on. But with the <h4> outside an <html> tag i think it's not possible to do what I want.
Am I wrong in something? Did you understand now the problem?


Thanks a lot,
LUCAS



> I at home now, with my usual workstation. This stylesheet, when applied to your XML document:
> 
> <?xml version="1.0" encoding="UTF-8"?>
> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
>   <xsl:output method="html" indent="yes" />
>   <xsl:template match="/">
>     <xsl:apply-templates/>
>   </xsl:template>
>   
>   <xsl:template match="gqmroot">
>     <xsl:apply-templates/>
>   </xsl:template>
>   
>   <xsl:template match="goal">
>     <h4><xsl:value-of select="@titleGoal"/></h4>
>       <ul>
>         <xsl:apply-templates/>
>       </ul>
>   </xsl:template>
>   
>   <xsl:template match="question">
>     <li>
>       <h4><xsl:value-of select="@titleQuestion"/></h4>
>       <ul>
>         <xsl:apply-templates />
>       </ul>
>     </li>
>   </xsl:template>
>   
>   <xsl:template match="metric">
>     <li>
>       <h4><xsl:value-of select="@titleMetric"/></h4>
>       <h4><xsl:value-of select="unparsed-text(@ChartLink)" disable-output-escaping="yes"/></h4>
>     </li>
>   </xsl:template>
>   
> </xsl:stylesheet>
> 
> Will produce this output (note, since I don't have your "gesGQMReport_M121.html" file, I had to remark out the line containing the second <h4> element in the template whose "match" attribute has the value of "metric" in order to produce a transform.):
> 
> 
>   <h4>G.1. Aumento della qualita esterna</h4>
> <ul>
>    <li>
>       <h4>Q.1.1. Quanti bug trova l?utente? Quanti sono ad alta priorita?</h4>
>       <ul>
>          <li>
>             <h4>M.1.1.1. Numero di bug riportati nell'intervallo di tempo considerato, divisi per centro di costo e per prodotto.</h4>
>          </li>
>          <li>
>             <h4>M.1.1.2. Numero di bug ad alta priorita riportati dall?utente al mese, divisi per centro di costo e per prodotto.</h4>
>          </li>
>       </ul>
>    </li>
>    <li>
>       <h4>Q.1.2. Quanto e soddisfatto l?utente della nuova release?</h4>
>       <ul>
>          <li>
>             <h4>M.1.2.1 Numero di richieste di cambiamento del sistema nell'intervallo di tempo per quella release</h4>
>          </li>
>          <li>
>             <h4>M.1.2.2. Numero di bug riportati dall'utente nell'intervallo di tempo facenti riferimento a quella release</h4>
>          </li>
>       </ul>
>    </li>
> </ul>
> <h4>G.2 Aumento della qualita interna</h4>
> <ul>
>    <li>
>       <h4>Q.2.1. Qual e la probabilita che una modifica introduca un nuovo bug?</h4>
>       <ul>
>          <li>
>             <h4>M.2.1.1. Rapporto tra numero di test che falliscono ed il numero totale di test durante la fase di integrazione notturna</h4>
>          </li>
>       </ul>
>    </li>
>    <li>
>       <h4>Q.2.2. Quanto e espressivo il codice?</h4>
>       <ul>
>          <li>
>             <h4>M.2.2.1. Complessita ciclomatica</h4>
>          </li>
>          <li>
>             <h4>M.2.2.2. Weighted Methods per Class</h4>
>          </li>
>       </ul>
>    </li>
> </ul>
> 
> I don't understand this comment, "this code that you put for me can't stay inside a html tag". Please explain further.
> 
> -- 
> Charles Knell
> cknell@xxxxxxxxxx - email
> 
> 
> 
> -----Original Message-----
> From:     Lucas Gongalves Grossi <lggrossi@xxxxxxxxxx>
> Sent:     Fri, 30 Nov 2007 06:11:26 -0200
> To:       "xsl-list" <xsl-list@xxxxxxxxxxxxxxxxxxxxxx>
> Subject:  RE: [xsl] Help with tree menu
> 
> I can't do like this, because this code that you put for me can't stay inside a html tag.
> My output is a html. This <h4> is a tag from html, that i use to create the button from html. I'll put the all the code here. This script is to create the menu. Then, in the body of the html, I use the xsl language.
> 
> <?xml version="1.0" encoding="UTF-8"?>
> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
> <xsl:output method="html" encoding="UTF-8"/>
> 
> <xsl:template match="/">
> 	<html><head></head>
> 	<script>
> 	function ativaSubMenus(quem){
> 	    var uls = quem.getElementsByTagName('ul')
> 	    for(var i=0; i<uls.length; i++){
> 	        uls[i].style.display = 'none';
> 	    }
> 	    
> 	    var h3s = quem.getElementsByTagName('h4')
> 	    for(i=0; i<h3s.length; i++){
> 	        h3s[i].style.MozUserSelect = 'none';
> 	        h3s[i].unselectable = 'on'; 
> 	        h3s[i].style.cursor = 'pointer'; 
> 	        h3s[i].onclick = function(e){
> 	            var source = getSource(e);
> 	            var ulatual = source.parentNode.getElementsByTagName('ul')[0];
> 	            if(ulatual.style.display=='none'){
> 	                ulatual.style.display = 'block';
> 					//aparece(ulatual,'high');
> 	            }else{
> 	                ulatual.style.display = 'none';
> 	            }
> 	        }
> 	    }
> 	}
> 	/*
> 	function aparece(quem,speed){
> 	    var sty = quem.style;
> 	    sty.visibility = 'hidden'
> 	    var pos_init = sty.position;
> 	    sty.position = 'absolute';
> 	    if(sty.display=='none'){ sty.display = 'block' }
> 	    var alt_init = parseInt(quem.offsetHeight);
> 	    var lar_init = parseInt(quem.offsetWidth);
> 	    var over_ini = sty.overflow;
> 	    sty.overflow = 'hidden';
> 	    sty.visibility = 'visible';    
> 	    sty.height = '0px';
> 	    sty.width = '0px';
> 	    
> 	    if(typeof(quem.timeAparece)!='undefined'){
> 	        clearInterval(quem.timeAparece);
> 	    }
> 	    quem.timeAparece=null;
> 	    
> 	    var loop = function(){
> 	        var alt_atu = parseInt(sty.height);
> 	        var lar_atu = parseInt(sty.width);
> 	        if(alt_atu < alt_init){
> 	            sty.height = (alt_atu + 5) + 'px';
> 	        }
> 	        if(lar_atu < lar_init){
> 	            sty.width = (lar_atu + 15) + 'px';
> 	        }
> 	        if(alt_atu == 0 ){
> 	            sty.position = pos_init;
> 	        }
> 	        if(alt_atu >= alt_init && lar_atu >= lar_init){
> 	            clearInterval(quem.timeAparece);
> 	            sty.height = (alt_init) + 'px';
> 	            sty.width = (lar_init) + 'px';
> 	            sty.overflow = over_ini;
> 	        }
> 	    }
> 	    switch(speed){
> 	        case 'high': speed = 1; break;
> 	        case 'normal': speed = 20; break;
> 	        case 'slow': speed = 40; break;
> 	        default: speed = 10;
> 	    }
> 	    quem.timeAparece = setInterval(loop,speed);
> 	}
> 	*/
> 	function bodyOnReady(func){
> 	    if(!(document.body==null)){
> 	        func();
> 	    }else{
> 	        var func_rep = func;
> 	        setTimeout(function(){ bodyOnReady(func_rep) },100);
> 	    }
> 	}
> 	
> 	function getSource(evt){
> 	    if(typeof(evt)=='undefined') var evt=window.event
> 	    source = evt.target?evt.target:evt.srcElement
> 	    if(source.nodeType == 3)source = source.parentNode
> 	    return source;
> 	}
> 
> 	
> 	bodyOnReady(function(){ ativaSubMenus( document.getElementById('menuzao') ) })
> 	</script>
> 	<body>
> 	<ul id='menuzao'>
> 	    <li><h4><xsl:value-of select="gqmroot/@titleRoot"/></h4>
> 	        <ul>
> 	            <li><xsl:for-each select="gqmroot/goal">
> 					<h4><xsl:value-of select="@titleGoal"/></h4>
> 					<ul>
> 						<li><xsl:for-each select="question">
> 								<h4><xsl:value-of select="@titleQuestion"/></h4>	
> 							<ul>
> 								<li><xsl:for-each select="metric">
> 									<h4>
> 										<xsl:value-of select="@titleMetric"/>
> 									</h4>
> 									<h4>
> 										<xsl:value-of select="unparsed-text(@ChartLink)" disable-output-escaping="yes"/>
> 									</h4>
> 									</xsl:for-each>
> 								</li>
> 							</ul>
> 							</xsl:for-each>
> 						</li>
> 					</ul>
> 					</xsl:for-each>
> 		    	</li>
> 	        </ul>
> 	    </li>
> 	</ul>
> 
> 	</body></html>
> </xsl:template>
> 
> </xsl:stylesheet>
> 
> Thanks,
> LUCAS

Current Thread