tapestry-examples/TimeTracker/src/context/Home.html

<span jwcid="@Border">

<p>
This is the Tapestry TimeTracker application. It is a demonstration of some of the new
core features available in tapestry, as well as how a sample application might be built
using them.
</p>

<form jwcid="taskForm@Form" class="container" clientValidationEnabled="true" >
<h3><span jwcid="@Insert" value="message:new.task"/></h3>
	<fieldset>
    <table width="90%" class="form" cellpadding="2" cellspacing="0" >
    <tr>
      <td><label jwcid="@FieldLabel" field="component:projectChoose" /></td>
      <td><label jwcid="@FieldLabel" field="component:descriptionField" /></td>
      <td><label>Duration</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div class="field required"><span jwcid="projectChoose" /></div></td>
      <td><div class="field required"><input jwcid="descriptionField" /></div></td>
      <td><div jwcid="duration@Any">18 minutes</div></td>
      <td>&nbsp;</td>
    </tr>
    
    <tr>
      <td><label jwcid="@FieldLabel" field="component:datePicker" /></td>
      <td><label jwcid="@FieldLabel" field="component:startPicker" /></td>
      <td><label jwcid="@FieldLabel" field="component:endPicker" /></td>
      <td>&nbsp;</td>
    </tr>
    
    <tr>
	  <td><div class="field required"><input jwcid="datePicker" /></div></td>
      <td>
      	<div class="field required">
      		<input jwcid="startPicker" />
      	</div>
      </td>
      <td>
      	<div class="field required">
      		<input jwcid="endPicker" />
      	</div>
      </td>
      <td>
      	<input jwcid="@Submit" value="message:button.add" class="submitButton" 
      			action="listener:addTask"
      			async="true" updateComponents="taskForm" />
      </td>
    </tr>
    
    </table>
    </fieldset>
</form>

<a jwcid="@DirectLink" listener="listener:showDialog" 
	async="true" updateComponents="testDialog">Show Dialog</a><br/>

<div jwcid="testDialog@Dialog" style="display:none" hidden="ognl:dlHidden" >
	<p style="display:block;background:#ffffff;width:20em;">
	This is content hidden in a Dialog.
	
	<a href="#" onClick="dojo.widget.byId('testDialog').hide();return false">Close</a>
	</p>
</div>

<div jwcid="projectDescription@Any" >
	<h2 jwcid="@If" condition="ognl:selectedProject" style="clear:left" >
		<span jwcid="projName@InlineEditBox" value="ognl:selectedProject.name" />
	</h2>
</div>

</span>