Question 266863 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Pass data via CustomEvent from JS to Java

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"?

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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").

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search