ColumnLayout

Alternative column based layouting to Horizontal+VerticalLayout and GridLayout

View larger

Close

ColumnLayout is an UI component add-on for Vaadin 7.3+ and Valo based themes

It provides alternative for Horizontal+VerticalLayout and GridLayout usage when building columned layouts.

ColumnLayout is designed to be easier to extend also on client side (than core Vaadin layouts). As example of this, add-on provides Material design styled column form layout.

Sample code

ColumnLayout layout = new ColumnLayout();
layout.setMargin(true);
layout.setSpacing(true);
layout.setWidth("100%");

TextField firstName = new TextField("First name");
firstName.setWidth("100%");
layout.addComponent(firstName, 0);

TextField lastName = new TextField("Last name");
lastName.setWidth("100%");
layout.addComponent(lastName, 0);

TextField address = new TextField("Address");
address.setWidth("100%");
layout.addComponent(address, 1);

// To split column cell, just use HorizontalLayout
HorizontalLayout cityAndZipCode = new HorizontalLayout();
spacingHandlers.add(cityAndZipCode);
cityAndZipCode.setWidth("100%");
layout.addComponent(cityAndZipCode, 1);

TextField city = new TextField("City");
city.setWidth("100%");
cityAndZipCode.addComponent(city);
cityAndZipCode.setExpandRatio(city, 1.0f);

TextField zipCode = new TextField("Zip code");
zipCode.setWidth("100%");
cityAndZipCode.addComponent(zipCode);
cityAndZipCode.setExpandRatio(zipCode, 1.0f);

Links

• Author Homepage
• Online Demo
• Issue Tracker
• Source Code

Compatibility