Author: buildbot
Date: Sun Mar 19 21:20:09 2017
New Revision: 1008644
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 Sun Mar 19
21:20:09 2017
@@ -271,28 +271,43 @@ void onActionFromRegister()
return result;
}
</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 has an API which makes it easy for server-side events to be invoked
from JavaScript. In the server-side, you first need to annotate the event
handler methods you want exposed with the
new <code>@PublishEvent</code> annotation. Then, in JavaScript, all
you need to do is to call the
existing <code>t5/core/ajax</code> function with the server-side
event name/type in the <code>url</code> 
parameter and with an <code>options</code> parameter containing
an <code>element</code> property, be it null or specifying an DOM
element to be used as the starting point for finding the event information.
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 has an API which makes it easy for server-side events to be invoked
from JavaScript. In the server-side, you first need to annotate the event
handler methods you want exposed with the
new <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>t5/core/ajax</code> has two
parameters: <code>url</code> and <code>options</code>. The first one
was the difficult part to get when doing AJAX requests to event handler methods
in Tapestry. You needed to inject <code>ComponentResources</code>,
call <code>componentResources.createEventLink()</code> for each event
handler method then pass all this information to JS through one of
the <code>JavaScriptSupport</code> methods. Since 5.4.2, 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, it's
put in the <code><body></code> element. For components, it's put in
the first element rendered created by rendering the component. Given an HTML
element, th
e search is done until one in this 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<code>.</code></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 class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">public class PublishEventDemoComponent
{
@OnEvent("answer")
@PublishEvent
JSONObject answer() {
- return new JSONObject("origin", "componentAction");
+ return new JSONObject("origin", "componentAnswer");
}
@PublishEvent
JSONObject onAction()
{
- return new JSONObject("origin", "componentAnswer");
+ return new JSONObject("origin", "componentAction");
}
}
</pre>
</div></div><p>Notice that <code>answer()</code>
and <code>onAction()</code> are ordinary event handlers, with nothing
specific besides the <code>@PublishEvent</code> annotation.</p><div
class="code panel pdl" style="border-width: 1px;"><div class="codeContent
panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><div id="component"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
- <p id="componentParagraph">I'm a <strong
id="strong">component</strong></p>
+ <p id="componentParagraph">I'm a component</p>
+ <p id="result">(no result yet)</p>
</div></pre>
-</div></div><p> </p><p> </p><p> </p><p> </p><p> </p></div>
+</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 class="brush: js; gutter: true; theme: Default"
style="font-size:12px;">require(["t5/core/ajax", "jquery"], function (ajax, $) {
+ // Creating a callback to be invoked with <p id="result"> is clicked.
+ $('#result').click(function() {
+ ajax('answer', {
+ element: $('#result'), // This doesn't need to be the
same element as the one two lines above
+ // Callback called when the request is finished.
+ // response.json is the object returned by the event handler method
+ success: function(response) {
+ $('#result').text(response.json.origin);
+ }
+ });
+ });
+});</pre>
+</div></div><p>If you're trying to invoke a page class event handler, you can
change line 5 above to <code>element: null</code>. You do need to
explicitly set the <code>element</code> property, otherwise
the <code>ajax</code> function will treat the first
parameter, <code>url</code>, as an URL and not as an event name.</p></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
