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

カスタムレイアウトを実装したい場合は、createContentをオーバーライドする必要がLoginForm状態のドキュメント。 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に電話する必要はありません。