You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Basic Use · Vaadin
Vaadin Board - Java API - Basic Use
 Edit This Page

Basic Use

The Board is a responsive layout, where you can add any Vaadin component. This chapter assumes you have already added Vaadin Board to your project and installed the license key. If not, check the instructions in Getting Started Section.

Basic Configuration

Board is divided into rows, using Row class. Rows are divided into columns. You can put any Vaadin component inside the Row. Every element inside the row can take from one to four columns. Vaadin Board rearranges child elements based on available space. In the example below every child Label will use 25% on Desktop, but will be rearranged to two rows when switching to tablet: both with 2 items that take 50% of available space each, see example below.

        Board board = new Board();
        board.setSizeFull();

        Label lbl1 =  new Label("LABEL1");
        Label lbl2 =  new Label("LABEL2");
        Label lbl3 =  new Label("LABEL3");
        Label lbl4 =  new Label("LABEL4");

        board.addRow(lbl1, lbl2, lbl3, lbl4);
        setContent(board);

You can specify the element to occupy from one to four columns, by using setCols():

        Board board = new Board();
        board.setSizeFull();

        Label lbl1 =  new Label("LABEL1");
        Label lbl2 =  new Label("LABEL2");
        Label lbl3 =  new Label("LABEL3");

        Row row = board.addRow(lbl1, lbl2, lbl3);
        // specify first component to use
        // 2 columns
        row.setCols(lbl1, 2);
        setContent(board);
By default, mobile browsers have fixed viewport size. Set the viewport size to follow the screen-width of the device by adding the @Viewport annotation to the UI class:
@Viewport("width=device-width")
public class MyUI extends UI {

Nested Rows

Vaadin Board supports nested regions. You can put a new row within another row to build how ever complex layouts that you want in a simple way. In the example below, we place inner row with 4 labels inside the outer row, you can use this technique to make rows behave like columns. Let us look at the example:

    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        Board board = new Board();
        Label lbl1 = createLabel("Label 1");
        Label lbl2 = createLabel("Label 2");
        Label lbl3 = createLabel("Label 3");

        board.setSizeFull();
        Row outerRow = board.addRow(lbl1,lbl2,lbl3);
        Row innerRow = new Row();

        innerRow.setSizeFull();

        Label inner1 = createLabel("Inner 1");
        Label inner3 = createLabel("Inner 3");
        Label inner4 = createLabel("Inner 4");
        Label inner2 = createLabel("Inner 2");
        innerRow.addComponents(inner1, inner2, inner3, inner4);
        outerRow.addComponent(innerRow);

        layout.addComponents(board);
        setContent(layout);
    }

    public Label createLabel(String name){
        Label lbl = new Label(name);
        lbl.addStyleName("mystyle");
        return lbl;
    }

Add some styling to your theme, so it is easier to see the behaviour of the Vaadin Board:

  .v-label.mystyle  {
    display: block;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    border-style: solid;
    border-width: 5px;
    border-color: #fff;
    text-align: center;
    background-color: #cacaca;
  }

The result for different view port sizes is the following:

basic use nested desktop
Figure 1. Nested rows on desktop
basic use nested tablet
Figure 2. Nested rows on tablet
basic use nested mobile
Figure 3. Nested rows on mobile

Styling

Vaadin Board rearranges elements in your layout based on available space. In some cases you want to use different styles depending on how the elements are laid out, e.g. use smaller font size for mobile devices. Vaadin Board has three predefined class selectors for vaadin-board-row:

  • small - for rows smaller than 600 pixels.

  • middle - for rows between 600 and 969 pixels.

  • large - for rows bigger than 960 pixels.

    Board board = new Board();
    board.setSizeFull();

    Label lbl1 =  new Label("LABEL1");
    Label lbl2 =  new Label("LABEL2");
    Label lbl3 =  new Label("LABEL3");

    board.addRow(lbl1, lbl2, lbl3);
    setContent(board);
vaadin-board-row.large .v-label {
        font-weight: bold;
        font-size: 28px;
}
vaadin-board-row.medium .v-label {
        font-weight: normal;
        font-size: 18px;
}

After adding this CSS to your theme you will see that labels have different font-size for different viewport size.