Vaadin LoginForm佈局 - HTML

Question

我面臨着嘗試將水平佈局設置爲Vaadin的LoginForm的問題。我有一個想法的唯一解決方案是重寫getLoginHTML（）類，以便它返回正確的代碼。 我添加了style =「float：left」，它爲我在正常的html中工作。

的代碼更改的部分看起來像這樣：

(...) + "<div class='v-app v-app-loginpage' style=\"background:transparent;\">" 
     + "<iframe name='logintarget' style='width:0;height:0;" 
     + "border:0;margin:0;padding:0'></iframe>" 
     + "<form id='loginf' target='logintarget' onkeypress=\"submitOnEnter(event)\" method=\"post\">" 
     + "<div style=\"float: left;\">" 
     + getUsernameCaption() 
     + "</div><div style=\"float: left;\">" 
     + "<input class='v-textfield' style=\"float: left;\" type='text' name='username'></div>" 
     + "<div style=\"float: left;\">" 
     + getPasswordCaption() 
     + "</div>" 
     + "<div style=\"float: left;\"><input class='v-textfield' style='display:inline; float:left;' type='password' name='password'></div>" 
     + (...) 

而且以一種不可思議的方式表現 - UserField和PasswordLabel是在同一條直線 - 所有其他人都在一個單獨的線。因此，它看起來像這樣：

UsernameLabel

UserField PasswordLabel

PasswordField

按鈕

正如我所說，我想它是水平algined ...任何想法？

Answer 1

這是什麼原因，爲什麼你應該使用LoginForm。因爲如果答案是否定的，你可以使用Vaadin簡單表單，它可以讓你的表單佈局更加靈活。例如

public class FormBean{ 
private String username, password; 

//getters and setters 
} 


    HorizontalLayout newLayout = new HorizontalLayout(); 

    Form form = new Form(newLayout){ 
     @Override 
     protected void attachField(Object propertyId, Field field) { 
      String fieldName = (String) propertyId; 

      if(fieldName.equals("username")){ 
       Label usernameLabel = new Label("username: "); 
       newLayout.addComponent(usernameLabel); 
       newLayout.addComponent(field); 
      } 
     } 
    }; 
    form.setItemDataSource(new FormBean()); 
    form.setFormFieldFactory(new FormFieldFactory() { 

     @Override 
     public Field createField(Item item, Object propertyId, Component uiContext) { 
      String fieldName = (String) propertyId; 
      if(fieldName.equals("username")){ 
       TextField field = new TextField(); 
       field.setImmediate(true); 
       //Here your can add some validations on "fly", for example is username allow only latin characters 
       field.addListener(new TextChangeListener() { 

        @Override 
        public void textChange(TextChangeEvent event) { 
         String currentText = event.getText(); 
         //Here go validation 
        } 
       }); 
      } 
      return null; 
     } 
    }); 

裏面formFieldFactory你可以設置如果需要領域，如果你想設定某種驗證我推薦使用Vaadin附加BeanValidationForm，它允許使用POJO對象中的註釋與設置一些驗證等。用來形成創建設置一些規則，例如@NotNull，@Max，@Min等

@NotNull(message = "Username required") 
private String username = ""; 

@NotNull(message = "Password required") 
private String userpass = "";