Vaadin 14 Grid + Dialog：关闭对话框后如何刷新网格？

Question

我使用 Vaadin 14。 我有一个网格来显示用户。另外，我有一个按钮来创建和保存新用户。 我的 MainGrid 如下所示：

public class MainView extends VerticalLayout {

    private final UserService userService;
    private final AddUserDialog addUserDialog;
    private Grid<UserDto> grid;

    public MainView(UserService userService,
                    AddUserDialog addUserDialog) {
        this.userService = userService;
        this.addUserDialog = addUserDialog;
    }

    @PostConstruct
    private void renderComponents() {
        renderAddUserButton();
        renderUserGrid();
    }

    private void renderAddUserButton() {
        Button addUserButton = new Button("Добавить", VaadinIcon.PLUS.create());
        addUserButton.addClickListener(event -> addUserDialog.open());
        add(addUserButton);
    }
    private void renderUserGrid() {
        grid = new Grid<>(UserDto.class);
        //grid init here
        add(grid);
    }
}

对话框如下所示：

public class AddUserDialog extends Dialog {
    private final UserService userService;

    public AddUserDialog(UserService userService) {
        this.userService = userService;
    }
    @PostConstruct
    public void init() {
        //init form here
    }
    private void save(Binder<UserDto> binder) {
        UserDto userDto = new UserDto();
        try {
            binder.writeBean(userDto);
        } catch (ValidationException e) {
            e.printStackTrace();
        }
        userService.save(userDto);
        this.close();
    }
}

请教，关闭对话框后如何刷新网格？

Answer 1

在这种情况下，最好将所有逻辑都保留在主视图中。如果你的主视图和对话框都独立更新数据，很容易导致数据不一致。

我的建议是更改对话框以在保存用户时触发已保存事件，并在主视图中侦听该事件并相应地更新它。这样，您只需在一个地方维护视图状态。

public class AddUserDialog extends Dialog {

    private void save(Binder<UserDto> binder) {
        UserDto userDto = new UserDto();
        try {
            binder.writeBean(userDto);
            fireEvent(new SaveEvent(this, userDto));
        } catch (ValidationException e) {
            e.printStackTrace();
        }
    }

    public static abstract class UserDialogEvent extends ComponentEvent<AddUserDialog> {
        private UserDto userDto;

        protected UserDialogEvent(AddUserDialog source, UserDto userDto) {
            super(source, false);
            this.userDto = userDto;
        }

        public UserDto getUserDto() {
            return userDto;
        }
    }

    public static class SaveEvent extends UserDialogEvent {
        public SaveEvent(AddUserDialog source, UserDto userDto) {
            super(source, userDto);
        }
    }

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

（如果您不需要额外的事件，如取消等，您可以摆脱抽象事件类）

然后，在MainView 中监听事件并相应地更新状态。

public class MainView extends VerticalLayout {

    private final UserService userService;
    private final AddUserDialog addUserDialog;
    private Grid<UserDto> grid;

    public MainView(UserService userService) {
        this.userService = userService;
        addUserDialog = new AddUserDialog();
        addUserDialog.addListener(AddUserDialog.SaveEvent.class, this::saveUser);
    }

    @PostConstruct
    private void renderComponents() {
        renderAddUserButton();
        renderUserGrid();
    }

    private void renderAddUserButton() {
        Button addUserButton = new Button("Добавить", VaadinIcon.PLUS.create());
        addUserButton.addClickListener(event -> addUserDialog.open());
        add(addUserButton);
    }
    private void renderUserGrid() {
        grid = new Grid<>(UserDto.class);
        //grid init here
        add(grid);
    }

    private void saveUser(AddUserDialog.SaveEvent saveEvent) {
        userService.save(saveEvent.getUserDto());
        addUserDialog.close();
        refreshGrid();

        addUserDialog.addDialogCloseActionListener()
    }

    private void refreshGrid() {
        // refresh grid
    }
}