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

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

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

使用 UI 事件总线

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

示例代码

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

首先，定义 ComponentCloseEvent 事件：

阿里妈妈·创意中心

阿里妈妈营销创意中心

下载

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

注意事项

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

总结

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