Vaadin 7 UI Design By Example Beginner's Guide

Time for action – using FormLayout

Using FormLayout is quite simple, it works similar to VerticalLayout.

1. Modify your LayoutFrameworkUI class to match the highlighted code:

   public class LayoutFrameworkUI extends UI {
   
     protected void init(VaadinRequest request) {
   
       ...
   
       layout.addMenuOption("Form layout", getFormLayout());
     }
   
     ...
   
     private FormLayout getFormLayout() {
       TextField tf1 = new TextField("TextField");
       TextField tf2 = new TextField("TextField");
       ComboBox cb = new ComboBox("ComboBox");
       Button b = new Button("Button");
   
       FormLayout formLayout = new FormLayout(tf1, tf2, cb, b);
       formLayout.setMargin(true);
   
       return formLayout;
     }
   
   }

2. Run the application.

What just happened?

This is how our fields look inside a FormLayout:

As you can see all the fields, ...