Binding Components to Data

form.setItemDataSource(item);

// Nicer captions form.getField("discoverername").setCaption("Discoverer"); form.getField("discovererborn").setCaption("Born");

Figure 9.3. A Form with Nested Bean Properties

The BeanContainer and BeanItemContainer allow easy definition of nested bean properties with addNestedContainerProperty(), as described in the section called “Nested Properties”.

9.4. Creating Forms by Binding Fields to Items

Because of pressing release schedules to get this edition to your hands, we were unable to completely update this chapter. Some form handling is still under work, especially form validation.

Most applications in existence have forms of some sort. Forms contain fields, which you want to bind to a data source, an item in the Vaadin data model. FieldGroup provides an easy way to bind fields to the properties of an item. You can use it by first creating a layout with some fields, and then call it to bind the fields to the data source. You can also let the FieldGroup create the fields using a field factory. It can also handle commits. Notice that FieldGroup is not a user interface component, so you can not add it to a layout.

9.4.1. Simple Binding

Let us start with a data model that has an item with a couple of properties. The item could be any item type, as described earlier.

// Have an item

PropertysetItem item = new PropertysetItem(); item.addItemProperty("name", new ObjectProperty<String>("Zaphod")); item.addItemProperty("age", new ObjectProperty<Integer>(42));

Next, you would design a form for editing the data. The FormLayout (Section 6.5, “FormLayout” is ideal for forms, but you could use any other layout as well.

// Have some layout and create the fields FormLayout form = new FormLayout();

TextField nameField = new TextField("Name"); form.addComponent(nameField);

TextField ageField = new TextField("Age"); form.addComponent(ageField);

Then, we can bind the fields to the data as follows:

// Now create the binder and bind the fields FieldGroup binder = new FieldGroup(item); binder.bind(nameField, "name"); binder.bind(ageField, "age");