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, except for Button, have their captions to the left. It looks like two columns, one for the captions, and one for the fields. This kind of layout is almost always the best way to show forms.

Something to...