Author: buildbot
Date: Tue Oct 31 11:11:46 2023
New Revision: 1084578
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/ajax-and-zones.html
websites/production/tapestry/content/cache/main.pageCache
Modified: websites/production/tapestry/content/ajax-and-zones.html
==============================================================================
--- websites/production/tapestry/content/ajax-and-zones.html (original)
+++ websites/production/tapestry/content/ajax-and-zones.html Tue Oct 31
11:11:46 2023
@@ -274,7 +274,7 @@ void onUpdateTime()
} </code></pre>
</div></div><p>That <code>onUpdateTime</code> method is just an ordinary
Tapestry event handler, except that it uses an injected
<code>AjaxResponseRenderer</code> to tell Tapestry what zone to update when the
link is clicked.</p><p>Since Tapestry 5.4.2, you can also easily invoke
server-side event handlers using the <code>@PublishEvents</code>
annotation and the <code>t5/core/ajax</code> JavaScript function, as
explained in the "<span>Invoking server-side event handler methods from
JavaScript" section below.</span></p><h3
id="AjaxandZones-Zones">Zones</h3><p>Zones are Tapestry's approach to
performing partial page updates. A <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html";>Zone
component</a> renders as an HTML element, typically a <div>, and serves
as a marker for where dynamically-updated content should be replaced. A zone is
recognizable in the DOM because it will have the attribute
60;<code>data-container-type=zone</code>. The client-side support for Zones is
keyed off of this attribute and value.</p><p>Starting in Tapestry 5.4 you can
use any HTML element in your template as a zone marker, by passing its
client-side id to the two-argument version of the addRender
method.</p><p><span>A Zone updated can be triggered by an EventLink, ActionLink
or Select component, or by a Form. All of these components support the
<code>async</code> and/or <code>zone</code> parameters. Clicking such a link
will invoke an event handler method on the server as normal ... except that a
</span><em>partial page response</em><span> is sent to the client, and the
content of that response is used to update the Zone's <div> in
place.</span></p><div class="navmenu" style="float:right; background:#eee;
margin:3px; padding:0 1em">
<p> <strong>JumpStart Demo:</strong>
- <span class="nobr"><a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/actionlink";
rel="nofollow">AJAX ActionLink<sup><img align="middle" class="rendericon"
src="/images/confluence/icons/linkext7.gif" height="7" width="7" alt=""
border="0"></sup></a></span></p></div><p></p><h3
id="AjaxandZones-EventHandlerReturnTypes">Event Handler Return Types</h3><p>In
a traditional request, the return value of an event handler method may used to
determine which page will render a <em>complete</em> response, and a
<em>redirect</em> may sent to the client to render the new page (as a new
request).</p><p>In contrast, with a Zone update, the return value may used to
render a <em>partial response</em> within the <em>same request</em>.</p><div
class="confluence-information-macro confluence-information-macro-note"><span
class="aui-icon aui-icon-small aui-iconfont-warning
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body"><p>Star
ting in Tapestry 5.3, Ajax event handlers typically have a void return type
and use AjaxResponseRenderer to indicate which zone to update. The
AjaxResponseRender approach means that the <code>zone</code> parameter's
value (oridinarily indicating which zone to update) is no longer needed.
Tapestry 5.4 introduced the <code>async="true"</code> parameter to avoid
having to redundantly indicate which zone to update.</p></div></div><p>If you
only have one zone to update and don't want to use AjaxResponseRenderer, you
can instead return a value from your event handler method. The simplest case is
just to return the zone's own body:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
+ <span class="nobr"><a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/actionlink";
rel="nofollow">AJAX ActionLink<sup><img align="middle" class="rendericon"
src="/images/confluence/icons/linkext7.gif" height="7" width="7" alt=""
border="0"></sup></a></span></p></div><h3
id="AjaxandZones-EventHandlerReturnTypes">Event Handler Return Types</h3><p>In
a traditional request, the return value of an event handler method may used to
determine which page will render a <em>complete</em> response, and a
<em>redirect</em> may sent to the client to render the new page (as a new
request).</p><p>In contrast, with a Zone update, the return value may used to
render a <em>partial response</em> within the <em>same request</em>.</p><div
class="confluence-information-macro confluence-information-macro-note"><span
class="aui-icon aui-icon-small aui-iconfont-warning
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body"><p>Starting in
Tapestry 5.3, Ajax event handlers typically have a void return type and use
AjaxResponseRenderer to indicate which zone to update. The AjaxResponseRender
approach means that the <code>zone</code> parameter's value (oridinarily
indicating which zone to update) is no longer needed. Tapestry 5.4 introduced
the <code>async="true"</code> parameter to avoid having to redundantly
indicate which zone to update.</p></div></div><p>If you only have one zone to
update and don't want to use AjaxResponseRenderer, you can instead return a
value from your event handler method. The simplest case is just to return the
zone's own body:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeContent panelContent pdl">
<pre><code class="language-java">@Inject
private Request request;
@@ -300,7 +300,7 @@ Object onActionFromSomeLink()
</code></pre>
</div></div><h3 id="AjaxandZones-MultipleZoneUpdates">Multiple Zone
Updates</h3><p></p><div class="navmenu" style="float:right; background:#eee;
margin:3px; padding:0 1em">
<p> <strong>JumpStart Demo:</strong>
- <span class="nobr"><a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/multiplezoneupdate";
rel="nofollow">AJAX Multiple Zone Update<sup><img align="middle"
class="rendericon" src="/images/confluence/icons/linkext7.gif" height="7"
width="7" alt="" border="0"></sup></a></span></p></div><p>An event handler
often needs to update multiple zones on the client side. To accomplish this,
use an <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html";>AjaxResponseRenderer</a>,
indicating the zones to update. You must know the client-side id for each zone
to update (the best way for this is to lock down the zone's id using the id
parameter of the Zone component).</p><p></p><p><em>AjaxResponseRenderer was
introduced in Tapestry 5.3. For Tapestry 5.2 and earlier, return a <a
class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ajax/MultiZoneU
pdate.html">MultiZoneUpdate</a> object instead.</em></p><p>The renderer for
each zone can be the zone itself, a block, a component, a <a
class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Renderable.html";>Renderable</a>
or a <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/runtime/RenderCommand.html";>RenderCommand</a>
... or an object, such as String, that can be coerced to either of
these.</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For
Tapestry 5.3 and later</b></div><div class="codeContent panelContent pdl">
+ <span class="nobr"><a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/multiplezoneupdate";
rel="nofollow">AJAX Multiple Zone Update<sup><img align="middle"
class="rendericon" src="/images/confluence/icons/linkext7.gif" height="7"
width="7" alt="" border="0"></sup></a></span></p></div>An event handler often
needs to update multiple zones on the client side. To accomplish this, use an
<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html";>AjaxResponseRenderer</a>,
indicating the zones to update. You must know the client-side id for each zone
to update (the best way for this is to lock down the zone's id using the id
parameter of the Zone component).<p></p><p><em>AjaxResponseRenderer was
introduced in Tapestry 5.3. For Tapestry 5.2 and earlier, return a <a
class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ajax/MultiZoneUpdate.h
tml">MultiZoneUpdate</a> object instead.</em></p><p>The renderer for each zone
can be the zone itself, a block, a component, a <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Renderable.html";>Renderable</a>
or a <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/runtime/RenderCommand.html";>RenderCommand</a>
... or an object, such as String, that can be coerced to either of
these.</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For
Tapestry 5.3 and later</b></div><div class="codeContent panelContent pdl">
<pre><code class="language-java">@InjectComponent
private Zone userInput;
@@ -328,7 +328,7 @@ void onActionFromRegister()
<pre><code class="language-xml"><t:zone t:id="myzone"
id="prop:componentResources.id"></code></pre>
</div></div><p></p><p>See <a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/components1";
rel="nofollow">this JumpStart Example</a> for details.</p><p>The show and
update function names (Tapestry 5.3 and earlier only) are converted to lower
case; all the methods of Tapestry.ElementEffect should have all lower-case
names. Because client-side JavaScript is so fluid (new methods may be added to
existing objects), Tapestry makes no attempt to validate the function names ...
however, if the names are not valid, then the default show and highlight
methods will be used.</p><p>Zones may only be used inside the <em>body</em> of
a page, not the head<em>.</em></p><h3 id="AjaxandZones-MoreInformation">More
Information</h3><p>For examples of extending a Form with a Zone and updating
multiple zones at once, see the <a href="ajax-components-faq.html">Ajax
Components FAQ</a>.</p><p>There are also a number of Ajax-related examples at
the  <a class="extern
al-link" href="https://tapestry-jumpstart.org/jumpstart/"; rel="nofollow"><span
class="confluence-link">Tapestry JumpStart</span></a> site.</p><p><span
class="confluence-anchor-link" id="AjaxandZones-autocomplete"></span></p><h2
id="AjaxandZones-AutocompleteMixin">Autocomplete Mixin</h2><p></p><div
class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em">
<p> <strong>JumpStart Demo:</strong>
- <span class="nobr"><a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/autocompletemixin";
rel="nofollow">Autocomplete Mixin<sup><img align="middle" class="rendericon"
src="/images/confluence/icons/linkext7.gif" height="7" width="7" alt=""
border="0"></sup></a></span></p></div><p>The <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html";>Autocomplete</a>
mixin exists to allow a text field to query the server for completions for a
partially entered phrase. It is often used in situations where the field exists
to select a single value from a large set, too large to successfully download
to the client as a drop down list; for example, when the number of values to
select from is numbered in the thousands.</p><p></p><p>Autocomplete can be
added to an existing text field:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
+ <span class="nobr"><a class="external-link"
href="https://tapestry-jumpstart.org/jumpstart/examples/ajax/autocompletemixin";
rel="nofollow">Autocomplete Mixin<sup><img align="middle" class="rendericon"
src="/images/confluence/icons/linkext7.gif" height="7" width="7" alt=""
border="0"></sup></a></span></p></div>The <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html";>Autocomplete</a>
mixin exists to allow a text field to query the server for completions for a
partially entered phrase. It is often used in situations where the field exists
to select a single value from a large set, too large to successfully download
to the client as a drop down list; for example, when the number of values to
select from is numbered in the thousands.<p></p><p>Autocomplete can be added to
an existing text field:</p><div class="code panel pdl" style="border-width:
1px;"><div class="codeContent panelContent pdl">
<pre><code class="language-java"> <t:textfield t:id="accountName"
t:mixins="autocomplete" size="100"/>
</code></pre>
</div></div><p>The mixin can be configured in a number of ways, see the <a
href="component-reference.html">component reference</a>.</p><p>When the user
types into the field, the client-side JavaScript will send a request to the
server to get completions.</p><p>You must write an event handler to provide
these completions. The name of the event is "providecompletions". The context
is the partial input value, and the return value will be converted into the
selections for the user.</p><p>For example:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
@@ -368,7 +368,7 @@ void onActionFromRegister()
<p id="componentParagraph">I'm a component</p>
<p id="result">(no result yet)</p>
</div></code></pre>
-</div></div><p>The template also has nothing special. When rendered, the
component's events information is placed in the outer <<code>div></code>
(<code>id="component"). </code></p><p>We want to update the text
of <code><p id="result"></code> with the value of
the <code>origin</code> property of the returned JSON object when that
element itself is clicked, so here's our JavaScript code, supposing we want to
trigger the <code>answer</code> event:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>The template also has nothing special. When rendered, the
component's events information is placed in the outer <<code>div</code>
<code>id="component">. </code></p><p>We want to update the text
of <code><p id="result"></code> with the value of
the <code>origin</code> property of the returned JSON object when that
element itself is clicked, so here's our JavaScript code, supposing we want to
trigger the <code>answer</code> event:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre><code class="language-js">require(["t5/core/ajax", "jquery"], function
(ajax, $) {
// Creating a callback to be invoked with <p id="result"> is clicked.
$('#result').click(function() {
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
