Java Code Examples for com.vaadin.flow.dom.Element#addEventListener()

private static <T> void setupTemplateRendererEventHandler(UI ui,
        Element eventOrigin, String handlerName, Consumer<T> consumer,
        Function<String, T> keyMapper) {
    ui.getInternals().getStateTree()
            .beforeClientResponse(eventOrigin.getNode(), context ->
            // sendEventMessage is an exported function at the client side
            ui.getPage().executeJs(String.format(
                    "$0.%s = function(e) {Vaadin.Flow.clients[$1].sendEventMessage(%d, '%s', {key: e.model ? e.model.__data.item.key : e.target.__dataHost.__data.item.key})}",
                    handlerName, eventOrigin.getNode().getId(),
                    handlerName), eventOrigin,
                    ui.getInternals().getAppId()));

    DomListenerRegistration registration = eventOrigin.addEventListener(
            handlerName, event -> processEventFromTemplateRenderer(event,
                    handlerName, consumer, keyMapper));

    runOnceOnDetach(eventOrigin, registration::remove);
}
 

@Override
protected void init(VaadinRequest request) {
    getElement().appendChild(ElementFactory.createDiv(
            "This test initially loads a stylesheet which makes all text red and a JavaScript which listens to body clicks"));
    getElement().appendChild(ElementFactory.createHr());
    add(new JsResourceComponent());

    Element jsOrder = ElementFactory.createButton("Load js")
            .setAttribute("id", "loadJs");
    StreamRegistration jsStreamRegistration = getSession()
            .getResourceRegistry().registerResource(getJsResource());
    jsOrder.addEventListener("click", e -> {
        getPage().addJavaScript("base://"
                + jsStreamRegistration.getResourceUri().toString());
    });
    Element allBlue = ElementFactory
            .createButton("Load 'everything blue' stylesheet")
            .setAttribute("id", "loadBlue");
    allBlue.addEventListener("click", e -> {
        add(new AllBlueImportantComponent());

    });
    getElement().appendChild(jsOrder, allBlue, ElementFactory.createHr());
}
 

private void addSyncWithInitialValue() {
    add(new Text("Synchronized on 'change' event with initial value"));
    final Div syncOnChangeInitialValueLabel = new Div();
    syncOnChangeInitialValueLabel.setId("syncOnChangeInitialValueLabel");
    Element syncOnChangeInitialValue = ElementFactory.createInput();
    syncOnChangeInitialValueLabel.setText("Server value on create: "
            + syncOnChangeInitialValue.getProperty("value"));
    syncOnChangeInitialValue.setAttribute("id", "syncOnChangeInitialValue");
    syncOnChangeInitialValue.addPropertyChangeListener("value", "change",
            event -> {
            });
    syncOnChangeInitialValue.addEventListener("change", e -> {
        syncOnChangeInitialValueLabel
                .setText("Server value in change listener: "
                        + syncOnChangeInitialValue.getProperty("value"));
    });
    syncOnChangeInitialValue.setProperty("value", "initial");

    getElement().appendChild(syncOnChangeInitialValue);
    add(syncOnChangeInitialValueLabel);
}
 

public NavigationTriggerView() {
    // Cannot use the RouterLink component since these views are not
    // registered as regular views.
    Element routerLink = ElementFactory
            .createRouterLink(CLASS_NAME + "/routerlink/", "Router link");
    routerLink.setAttribute("id", "routerlink");

    Element navigateButton = ElementFactory.createButton("UI.navigate");
    navigateButton.addEventListener("click",
            e -> getUI().get().navigate(CLASS_NAME + "/navigate"));
    navigateButton.setAttribute("id", "navigate");

    Element forwardButton = ElementFactory.createButton("forward");
    forwardButton.addEventListener("click", e -> getUI().get()
            .navigate(NavigationTriggerView.class, "forward"));
    forwardButton.setAttribute("id", "forwardButton");

    Element rerouteButton = ElementFactory.createButton("reroute");
    rerouteButton.addEventListener("click", e -> getUI().get()
            .navigate(NavigationTriggerView.class, "reroute"));
    rerouteButton.setAttribute("id", "rerouteButton");

    getElement().appendChild(routerLink, navigateButton, forwardButton,
            rerouteButton);
}
 

@Test
public void testElementEventNoData() throws Exception {
    TestComponent c = new TestComponent();
    Element element = c.getElement();
    UI ui = new UI();
    ui.add(c);
    AtomicInteger invocations = new AtomicInteger(0);

    element.addEventListener("test-event",
            e -> invocations.incrementAndGet());
    sendElementEvent(element, ui, "test-event", null);
    Assert.assertEquals(1, invocations.get());
}
 

@Test
public void testElementEventData() throws Exception {
    TestComponent c = new TestComponent();
    Element element = c.getElement();
    UI ui = new UI();
    ui.add(c);
    AtomicInteger invocationData = new AtomicInteger(0);

    element.addEventListener("test-event", e -> invocationData
            .addAndGet((int) e.getEventData().getNumber("nr")));
    JsonObject eventData = Json.createObject();
    eventData.put("nr", 123);
    sendElementEvent(element, ui, "test-event", eventData);
    Assert.assertEquals(123, invocationData.get());
}
 

@Override
public Component createComponent(SOURCE item) {
    Element button = ElementFactory
            .createButton(getValueProvider().apply(item));
    button.addEventListener("click", event -> getItemClickListeners()
            .forEach(listeners -> listeners.onItemClicked(item)));
    return ComponentUtil.componentFromElement(button, Component.class,
            true);
}
 

public DomListenerOnAttachView() {
    Div status = new Div();
    status.setText("Waiting for event");
    status.setId("status");

    Element element = new Element("event-on-attach");
    element.addEventListener("attach", event -> {
        status.setText("Event received");
    });

    getElement().appendChild(element, status.getElement());
}
 

private void addSyncMultipleProperties() {
    add(new Text(
            "Synchronize 'value' on 'input' event and 'valueAsNumber' on 'blur'"));
    Div valueLabel = new Div();
    valueLabel.setId("multiSyncValueLabel");
    Div valueAsNumberLabel = new Div();
    valueAsNumberLabel.setId("multiSyncValueAsNumberLabel");

    Element multiSync = ElementFactory.createInput("number");
    multiSync.setAttribute("id", "multiSyncValue");
    multiSync.addPropertyChangeListener("valueAsNumber", "blur", event -> {
    });
    multiSync.addPropertyChangeListener("value", "input", event -> {
    });

    multiSync.addEventListener("input", e -> {
        valueLabel
                .setText("Server value: " + multiSync.getProperty("value"));
    });
    multiSync.addEventListener("blur", e -> {
        valueAsNumberLabel.setText("Server valueAsNumber: "
                + multiSync.getProperty("valueAsNumber"));
    });

    getElement().appendChild(multiSync);
    add(valueLabel, valueAsNumberLabel);
}
 

private static Element createButton(String name,
        BiConsumer<JsonValue, String> action) {
    String location = PushStateScrollView.class.getName() + "/" + name;

    Element button = ElementFactory.createButton(name);

    button.setAttribute("id", name);
    button.addEventListener("click", e -> action.accept(null, location));

    return button;
}
 

public DependencyLayout() {
    getElement().appendChild(ElementFactory.createDiv(
            "This test initially loads a stylesheet which makes all text red and a JavaScript which listens to body clicks"));
    getElement().appendChild(ElementFactory.createHr());
    add(new JsResourceComponent());

    Element jsOrder = ElementFactory.createButton("Load js")
            .setAttribute("id", "loadJs");
    StreamRegistration jsStreamRegistration = VaadinSession.getCurrent().getResourceRegistry()
            .registerResource(getJsResource());
    jsOrder.addEventListener("click", event -> {
        UI.getCurrent().getPage()
                .addJavaScript("base://" + jsStreamRegistration.getResourceUri().toString());
    });
    Element allBlue = ElementFactory
            .createButton("Load 'everything blue' stylesheet")
            .setAttribute("id", "loadBlue");
    allBlue.addEventListener("click", event -> {
        add(new AllBlueImportantComponent());

    });

    Element runPush = ElementFactory
            .createButton("Run delayed push request")
            .setAttribute("id", RUN_PUSH_ID);


    pushWorks = ElementFactory.createDiv(NO_PUSH_YET_TEXT);
    pushWorks.setAttribute("id", PUSH_SIGNAL_ID);
    runPush.addEventListener("click", event -> {
        UI ui = getUI().orElseThrow(IllegalStateException::new);
        new Thread() {
            @Override
            public void run() {
                try {
                    Thread.sleep(100);
                    ui.access(() -> {
                        try {
                            //if push does not work, we'll fail here
                            ui.push();
                        } catch (Throwable e) {
                            LoggerFactory
                                    .getLogger(DependencyLayout.class)
                                    .debug("Push does not work (most probably not a problem)", e);
                            return;
                        }
                        pushWorks.setText(PUSH_WORKS_TEXT);
                        ui.push();

                    });

                } catch (InterruptedException ignored) {

                }
            }
        }.start();
    });
    getElement().appendChild(jsOrder, allBlue, runPush, ElementFactory.createHr(),pushWorks);
}
 

@Override
protected void onShow() {
    Element mainElement = getElement();
    mainElement.getStyle().set("margin", "1em");

    Element button = ElementFactory.createButton("Click me");

    Element input = ElementFactory.createInput().setAttribute("placeholder",
            "Synchronized on change event");
    input.addPropertyChangeListener("value", "change", event -> {
    });

    button.addEventListener("click", e -> {
        JsonObject eventData = e.getEventData();
        String buttonText = eventData.getString("element.textContent");
        int clientX = (int) eventData.getNumber("event.clientX");
        int clientY = (int) eventData.getNumber("event.clientY");
        Element greeting = ElementFactory.createDiv(
                "Thank you for clicking \"" + buttonText + "\" at ("
                        + clientX + "," + clientY + ")! The field value is "
                        + input.getProperty("value"));
        greeting.setAttribute("class", "thankYou");
        greeting.addEventListener("click",
                e2 -> greeting.removeFromParent());

        mainElement.appendChild(greeting);
    }).addEventData("element.textContent").addEventData("event.clientX")
            .addEventData("event.clientY");

    Element helloWorldElement = ElementFactory.createDiv("Hello world");

    Set<String> spanClasses = helloWorldElement.getClassList();

    helloWorldElement.setProperty("id", "hello-world");
    spanClasses.add("hello");
    helloWorldEventRemover = helloWorldElement.addEventListener("click",
            e -> {
                if (helloWorldElement.getText().equals("Hello world")) {
                    helloWorldElement.setText("Stop touching me!");
                } else {
                    // We never get to this code as long as the event
                    // removal actually works
                    helloWorldElement.setText(helloWorldElement.getText()
                            + " This might be your last warning!");
                }
                spanClasses.clear();
                helloWorldEventRemover.remove();
            });
    Style s = helloWorldElement.getStyle();
    s.set("color", "red");
    s.set("fontWeight", "bold");

    Element elementContainer = ElementFactory.createDiv();

    Element toRemove = ElementFactory.createDiv("To Remove")
            .setAttribute("id", "to-remove");
    elementContainer.appendChild(toRemove);

    elementContainer.setAttribute("id", "addremovecontainer");
    Element addRemoveButton = ElementFactory
            .createButton("Add and remove element");
    addRemoveButton.setAttribute("id", "addremovebutton");

    addRemoveButton.addEventListener("click", e -> {
        // very basic usecase: append and then immediately remove
        Element div = ElementFactory.createDiv("foobar");
        elementContainer.appendChild(div);
        elementContainer.removeChild(div);

        elementContainer.removeChild(toRemove);
        elementContainer.appendChild(toRemove);

        // Now let's have two "add" operation and then two "remove"
        // operation so that removal has an addition right before which
        // targets different element
        Element div2 = ElementFactory.createDiv("foobar");
        elementContainer.appendChild(div);
        elementContainer.appendChild(div2);

        Element ok = ElementFactory.createDiv("OK");
        ok.setAttribute("id", "ok");
        elementContainer.appendChild(ok);

        elementContainer.removeChild(div);
        elementContainer.removeChild(div2);
    });

    mainElement.appendChild(helloWorldElement, button, input,
            addRemoveButton, elementContainer);

}