从Vaadin 10 Flow中的Vaadin 8 Framework替换"AbsoluteLayout"？

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(Flow)的迁移指南在这个组件列表中表示,8从8中未包含,他们也不打算在将来添加它.但该页面确实提供了有关替换的说明:AbsoluteLayoutAbsoluteLayout

使用例如Div可以很容易地在V10中实现相同的效果

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

Answer 1

作为您对"Hello World"示例应用程序的请求,我从https://vaadin.com/start下载了Spring Starter的Project Starter,并将Tatu的解决方案与您的示例使用代码相结合.您可以在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");
    }
}

与Tatu所说的相比,只改变了我所做的,就是给出相对于父布局的位置.这使得子项的位置相对于布局添加到布局中,而不是主体(或DOM结构中的父位置相对).否则,组件将位于顶部:50px,左:距浏览器角50px.

然后使用类看起来像这样:

@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.如果要将一个元素放入相对位置,则可以使用应用中的任何布局执行相同的操作.

Answer 2

基于 Java 的 Vaadin 应用程序中最简单的方法是使用 Div 作为布局并在其中添加组件。

对于您想要定位的每个组件，您需要应用 CSS 样式，有一个 Java API 可以实现这一点，即 component.getElement().getStyle()。

它可能是这样的

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

也许你想扩展 Div 和上面的方法（这使得基本的 AbsoluteLayout ）

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/position