Forms in Vaadin 7

I’m trying to work out how to use FieldGroups in Vaadin 7 instead of Forms from Vaadin 6.

The examples are fairly straightforward, but they use 'item’s and ‘properties’ for field access. I have my library set up as a JPA project, so I get JPA Entities back from the database. I was trying to bind the object to a FieldGroup, but I’m doing something wrong. I’m assuming there is a simple fix, but I have not found it yet - perhaps someone can put me on the right track.

I have the following database table/data model object:

class Sgname{
    private integer id = null;
    private String name = null;

   <getters and setters>

Tried putting this into a FieldGroup in a FormLayout:

    Sgname sg = null;

    sgForm = new FormLayout();
    txt_SGName = new TextField("SG Name");

    fg_SGName = new FieldGroup(sg);
    fg_SGName.bind(txt_SGName, "name");
 etc. etc.

This code won’t compile - eclipse flags the fg_SGName = new FieldGroup(sg); line and tells me to remove the argument. Then the text field doesn’t seem to show up on my screen. I have not annotated my data model for these form fields - do I need to do that and rebuild the data model? Or am I missing something in the layout code?



You can only add itemdatasource to a fieldgroup.


Maybe you are better off with BeanFieldGroup.

Thanks - I’ll take a look…


I am pretty new to Vaadin and was in the same boat. Take a look at my post for a simple example of using the BeanFieldGroup.


Thanks - I think I have managed to get the form created. That helped.

I do have a layout problem - not sure how it is related (or if it is related) to the actual form components. My code adds the FormLayout containing a BeanFieldGroup (which contains a single text field). Below the FormLayout is a table. My question is - why the inordinate amount of space between the form and the table? The code that creates it looks like this (I have removed some of the details…)

Any suggestions appreciated…


                sgForm = new FormLayout();
		sgForm.setCaption("Add/Update Support Group Record");

		txt_SGName = new TextField("SG Name");


		bfgSG = new BeanFieldGroup<Sgname>(Sgname.class);
		bfgSG.setItemDataSource(new BeanItem<Sgname>(sg));
		for(Object propertyId: bfgSG.getUnboundPropertyIds()){
				bfgSG.bind(txt_SGName, propertyId);

		tbl_SGNames = new Table();
		tbl_SGNames.setVisibleColumns(new Object[] { "id", "sgname", "modifiedBy", "lastChanged" });


		setComponentAlignment(sgForm, Alignment.TOP_CENTER);
		setComponentAlignment(tbl_SGNames, Alignment.TOP_CENTER);


You didn’t write which layout is “this”, but I’m guessing a VerticalLayout and adding a setExpandRatio() call (either set 0 for the form or set 1 for the table) would help.

It is a VerticalLayout, and adding the expandRatio got rid of the unwanted space - thanks very much!