Center login form

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

Sorry if this has been asked before, but I can’t seem to find any posts that would show how to do this. I’m trying to place a login form in the middle-center (vertically and horizontally) of the page. This is what I have so far:


public class LoginWindow extends Window {

    private Layout layout = new VerticalLayout();

    private Button btnLogin = new Button("Login");
    private TextField txtUsername = new TextField("Username");
    private TextField txtPassword = new TextField("Password");

    public LoginWindow() {
        super(Constants.APPLICATION_NAME + " Login");
        setName("login");
        setContent(layout);
        initUI();
    }

    private void initUI() {
        txtUsername.setRequired(true);
        txtPassword.setRequired(true);
        txtPassword.setSecret(true);

        final Panel loginPanel = new Panel("Login...");
        layout.addComponent(loginPanel);

        final FormLayout loginForm = new FormLayout();
        loginForm.setMargin(true);
        loginForm.setStyleName("loginForm");
        loginForm.addComponent(txtUsername);
        loginForm.addComponent(txtPassword);
        loginForm.addComponent(btnLogin);

        loginPanel.setContent(loginForm);
    }
}

How could I make my loginForm appear in the center-middle of the page?

Thanks,
Jerry

2

Hi, first of I’d change row 4 to

private VerticalLayout layout = new VerticalLayout(); , so that you have the VerticalLayout API to call upon instead of the Layout interface. VerticalLayout has the method setComponentAlignment which is exactly what you need. You can now add anywhere, as long as it is after “layout.addComponent(loginPanel);” this code:

layout.setSizeFull(); layout.setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER); and this will center the loginPanel! The layout has to be set “size full” so that it takes the whole browser window, so that you can center according to it.

The panel has 100% width, and so takes the whole browser width, which may look a little wierd too. I suggest you make it as tight as possible to make it look nicer. This is done with

loginPanel.setWidth(null);

Here’s the whole code once more. All my changes are that I added rows 24-26


public class LoginWindow extends Window {

    private VerticalLayout layout = new VerticalLayout();

    private Button btnLogin = new Button("Login");
    private TextField txtUsername = new TextField("Username");
    private TextField txtPassword = new TextField("Password");

    public LoginWindow() {
        super(Constants.APPLICATION_NAME + " Login");
        setName("login");
        setContent(layout);
        initUI();
    }

    private void initUI() {
        txtUsername.setRequired(true);
        txtPassword.setRequired(true);
        txtPassword.setSecret(true);

        final Panel loginPanel = new Panel("Login...");
        layout.addComponent(loginPanel);
        layout.setSizeFull();
        layout.setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER);
        loginPanel.setWidth(null);
        final FormLayout loginForm = new FormLayout();
        loginForm.setMargin(true);
        loginForm.setStyleName("loginForm");
        loginForm.addComponent(txtUsername);
        loginForm.addComponent(txtPassword);
        loginForm.addComponent(btnLogin);

        loginPanel.setContent(loginForm);
    }
}
3

Hi Jerry!

You can make the login form appear in the middle-center by doing the following:

  1. Make your layout be of VerticalLayout type (it is, but is currently handled like a Layout)
  2. Do a setSizeFull() on the layout
  3. Specify a size for the loginPanel (setWidth, setHeight). This can be a percentage or a fixed size.
  4. Tell the layout about the alignment layout.setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER)

The setComponentAlignment method is a method in VerticalLayout (and Horizontal), so you need to specify the type accordingly (step 1).

Here’s a working version of the code, but note that the 200x200 pixels is a bit too small :wink:

    public class LoginWindow extends Window {

        private final VerticalLayout layout = new VerticalLayout();

        private final Button btnLogin = new Button("Login");
        private final TextField txtUsername = new TextField("Username");
        private final TextField txtPassword = new TextField("Password");

        public LoginWindow() {
            super("LoginWindow Login");
            setName("login");
            setContent(layout);
            initUI();
        }

        private void initUI() {
            txtUsername.setRequired(true);
            txtPassword.setRequired(true);
            txtPassword.setSecret(true);

            final Panel loginPanel = new Panel("Login...");
            layout.addComponent(loginPanel);
            loginPanel.setWidth("200px");
            loginPanel.setHeight("200px");

            final FormLayout loginForm = new FormLayout();
            loginForm.setMargin(true);
            loginForm.setStyleName("loginForm");
            loginForm.addComponent(txtUsername);
            loginForm.addComponent(txtPassword);
            loginForm.addComponent(btnLogin);

            loginPanel.setContent(loginForm);
            layout.setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER);
            layout.setSizeFull();
        }
    }

HTH,
/Jonatan

4

Yay… it’s working!

Thanks guys! That really helped. :grin: