Using extensions to develop a UI component

Let's explore how to implement a login form component. The first idea that comes to mind when starting to develop a UI component is to extend, in the Java sense, an existing component. Most of the time, the natural choice is to extend a layout component such as VerticalLayout or HorizontalLayout. For example, a login form usually includes at least a username field, a password field, a login button, and a remember me checkbox, with all of them aligned vertically. So, let's start by directly extending VerticalLayout.

Extending VerticalLayout

The following snippet of code shows a typical way of extending VerticalLayout to implement a UI component, in this case, the login form:

public class LoginFormLayout extends VerticalLayout {

    private TextField username = new PasswordField();
    private PasswordField password = new PasswordField();
    private Button logIn = new Button();
    private CheckBox rememberMe = new CheckBox();
 
    public LoginFormLayout...