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

的，如果你想实现一个自定义的布局，你需要重写createContentLoginForm状态的文档。我不确定setContent是否以相同的方式工作。

登录窗体，自动完成并自动填充所有主流浏览器。您可以从该类派生并实现createContent(com.vaadin.ui.TextField, com.vaadin.ui.PasswordField, com.vaadin.ui.Button)方法，以使用传递给该方法的文本字段和登录按钮来构建布局。提供的组件经过特殊处理，以便与密码管理器配合使用。

这意味着以下实现（我没有测试）：

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：下面是在其父布局MyLoginForm初始化的示例代码：

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

LoginForm当它连接到父组件时，调用createContent。所以，你不需要拨打setContent。