AJAX Components (1)

JavaScript is not enabled in your browser. Please enable JavaScript for this page to work properly.

This page demonstrates creating a custom component which contains a Zone.
It also demonstrates using that component more than once in the same page.

The component is called TextEchoer. It contains a TextField and a Zone that "echoes" the value of the TextField.

First Name

Humpty

Last Name

Dumpty

The tricky part about using an AJAX component more than once in a page is that each occurrence of a Zone must have a unique client-side id.
Otherwise the first occurrence of the Zone will receive all the updates intended for the other occurrences.

TextEchoer achieves this with id="prop:componentResources.id", which is simply getting the id given to it by its container
(in this case, firstName and lastName).

An alternative technique would be to generate a random id in the component, TextEchoer.

<!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 &nbsp;
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
<h3>AJAX Components (1)</h3>
<noscript class="js-required">
${message:javascript_required}
</noscript>
<p>This page demonstrates creating a custom component which contains a Zone.
It also demonstrates using that component more than once in the same page.</p>
<p>The component is called TextEchoer. It contains a TextField and a Zone that "echoes" the value of the TextField.</p>
<div class="eg">
<t:form class="form-horizontal">
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-8">
<t:examples.ajax.TextEchoer t:id="firstName"/>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-8">
<t:examples.ajax.TextEchoer t:id="lastName"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<t:submit value="Display"/>
</div>
</div>
</t:form>
</div>
<p>The tricky part about using an AJAX component more than once in a page is that each occurrence of a Zone must have a unique client-side id.
Otherwise the first occurrence of the Zone will receive all the updates intended for the other occurrences.</p>
<p>TextEchoer achieves this with <code>id="prop:componentResources.id"</code>, which is simply getting the id given to it by its container
(in this case, <code>firstName</code> and <code>lastName</code>).</p>
<p>An alternative technique would be to generate a random id in the component, TextEchoer.</p>
References:
<a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>,
<a href="http://tinybits.blogspot.com/2010/03/new-and-better-zoneupdater.html">Inge's Zone Updater</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/Request.html">Request</a>,
<a href="http://tapestry.apache.org/5.4/coffeescript/zone.html">t5/core/zone</a>.<br/><br/>
<t:pagelink page="Index">Home</t:pagelink><br/><br/>
<t:tabgroup>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxComponents1.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxComponents1.java"/>
<t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/js.css"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/ajax/TextEchoer.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/ajax/TextEchoer.java"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/mixins/ZoneUpdater.java"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/mixins/zone-updater.js"/>
</t:tabgroup>
</body>
</html>