Vaadin：loginForm 更改字段标题的位置

Question

我使用 vaadin 的 LoginForm 组件在 vaadin 中构建了一个登录。我对标题字段的位置有疑问。我想将标题的位置更改为字段。

我的 LoginForm 组件：

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;
        }
    }

我的登录面板：

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

LoginForm states that you need to override createContent 的文档，如果您想实现自定义布局。我不确定 setContent 是否以同样的方式工作。

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.

这表明以下实现（我没有测试）：

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;
}
}

更新： 这是在其父布局中初始化 MyLoginForm 的示例代码：

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

LoginForm 在附加到父组件时调用 createContent。所以，你不需要调用 setContent.

Vaadin：loginForm 更改字段标题的位置

Vaadin: loginForm change position of field's caption

java

css

vaadin

vaadin7