Замена AbsoluteLayout из Vaadin 8 Framework в Vaadin 10 Flow?

В качестве вашего запроса на пример приложения "Hello World" я загрузил Project Starter со Spring Starter с https://vaadin.com/start и объединил решение Тату с вашим примером кода использования. Вы можете найти его на странице 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 пикселей, слева: 50 пикселей из угла браузера.

Тогда класс использования выглядит так:

@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. Вы можете проделать тот же трюк с любым макетом в вашем приложении, если хотите разместить один элемент в относительной позиции.

Самый простой способ в приложении Vaadin на основе Java - использовать 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