Creating a simple form

When we need to pass data from the user to the server, we use input fields. When we have more fields, we arrange them into forms. Creating forms in Vaadin is very easy. In this recipe, we will create a simple login form panel as shown in the following screenshot:

How to do it...

Carry out the following steps to create a simple login form:

1. We create a Vaadin project with a main UI class named Demo.

   public class Demo extends UI {…}

2. Our form will be wrapped in the Panel container. Therefore, we create a LoginFormPanel class that extends the Panel class.

   public class LoginFormPanel extends Panel {…}

3. All the parts of the form lie in the constructor. First, we set the name and size of the form.

     public LoginFormPanel() {
       super("Login");
       setSizeUndefined();
       …

4. We will use FormLayout for the fields. In this layout, captions are rendered to the left of their respective components. Margin top and margin bottom are by default set to true. Through the setMargin(true) method...