Form and multiple components on the same line

Vaadin 6 / 7 / 8 Framework UI
1

I am using Form component and FormFieldFactory.
the FormFieldFactory puts all of the fields on their own line.
My question is can I use the Form and FormFieldFactory and put more then one field like State and Zip Code on the same line? Is there an example?

Thank You

Peter

2

It’s the layout the form uses that specifies how your components will be placed. By default, the form uses the FormLayout and it only supports adding fields one after another in a vertical direction. What you can do is to use an inline form. In other words, when your fieldfactory is supposed to create the fields for the address properties, don’t create a TextField, instead create another Form which displays the address fields. For this second form, you’ll need to specify another layout, in your case it could be a HorizontalLayout.

3

That worked

Thank You

4

Can you share some code that does this form in a form? If my bean has related properties like city, state and zip to be displayed on a line of the main form, how do I specify the ‘ordered properties ids’ for setItemDataSource? Do I just mention ‘city’ and let it return a form that does all three? Do I create a fake property like ‘cityStateZip’ that is used to create the inline form?

Does the inline form use the same data source (or do I need to create a new one using the same bean perhaps as the source?) and use just a limited ordered properties ids of city, state, zip so it only get/set those?

Not sure how these are tied together.

5

Actually I did not work for me, it worked until I tried to reference the individual fields and then the whole thing fell apart.
I went back to CustomLayout.

Peter

6

Thanks. I didn’t really like the idea of having two distinct forms and then having to commit/discard them together. After all, we were considering using this to perhaps deal with 3 to 4 different layouts and thus 3-4 Forms.

I had hoped I could just use another Form as just another item added to the main form and have it work so that when I commit the main table, it would commit the embedded forms (same for discard/readonly, etc.).

Creating new Forms just to handle layout seemed a tad ugly. I found that using GridLayout with the 6.3 (I think) ability to override attachField() so I could put fields in the right locations worked well. Of course, a CustomLayout works well, too as I do that in various places.

But I think I’ll need to use GridLayout in the future because it’s more dynamic. I have an object that is like a simple POJO for a few attributes (id, name, last updated time, etc.) but has something very much like Item with unspecified numbers of embedded Property (for us, it’s just a HashMap of name-value pairs). We need to be able to edit the name-value pairs, but these are not fixed in number or the what the names are (they are user defined records basically of which our app has no prior knowledge).

So CustomLayout won’t work because it’s a fixed HTML page – whereas in our previous JSP world, we just would emit a TR for each name-value (and a TD for the name and another TD for the value). I believe GridLayout will let me add rows as needed and matches well with this sort of dynamic object form display/update needs.

The trick for us will be that the value part can be variable types: number, currency, date, date-time, string, plain text or HTML, so we need to put the right editor in the right place based on the name-value type. We may even abandon a Form for this and go with a Table if we can plug in cell editors (can’t recall if that was in Vaadin or SmartGWT/ExtGWT…).

7

Hi Kim, please could you share some code?
it would be very helpfull for me also
I need also to use the FieldFactory, but with different layout than the default one.
thank you very much in advance
Chris.

8 
    VerticalLayout verticalLayout = new VerticalLayout(); 
    FormLayout formLayout = new FormLayout();
    
    TetrisLocalDateField eventEndDate = new TetrisLocalDateField("eventEndDate")); // form comonent's 
    formLayout.addComponent(eventEndDate);
    
    verticalLayout.addComponent(formLayout);

// fieldGroup.bind(recurEvery, propertyName(proxy.getMaterializationStatus()));
HorizontalLayout hr = new HorizontalLayout();
Label Label = new Label(“addInstancesButton”);
Label Label2 = new Label(“addInstancesButton”);
Label Label3 = new Label(“addInstancesButton”);
hr.addComponent(Label);
hr.addComponent(Label2);
hr.addComponent(Label3);
verticalLayout.addComponent(hr);
Button addInstancesButton = new Button(“addInstancesButton”));
addInstancesButton.addClickListener((event) → {
// addNewInstance();
});
verticalLayout.addComponent(addInstancesButton);