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.