CustomLayout with foot line

General
1

Hallo everbody,

I´m new with Vaadin and starts to create my first project with.

I want to create a layout with head and foot line for every page.
The head line is for a logo and so on, the foot line e.g. for the obligatory impressum.
Like this:

head line: logo | title | …

content area

foot line: version | … | impressum

My first attempt was with VerticalLayout and HorizontalLayout for head and foot line.
But it doesnt works.
The second one is to use the CustomLayout. But in both cases, i have the same problems.

a) Is it possible to position the foot line on the bottom of the page
and makes the content area greedy? (without Vaadin I use CSS for body and html tags with height 100% and a table to do this)

b) the logo image is never in the middle of the cell (td tag with valign=“middle” in custom layout)

Thanks

2

That sort of layout should go roughly like:


VerticalLayout rootLayout = new VerticalLayout();
rootLayout.setSizeFull();
mainWindow.setContent(rootLayout);

HorizontalLayout header = new HorizontalLayout();
header.addComponent(new Label("Header");
header.setWidth("100%");
rootLayout.addComponent(header);

WhateverLayout content = new WhateverLayout();
content.addComponent(new Label("Content");
content.setSizeFull();
rootLayout.addComponent(content);
rootLayout.setExpandRatio(content, 1.0f);

HorizontalLayout footer = new HorizontalLayout();
footer.addComponent(new Label("Footer");
footer.setWidth("100%");
rootLayout.addComponent(footer);

Did not test the code. See
this example
 for a typical application UI (no footer though).

3

Thank you for your help (and sorry for the beginner questions).
Now i understand better the functioning of the layouts and the components.

With your example code, i build me a working example.
But the logo is still not in the middle.
Can you show me, what my failure is?
And is it possible to set the “cell” width of the logo to a solid value, to have a margin around?

Here my code.
In the contacts theme (from your example from the book), i used only the toolbar css class for the head line backround.


.toolbar {
      background: #ccc url(images/gradient.png) repeat-x bottom left;
}



		// main window and theme
		Window mainWindow = new Window("Layout-Test");
		setMainWindow(mainWindow);
		setTheme("contacts");
		
		// root layout
		VerticalLayout rootLayout = new VerticalLayout();
		rootLayout.setSizeFull();
		getMainWindow().setContent(rootLayout);

		// header layout
		HorizontalLayout header = new HorizontalLayout();
		header.setWidth("100%");
		rootLayout.addComponent(header);
		header.setStyleName("toolbar");

		// logo in header
		Embedded logo = new Embedded("", new ThemeResource("images/logo_48.png"));
		header.addComponent(logo);
		header.setComponentAlignment(logo, Alignment.MIDDLE_CENTER);

		// title in header
		Label label = new Label("Header");
		header.addComponent(label);
		header.setComponentAlignment(label, Alignment.MIDDLE_LEFT);
		header.setExpandRatio(label, 1);
		
		// content layout
		HorizontalLayout content = new HorizontalLayout();
		content.setSizeFull();
		rootLayout.addComponent(content);
		rootLayout.setExpandRatio(content, 1);
		
		// panel in middle of content
		Panel loginPanel = new Panel("Login");
		content.addComponent(loginPanel);
		content.setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER);
		loginPanel.setSizeUndefined();
				
		// footer layout
		HorizontalLayout footer = new HorizontalLayout();
		footer.setWidth("100%");
		rootLayout.addComponent(footer);
		
		// label in footer
		footer.addComponent(new Label("Footer"));
4

… i found the reason in the Embedded was a emty string, this means a empty text over the icon,
now i use:



...
Embedded logo = new Embedded(null, new ThemeResource("images/logo_48.png"));
...

thx