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 = "";