wvsmatvv / gs-crud-with-vaadin

Creating CRUD UI with Vaadin :: Use Vaadin and Spring Data JPA to build a dynamic UI

Table of Contents

• What You Will build
• What You Need
• Starting with Spring Initializr
  • Manual Initialization (optional)
• Create the Backend Services
• Vaadin Dependencies
• Define the Main View class
• List Entities in a Data Grid
• Filtering the Data
• Define the Editor Component
• Wire the Editor
• Summary
• See Also

This guide walks you through the process of building an application that uses a Vaadin-based UI on a Spring Data JPA based backend.

What You Will build

You will build a Vaadin UI for a simple JPA repository. What you will get is an application with full CRUD (Create, Read, Update, and Delete) functionality and a filtering example that uses a custom repository method.

You can follow either of two different paths:

• Starting from the initial project that is already in the project.

• Making a fresh start.

The differences are discussed later in this document.

What You Need

https://raw.githubusercontent.com/spring-guides/getting-started-macros/main/prereq_editor_jdk_buildtools.adoc

https://raw.githubusercontent.com/spring-guides/getting-started-macros/main/how_to_complete_this_guide.adoc

Starting with Spring Initializr

You can use this pre-initialized project and click Generate to download a ZIP file. This project is configured to fit the examples in this tutorial.

To manually initialize the project:

1. Navigate to https://start.spring.io. This service pulls in all the dependencies you need for an application and does most of the setup for you.

2. Choose either Gradle or Maven and the language you want to use. This guide assumes that you chose Java.

3. Click Dependencies and select Spring Data JPA and H2 Database.

4. Click Generate.

5. Download the resulting ZIP file, which is an archive of a web application that is configured with your choices.

Note	We add the Vaadin dependency later in the guide.

Note	If your IDE has the Spring Initializr integration, you can complete this process from your IDE.

Note	You can also fork the project from Github and open it in your IDE or other editor.

Manual Initialization (optional)

If you want to initialize the project manually rather than use the links shown earlier, follow the steps given below:

1. Navigate to https://start.spring.io. This service pulls in all the dependencies you need for an application and does most of the setup for you.

2. Choose either Gradle or Maven and the language you want to use. This guide assumes that you chose Java.

3. Click Dependencies and select Spring Data JPA and H2 Database.

4. Click Generate.

5. Download the resulting ZIP file, which is an archive of a web application that is configured with your choices.

Note	If your IDE has the Spring Initializr integration, you can complete this process from your IDE.

Create the Backend Services

This guide is a continuation from Accessing Data with JPA. The only differences are that the entity class has getters and setters and the custom search method in the repository is a bit more graceful for end users. You need not read that guide to walk through this one, but you can if you wish.

If you started with a fresh project, you need to add entity and repository objects. If you started from the initial project, these object already exist.

The following listing (from src/main/java/com/example/crudwithvaadin/Customer.java) defines the customer entity:

link:complete/src/main/java/com/example/crudwithvaadin/Customer.java[role=include]

The following listing (from src/main/java/com/example/crudwithvaadin/CustomerRepository.java) defines the customer repository:

link:complete/src/main/java/com/example/crudwithvaadin/CustomerRepository.java[role=include]

The following listing (from src/main/java/com/example/crudwithvaadin/CrudWithVaadinApplication.java) shows the application class, which creates some data for you:

link:complete/src/main/java/com/example/crudwithvaadin/CrudWithVaadinApplication.java[role=include]

Vaadin Dependencies

If you checked out the initial project, you have all necessary dependencies already set up. However, the rest of this section describes how to add Vaadin support to a fresh Spring project. Spring’s Vaadin integration contains a Spring Boot starter dependency collection, so you need add only the following Maven snippet (or a corresponding Gradle configuration):

link:complete/pom.xml[role=include]

The example uses a newer version of Vaadin than the default one brought in by the starter module. To use a newer version, define the Vaadin Bill of Materials (BOM) as follows:

link:complete/pom.xml[role=include]

Tip	By default, Gradle does not support BOMs, but there is a handy plugin for that. Check out the build.gradle build file for an example of how to accomplish the same thing.

Define the Main View class

The main view class (called MainView in this guide) is the entry point for Vaadin’s UI logic. In Spring Boot applications, you need only annotate it with @Route and it is automatically picked up by Spring and shown at the root of your web application. You can customize the URL where the view is shown by giving a parameter to the @Route annotation. The following listing (from the initial project at src/main/java/com/example/crudwithvaadin/MainView.java) shows a simple “Hello, World” view:

link:initial/src/main/java/com/example/crudwithvaadin/MainView.java[role=include]

List Entities in a Data Grid

For a nice layout, you can use the Grid component. You can pass the list of entities from a constructor-injected CustomerRepository to the Grid by using the setItems method. The body of your MainView would then be as follows:

@Route
public class MainView extends VerticalLayout {

	private final CustomerRepository repo;
	final Grid<Customer> grid;

	public MainView(CustomerRepository repo) {
		this.repo = repo;
		this.grid = new Grid<>(Customer.class);
		add(grid);
		listCustomers();
	}

	private void listCustomers() {
		grid.setItems(repo.findAll());
	}

}

Tip	If you have large tables or lots of concurrent users, you most likely do not want to bind the whole dataset to your UI components.

+ Although Vaadin Grid lazy loads the data from the server to the browser, the preceding approach keeps the whole list of data in the server memory. To save some memory, you could show only the topmost results by employing paging or providing a lazy loading data provider by using the setDataProvider(DataProvider) method.

Filtering the Data

Before the large data set becomes a problem to your server, it is likely to cause a headache for your users as they try to find the relevant row to edit. You can use a TextField component to create a filter entry. To do so, first modify the listCustomer() method to support filtering. The following example (from the complete project in src/main/java/com/example/crudwithvaadin/MainView.java) shows how to do so:

link:complete/src/main/java/com/example/crudwithvaadin/MainView.java[role=include]

Note	This is where Spring Data’s declarative queries come in handy. Writing findByLastNameStartsWithIgnoringCase is a single line definition in the CustomerRepository interface.

You can hook a listener to the TextField component and plug its value into that filter method. The ValueChangeListener is called automatically as a user types because you define the ValueChangeMode.EAGER on the filter text field. The following example shows how to set up such a listener:

TextField filter = new TextField();
filter.setPlaceholder("Filter by last name");
filter.setValueChangeMode(ValueChangeMode.EAGER);
filter.addValueChangeListener(e -> listCustomers(e.getValue()));
add(filter, grid);

Define the Editor Component

As Vaadin UIs are plain Java code, you can write re-usable code from the beginning. To do so, define an editor component for your Customer entity. You can make it be a Spring-managed bean so that you can directly inject the CustomerRepository into the editor and tackle the Create, Update, and Delete parts or your CRUD functionality. The following example (from src/main/java/com/example/crudwithvaadin/CustomerEditor.java) shows how to do so:

link:complete/src/main/java/com/example/crudwithvaadin/CustomerEditor.java[role=include]

In a larger application, you could then use this editor component in multiple places. Also note that, in large applications, you might want to apply some common patterns (such as MVP) to structure your UI code.

Wire the Editor

In the previous steps, you have already seen some basics of component-based programming. By using a Button and adding a selection listener to Grid, you can fully integrate your editor into the main view. The following listing (from src/main/java/com/example/crudwithvaadin/MainView.java) shows the final version of the MainView class:

link:complete/src/main/java/com/example/crudwithvaadin/MainView.java[role=include]

Summary

Congratulations! You have written a full-featured CRUD UI application by using Spring Data JPA for persistence. And you did it without exposing any REST services or having to write a single line of JavaScript or HTML.

See Also

The following guides may also be helpful:

• Building an Application with Spring Boot

• Accessing Data with JPA

• Accessing Data with MongoDB

• Accessing Data with GemFire

• Accessing Data with Neo4j

• Accessing data with MySQL

https://raw.githubusercontent.com/spring-guides/getting-started-macros/main/footer.adoc