<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<link rel="stylesheet" type="text/css" href="${context:css/examples/js.css}"/>
</head>
<body>
<h1>AJAX Form Multiple Zone Update</h1>
<noscript class="js-required">
${message:javascript_required}
</noscript>
This page demonstrates an AJAX-enabled Form that also updates another zone on success.
<div class="eg">
<t:zone t:id="formZone" id="formZone">
<form t:id="ajaxForm" t:type="form" t:zone="^">
First Name: <input t:type="TextField" t:id="firstName"/><br/>
Last Name: <input t:type="TextField" t:id="lastName"/><br/>
Birthday: <input t:type="datefield" t:id="birthday"/><br/><br/>
<input type="submit" value="Accept"/><br/><br/>
<t:errors/>
Welcome ${name}.
</form>
</t:zone>
</div>
<div class="eg">
<t:zone t:id="outZone" id="outZone">
Welcome ${name}. Your birthday is ${birthday}
</t:zone>
</div>
References:
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/Form.html">Form</a>,
<a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>,
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>,
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/services/Request.html">Request</a>,
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>,
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/annotations/Component.html">@Component</a>,
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>,
<a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>.<br/><br/>
<a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
<t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxFormMultipleZoneUpdate.tml"/>
<t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxFormMultipleZoneUpdate.java"/>
<t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/js.css"/>
</body>
</html>
package jumpstart.web.pages.examples.ajax;
import java.util.Date;
import org.apache.tapestry5.annotations.Component;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.DateField;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.TextField;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;
public class AjaxFormMultipleZoneUpdate {
// Screen fields
@Property
private String firstName;
@Property
private String lastName;
@Property
private Date birthday;
// Generally useful bits and pieces
@Component
private Form ajaxForm;
@Component(id = "firstName")
private TextField firstNameField;
@Component(id = "lastName")
private TextField lastNameField;
@Component(id = "birthday")
private DateField birthdayField;
@InjectComponent
private Zone formZone;
@InjectComponent
private Zone outZone;
@Inject
private Request request;
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
// The code
void setupRender() {
if (firstName == null && lastName == null && birthday == null) {
firstName = "Humpty";
lastName = "Dumpty";
birthday = new Date(0);
}
}
void onValidateFromAjaxForm() {
if (firstName == null || firstName.trim().equals("")) {
ajaxForm.recordError(firstNameField, "First Name is required.");
}
if (lastName == null || lastName.trim().equals("")) {
ajaxForm.recordError(lastNameField, "Last Name is required.");
}
if (birthday == null) {
ajaxForm.recordError(birthdayField, "Birthday is required.");
}
else {
Date now = new Date();
if (birthday.after(now)) {
ajaxForm.recordError(birthdayField, "Birthday must be in the past.");
}
}
}
void onSuccess() {
if (request.isXHR()) {
ajaxResponseRenderer.addRender(formZone).addRender(outZone);
}
}
void onFailure() {
if (request.isXHR()) {
ajaxResponseRenderer.addRender(formZone);
}
}
public String getName() {
return firstName + " " + lastName;
}
public Date getTime() {
return new Date();
}
}
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333;
line-height: 17px; }
h1 { font-size: 26px; line-height: 20px; } /* For IE 7 */
form { margin: 0; }
.eg { margin: 20px 0; padding: 20px; color: #888;
border: 1px solid #ddd; border-radius: 4px; -webkit-border-radius: 4px; -mox-border-radius: 4px; }
a { text-decoration: none; color: #3D69B6; }
a:hover { text-decoration: underline; }
/* For javascript examples. */
.js-required { color: red; display: block; margin-bottom: 14px; }
.js-recommended { color: red; display: block; margin-bottom: 14px; }
.grid { border-collapse: collapse; border-spacing: 0; border: 1px solid #dddddd; font-size: 13px; }
.grid tr.odd { background-color: #f8f8f8; }
.grid tr:hover { background-color: #eeeeee; }
.grid th { padding: 3px 5px; text-align: left; width: 130px; border: 1px solid #dddddd;
font-weight: normal; background-color: #eeeeee;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e4e4e4'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e4e4e4)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fbfbfb, #e4e4e4); /* for firefox 3.6+ */ }
.grid td { padding: 3px 5px; text-align:left; }