Adding a footer using layouts

Flow
1

Hello All,

I’m a little confused at how to add content to the layout after a child uses it as a layout.

I want to add a footer to my application and for the sake of this it is just a Div placed last in the main layout.

For the template I setup the MainLayout.class


public class MainLayout extends Div implements RouterLayout{

	Div header = new Div();
	Div content = new Div();
	Div footer = new Div();
	
	MainLayout(){
	
		 add(header, content, footer);
	
	}
	

}

If I then use this Layout say,


@Route(value = "content", layout=MainLayout.class)
public class ContentLayout extends Div {

}
@Route(value = "content1", layout=MainLayout.class)
public class Content1Layout extends Div {

}

If I use this as is the MainLayout Div will now have an additional Div appended to the end. But how do I say that I want the child to be inserted into the content div of the mainLayout and not appended to the end?
Or if I can’t do it that way, how do I add the same footer to all my classes that use the MainLayout.class?

I feel like I should be placing an annotation somewhere that would provide the child layout with the component in which to add itself.

Thankyou for your help.

Hayden

2

I only know how this worked in Vaadin 8, but should be applicable to Vaadin 10 in the same way.
Basically, create a MainLayout as you did, but not extending RouterLayout. Your content should be its own custom component, say MainView, extending the RouterLayout. Then route your custom views into this MainView.

public class MainLayout extends Div {

	Div header = new Div();
	Div content = new MainView();
	Div footer = new Div();
	
	MainLayout(){	
		 add(header, content, footer);
	}
}

public class MainView extends Div implements RouterLayout {
}

@Route(value = "content", layout=MainView.class)
public class ContentLayout extends Div {

}
3

Ahhh hehe and just after writing this I had an idea to look at the RouterLayout interface.

So the answer is to override the showRouterLayoutContent method of the interface.


@Override
	public void showRouterLayoutContent(HasElement content) {
        if (content != null) {
            this.MainLayoutContentContainer.getElement().appendChild(Objects.requireNonNull(content.getElement()));
        }
    }

so simple.

Loving V10.

4

Thanks Jakob,

I’ll try your method to.

Hayden

5

In the portability pop-up window, select the import tab. Click the “choose file” button and select the file from the unzipped download. After your selection has been made click the “Import Divi Builder Layout” button and this will add the layouts to your library.[MYBKExperience]
(https://mybk-experience.com/)