在Vaadin中将弹出窗口水平居中

Question

我已经在主界面中添加了一个弹出窗口，如下所示：

Window component = new Window();
UI.getCurrent().addWindow(component);

现在，我希望我的弹出窗口水平居中，例如距屏幕顶部40像素。据我所知，Vaadin有4种定位窗口的方法。

component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)

这些都不是我真正想要的。我最初希望setPositionY可以对我有所帮助。这的确使我与顶部之间的距离正确，但是x位置现在设置为0，我希望它在此居中。

如果我能够计算x位置应该是什么，setPosition可能会有所帮助，但这将需要我知道组件的宽度（以像素为单位），但是component.getWidth只能告诉我100％。

接下来，我尝试在组件上使用CSS样式，编写并使用明确的CSS规则，然后使用addStyleName将其添加到组件中。似乎Vaadin会用自己的默认值覆盖我在CSS中编写的内容...

任何想法如何正确放置我的Window组件？

Answer 1

解决方案1：使用SizeReporter

事实上，setPositionY()会将窗口的centered属性重置为false。由于弹出窗口和浏览器窗口的宽度在出现在屏幕上之前是未知的，因此我知道获取这些值的唯一方法是使用 SizeReporter 插件。它的使用非常简单：

public class MyUI extends UI {

    private Window popUp;

    private SizeReporter popUpSizeReporter;
    private SizeReporter windowSizeReporter;

    @Override
    protected void init(VaadinRequest request) {

        Button button = new Button("Content button");
        VerticalLayout layout = new VerticalLayout(button);
        layout.setMargin(true);

        popUp = new Window("Pop-up", layout);
        popUp.setPositionY(40);

        addWindow(popUp);

        popUpSizeReporter = new SizeReporter(popUp);
        popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);

        windowSizeReporter = new SizeReporter(this);
        windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
    }

    private void centerPopUp(ComponentResizeEvent event) {

        int popUpWidth = popUpSizeReporter.getWidth();
        int windowWidth = windowSizeReporter.getWidth();

        if (popUpWidth == -1 || windowWidth == -1) {
            return;
        }

        popUp.setPositionX((windowWidth - popUpWidth) / 2);
    }
}

只要不调整弹出窗口的大小，这段代码就可以。如果这样做，它将不会自动重新居中。如果您addResizeListenerOnce()在addResizeListener()此之前进行替换，它将自动将弹出窗口重新居中，但您会遇到一些“UI 故障”，因为在您调整弹出窗口大小时，附加组件几乎不断地发送调整大小事件......

您可以尝试使用 CSS 来做到这一点，但我个人尽可能避免使用 Vaadin 的 CSS :)。

将附加组件添加为依赖项后，您需要重新编译小部件集。

解决方案 2：使用com.vaadin.ui.JavaScript

我不保证该解决方案的可移植性，但我想它适用于大多数现代浏览器。

public class MyUI extends UI {

    private Window popUp;

    @Override
    protected void init(VaadinRequest request) {

        Button button = new Button("Content button");
        VerticalLayout layout = new VerticalLayout(button);
        layout.setMargin(true);

        popUp = new Window("Pop-up", layout);
        popUp.setPositionY(40);
        popUp.addStyleName("window-center");

        addWindow(popUp);

        // Add a JS function that can be called from the client.
        JavaScript.getCurrent().addFunction("centerWindow", args -> {
            popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
        });

        // Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
        JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
    }
}