-<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">
-<fi:init xmlns:bu="http://apache.org/cocoon/browser-update/1.0">
<script type="text/javascript"> // Uncomment this to see Dojo debug // var djConfig = { isDebug: true }; </script>
</fi:init>
<h4 class="samplesGroup">Repeater widget</h4>
<title>Dynamic template</title>
<style type="text/css"> /* Additional styles for alternating row colors */ .forms-row-0 td { padding: 5px; background-color: #E0E0E0; } .forms-row-1 td { padding: 5px; } </style>
-<content>
-<fi:form-template ajax="true" action="3982721411172c06237c482534897e6b1f082c10.continue" method="POST">
<p>This is an example of how dynamic templates (using the JX macros) allow to change the page structure depending on the form contents. By adding or removing rows in the repeater below you will see:</p>
-<ul>
<li>when there are no contacts, only the "Add contact" button is displayed and the table isn't shown,</li>
<li>when there are some contacts, the "move up" and "move down" buttons are not shown on the first and last lines, respectively.</li>
</ul>
-<p>
This sample has a
<a href="do-dojoRepeater.flow">variation using Dojo</a>
that allows drag-and-drop reordering of rows and clicking anywhere in a row to select it.
</p>
-<bu:replace id="contacts">
-<div>
-<p>
-<strong>
<em>There are no contacts to display</em>
</strong>
</p>
-<p>
-<bu:replace id="addcontact">
-<fi:action id="addcontact" state="active">
<fi:label>Add contact</fi:label>
</fi:action>
</bu:replace>
</p>
</div>
</bu:replace>
-<bu:replace id="ok">
-<fi:action id="ok" state="active">
<fi:label>Submit</fi:label>
</fi:action>
</bu:replace>
<br/>
<a href="./do-dynaRepeater.flow">Restart this sample</a>
-
<a href="./">Back to samples</a>
</fi:form-template>
</content>
</page>