在 PopupView 中展开组件 - Vaadin

Question

我将 Vaadin 8.5.1 与 Vaading Desiin 与 Spring Boot 2.0.4 结合使用。

目前我正在尝试在页面底部添加一个 PopupView，该页面在按钮单击时打开。在 Popup 中有一个垂直布局，包括两个组件：Horizo​​ntalSplitPanel 和 Button。 PopupView 应该具有当前 BrowserWindow 的宽度和三分之一的高度。 Horizo​​ntalSplitPanel 应该使用弹出窗口中的所有空间，而按钮不需要这些空间。

我做了什么：

@SpringComponent
@UIScope
public class View extends VerticalLayout implements Observer {

    private final PopupContentView popupContentView;

    private PopupView popup;

    @Autowired
    public View(PopupContentView popupContentView) {
        this.popupContentView = popupContentView;
    }

    @PostConstruct
    void init() {
        button.addClickListener(clickEvent -> openPopup());
    }

    private void openPopup() {
        if (popup == null) {
            setSizeOfPopUp();
            // popup will adjust automatically to size of content
            popup = new PopupView(null, popupContentView);
            popup.addPopupVisibilityListener(event -> {
                if (event.isPopupVisible()) {
                    popupContentView.build(this::submitted);
                }
            });
            popup.setHideOnMouseOut(false);
            this.addComponent(popup);
        }
        popup.setPopupVisible(true);
    }

    private void setSizeOfPopUp() {
        if (popupContentView != null) {
            popupContentView.setWidth(Page.getCurrent().getBrowserWindowWidth(), Unit.PIXELS);
            popupContentView.setHeight(((float) Page.getCurrent().getBrowserWindowHeight()) / 3, Unit.PIXELS);
        }
    }

    private void submitted() {
        // do some stuff
    }

    @Override
    public void update(Observable observable, Object o) {
        if (observable instanceof BrowserWindowResizeListenerObservable) {
            setSizeOfPopUp();
        }
    }
}

@Service
public class BrowserWindowResizeListenerObservable extends Observable implements Page.BrowserWindowResizeListener {

    @Override
    public void browserWindowResized(Page.BrowserWindowResizeEvent browserWindowResizeEvent) {
        this.setChanged();
        this.notifyObservers();
    }
}

@SpringComponent
@UIScope
public class PopupContentView extends VerticalLayout {

    private SubmitCallback submitCallback;
    private Button submitBtn;

    @PostConstruct
    void init() {
        super.init();
    }

    void build(@NotNull SubmitCallback) {
        removeAllComponents();
        this.addComponent(horizontalSplitPanel);
        this.addComponent(submitBtn);
        this.setExpandRatio(horizontalSplitPanel, 1.0f);
        this.submitCallback = callback;
    }

    private void submit() {
        submitCallback.submit(someContent);
    }

    @FunctionalInterface
    public interface SubmitCallback {

        void submit(SomeContent someContent);
    }
}

如您所见，我有一个主视图、一个内容视图和一个侦听器类。 我想要发生的是弹出窗口在按钮单击时可见，并包含带有面板和提交按钮的内容视图。面板占据了按钮不需要的其余空间。并且弹出窗口充满了内容。

实际发生的情况是面板占据了弹出窗口的全部空间，并且按钮将显示在弹出窗口下方。 但是，当我调整窗口大小并触发调整大小事件时，一切都很好，按钮不再位于弹出窗口下方。 似乎填充和边距（这是 Vaadin 中扩展比率的 HTML 实现）是在较早阶段计算的，并在调整窗口大小时再次触发。但是，我不知道何时以及需要做什么来触发它。

有没有人有想法，如何解决这个问题？

编辑： 当我在 PopupView 中有一个 Tree 组件或 DateField 组件，然后展开一个树元素或通过从 Date 弹出窗口中选择一个值来更改 DateField 的值时，调整大小正确完成，一切都很好。

Answer 1

我认为在您的情况下，检查浏览器窗口大小和计算目标像素大小的方法对您的情况来说太复杂了。我建议将弹出窗口的宽度设置为 100%，将高度设置为 33%，例如 component.setHeight("33%")，是的，您可以使用百分比来表示宽度和高度，而不是像素。然后大小由 CSS 完成，它对浏览器窗口大小的反应更快，无需服务器往返。