RE: [xsl] Help with tree menu

Subject: RE: [xsl] Help with tree menu
From: cknell@xxxxxxxxxx
Date: Fri, 30 Nov 2007 06:46:44 -0500
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