Databinding programmatically

GUI component like the Grid or the Binder can be programmatically linked to an entity.

List of GUI components that require databinding:

Databinding with CheckboxGroup, RadioButtonGroup, ComboBox, Select or ListBox:

  • First the component has to be typed, for this select the component in the GUI builder and then click in the properties on Property > Object > Type Arguments e.g. java.lang.String

  • In the following dialog select the type you want to display.

  • After that you can select which information should be displayed per entry.

To populate the component now, you can write the following code:

this.theComponent.setItems(myListWithItems);

In the background Vaadin then creates a DataProvider for the passed list. So if an element is updated in the list, this must be updated then also the DataProvider:

this.theComponent.getDataProvider().refreshItem(itemFromTheListThatChanged);

If you delete or add an element, you must call the refreshAll method:

this.theComponent.getDataProvider().refreshAll();

With getValue() you can query for the selected item(s).

Databinding with Binder:

With the Binder you can easily create forms. Simply drag and drop an entity onto the GUI builder. After that a dialog opens, where you can select the attributes that should be displayed.

An entity can now be bound as follows:

this.binder.writeBean(myBean);

Now the values of the bean have been transferred to the fields of the binder.

The values can now be retrieved as follows:

this.binder.readBean(myBean);

Databinding with Grid:

The Grid can be bound similar to CheckboxGroup etc.. First drag and drop the entity into the GUI builder. After that, however, a more complex dialog opens. There you can select the attributes to be displayed. But you can also insert column per code like this:

this.grid.addColumn(Customer::getAddress).setHeader("Addressen").setAutoWidth(true);

However, methods of the entity do not have to be used:

this.grid.addColumn(customer -> "Address is: " + customer.getAddress()).setHeader("Addressen").setAutoWidth(true);

The setting of the items, as well as the refreshing of the dataprovider is identical to the CheckboxGroup, etc.