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 2017/03/19 21:20:09 UTC
svn commit: r1008644 - in /websites/production/tapestry/content:
ajax-and-zones.html cache/main.pageCache
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.