Vaadin
Part of tutorial series CRUD app tutorial

Connecting the Form to the Application

This part of the tutorial shows how to connect the CustomerForm component (implemented in the previous step) to the application.

Showing and Hiding the Form

The setCustomer(Customer) method in the CustomerForm class hides the form if the specified customer is null, and shows it if the customer is defined.

  1. Initially, when no customer is selected in the Grid, the form should be hidden. Hide the form by setting a null customer in the constructor of the MainView class as follows:

    public MainView() {
    
        ...
        form.setCustomer(null);
    }
  2. To detect when the user selects or deselects a row on the Grid, you need to implement a value change listener. Add the following at the end of the MainView constructor:

    grid.asSingleSelect().addValueChangeListener(event ->
            form.setCustomer(grid.asSingleSelect().getValue()));
    • addValueChangeListener adds a listener to the Grid. The Grid component supports multi and single-selection modes. This example uses the single-select mode through the asSingleSelect() method.

    • setCustomer sets the selected customer in the CustomerForm. This line also uses the single-select mode.

    • The getValue() method returns the Customer in the selected row or null if there’s no selection, effectively showing or hiding the form accordingly.

  3. Compile the project by selecting Build > Build Project in IntelliJ IDEA, and refresh your browser to see the changes.

    The form is now "connected" to the Grid.

    • When the user selects a row, the data is copied to the input fields,

    • When the user deselects a row, the form is hidden.

    • The Save and the Delete buttons work.

Adding New Customers

To add the functionality to create new customers, add a button above the Grid, next to the filterText component.

  1. Add a new Button with a click listener, by adding the following code lines to the MainView constructor, directly after the filterText configuration:

    Button addCustomerBtn = new Button("Add new customer");
    addCustomerBtn.addClickListener(e -> {
        grid.asSingleSelect().clear();
        form.setCustomer(new Customer());
    });
    • clear removes a possible previous selection from the Grid.

    • setCustomer instantiates a new customer object and passes it to the CustomerForm for editing.

  2. To position the button beside the filterText component, use a HorizontalLayout that wraps the filterText and addCustomerBtn components. Introduce the new layout directly after the previous call to addCustomerBtn, as follows:

    HorizontalLayout toolbar = new HorizontalLayout(filterText,
        addCustomerBtn);
  3. Add the toolbar, by replacing the add(filterText, mainContent); code line with the following:

    add(toolbar, mainContent);
  4. Compile the project, by selecting Build > Build Project in IntelliJ IDEA, and refresh your browser to see the changes. Users can now create customer records that are stored in the demo back end.

    Finished app

    Congratulations! You have just created your first app with Vaadin!

Next Steps

Use your new knowledge to explore ideas on how to create new web UIs for your existing Java applications. Here are a few resources on more advanced topics:

  • Creating CRUD UI with Vaadin - Tutorial on how to how to connect a Vaadin application to a real SQL database using Spring Boot and a Spring Data JPA back end.

  • https://start.vaadin.com - Generate a new Vaadin project with custom views and styles.

  • Documentation - Vaadin reference documentation

  • API - Vaadin Javadoc documentation

  • Vaadin RefCard - Cheat sheet for your development efforts

  • Blog - Vaadin’s blog with ideas, news, and insights.

  • Vaadin tutorials - Learn more about Vaadin and its integration with related technologies.

  • UI components - Explore the UI components included in Vaadin.

  • Directory - Explore the many components and add-ons available for developing Vaadin applications.

  • Vaadin Designer - A plugin for Eclipse and IntelliJ IDEA to visually design Vaadin views.

  • Vaadin TestBench - Regression testing automation for Vaadin.

  • Commercial offer Additional products and services on top of the free, open-source Vaadin framework.

Vaadin is an open-source framework offering the fastest way to build web apps on Java backends
GET STARTED

Comments (8)

Alejandro Duarte
2 years ago Aug 26, 2019 9:04am
Wensley Brands
2 years ago Aug 27, 2019 1:19pm
Alejandro Duarte
2 years ago Aug 28, 2019 4:59pm
Wensley Brands
2 years ago Aug 29, 2019 10:34am
Isaaco Mhlongo
1 year ago Apr 21, 2020 1:08pm
Alejandro Duarte
1 year ago Apr 21, 2020 9:25pm