Author: buildbot
Date: Wed Nov 1 20:11:47 2023
New Revision: 1084591
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 Wed Nov 1
20:11:47 2023
@@ -272,7 +272,7 @@ void onUpdateTime()
currentTime = new Date();
 ajaxResponseRenderer.addRender(timeArea);
} </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">
+</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 <a href="ajax-and-zones.html">Invoking server-side event
handler methods from JavaScript</a> section below.</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 ha
ve the attribute <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><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
@@ -346,9 +346,7 @@ void onActionFromRegister()
return result;
}
</code></pre>
-</div></div><p>This presumes that <code>findByPartialAccountName()</code> will
sort the values, otherwise you will probably want to sort them. The
Autocomplete mixin does <em>not</em> do any sorting.</p><p>You can return an
object array, a list, even a single object. You may return objects instead of
strings ... and <code>toString()</code> will be used to convert them into
client-side strings.</p><p></p><h2
id="AjaxandZones-Invokingserver-sideeventhandlermethodsfromJavaScript">Invoking
server-side event handler methods from JavaScript</h2><p>Tapestry 5.4.2
introduced an API which makes it easy for server-side events to be invoked from
JavaScript. On the server-side, you first need to annotate the event handler
methods you want to expose with
the <code>@PublishEvent</code> annotation. Then, in JavaScript, all
you need to do is to call the existing <code>
- <a class="external-link"
href="http://tapestry.apache.org/current/coffeescript/ajax.html";>t5/core/ajax</a>
- </code> function, but with slightly different
parameters.</p><p><code>The t5/core/ajax</code> function has two
parameters: <code>url</code> and <code>options</code>. Prior to
Tapestry 5.4.2, the first one was difficult to get when doing AJAX requests to
event handler methods. You needed to inject <code>ComponentResources in your
component class</code>,
call <code>componentResources.createEventLink()</code> for each event
handler method, then pass all this information back to the browser through one
of the <code>JavaScriptSupport</code> methods. For Tapestry 5.4.2 and
later, your JavaScript code only needs to know the event name (also called
<em>event type</em>) and optionally indicate a DOM element to be used as a
starting point for finding the event URL.</p><p>All event data is stored
in <code>data-componenent-events</code> attributes. For page classes, the
attribute is added to the <code><body></code> element. For
components, it's ad
ded to the first element rendered by the component. Given an HTML element, the
search is performed in the following order until information for the given
event is first found:</p><ol><li>The element itself</li><li>The element's
previous siblings, closest first (bottom-up)</li><li>The element's
parents</li><li>The page's <<code>body></code>
element</li></ol><p></p><p>Here's one example:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>This presumes that <code>findByPartialAccountName()</code> will
sort the values, otherwise you will probably want to sort them. The
Autocomplete mixin does <em>not</em> do any sorting.</p><p>You can return an
object array, a list, even a single object. You may return objects instead of
strings ... and <code>toString()</code> will be used to convert them into
client-side strings.</p><h2
id="AjaxandZones-Invokingserver-sideeventhandlermethodsfromJavaScriptinvoking-server-side-event-handler-methods-from-javascript">Invoking
server-side event handler methods from JavaScript<span
class="confluence-anchor-link"
id="AjaxandZones-invoking-server-side-event-handler-methods-from-javascript"></span></h2><p>Tapestry
5.4.2 introduced an API which makes it easy for server-side events to be
invoked from JavaScript. On the server-side, you first need to annotate the
event handler methods you want to expose with
the <code>@PublishEvent</code> annotation. Then, in JavaScript,
all you need to do is to call the existing <a class="external-link"
href="http://tapestry.apache.org/current/coffeescript/ajax.html";>
<code>t5/core/ajax</code> </a> function, but with slightly different
parameters.</p><p>The <code>t5/core/ajax</code> function has two
parameters: <code>url</code> and <code>options</code>. Prior to
Tapestry 5.4.2, the first one was difficult to get when doing AJAX requests to
event handler methods. You needed to inject <code>ComponentResources</code> in
your component class,
call <code>componentResources.createEventLink()</code> for each event
handler method, then pass all this information back to the browser through one
of the <code>JavaScriptSupport</code> methods. For Tapestry 5.4.2 and
later, your JavaScript code only needs to know the event name (also called
<em>event type</em>) and optionally indicate a DOM element to be used as a
starting point for finding the event URL.</p><p>All event data is stored
in <code>dat
a-componenent-events</code> attributes. For page classes, the attribute is
added to the <code><body></code> element. For components, it's added
to the first element rendered by the component. Given an HTML element, the
search is performed in the following order until information for the given
event is first found:</p><ol><li>The element itself</li><li>The element's
previous siblings, closest first (bottom-up)</li><li>The element's
parents</li><li>The page's <code><body></code>
element</li></ol><p></p><p>Here's one example:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre><code class="language-java">public class PublishEventDemoComponent
{
@OnEvent("answer")
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
