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

按钮

正如我所说，我希望它能够横向整理......任何想法？

Answer 1

这是任何原因，为什么你应该使用LoginForm。因为如果答案是否定的，您可以使用Vaadin simple Form，它可以让您的表单布局更加灵活。例如

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

Vaadin LoginForm布局 - HTML

1 个答案: