Vaadin: Custom Layout with Form [Text Field Caption and required indicator]

We are developing some Form, but using CustomLayout in Vaadin Forms. we used Label of Field in HTML and want to suppress the TextField Caption. Also want to make required attribute in the left side of text field.

There is separation of tasks between graphics designer and developer, so Custom layout 开发者_C百科is convenient for us, so we cannot use any other layout right now.

Currently my test screen is as follows, [added only two fields in Form for custom layout] As you can see that "hello" caption is top of Text Box, which I want to completely removed. This caption is just for illustration purpose, otherwise I make it empty, but still there is space in table. Also I want to make required indicator aligned with Text box.

I made a Form Field factory and tried many options but no luck.

if there is any specific CSS changes required please clearly tell me how to add it since I am new on CSS. based on previous discussion of Forum I added following style in my TextField without any sucess,

myLabel.setStyleName("inline");

and using CSS:

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

[my case I am adding it into TextField object }

---

"Also want to make required attribute in the left side of text field" if you want make field required you should set for it property .setRequired(true);

If you want handle all element position in your form manually you should do something like this:

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);
        }
}
}


}