Windows and Layout for a classic web style (as LinkedIn)

Vaadin 6 / 7 / 8 Framework UI
2

Hi,

so you have 3 containers - header, center, footer. All 3 can be a HorizontalLayout. Also, you have to set a VerticalLayout for the window (it is set by default), lets call it “main”, so in very general, your code will look something similar:


VerticalLayout main = ...  // (get or create vertical layout for your window)

HorizontalLayout header = new HorizontalLayout();
HorizontalLayout footer = new HorizontalLayout();
HorizontalLayout center = new HorizontalLayout();

header.setWidth("100%");
footer.setWidth("100%");
center.setSizeFull();

main.addComponent(header);
main.addComponent(center);
main.addComponent(footer);

//  Now make center layout expandable
main.setExpandRatio(center,1.0f);

Now you can add actual “business” UI components to your header,footer and to the center area, build sublayouts, etc.