Forms & Data Binding

Learn how to bind data to forms and selection components in Vaadin Flow.

Topics

Vaadin Flow includes mechanisms to bind field components, as well as forms consisting of fields, to business objects (e.g., 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, and 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 & Converting User Input: Validating forms with multiple fields, and converting field values from input format to acceptable data format.
Loading & Saving to Business Objects: Loading business objects and then saving them.
Binding Beans to Forms: How beans, the standard Java model for business objects are bound to forms.
Binding Items to Components: Binding and displaying a list of items in components, such as Grid and Combo Box.
Creating a Component that Has a Value: How to create a field component.

Docs

Docs

Forms & Data Binding

Topics