Vaadin/Couchbase CRUD Sample

Last week while I was at JFokus I met Matti Tahvonen, he works at Vaadin. They have been proposing an open source web framework for rich Internet applications in Java for years and do it really well. I am personally really happy to write a full web modern application just in Java.

We took 10 minutes to have a working Vaadin CRUD sample storing object in Couchbase. The result is available on Github. Since then I also migrated a JPA based sample also available here. You can see how very little work it requires and how easy it is to go from JPA to Couchbase with the diff.

Spring Data Couchbase meet Vaadin

Generate the Project

The first step when starting a Spring project is to go on Spring Initializr. Here you can select the version and dependencies you want for your project. Select Spring Boot version 1.4.0(SNAPSHOT) and add Vaadin and Couchbase as dependencies.

Now you can generate the project and import it as a Maven project in your editor of choice.

Basic Person Entity CRUD

This CRUD sample is going to store Customer objects. A customer has an id, a firstName and a lastName. Also, the last name must not be null. To express this as an entity, you just have to add the @Document annotation on the class, @Id annotation on the field to be used as Couchbase key, generate getters and setters and you are done. To express the not null constraints, we can simply use the Java validation annotations @NotNull. To make sure it's picked up when writing the entity, we'll need to declare a validator bean.

The Customer Repository

Once you have define an entity, you need to create the associated repository. Create an interface that extends the CouchbasePagingAndSortingRepository. This repository handles Customer entities with a String as key.

I have redefined the findAll method to return a List instead of an Iterable as it plays better with Vaadin structures. The findAll method is backed up by a View. To have your views defined automatically you can add the @ViewIndexed annotation. You also need to make sure you have set the spring.data.couchbase.auto-index property to true in your application.properties file.

I also added a findByLastName(String lastName) method. Based on the method name, the appropriate N1QL query will be automatically generated. But to execute N1Ql query, you need a primary index. Which can also be generated automatically through the @N1QLPrimaryIndexed annotation.

Configuration

I am using spring spring-boot-starter-data-couchbase. It provides autoconfiguration. This autoconfiguration can be activated by setting the spring.couchbase.bootstrap-hosts property. So far my application.properties looks like this:

Create a Customer

Now I have everything I need to save a Customer Entity in Couchbase. We can try this easily with a CommandLineRunner:

You'll notice that I have also added the validator bean previsouly mentionned. It uses a ValidatingCouchbaseEventListener declared automatically by the spring boot auto-config.

Using Vaadin for UI

The backend is ready, we can start thinking about the frontend. I want a basic CRUD app that will show a list of Customer, the ability to add, edit or remove elements of the list. Here's a screenshot:

To Build this we start by creating a form that allow the user to enter a first name and a last name. Create a class that extends an AbstractForm of Customer. This class is not available in Vaadin Core, so we need to add Viritin.

Viritin is a server side enhancement library for Vaadin. It fixes some bad defaults in the core framework and provides more fluent and intelligent API for existing components. It also provides several major enhancements to databinding and provides completely new components made with server side composition (no widgetset is needed).

And yes it provides the AbstractForm class that is neatly integrated with Spring Data and validators. We need to edit the firstName and lastName fields of the Customer class, so we define two text fields called firstName and lastName. They have to have the same name as your Customer field. What is also great about this component is that it will pickup the validation annotation on your entity. This way you get automatic validation on the client and on the server. And it supports more complex annotations thanl@NotNull like @Size or @Pattern.

Now that the form is ready we can build the full UI displaying the table grid. This will be the main component of your Vaadin application, the main web page. Since the CustomerRepository and the CustomerEditor are Spring beans, we can inject them direclty in the constructor. If you are familiar with writing Java UI, the commented code below should be straight forward.

And then you are all set, all you have to do is run this as a usual Java Spring Boot application.  So that was pretty easy huh?