RELEASE_2_1_13/src/blocks/forms/samples/forms/sampletree_template.xml

<?xml version="1.0"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<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">

  <!-- Import the macros that define CForms template elements -->
  <jx:import uri="resource://org/apache/cocoon/forms/generation/jx-macros.xml"/>
  
  <!-- A macro that displays the toggle icons (plus/minus) for the current treeNode -->
  <jx:macro name="toggle-icon">
	  <jx:choose>
	    <jx:when test="${treeNode.isLeaf()}">
	      <img src="resources/forms/img/tree/win/${treeNode.iconType}.gif" border="0"/>
	    </jx:when>
	    <jx:otherwise>
	       <a href="#" onclick="return TreeToggleCollapse('${widget.fullName}', '${treeNode.path}')"><img
	         src="resources/forms/img/tree/win/${treeNode.iconType}.gif" border="0"/></a>
	    </jx:otherwise>
	  </jx:choose>
  </jx:macro>
  
  <title>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 = cocoon.forms.getForm(elt);
        var actInput = id + ":action";
        var pathInput = id + ":path";
        form[actInput].value = act
        form[pathInput].value = path;
        cocoon.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>

    <ft:form-template action="#{$cocoon/continuation/id}.continue" method="get" ajax="true">
      Name: <ft:widget id="name"/>
      <br/>
      <ft:tree id="tree">
      <div style="float: right; border: dotted black 1px">
        Article list:
        <ul>
          <ft:tree-nodes>
            <li>${treeNode.node.data}
              <jx:choose>
                <jx:when test="${treeNode.isLeaf()}"/>
                <jx:otherwise>
                  (<a href="#" onclick="return TreeToggleCollapse('${widget.fullName}', '${treeNode.path}')">
                  <!-- Jexl is really too limited, and has no conditional expression. It would
                       be so cleaner to write  ${treeNode.isExpanded() ? "close" : "details"}... -->
                  <jx:choose>
                    <jx:when test="${treeNode.isExpanded()}">close</jx:when>
                    <jx:otherwise>details</jx:otherwise>
                  </jx:choose>
                  </a>)
	              <ul>
	                <ft:tree-children/>
	              </ul>
	            </jx:otherwise>
	          </jx:choose>
            </li>
          </ft:tree-nodes>
        </ul>
      </div>
      </ft:tree>
      <br/>
      <ft:tree id="tree2">
        <div>
          Tree sample:
          <ft:tree-nodes>
            <div style="margin-left: 15px"><toggle-icon/>${treeNode.node.data}
              <ft:tree-children/>
            </div>
          </ft:tree-nodes>
        </div>
      </ft:tree>
      
      Example of a tree-table
      <ft:tree id="files">
        <table>
        ${java.lang.System.err.println("In files")}
          <tr><th></th><th>Name</th><th>Last modified</th></tr>
          <ft:tree-nodes>
            <tr>
              <td>
                <jx:choose>
                  <jx:when test="${treeNode.selected}">
                    <input type="checkbox" checked="checked" name="${widget.fullName}:select"/>
                  </jx:when>
                  <jx:otherwise>
                    <input type="checkbox" name="${widget.fullId}$select"/>
                  </jx:otherwise>
                </jx:choose>
              </td>
              <td>
                <span style="margin-left: ${treeNode.depth * 15}px"><toggle-icon/></span>
                <a class="${treeNode.selectionType}" href="#" onclick="return TreeToggleSelect('${treeWidget.fullName}', '${treeNode.path}')">
                  ${treeNode.node.name}</a>
              </td>
              <td><jx:formatDate value="${java.util.Date(treeNode.node.lastModified)}" pppattern="yyyy-dd-MM hh:mm:ss"/></td>
            </tr>
            <ft:tree-children/>
          </ft:tree-nodes>
        </table>
      </ft:tree>
      
      <ft:widget id="ok"/>
      <br/>
      <a href="./do-sampleTree.flow">Restart this sample</a> -  <a href="./">Back to samples</a>

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