使用 Vaadin UI 事件总线在多个组件间监听事件-java教程-PHP中文网

使用 Vaadin UI 事件总线在多个组件间监听事件

霞舞

发布： 2025-10-21 10:06:20

原创

644人浏览过

使用 vaadin ui 事件总线在多个组件间监听事件

本文介绍了如何在 Vaadin 应用中跨多个组件监听事件。通过使用 UI 事件总线，可以在不同的组件之间传递和处理事件，实现组件间的解耦和灵活通信。文章将提供示例代码，演示如何在主视图中监听来自对话框组件的事件，并在事件发生时执行相应的操作。

在 Vaadin 应用开发中，组件间的通信是一个常见的需求。当需要在不同的组件之间传递事件并执行相应的操作时，可以使用 Vaadin 提供的 UI 事件总线。UI 事件总线允许组件发布事件，而其他组件可以监听这些事件并做出响应，从而实现组件间的解耦和灵活通信。

使用 UI 事件总线

要使用 UI 事件总线，需要在主视图中监听事件，并在需要触发事件的组件中使用 ComponentUtil.fireEvent() 方法。

示例代码

以下示例演示了如何在 MainView 中监听来自 CustomDialog 组件的 ComponentCloseEvent 事件。

首先，定义 ComponentCloseEvent 事件：

稿定在线PS

PS软件网页版

查看详情

import com.vaadin.flow.component.ComponentEvent;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.DomEvent;
import com.vaadin.flow.component.EventData;
import com.vaadin.flow.component.ComponentEventListener;

public class ComponentCloseEvent extends ComponentEvent<CustomDialog> {

    public ComponentCloseEvent(CustomDialog source, boolean fromClient) {
        super(source, fromClient);
    }
}

登录后复制

然后，在 MainView 的 onAttach() 方法中，将监听器添加到 UI 事件总线：

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.component.ComponentUtil;
import com.vaadin.flow.server.VaadinSession;
import com.vaadin.flow.shared.Registration;
import com.vaadin.flow.component.AttachEvent;

@Route("")
public class MainView extends VerticalLayout {

    private CustomDialog customDialog;

    public MainView() {
        customDialog = new CustomDialog();
        add(customDialog);
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        UI ui = attachEvent.getUI();
        ui.getSession().setAttribute("mainView", this);

        Registration registration = ui.addDetachListener(detachEvent -> {
            ui.getSession().removeAttribute("mainView");
        });

        ui.getSession().setAttribute("registration", registration);


        ui.addClickListener(e -> {
            System.out.println("UI Clicked");
        });

        addListener(ComponentCloseEvent.class, e -> {
            System.out.println("I listened to the event!");
            Button openDialogButton = new Button("Open Dialog");
            openDialogButton.addClickListener(event -> {
                customDialog.open();
            });
            add(openDialogButton);
        });
    }

    public <T extends ComponentEvent<?>> Registration addListener(Class<T> eventType,
                                                                  ComponentEventListener<T> listener) {
        return ComponentUtil.addListener(UI.getCurrent(), eventType, (ComponentEventListener) listener);
    }

}

登录后复制

接下来，在 CustomDialog 组件中，使用 ComponentUtil.fireEvent() 方法触发事件：

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.ComponentUtil;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;

public class CustomDialog extends Dialog {

    public CustomDialog() {
        setHeaderTitle("Custom Dialog");
        add("This is a custom dialog.");
        add(createCloseButton());
        setCloseOnEsc(false);
        setCloseOnOutsideClick(false);
    }

    private Button createCloseButton() {
        return new Button("Close", e -> {
            ComponentUtil.fireEvent(UI.getCurrent(), new ComponentCloseEvent(this, true));
            close();
        });
    }
    @Override
    public void open() {
        super.open();
    }
}

登录后复制

在这个例子中，当 CustomDialog 组件的关闭按钮被点击时，会触发 ComponentCloseEvent 事件。MainView 组件监听这个事件，并在事件发生时打印一条消息。

注意事项