<?xml version="1.0" encoding="ISO-8859-1"?><page xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance" xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">

  
  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    

    
    

    
    

    
    

    
    
    
    
    

    
    
    
    
    


    
    
    
    
    
    

    
    
    
    
    

  
  
  
  
  <title xmlns:bu="http://apache.org/cocoon/browser-update/1.0">Tree layout samples</title>
  <style type="text/css">
	 #files { border-collapse: collapse; }
    #files td { padding: 0.1em; border-top: dotted black 1px; }
    .selected { background: #D0D0D0; }
  </style>
  <content>
    <script language="JavaScript">
      function TreeAction(id, act, path) {
        var elt = document.getElementById(id);
        if (!elt) {
            alert("Error: cannot find element with id '" + id + "'");
            return;
        }
        var form = forms_getForm(elt);
        var actInput = id + ":action";
        var pathInput = id + ":path";
        form[actInput].value = act
        form[pathInput].value = path;
        forms_submitForm(elt, id);
        // Reset fields (this form may be reposted later when in Ajax mode)
        form[actInput].value = "";
        form[pathInput].value = "";
        return false;
      }
      function TreeToggleCollapse(id, path) {
        return TreeAction(id, "toggle-collapse", path);
      }
      
      function TreeToggleSelect(id, path) {
        return TreeAction(id, "toggle-select", path);
      }
      
    </script>
    <p>This page shows a number of different possible renderings of a tree widget. They're all very easily defined
	    in the form template using the &lt;ft:tree&gt; and &lt;ft:tree-nodes&gt; instructions (currently available only
	    in the JXTemplate version of the CForms template language).</p>

    
      
      
        <fi:form-template ajax="true" action="27451b526220428e6e271e3e3d2075816e786f54.continue" method="get">
        
        
        
      Name: <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="name">
        
        <fi:field id="name" state="active" required="true"><fi:datatype type="string"/>
        
        </fi:field></bu:replace>
      
    
      <br/>
      <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="tree">
        
          
	      
	      
      <div style="float: right; border: dotted black 1px">
        Article list:
        <ul>
          
      
      <fi:field id="tree:action">
        <fi:styling type="hidden"/>
      </fi:field>
      <fi:field id="tree:path">
        <fi:styling type="hidden"/>
      </fi:field>
      
          
          
            <li>root
              
                  (<a href="#" onclick="return TreeToggleCollapse('tree', '/')">
                  
                  details
                  </a>)
	              <ul>
	                
    
	              </ul>
	            
            </li>
          
        
    
        </ul>
      </div>
      
          </bu:replace>
	  
    
      <br/>
      <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="tree2">
        
          
	      
	      
        <div>
          Tree sample:
          
      
      <fi:field id="tree2:action">
        <fi:styling type="hidden"/>
      </fi:field>
      <fi:field id="tree2:path">
        <fi:styling type="hidden"/>
      </fi:field>
      
          
          
            <div style="margin-left: 15px">
	       <a href="#" onclick="return TreeToggleCollapse('tree2', '/')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  root
              
    
            </div>
          
        
    
        </div>
      
          </bu:replace>
	  
    
      
      Example of a tree-table
      <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="files">
        
          
	      
	      
        <table>
        
          <tr><th/><th>Name</th><th>Last modified</th></tr>
          
      
      <fi:field id="files:action">
        <fi:styling type="hidden"/>
      </fi:field>
      <fi:field id="files:path">
        <fi:styling type="hidden"/>
      </fi:field>
      
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/dreamteam')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/dreamteam')">
                  dreamteam</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/sql')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/sql')">
                  sql</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	      <img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/sitemap.xmap')">
                  sitemap.xmap</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	      <img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/pom.xml')">
                  pom.xml</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/forms')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/forms')">
                  forms</a>
              </td>
              <td>Dec 11, 2023</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/flow')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/flow')">
                  flow</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/library')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/library')">
                  library</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/swan')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/swan')">
                  swan</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/messages')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/messages')">
                  messages</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	      <img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/welcome.xml')">
                  welcome.xml</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	      <img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/suggest-list.xsl')">
                  suggest-list.xsl</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/captcha')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/captcha')">
                  captcha</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/xsl')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/xsl')">
                  xsl</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/resources')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/resources')">
                  resources</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	       <a href="#" onclick="return TreeToggleCollapse('files', '/aggregate')"><img src="resources/forms/img/tree/win/collapsed.gif" border="0"/></a>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/aggregate')">
                  aggregate</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
          
          
            <tr>
              <td>
                
                    <input type="checkbox" name="$select"/>
                  
              </td>
              <td>
                <span style="margin-left: 0px">
	      <img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
	    
  </span>
                <a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/forms.xsamples')">
                  forms.xsamples</a>
              </td>
              <td>Aug 31, 2006</td>
            </tr>
            
    
          
        
        
      
    
        
    
        </table>
      
          </bu:replace>
	  
    
      
      <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="ok">
        
        <fi:action id="ok" state="active"><fi:label>OK</fi:label>
        
        </fi:action></bu:replace>
      
    
      <br/>
      <a href="./do-sampleTree.flow">Restart this sample</a> -  <a href="./">Back to samples</a>

    
        </fi:form-template>
      
    
  </content>
</page>