Question

我正在使用Vaadin 8.5.1和Vaading Desiin结合使用Spring Boot 2.0.4。

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

我做了什么：

@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组件，然后展开一个tree元素或通过从Date弹出窗口中选择一个值来更改DateField的值时，调整大小即可正确完成，一切都很好。

Answer 1

在您的情况下，我认为检查浏览器窗口大小并计算目标像素大小的方法对于您的情况来说太复杂了。我建议仅将弹出窗口的宽度设置为100％，将高度设置为33％，例如StringBuilder sb = new StringBuilder(); Matcher m = Pattern.compile(Pattern.quote(str)).matcher(input); while (m.find()) { for (int i = 0; i < m.start(); i++) sb.append('+'); sb.append(str); } int remaining = input.length() - sb.length(); for (int i = 0; i < remaining; i++) { sb.append('+'); }，是的，您可以对宽度和高度使用百分比而不是像素。然后通过CSS完成大小调整，它将对浏览器窗口大小做出更快的反应，而无需服务器往返。

在PopupView中扩展组件-Vaadin

1 个答案: