代码之家 › 专栏 › 技术社区 › Basil Bourque

从vaadin 8框架替换vaadin 10流中的“绝对布局”?

vaadin-flow vaadin10 vaadin css-position layout

Basil Bourque · 技术社区 · 6 年前

这个 AbsoluteLayout 在瓦丁8( Framework )在布局中启用面向像素位置的小部件放置。虽然不是我第一次选择的布局, 绝对布局 适用于从使用面向像素位置布局的其他ui构建平台移植代码。

示例代码 from the manual 以下内容:

// 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的原因。

这个 migration guide 从瓦丁8号搬来( 框架 )至瓦丁10( Flow )在说 this list of components 那个 绝对布局 从8开始不包含在10中,他们也不打算在将来添加它。但那一页确实提供了关于 绝对布局 以下内容:

很容易在v10中使用例如div

有人能解释一下这在基于java的vaadin应用程序中意味着什么吗?也许是个例子?
在vaadin 10流应用程序中,一个人如何方便且常规地对小部件进行像素定位?

2 回复 | 直到 6 年前

Jens Jansson 6 年前

作为您对“hello world”示例应用程序的请求,我从 https://vaadin.com/start 并将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");
    }
}

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

然后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);
    }
}

我在布局前添加了几行文字来添加几行文字,只是为了测试出位置:上面提到的相对位置。

希望这能帮助你走上正确的道路。正如你所注意到的,这个“绝对布局”并没有真正的代码,它只是一个div。如果你想把一个元素放在一个相对的位置,你可以对你的应用程序中的任何布局做同样的操作。

Tatu Lund 6 年前

在基于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和上面的方法(这使得基本的绝对布局)

另见 https://developer.mozilla.org/en-US/docs/Web/CSS/position