Data Binding

Vaadin Flow includes mechanisms to bind field components as well as forms consisting of fields directly to business objects, such as Java beans. Binding is buffered, so you can load and reload data from the source to fields, and then save the edited data back.

In this example we have a view with two editors, one writable, one read-only. When the user clicks Save, the form data is written to the BusinessPerson object, which is reflected in the read-only form.

// Data model
BusinessPerson person = new BusinessPerson();

// Two editors: the actual editor and read-only display
PersonEditor editor1 = new PersonEditor(false);
PersonEditor editor2 = new PersonEditor(true);

// The editor and buttons
VerticalLayout layout1 = new VerticalLayout();
HorizontalLayout buttons = new HorizontalLayout();
Button saveButton = new Button("Save");
saveButton.addClickListener(click -> {
    try {
        editor1.getBinder().writeBean(person);
        editor2.getBinder().readBean(person);
    } catch (ValidationException e) {}
});
Button resetButton = new Button("Reset");
resetButton.addClickListener(click -> {
    editor1.getBinder().readBean(person);
});
buttons.add(saveButton, resetButton);
layout1.add(editor1, buttons);

VerticalLayout layout2 = new VerticalLayout();
layout2.add(editor2);

// Show the two editors side-by-side
HorizontalLayout hlayout = new HorizontalLayout();
hlayout.setDefaultVerticalComponentAlignment(
    FlexComponent.Alignment.START);
hlayout.add(layout1, layout2);
add(hlayout);

Field and form input can be validated before saving. Further, when loading and saving, data representation may need to be converted between the field type and the underlying data types in the business objects.

Overview

Binding Data to Forms

How to bind data to forms, which are composites with multiple fields that each bind to sub-structures in data.

Validating and Converting User Input

Like individual fields, forms with multiple fields can be validated before saving the input to the bound business objects.

Loading From and Saving To Business Objects

Form state is loaded from business objects, and can be saved, normally after validation.

Binding Beans to Forms

Beans are the standard Java model for business objects. This article describes how they are bound to forms.

Creating a Field Component

How to create a field component. The defining feature of field components is that they can have a value. Binder requires that for a component to be bound.

Binding Items to Components

Selection components allow selecting a field value from a number of items. This article describes how they are bound and displayed in such components.