Pass data via CustomEvent from JS to Java

Question

I have a Vaadin project

I'm dispatching a CustomEvent from a JS lit component.

I'm listening to it from a Java class and I correctly receive the events emitted.

The following is my JS code:

this.dispatchEvent(new CustomEvent('change', {detail: this.breakLines, bubbles: true, composed: true}));

And the following is my Java listener:

getElement().addEventListener("change", e -> {
    System.out.println("change value: " + e.getEventData());
});

Currently my Java code outputs an empty object {}

How can I extract the data that resides in "detail"?

Answer 1

Vaadin does not submit all properties of the event by default, you need to give it a hint. For example I'm doing this in my recent React example:

    getElement().addEventListener("color-change", e -> {
                var newValue = e.getEventData().getString("event.hex");
                setModelValue(newValue, true);
            })
            .addEventData("event.hex")

In your case that could be:

.addEventData("event.detail")

And then accessing that boolean:

e.getEventData().getBoolean("event.detail")

Alternatively, you can create a custom event and declare the transferred details with annotations, as described in other answer, but that requires quite a lot more code.

Answer 2

You can use @EventData annotation in the Jaa constructor of the event for this. See example below:

@DomEvent("tab-changed")
public static class TabChangedEvent<R extends TabSheet>
        extends ComponentEvent<TabSheet> {
...

    public TabChangedEvent(TabSheet source, boolean fromClient,
            @EventData("event.detail") JsonObject details) {
        super(source, fromClient);
        this.index = (int) details.getNumber("index");
        this.previousIndex = (int) details.getNumber("previousIndex");
        this.previousTab = details.getString("previousTab");
        this.tab = details.getString("tab");
        this.caption = details.getString("caption");
        this.source = source;
    }

The full code is here https://github.com/TatuLund/TabSheet/blob/master/src/main/java/org/vaadin/addons/tatu/TabSheet.java#L385 and there is a longer story in Vaadin Blog about this.

Answer 3

The following Java code will solve the issue :

getElement().addEventListener("change", e -> {
    JsonObject eventData = e.getEventData().getJsonObject("event.detail");
    // Access specific properties from the eventData object
    String breakLines = eventData.getString("breakLines");
    System.out.println("change value: " + breakLines);
});

The json object received from a JS lit component is obtained in this code using the eventData.getJsonObject("event.detail") method. Then, if breakLines is a property of the event.detail object in your custom event, you may get particular attributes from the eventData object using eventData.getString("breakLines").