JS hooks

An example of how to hook in custom JS events into Medusa

Back to overview

Render events

This example is identical to the basic button example, however it is extended with custom JS functions within the rendering process. You can hook into the following events:

No pre-render call

No pre-event call

No post-event call

No post-render call

0
JDK22.0.2 w/ Medusa 0.9.6-SNAPSHOT

Client

<p id="pre-render">No pre-render call</p>
<p id="pre-event">No pre-event call</p>
<p id="post-event">No post-event call</p>
<p id="post-render">No post-render call</p>

<div th:text="${counter}"></div>

<button m:click="updateCounter(1)">Increase counter</button>
<button m:click="reset()">Reset counter</button>

<script>
    _M_extend = {};
    _M_extend.preRender = function(listOfDiffs) {
        document.getElementById("pre-render").textContent = JSON.stringify(listOfDiffs);
    };
    _M_extend.preEvent = function(diff) {
        document.getElementById("pre-event").textContent = JSON.stringify(diff);
    };
    _M_extend.postEvent = function(diff) {
        document.getElementById("post-event").textContent = JSON.stringify(diff);
    };
    _M_extend.postRender = function(listOfDiffs) {
        document.getElementById("post-render").textContent = JSON.stringify(listOfDiffs);
    };
</script>

Server

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;
import io.getmedusa.medusa.core.session.Session;

import static io.getmedusa.medusa.core.attributes.Attribute.$$;

import java.util.List;

@UIEventPage(path = "/detail/js-hooks", file = "/pages/js-hooks.html")
public class Controller {

    public List<Attribute> setupAttributes() {
        return $$("counter", 0);
    }

    public List<Attribute> updateCounter(int amount, Session session) {
        int counter = session.getAttribute("counter");
        counter += amount;
        return $$("counter", counter);
    }

    public List<Attribute> reset() {
        return $$("counter", 0);
    }

}