Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Complex Form Layout (Columns and Collection<Item> fields)
Hi,
I'm trying to code a very complex form. I need to be able to put fields in two columns (side-by-side) as well as having a table which represents a List<Elements>, where my Elements type is a model item, and the list represents one of the fields of my model (for which this form exists).
I'm considering writing a custom form, but I'm a bit afraid of having to rewrite a lot of Form functionality, and I'm a bit lost on how to do so.
How may I put my form on two columns?
How can I put a Table which represents my List<Elements> field? (N.B. this table must 'span' across the above two columns)
How am I able to put a button for this Table?
Should I consider writing my own custom Form components? Where can I get reference material for this?
Thanks in advance,
Dale
In my opinion it sounds that you have very special case, with only a few fields. How about just forgetting the Form? It might be easier to handle those fields if they are completely separate - and it shouldn't be a big hassle when the amount of fields are only a few.
Jens Jansson: In my opinion it sounds that you have very special case, with only a few fields. How about just forgetting the Form? It might be easier to handle those fields if they are completely separate - and it shouldn't be a big hassle when the amount of fields are only a few.
Actually it's quite a big form, I just presented the more complicated parts of it (the ones I'm unsure how to handle). As there any reference material I can use for creating custom forms? (I'm thinking about validation for example)
I guess I did a wrong assumption when saying that the form has only a few fields. I somehow interpret 'fields in two columns' = two fields in separate columns. Is the table the only field that is a special case? One option is to have the table outside the form and handle only that component separately. On the other hand, I guess using a formfieldfactory will give the power you need to build up the different fields, and you don't have to extend the form itself. Just use a gridlayout as content, form.setContent(new GridLayout(1,2));
Check the Book of Vaadin, "Generating Proper Fields with a FormFieldFactory" under 5.17.2 Binding Form to Data
Jens Jansson: I guess I did a wrong assumption when saying that the form has only a few fields. I somehow interpret 'fields in two columns' = two fields in separate columns. Is the table the only field that is a special case? One option is to have the table outside the form and handle only that component separately. On the other hand, I guess using a formfieldfactory will give the power you need to build up the different fields, and you don't have to extend the form itself. Just use a gridlayout as content, form.setContent(new GridLayout(1,2));
Check the Book of Vaadin, "Generating Proper Fields with a FormFieldFactory" under 5.17.2 Binding Form to Data
Excellent Jens! If everything stays the same our mega-form should have 2 List<Bean> Tables and one even more complex Tree/Table element (which I won't even get into, it's a List<Bean1>, where Bean1 has a List<Bean2>, where Bean2 has a List<Bean3> =D)
We're already using a FormFieldFactory, I suspect I've got to dig through and learn how Vaadin's Field class works exactly. Will look into using a GridLayout.
Thanks again,
I'll come back tomorrow (probably ;-D)
Jens Jansson: I guess I did a wrong assumption when saying that the form has only a few fields. I somehow interpret 'fields in two columns' = two fields in separate columns. Is the table the only field that is a special case? One option is to have the table outside the form and handle only that component separately. On the other hand, I guess using a formfieldfactory will give the power you need to build up the different fields, and you don't have to extend the form itself. Just use a gridlayout as content, form.setContent(new GridLayout(1,2));
Check the Book of Vaadin, "Generating Proper Fields with a FormFieldFactory" under 5.17.2 Binding Form to Data
Hi Jens!
I am also looking to do something like this on a form, I can however not find the function setContent on the Form class.
(http://vaadin.com/api/com/vaadin/ui/Form.html)
Is it possible to use a grid layout and still add fields to the form with addField?
Cheers, Lars
Thanks Dale, when you add fields to the form (that has a gridlayout), how do you specify where in the grid the field should end up?
Lars Hellström: Thanks Dale, when you add fields to the form (that has a gridlayout), how do you specify where in the grid the field should end up?
I have the same question. I have not (yet) found any example of a Vaadin Form with its fields arranged in a GridLayout. An example of that would help me. :-)
Thank you.
Nicolas
What I did for similar situation is extend Form and override attachField(). In the attachField() method I can put the field anywhere I wanted.
public class ComplexForm extends Form {
public Layout myLayout;
public FormLayout ifYouWantCaptionOnLeft;
public ComplexForm() {
myLayout = GridLayout(); //you can choose any layout
myLayout.addComponent(ifYouWantCaptionOnLeft);
}
@Override
protected void attachField(Object propertyId, Field field) {
if (propertyId == something) {
myLayout.addComponent();
} else if (if you want caption on left of field) {
ifYouWantCaptionOnLeft.addComponent();
}
}
}
Personally, I'm a big fan of CustomLayout but you can use any Layout you want.
EDIT: Forgot to mention few caveats. DO NOT call setLayout in the form and instead of adding the form to a Container, you'll have to first override getLayout() and call that method.
I did not want to overrite attachField, but eventually I did that too. I don't like the awkward succession of if, this is not very performant. Vaadin Forms are good, but they lack a simpler way of attaching fields wherever one wants in a form.
Nicolas
Nicolas Barbulesco: I did not want to overrite attachField, but eventually I did that too. I don't like the awkward succession of if, this is not very performant. Vaadin Forms are good, but they lack a simpler way of attaching fields wherever one wants in a form.
Awkward this is, but for tests that can be performed with "==", the cost is probably in the nanoseconds per invocation at least after JIT has optimized the code.
In general, for a simpler way to manage forms and data binding, take a look at Vaadin 7 FieldGroup or the FormBinder add-on for Vaadin 6. How much they help depend on your use case (how static or dynamic the forms are, ...) but they should at least make the data binding and layout aspects less dependent on each other if not providing more in your case.
Henri Sara:
Awkward this is, but for tests that can be performed with "==", the cost is probably in the nanoseconds per invocation at least after JIT has optimized the code.
I dont make my tests with ==, but rather with .equals and instanceof. Anyway, it is awkward to have a long succession of if, as though the fields were special cases. The fields are just normal cases where the developer wants to control the position.
I hope that future Vaadin will separate more the intelligence on the fields, tightly linked to the Form, and their position.
Nicolas
Nicolas Barbulesco: I hope that future Vaadin will separate more the intelligence on the fields, tightly linked to the Form, and their position.
That is exactly the role of FieldGroup, which effectively replaces Form in Vaadin 7.
Hi I am uisng vaadin 7.I have stuck in one place and need guidance. I have a pojo class with four fields( private long IDFactorRegla; private Set Agrupación; private Set values; private Double Tasa;)
I also have myForm extending formlayout with two Textfield and a listselect component, based on the itemselected from listselect component , the corresponding combobox will be visible.
Based on the items selected in combobox, i am storing all in a hashset and setting the field 'values'. I am using beanfieldgroup, and populating them in grid. But i am not getting the satisfying result.The values field in grid is not populating based on the items selected by combobox.
Please sugggest me what is right approach to solve my problem.