/gs-crud-with-vaadin

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

Primary LanguageJava

tags projects
vaadin
spring-data
jpa
spring-data-jpa
spring-boot
Table of Contents

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

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 UI class

The UI class is the entry point for Vaadin’s UI logic. In Spring Boot applications you just need to annotate it with @SpringUI and it will be automatically picked up by Spring. A simple "hello world" could look like this:

package hello;

import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Button;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;

@SpringUI
@Theme("valo")
public class VaadinUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
	    setContent(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 is simply wrapped into a BeanItemContainer that will provide the data for the Grid component. The body of your VaadinUI would expand like this:

CustomerRepository repo;
Grid grid;

@Autowired
public VaadinUI(CustomerRepository repo) {
    this.repo = repo;
    this.grid = new Grid();
}

@Override
protected void init(VaadinRequest request) {
    setContent(grid);
    listCustomers();
}

private void listCustomers() {
    grid.setContainerDataSource(
            new BeanItemContainer(Customer.class, 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 many Vaadin components 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 solution for example by using Vaadin add-ons such as Viritin or LazyQueryContainer. You can find these and hundreds of others in the Vaadin Directory of add-ons.

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/VaadinUI.java[role=include]
Note
 This is where Spring Data’s declaritive queries come in real handy. Writing findByLastNameStartsWithIgnoringCase is a single line definition in CustomerRepository.

Hook a listener to the TextField commponent and plug its value into that filter method. The TextChangeListener is called lazily when the text is changed in the field.

TextField filter = new TextField();
filter.setInputPrompt("Filter by last name");
filter.addTextChangeListener(e -> listCustomers(e.getText()));
VerticalLayout mainLayout = new VerticalLayout(filter, grid);
setContent(mainLayout);

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 UI. The final version of the VaadinUI class looks like this:

src/main/java/hello/VaadinUI.java

link:complete/src/main/java/hello/VaadinUI.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.