Author: buildbot
Date: Tue Oct 31 12:11:46 2023
New Revision: 1084579
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
12:11:46 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 "<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><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
@@ -319,14 +319,14 @@ void onActionFromRegister()
</div></div><p><span>This example assumes that there are two zones,
"userInput" and "helpPanel", somewhere in the rendered page, waiting to receive
the updated content.</span></p><p><span> </span></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>In this example, the Zone receives
the update but does not provide any content. That's OK, the other client-side
elements (<code>userInput</code> and <code>helpPanel</code>) will be updated,
and the zone's content left unchanged.</p></div></div><p>This demonstrates why
it is necessary for the developer to specify a particular client-side id for
Zone components; if they were dynamically allocated ids, as is typical in most
other elements, it would be impossible for this code to know what client-side
id was used for the Zone.</p><h3 id="AjaxandZones-ZoneComponen
tIdvs.ZoneElementId">Zone Component Id vs. Zone Element Id</h3><p>Like all
Tapestry components, Zones have a component id, specified using the
<code>t:id</code> attribute. If you do not assign a component id, a unique id
is assigned by Tapestry.</p><p>However, to coordinate things on the client
side, it is necessary for components that wish to update the zone know the
<em>client-side element id</em>. This is specified with the <code>id</code>
parameter of the Zone component. If the <code>id</code> parameter is not bound,
then a unique value (for the current page and render) is generated by Tapestry
and this value is difficult to predict. (The actual value will be available as
the <code>clientId</code> property of the Zone component
itself.)</p><p>Remember that the component id (<code>t:id</code>) is used to
<em>inject</em> the Zone component into the containing page or component. The
client-side id (<code>id</code>) is used on the client side to orchestrate
requests and updates. You
will often seen the following construct:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre><code class="language-xml"><t:zone t:id="myZone" id="myzone"> ...
</t:zone>
</code></pre>
-</div></div><h3 id="AjaxandZones-TheContainingZone(zone="^")">The
Containing Zone (zone="^")</h3><p><em><strong>Since 5.2</strong></em></p><p>If
the Form or Link is enclosed by the Zone itself, and you're using
the <code>zone</code> parameter instead of the <code>async</code>
parameter, then the <code>zone</code> parameter may be set to the special
value <strong><code>^</code></strong><code> (the carat)</code>. The zone
is found – on the client side – by searching up form the
form or link element for the first enclosing element that is a Zone. In this
way, the client-side coordination can occur without having to know what the
specific client-side id of the Zone is. Because of this, in some cases it is no
longer necessary to specify the Zone's <code>id</code> parameter.</p><h3
id="AjaxandZones-AnUpdatedivwithinaZonediv(Tapestry5.3andearlier)">An Update
div within a Zone div (Tapestry 5.3 and earlier)</h3><p><em><strong>Deprecat
ed</strong><strong>:</strong> This feature is removed starting with Tapestry
5.4</em></p><p>In many situations, a Zone is a kind of "wrapper" or "container"
for dynamic content; one that provides a look and feel ... a bit of wrapping
markup to create a border. In that situation, the Zone <div> may contain
an update <div>.</p><p>An Update <div> is specifically a
<div> element marked with the CSS class "t-zone-update", <em>inside</em>
the Zone's <div>.</p><p>If an Update div exists within a Zone div, then
when Tapestry updates a zone only the update <div>'s content will be
changed, rather than the entire Zone <div>.</p><p>The show and update
functions (see Zone Functions, below) apply to the Zone <div>, not just
the update <div>.</p><h3
id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect
Functions (Tapestry 5.3 and
earlier)</h3><p><strong><em>Deprecated:</em></strong> This feature refers to
client-side logic on
ly present in Tapestry 5.3 or earlier. For 5.4, there are client-side events
that are triggered before and after changes to the Zone; listeners on those
events can trigger whatever animations they like.</p><p>A Zone may be initially
visible or invisible. When a Zone is updated, it is made visible if not
currently so. This is accomplished via a function on the Tapestry.ElementEffect
client-side object. By default, the show() function is used for this purpose.
If you want Tapestry to call a different Tapestry.ElementEffect function when
updates occur, specify its name with the zone's show parameter.</p><p>If a Zone
is already visible, then a different effect function is used to highlight the
change. By default, the highlight() function is called, which performs a yellow
fade to highlight that the content of the Zone has changed. Alternatively, you
can specify a different effect function with the Zone's update
parameter:</p><div class="table-wrap"><table class="table table-bordered tab
le-responsive"><tbody><tr><th colspan="1" rowspan="1"
class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1"
rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1"
rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1"
rowspan="1" class="confluenceTd"><p>(the default) highlight changes to an
already-visible zone</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>make the zone visible if it isn't already
visible</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td
colspan="1" rowspan="1" class="confluenceTd"><p>slideup()</p></td><td
colspan="1" rowspan="1" class="confluenceTd"><p>slide the content back up
(opposite of slidedown)</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>fade()</p><
/td><td colspan="1" rowspan="1" class="confluenceTd"><p>fade the content out
(opposite of show)</p></td></tr></tbody></table></div><p>To have Tapestry
update a zone without the usual yellow highlight effect, just specify "show"
for the update parameter:</p><div class="code panel pdl" style="border-width:
1px;"><div class="codeContent panelContent pdl">
+</div></div><h3 id="AjaxandZones-TheContainingZone(zone="^")">The
Containing Zone (zone="^")</h3><p><em> <strong>Since 5.2</strong>
</em></p><p>If the Form or Link is enclosed by the Zone itself, and you're
using the <code>zone</code> parameter instead of
the <code>async</code> parameter, then the <code>zone</code>
parameter may be set to the special value <strong> <code>^</code>
</strong> <code> (the carat)</code>. The zone is found – on the
client side – by searching up form the form or link element for the
first enclosing element that is a Zone. In this way, the client-side
coordination can occur without having to know what the specific client-side id
of the Zone is. Because of this, in some cases it is no longer necessary to
specify the Zone's <code>id</code> parameter.</p><h3
id="AjaxandZones-AnUpdatedivwithinaZonediv(Tapestry5.3andearlier)">An Update
div within a Zone div (Tapestry 5.3 and earlier)</h3><p><em> <strong>De
precated</strong> <strong>:</strong> This feature is removed starting with
Tapestry 5.4</em></p><p>In many situations, a Zone is a kind of "wrapper" or
"container" for dynamic content; one that provides a look and feel ... a bit of
wrapping markup to create a border. In that situation, the Zone <div> may
contain an update <div>.</p><p>An Update <div> is specifically a
<div> element marked with the CSS class "t-zone-update", <em>inside</em>
the Zone's <div>.</p><p>If an Update div exists within a Zone div, then
when Tapestry updates a zone only the update <div>'s content will be
changed, rather than the entire Zone <div>.</p><p>The show and update
functions (see Zone Functions, below) apply to the Zone <div>, not just
the update <div>.</p><h3
id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect
Functions (Tapestry 5.3 and earlier)</h3><p><strong> <em>Deprecated:</em>
</strong> This feature refers to client-side
logic only present in Tapestry 5.3 or earlier. For 5.4, there are client-side
events that are triggered before and after changes to the Zone; listeners on
those events can trigger whatever animations they like.</p><p>A Zone may be
initially visible or invisible. When a Zone is updated, it is made visible if
not currently so. This is accomplished via a function on the
Tapestry.ElementEffect client-side object. By default, the show() function is
used for this purpose. If you want Tapestry to call a different
Tapestry.ElementEffect function when updates occur, specify its name with the
zone's show parameter.</p><p>If a Zone is already visible, then a different
effect function is used to highlight the change. By default, the highlight()
function is called, which performs a yellow fade to highlight that the content
of the Zone has changed. Alternatively, you can specify a different effect
function with the Zone's update parameter:</p><div class="table-wrap"><table
class="table table-bor
dered table-responsive"><tbody><tr><th colspan="1" rowspan="1"
class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1"
rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1"
rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1"
rowspan="1" class="confluenceTd"><p>(the default) highlight changes to an
already-visible zone</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>make the zone visible if it isn't already
visible</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td
colspan="1" rowspan="1" class="confluenceTd"><p>slideup()</p></td><td
colspan="1" rowspan="1" class="confluenceTd"><p>slide the content back up
(opposite of slidedown)</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>fa
de()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>fade the
content out (opposite of show)</p></td></tr></tbody></table></div><p>To have
Tapestry update a zone without the usual yellow highlight effect, just specify
"show" for the update parameter:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre><code class="language-xml"><t:zone t:id="myZone"
t:update="show"></code></pre>
</div></div><p>You may also define and use your own JavaScript effect function
(with lower-case names), like this:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre><code class="language-js">Tapestry.ElementEffect.myeffectname =
function(element){ YourJavascriptCodeGoesHere; };
</code></pre>
</div></div><h3 id="AjaxandZones-ZoneLimitations">Zone
Limitations</h3><p>Unlike many other situations, Tapestry relies on you to
specify useful and unique ids to Zone components, then reference those ids
inside EventLink (or ActionLink, or Form) components. Using Zone components
inside any kind of loop may cause additional problems, as Tapestry will
<em>uniqueify</em> the client id you specify (appending an index
number).</p><p>If you create a component that contains a zone, and you use that
component in a loop, you'll likely need to set the client-side id like
this:</p><p></p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeContent panelContent pdl">
<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">
+</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>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"/>
@@ -346,7 +346,9 @@ 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>
0;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 added to the fi
rst 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><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">
<pre><code class="language-java">public class PublishEventDemoComponent
{
@OnEvent("answer")
@@ -368,7 +370,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
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.
