You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2022/07/11 08:11:53 UTC
svn commit: r1080107 - in /websites/production/tapestry/content: ajax-and-zones.html cache/main.pageCache
Author: buildbot
Date: Mon Jul 11 08:11:53 2022
New Revision: 1080107
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 Mon Jul 11 08:11:53 2022
@@ -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="http://jumpstart.doublenegative.com.au/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>Sta
rting 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;
@@ -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="http://jumpstart.doublenegative.com.au/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">
+ <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">
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.