Макет Vaadin LoginForm - HTML

Я столкнулся с проблемой, пытаясь установить горизонтальный макет для LoginForm Vaadin. Единственное решение, для которого у меня есть идея, - это переопределить класс 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 находятся в одной строке - все остальные в отдельных строках. Так это выглядит так:

Имя пользователяЯрлык

UserField PasswordLabel

поле пароля

Кнопка

И, как я уже сказал, я бы хотел, чтобы он был альгинирован горизонтально... есть идеи?


person mary jane    schedule 03.10.2011    source источник
comment
Хм, не могли бы вы разместить там таблицу - все подписи слева, а поля справа?   -  person Igor Masternoy    schedule 03.08.2013


Ответы (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 = "";
person Yury    schedule 03.10.2011
comment
Спасибо за ответ, ваш пример работает нормально, однако я хотел использовать LoginForm, чтобы браузер мог запомнить и сохранить пароль... - person mary jane; 08.10.2011
comment
В этом случае вы всегда можете использовать файлы cookie. Посмотрите это (руководство) [vaadin.com/book/-/page/, есть подтема Управление файлами cookie. Надеюсь, что это поможет вам. - person Yury; 08.10.2011
comment
Похоже, изменить макет сложнее, чем я думал, и мне придется иметь дело с файлами cookie. Спасибо за ваши ответы :) - person mary jane; 11.10.2011