从Vaadin 8框架替换Vaadin 10 Flow中的“绝对Vaadin”？

Question

AbsoluteLayout中的Vaadin 8 (框架)支持在布局中面向像素的小部件的放置.虽然不是我选择的第一个布局，但AbsoluteLayout适合从其他UI构建平台移植代码，这些平台使用面向像素位置的布局。

示例代码从手册上

// A 400x250 pixels size layout
AbsoluteLayout layout = new AbsoluteLayout();
layout.setWidth("400px");
layout.setHeight("250px");

// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.addComponent(text, "left: 50px; top: 50px;");

我可以看到传递的参数只是CSS编码。但我不是HTML/CSS向导，这就是为什么我首先使用基于Java的Vaadin。

从Vaadin 8 (框架)到Vaadin 10 (流)的框架在这个组件列表中说，从8到8的AbsoluteLayout不包括在10中，也不打算在将来添加它。但这一页确实提供了关于替换AbsoluteLayout的说明

在V10中很容易实现同样的目标，例如使用Div

• 有人能解释一下这在基于Java的Vaadin应用程序中意味着什么吗？也许是个例子？
• 一个人如何方便和例行地在Vaadin 10流应用程序中对小部件进行像素定位？

Answer 1

作为对"Hello“示例应用程序的请求，我从https://vaadin.com/start下载了带有Spring的Project，并将其解决方案与示例使用代码结合在一起。你可以在https://github.com/Peppe/absolute-layout-demo找到它。

您可以在终端/命令行中使用以下命令实时测试它：

https://github.com/Peppe/absolute-layout-demo.git
cd absolute-layout-demo
mvn spring-boot:run

我创建了一个名为AbsoluteLayout的类，它的整体如下所示：

public class AbsoluteLayout extends Div {

    public AbsoluteLayout() {
        getElement().getStyle().set("position", "relative");
    }

    public void add(Component component, int top, int left) {
        add(component);
        component.getElement().getStyle().set("position", "absolute");
        component.getElement().getStyle().set("top", top + "px");
        component.getElement().getStyle().set("left", left + "px");
    }
}

我所做的唯一改变，与塔图所说的相比，就是给出相对于父布局的位置。这使得添加到布局中的子元素的位置相对于布局，而不是主体(或DOM结构中的父位置相对)。否则，组件将位于顶部:50 be，左侧:浏览器角的50 be。

然后usage类如下所示：

@HtmlImport("styles/shared-styles.html")
@Route
public class MainView extends VerticalLayout {

    public MainView() {
        setClassName("main-layout");

        //Just to add some content on the page to test relative position
        for (int i = 0; i<5; i++){
            add(new Div(new Text("Hello")));
        }

        // A 400x250 pixels size layout
        AbsoluteLayout layout = new AbsoluteLayout();
        layout.setWidth("400px");
        layout.setHeight("250px");

        // A component with coordinates for its top-left corner
        TextField text = new TextField("Somewhere someplace");
        layout.add(text, 50, 50);
        add(layout);
    }
}

我在布局之前添加了几行文本，以添加一些行文本，只是为了测试上面提到的位置:相对位置。

希望这能帮到你，让你走上正确的道路。正如您注意到的，这个"AbsoluteLayout“实际上没有任何代码--它只是一个div。如果你想把一个元素放到一个相对位置上，你可以对你的应用程序中的任何布局做同样的处理。