Binding Data to Forms

Binding Data to Forms

Data binding is all about connecting values present in different sources. Say we have a form to edit a user, we already have a model in the backend, and we just need to connect the data present.

Here we have a class called Binder, and when we use this, we can configure the bindings or connections between the values and model made along with validation of data.

Steps followed in binding data to forms

Following steps must be followed for binding data to forms.

Step 1: Declare a Binder class.

Binder<Animal> binder = new Binder<>(Animal.class);
TextField titleField = new TextField();

//defining the instanceof field to be used
binder.forField(titleField)
//actually binding it.
.bind(
    //calling species from a instance, here Animal
    Animal::getSpecies,
    //saving species to a instance, here Animal
    Person::setSpecies);
    TextField nameField = new TextField();
    
    // Shorthand for cases without extra configuration
    binder.bind(nameField, Animal::getName, Animal::setName);

You can also try this code with Online Java Compiler

Run Code

Step 2: Binder class is used to load, edit and save the values.

Animal animal = new Animal("Cat", Abyssinian Cat);

// Updating the value in each field.
binder.readBean(person);
Button saveButton = new Button("Save",
    event -> {
        try {
            binder.writeBean(animal);
            // saving
        } catch (ValidationException e) {
            notifyValidationException(e);
        }
});

// Updating
Button resetButton = new Button("Reset", event -> binder.readBean(animal));

You can also try this code with Online Java Compiler

Run Code

writeBean function is used to save the updated value, and in case of any error, the catch block will notify the problem.

Binding Read-only data

To bind read-only data, we can declare NULL to the setter.
 

You can also learn more about Vaadin from Using Vaadin with Spring MVC, Vaadin templates, vaadin-charts, vaadin core elements and many more.

Frequently Asked Questions

What can one understand from form layout?

Form layout is a way in which forms are organised in a template in a given web page so that it can look thoughtful, professional and simple.

Is Vaadin scalable?

Yes, Vaadin is scalable, providing different components, various listeners and different components to develop an error-free and hassle-free website.

List Vaadin components?

Various components in Vaadin are:

Email field, list box, checkbox, input field, date time picker, list box.

How can we add Javascript to Vaadin?

We can easily add Javascript to Vaadin using the following two methods:

(i) Using Annotations (ii) Using Page objects.

Conclusion

In this article, we have clearly discussed about binding data to forms. Along with a clear understanding of binding data to forms, we also covered some frequently asked questions. 

After reading about binding data to forms, are you not feeling excited to read/explore more articles on Database management Systems, data structure and algorithms and various interview preparation? Don't worry; Coding Ninjas has you covered. See DBMS guided path, Coding Ninjas Studio, interview preparation to learn. Also, see Basics of Python, Python, web2py, Django, Flask Deployment, and Web Technologies to learn.

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!