Replacement for `AbsoluteLayout` from Vaadin 8 Framework in Vaadin 10 Flow?

你离开我真会死。 提交于 2019-12-04 06:30:49

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

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

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.

Then the usage class looks like this:

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

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.

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.

The simplest way in Java-based Vaadin app is to use Div as the layout and add components there.

For each component you want to position you need to apply CSS styles, there is Java API for that, i.e. component.getElement().getStyle().

It could be something like

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

Probably you want to extend Div and the above method (that makes rudimentary AbsoluteLayout)

See also https://developer.mozilla.org/en-US/docs/Web/CSS/position

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!