Vaadin: пользовательский макет с формой [заголовок текстового поля и обязательный индикатор] - PullRequest
Новая
       10

Vaadin: пользовательский макет с формой [заголовок текстового поля и обязательный индикатор]

1 голос
/ 31 мая 2011

Мы разрабатываем некоторую форму, но используем CustomLayout в Vaadin Forms.мы использовали Label of Field в HTML и хотим подавить подпись TextField.Также хотите сделать обязательный атрибут в левой части текстового поля.

Существует разделение задач между графическим дизайнером и разработчиком, поэтому пользовательский макет удобен для нас, поэтому мы не можем использовать любой другой макет прямо сейчас.

В настоящее время мой тестовый экран выглядит следующим образом: [добавлены только два поля в форму для пользовательского макета] Как вы можете видеть, заголовок «привет» находится в верхней части текстового поля, которое я хочу полностью удалить.Этот заголовок только для иллюстрации, в противном случае я делаю его пустым, но в таблице все еще есть место.Также я хочу, чтобы требуемый индикатор был выровнен по текстовому полю.

Я создал фабрику полей формы и перепробовал много вариантов, но безуспешно.

, если требуются какие-либо конкретные изменения CSS, пожалуйста, скажите мнекак добавить его, так как я новичок в CSS.основываясь на предыдущем обсуждении форума, я добавил следующий стиль в свой TextField без каких-либо успехов, 

myLabel.setStyleName("inline");

и используя CSS: 

.inline, .inline div { display: inline; }

enter image description here [в моем случае я добавляю его вОбъект TextField}

1 Ответ

3 голосов
/ 21 октября 2011

«Также хотите сделать обязательный атрибут в левой части текстового поля», если вы хотите сделать обязательное поле, вы должны установить для него свойство .setRequired (true);

Если вы хотите обработать все позиции элемента всвою форму вручную, вы должны сделать что-то вроде этого: 

public class YourFormextends Form{

private YourForm() {

        setImmediate(true);
        setValidationVisible(false);
        setValidationVisibleOnCommit(false);
        setValidationVisible(false);
        setValidationVisibleOnCommit(false);
        setWriteThrough(false);

        VerticalLayout formLayout = createFormLayout();
        setLayout(formLayout);

        setFormFieldFactory(yourFormFieldFactory());
    }

public static VerticalLayout createFormLayout() {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);

        final VerticalLayout formErrorLayout = new VerticalLayout();
        final VerticalLayout formFieldLayout = formFieldLayout();

        layout.addComponent(formErrorLayout, CREATE_FORM_ERROR_LAYOUT_INDEX);
        layout.addComponent(formFieldLayout, CREATE_FORM_FIELD_LAYOUT_INDEX);

        return layout;
    }

    private static VerticalLayout formFieldLayout() {
        VerticalLayout rootLayout = new VerticalLayout();
        rootLayout.setSpacing(true);
        rootLayout.setMargin(false, false, true, false);
        GridLayout layout = new GridLayout();

        layout.setRows(1);
        layout.setColumns(3);

        rootLayout.addComponent(layout);

        return rootLayout;

    }

private FormFieldFactory activityFormFieldFactory() {
    FormFieldFactory factory = new FormFieldFactory() {

        private static final long serialVersionUID = 1L;

        @SuppressWarnings("unchecked")
        @Override
        public Field createField(Item item, Object propertyId, Component uiContext) {
            String fieldName = (String) propertyId;
            if (fieldName.equals(FIELD_NAME_HELLO)) {

                if (EDIT_MODE) {
                    TextField textField = new TextField(FIELD_NAME_HELLO);
                    textField.setRequired(true);
                    return textField;
                }
            }
        }
    }

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

    VerticalLayout formFieldLayout = getFormFieldLayout();

        if (fieldName.equals(FIELD_NAME_HELLO)) {
            GridLayout layout = (GridLayout) formFieldLayout.getComponent(0);
            layout.addComponent(fieldCaption, 0, 0);
            layout.addComponent(field, 1, 0);
layout.addComponent(fieldDescription, 2, 0);
        }
}
}


}
...