Author: martin

Route offers the possibility to put the content of a View into a parent layout. By default, the content of the View is just appended to the parent layout. By using a placeholder, we can easily control where the content of the View is added.

import com.vaadin.flow.component.HasElement;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.RouterLayout;

import java.util.Objects;

public class MainLayout extends Div implements RouterLayout {

    /*
     * Define a simple empty Element, which is later used to find the injection point:
     */
    private Text contentPlaceholder = new Text("");

    public MainLayout() {
        add(new Text("my header"));
        /*
         * Place the placeholder at the intended position, e.g. between other blocks:
         */
        add(contentPlaceholder);
        add(new Text("my footer"));
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        if (content != null) {
            getElement().insertChild(
                    /*
                     * Get the position of the placeholder inside the dom:
                     */
                    getElement().indexOfChild(contentPlaceholder.getElement()),
                    /*
                     * And insert the content of the View directly afterwards:
                     */
                    Objects.requireNonNull(content.getElement()));
        }
    }
}

Simply override the default showRouterLayoutContent method with a method which inserts the content directly after the placeholder.