O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required