Data Binding

Show data in listing components and collect user input using form fields.

Topics

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.

Open in a
new tab

This example has 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. Additionally, when loading and saving, the data representation may need to be converted between the field type and the underlying data types in the business objects.

Topics

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.
Binding Items to Components: Selection components allow selecting a field value from a list of options. This article describes how they are bound and displayed in such components.
Creating a Component that Has a Value: How to create a field component.

Documentation

Documentation

Data Binding

Topics