THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
Since Tapestry 5.4.2, you can also easily invoke server-side event handlers using the @PublishEvents annotation and the t5/core/ajax JavaScript function, as explained in the "Invoking server-side event handler methods from JavaScript" section below.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component 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 data-container-type=zone. The client-side support for Zones is keyed off of this attribute and value.
...
You can return an object array, a list, even a single object. You may return objects instead of strings ... and toString() will be used to convert them into client-side strings.
| Anchor | ||||
|---|---|---|---|---|
|
Invoking server-side event handler methods from JavaScript
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 @PublishEvent annotation. Then, in JavaScript, all you need to do is to call the existing existing t5/core/ajax function function, but with slightly different parameters.
The t5/core/ajax function has two parameters: url and options. 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 ComponentResources in your component class, call componentResources.createEventLink() for each event handler method, then pass all this information back to the browser through one of the JavaScriptSupport methods. For Tapestry 5.4.2 and later, 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.
...
- The element itself
- The element's previous siblings, closest first (bottom-up)
- The element's parents
- The page's <
body><body>element
Here's one example:
...
The template also has nothing special. When rendered, the component's events information is placed in the outer <div <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:
...