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

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

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

使用 UI 事件总线

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

示例代码

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

首先，定义 ComponentCloseEvent 事件：

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

下载

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 {

    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 > Registration addListener(Class eventType,
                                                                  ComponentEventListener 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 组件监听这个事件，并在事件发生时打印一条消息。

注意事项

• 确保在组件附加到 UI 之后再添加监听器。这可以通过在 onAttach() 方法中添加监听器来实现。
• 使用 ComponentUtil.fireEvent() 方法触发事件，并确保传入正确的 UI 实例。
• 为了防止内存泄漏，在组件分离时移除监听器。这可以通过在 onDetach() 方法中移除监听器来实现。或者使用 UI.addDetachListener()

总结

通过使用 Vaadin UI 事件总线，可以方便地在多个组件之间监听事件，实现组件间的解耦和灵活通信。这种方法可以用于各种场景，例如在主视图中监听来自对话框组件的事件，并在事件发生时执行相应的操作。