Vaadin: loginForm change position of field's caption

Question

I build a login in vaadin with the LoginForm component of vaadin. I have a problem with a position of the caption's fields. I want to change the position of the caption left to the fields.

My LoginForm component:

private class MyLoginForm extends com.vaadin.ui.LoginForm {

        @Override
        protected TextField createUsernameField() {
            return usernameField;
        }

        @Override
        protected PasswordField createPasswordField() {
            return passwordField;
        }

        @Override
        protected Button createLoginButton() {
            return loginButton;
        }
    }

My login panel:

private final Button loginButton = new Button("Login");
private final TextField usernameTextField = new TextField("Benutzername");
private final PasswordField passwordField = new PasswordField("Passwort");

private void initLayout() {
    Label textLabel = new Label("...", ContentMode.HTML);
    loginButton.setEnabled(false);

    final FormLayout formLayout = new FormLayout();
    formLayout.setMargin(true);
    formLayout.addStyleName("outlined");
    formLayout.addComponents(usernameTextField, passwordField, loginButton);
    formLayout.setComponentAlignment(loginButton, Alignment.BOTTOM_RIGHT);
    formLayout.setWidth("20em");
    formLayout.setHeight("10em");

    MyLoginForm myLoginForm = new MyLoginForm();
    myLoginForm.setContent(formLayout);
    addComponents(textLabel, myLoginForm);
    setComponentAlignment(myLoginForm, Alignment.TOP_CENTER);
}

Answer 1

The documentation for LoginForm states that you need to override createContent if you want to implement a custom layout. I'm not sure if setContent works the same way.

Login form with auto-completion and auto-fill for all major browsers. You can derive from this class and implement the createContent(com.vaadin.ui.TextField, com.vaadin.ui.PasswordField, com.vaadin.ui.Button) method to build the layout using the text fields and login button that are passed to that method. The supplied components are specially treated so that they work with password managers.

This suggests the following implementation (I didn't test it):

private class MyLoginForm extends com.vaadin.ui.LoginForm {
//skip

@Override
protected Component createContent(TextField userNameField,
                              PasswordField passwordField,
                              Button loginButton) {
    FormLayout formLayout = new FormLayout();
    formLayout.setMargin(true);
    formLayout.addStyleName("outlined");
    formLayout.addComponents(userNameField, passwordField, loginButton);
    formLayout.setComponentAlignment(loginButton, Alignment.BOTTOM_RIGHT);
    formLayout.setWidth("20em");
    formLayout.setHeight("10em");
    return formLayout;
}
}

UPDATE: Here's an example code for initialization of MyLoginForm in its parent layout:

MyLoginForm myLoginForm = new MyLoginForm();
addComponents(textLabel, myLoginForm);
setComponentAlignment(myLoginForm, Alignment.TOP_CENTER);

LoginForm calls createContent when it becomes attached to the parent component. So, you don't need to call setContent.