[Announcement] New feature for Tapestry 5.4.2 and 5.5: easily call event handler methods from JavaScript

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
Report Content as Inappropriate

[Announcement] New feature for Tapestry 5.4.2 and 5.5: easily call event handler methods from JavaScript

Thiago H de Paula Figueiredo

This is something I've wanted for a really long time to implement in
Tapestry, so I won't wait for it to be released or even the documentation
to be updated in the site to post it here. Feedback welcome!
Invoking server-side event handler methods from JavaScript

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
@PublishEvent annotation. Then, in JavaScript, all you need to do is to
call the existing t5/core/ajax
<http://tapestry.apache.org/current/coffeescript/ajax.html> function but
with slightly different parameters.

t5/core/ajax has two parameters: url and options. The first one was the
difficult part to get when doing AJAX requests to event handler methods in
Tapestry. You needed to inject ComponentResources, call
componentResources.createEventLink() for each event handler method then
pass all this information to JS through one of the JavaScriptSupport methods.
Since 5.4.2, your JavaScript code only needs to know the event name (also
called *event type*) and optionally indicate a DOM element to be used as a
starting point for finding the event URL.

All event data is stored in data-componenent-events attributes. For page
classes, it's put in the <body> element. For components, it's put in the
first element rendered created by rendering the component. Given an HTML
element, the search is done until one in this order until information for
the given event is first found:

   1. The element itself
   2. The element's previous siblings, closest first (bottom-up)
   3. The element's parents.
   4. The page's <body> element.

Here's one example:
public class PublishEventDemoComponent
    JSONObject answer() {
        return new JSONObject("origin", "componentAnswer");

    JSONObject onAction()
        return new JSONObject("origin", "componentAction");

Notice that answer() and onAction() are ordinary event handlers, with
nothing specific besides the @PublishEvent annotation.
<div id="component" xmlns:t="
    <p id="componentParagraph">I'm a component</p>
    <p id="result">(no result yet)</p>

The template also has nothing special. When rendered, the component's
events information is placed in the outer <div> (id="component").

We want to update the text of <p id="result"> with the value of the
origin property
of the returned JSON object when that element itself is clicked, so here's
our JavaScript code, supposing we want to trigger the answer event:
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
            success: function(response) {

If you're trying to invoke a page class event handler, you can change line
5 above to element: null. You do need to explicitly set the element property,
otherwise the ajax function will treat the first parameter, url, as an URL
and not as an event name.