Simple Templating using RouterLayout

Flow
1

I just started to look at Vaadin 10 and checked out the samples. I wanted to create a simple application with header (navigation), content and footer. How can I do that without using a PolymerTemplate. It should just be like the “Beverage Buddy” sample, but with a footer.

I already tried a RouterLayout, but I could only render the content after the navigation items. I was not able to put some components after the content.

2

RouterLayout defines a showRouterLayoutContent(HasElement) method that by default appends the “layout content” (i.e. your view) as the last child of the layout. You can override this method to make it append the child in some other location instead.

3

Thanks. I have noticed this method, as its the only one in the RouterLayout interface. I ended up with overwriting it to:

@Override
public void showRouterLayoutContent(HasElement content) {
	if (content != null) {
		this.contentContainer.removeAll();
		this.contentContainer.add(Objects.requireNonNull((Component)content));
	}
}

this.contentContainer is a com.vaadin.flow.component.html.Div and it holds the content of all views.

4

Meik,

I want to do the same thing i.e. have a simple application with a header and footer and the middle is the content. The content should take all the space (minus the header and footer heights) and the footer should always be at the bottom of whatever viewport is used.

Would you be able to explain a little more how you managed to do this?

Thanks for any help,
John.