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

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);
    }
}

（（如果不需要其他事件，例如cancel等，则可以摆脱抽象事件类的影响）>

然后，在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
    }
}