krishnasubedi1998 / 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’ll build
• What you’ll need
• Create the backend services
• Vaadin dependencies
• Define the MainView 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’ll build

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

You can start from two different parts, either by starting from the "initial" project you have set up or from a fresh start. The differences are discussed below.

What you’ll need

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

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

https://raw.githubusercontent.com/spring-guides/getting-started-macros/master/hide-show-gradle.adoc

https://raw.githubusercontent.com/spring-guides/getting-started-macros/master/hide-show-maven.adoc

https://raw.githubusercontent.com/spring-guides/getting-started-macros/master/hide-show-sts.adoc

Create the backend services

This example is a continuation from Accessing Data with JPA. The only difference is 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 don’t have to read that guide to walk through this one, but you can if you wish.

If you started with a fresh project, then add the following entity and repository objects and you’re good to go. In case you started with from the "initial" step, these are already available for you.

src/main/java/hello/Customer.java

link:complete/src/main/java/hello/Customer.java[role=include]

src/main/java/hello/CustomerRepository.java

link:complete/src/main/java/hello/CustomerRepository.java[role=include]

You can leave the Spring Boot based application intact as it will fill our DB with some example data.

src/main/java/hello/Application.java

link:complete/src/main/java/hello/Application.java[role=include]

Vaadin dependencies

If you checked out the "initial" state project, you have all necessary dependencies already set up, but lets look at what you need to do to add Vaadin support to a fresh Spring project. Vaadin Spring integration contains a Spring boot starter dependency collection, so all you must do is to add this Maven snippet or a similar 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) like this:

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

Gradle doesn’t support "BOMs" by default, but there is a handy plugin for that. Check out the build.gradle build file for an example on how to accomplish the same thing.

Define the MainView class

The MainView class is the entry point for Vaadin’s UI logic. In Spring Boot applications you just need to annotate it with @Route and it will be automatically picked up by Spring and shown at the root of your web app. You can customize the URL where the view is shown by giving a parameter to the Route annotation. A simple "hello world" could look like this:

package hello;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route
public class MainView extends VerticalLayout {

	public MainView() {
		add(new Button("Click me", e -> Notification.show("Hello Spring+Vaadin user!")));
	}
}

List entities in a data grid

For a nice layout, use the Grid component. The list of entities from a constructor-injected CustomerRepository can simply be passed to the Grid using the setItems method. The body of your MainView would expand like this:

@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());
	}

}

Note	If you have large tables and lots of concurrent users, you most likely don’t want to bind the whole dataset to your UI components.

Although Vaadin Grid lazy load the data from the server to the browser, this solution above keeps the whole list of data in the server memory. To save some memory, you could show only the topmost results, use paging or provide a lazy loading data provider using the setDataProvider(DataProvider) method.

Filtering the data

Before the large data set becomes a problem to your server, it will cause a headache for your users trying to find the relevant row he or she wants to edit. Use a TextField component to create a filter entry. First, modify the listCustomer() method to support filtering:

link:complete/src/main/java/hello/MainView.java[role=include]

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

Hook a listener to the TextField component and plug its value into that filter method. The ValueChangeListener is called automatically during typing as we define the ValueChangeMode.EAGER to the filter text field.

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 just plain Java code, there is no excuse to not write re-usable code from the beginning. Define an editor component for your Customer entity. You’ll make it a Spring-managed bean so you can directly inject the CustomerRepository to the editor and tackle the C, U, and D parts or our CRUD functionality.

src/main/java/hello/CustomerEditor.java

link:complete/src/main/java/hello/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 like MVP to structure your UI code (which is outside the scope of this guide).

Wire the editor

In the previous steps you have already seen some basics of component-based programming. Using a Button and selection listener to Grid, you can fully integrate our editor to the main view. The final version of the MainView class looks like this:

src/main/java/hello/MainView.java

link:complete/src/main/java/hello/MainView.java[role=include]

Summary

Congratulations! You’ve written a full featured CRUD UI application 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/master/footer.adoc