Vaadin
Part of tutorial series CRUD app tutorial

Setting up the Project

This tutorial shows you how to build a CRUD (Create Read Update Delete) application using Vaadin Java API.

All you need is basic programming skills, an IDE such as IntelliJ IDEA, and the JDK version 8 or later. This tutorial should take between 20 to 60 minutes to complete, depending on your experience.

Overview

You are going to build a basic application to manage data about customers. To keep things simple, the application won’t connect to a real database but use an in-memory back end instead. You’ll be able to use the concepts explained in this tutorial to connect your Vaadin applications to a real-world back end with the persistence technology of your choice.

The application will show a web page with a table (called Grid in Vaadin) with filtering capabilities and functionality to add, delete, and update customer data.

The finished web application

You can use the application as a starting point for more experiments with Vaadin. For example, you could add new views, create a custom theme, use add-ons, and optimize for mobile devices.

If you don’t want to code it from scratch, you can download the final application and experiment with it.

Installing the Development Tools

Make sure that you have the JDK version 8 or later installed and that it is up to date.

Tip
Most Linux distributions can use package managers to install the JDK. Windows and Mac users can download the JDK from jdk.java.net.

This tutorial uses IntelliJ IDEA, but you can use any other Java IDE.

If you prefer Eclipse or NetBeans, see:

Creating the Project

The easiest way to create a new Vaadin project is to use the Project Base starter.

A starter is a ready-to-use project stub that includes configuration, dependencies, and example code.

To generate a new Vaadin project:

  1. Go to https://vaadin.com/start/.

  2. In the form, select Plain Java Servlet as the Technology stack and, enter:

    • Group ID: org.vaadin.example.

    • App Name: webapp.

  3. Click Download and extract the webapp.zip file. If the Download button is not active, you may need to log in.

To import the project in IntelliJ IDEA:

  1. Click the Open option in the welcome window or select File > Open.

  2. Select the pom.xml file in the webapp directory.

  3. Click Open and Open as Project when prompted.

IntelliJ IDEA will download the required dependencies and build the project.

Note
If this is your first Vaadin app, building the project might take a while (depending on the speed of your network), because the libraries need to be downloaded. Maven caches them on your local file system and creating your next Maven-based Vaadin project will be much faster.

Viewing the Generated Project Files

Take a look at some of the generated project files:

  • webapp/pom.xml: This file defines the project. It contains the configuration to build the project and declares the required dependencies (external libraries). The pom.xml file is the way Maven represents a software project.

  • webapp/src/main/java: This directory contains the Java code organized in packages. At this point, there is only one package, org.vaadin.example, that contains MainView: a Java class that implements the web UI using Vaadin Flow:

    /**
     * The main view contains a text field to get the user name and a button
     * that shows a greeting message in a notification.
     */
    @Route("")
    @PWA(name = "Project Base for Vaadin", shortName = "Project Base")
    @CssImport("./styles/shared-styles.css")
    @CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
    public class MainView extends VerticalLayout {
    
        public MainView() {
            // Use TextField for standard text input
            TextField textField = new TextField("Your name");
    
            // Button click listeners can be defined as lambda expressions
            GreetService greetService = new GreetService();
            Button button = new Button("Say hello",
                    e -> Notification.show(greetService.greet(textField.getValue())));
    
            // Theme variants give you predefined extra styles for components.
            // Example: Primary button is more prominent look.
            button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    
            // You can specify keyboard shortcuts for buttons.
            // Example: Pressing enter in this view clicks the Button.
            button.addClickShortcut(Key.ENTER);
    
            // Use custom CSS classes to apply styling. This is defined in shared-styles.css.
            addClassName("centered-content");
    
            add(textField, button);
        }
    }
    • The @Route annotation tells Vaadin to direct the root URL to this view. The URL parameter is optional and is derived from the class name, if not given.

    • The @PWA annotation tells Vaadin to activate automatic PWA features. This annotation is optional.

    • The @CssImport annotation imports the specified CSS file.

    • The view extends VerticalLayout which shows components vertically.

    • The MainView constructor:

      • Creates a text field to enter the user’s name.

      • Creates a button with the text Say hello on it.

      • Adds a click listener (using a lambda expression) that shows a notification when the user clicks the button.

      • Adds the text field and the button to the VerticalLayout.

Running the Application

To run the application:

  1. Open the Maven view and locate jetty:run in webapp > Plugins > jetty.

  2. Double-click jetty:run to build the app and deploy it to a Jetty server.

    jetty:run Maven goal
  3. Once the server starts, open http://localhost:8080 in the browser to see the application in action.

Note
You can make changes to the code and compile the project, by selecting Build > Build Project in IntelliJ IDEA. The Jetty server picks up the changes and deploys them automatically within a few seconds. You might need to reload the page in the browser to reflect the changes.
Tip
To make the deployment cycle smoother, many Java developers use JRebel (commercial JVM agent) or similar, to allow smooth hot-code replacement.

If you want to use break points in your code, start the server in debug mode by right-clicking jetty:run and selecting Debug 'webapp [jetty:run]'.

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

Comments (5)

Alejandro Duarte
2 years ago Dec 10, 2019 10:34am
Teodor Iancu
2 years ago May 12, 2019 7:59pm
m7md_ 3mro
2 years ago Oct 09, 2019 1:29pm