RE: [xsl] Help with tree menu

Subject: RE: [xsl] Help with tree menu
From: Lucas Gonçalves Grossi <lggrossi@xxxxxxxxxx>
Date: Fri, 30 Nov 2007 22:00:23 -0200
Well, in my opinion the problem is in XSL, because this menu that I created
functions very well. The problem is that, when I use the for-each expression
with the value-of expression, they just put the <h4> tag in the first value of
the "value-of" expression. I need a way to generate this <h4> in xsl in front
of all values catched from the xml.

For me the menu is a secondary matter, because is just a way to makes the
output more presentable. The important thing in my job was get an html and put
inside the xml file, using the XSL. This part was done, but i need to do this
tree menu now.

I don't know how to generate this <h4> tag in front of all my values of the
xml, using the XSL for-each and value-of.
If I'm wrong about guessing that this is a XSL problem, ok.


Thanks,
LUCAS



> 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