在Vaadin 10 Flow中替换Vaadin 8 Framework中的`AbsoluteLayout`吗? [英] Replacement for `AbsoluteLayout` from Vaadin 8 Framework in Vaadin 10 Flow?

问题描述

AbsoluteLayout 在Vaadin 8(框架)中，可以在布局中实现面向像素位置的窗口小部件放置.虽然不是我的首选布局，但AbsoluteLayout适合从其他使用面向像素位置的布局的UI构建平台中移植代码.

The AbsoluteLayout in Vaadin 8 (Framework) enables pixel-position-oriented placement of widgets within a layout. While not my first layout of choice, the AbsoluteLayout is suited to porting code from other UI-building platforms that use pixel-position-oriented layout.

示例代码手册中的:

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

I can see that the passed argument is simply CSS coding. But I am no HTML/CSS wizard, that’s why I am using Java-based Vaadin in the first place.

迁移指南 Vaadin 8(框架)到Vaadin 10(流程)在此组件列表中说，即 中的8不包括在10中，也不打算在将来添加.但是该页面确实提供了有关替换AbsoluteLayout的注释:

The migration guide for moving from Vaadin 8 (Framework) to Vaadin 10 (Flow) says in this list of components that the AbsoluteLayout from 8 is not included in 10, nor do they plan to add it in the future. But that page does offer this note about replacement for AbsoluteLayout:

使用例如div

Very easy to achieve the same in V10 using e.g. Div

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

推荐答案

作为您对"Hello World"示例应用程序的请求，我从 https://github.com/Peppe/absolute-layout-demo.

As your request for an "Hello World" example app, I downloaded the Project Starter with Spring Starter from https://vaadin.com/start and combined Tatu's solution with your example usage code. You can find it at https://github.com/Peppe/absolute-layout-demo.

您可以在终端/命令行中使用以下命令对其进行实时测试:

You can test it live with the following commands in terminal / command line:

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

我创建了一个名为AbsoluteLayout的类，其整体看起来像这样:

I created a class called AbsoluteLayout, with it's entirety looking like this:

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结构的父级位置)而言.否则该组件将位于浏览器角的顶部:50像素，左侧:50像素.

Only change that I did, compared to what Tatu said, was to give the position relative to the parent layout. This makes the position of the children added to the layout relative to the layout, and not the body (or parent position relative in the DOM structure). Otherwise the component would be in top:50px, left:50px from browser corner.

然后用法类如下所示:

@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);
    }
}

我在布局之前添加了几行文本以添加一些文本行，只是为了测试上面提到的position:relative.

I added a few lines of text before the layout to add some rows of text, just to test out the position:relative mentioned above.

希望这会有所帮助，并让您走上正确的道路.如您所见，此"AbsoluteLayout"实际上没有任何代码-它只是一个div.如果要将一个元素放置在相对位置，则可以对应用程序中的任何布局执行相同的操作.

Hope this helps and gets you on the right path. As you notice, this "AbsoluteLayout" doesn't have really any code to it - it is just a div. You can do this same trick with any layout in your app if you want to place one element into a relative position.

这篇关于在Vaadin 10 Flow中替换Vaadin 8 Framework中的`AbsoluteLayout`吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！