Vaadin Flow Quick Start Tutorial

Vaadin is a great way to build a modern web app, combining web components with the power of server-side Java.

In this tutorial, you learn how to build a small but fully functional Vaadin application. This example teaches you the basics of component-based development and listening to events.

The application you build is the classic Todo application.

Prerequisites

To continue make sure that at least the following tools are installed:

Download a Minimal Vaadin Project

Download Open in online IDE

Once you have the project downloaded, unzip the file somewhere, for instance your home directory.

Next, import the project into your IDE. You can find instructions for popular IDEs in the Starting a Project section.

To run the application, run the src/main/java/com/example/Application.java class. Running the main method in the class starts an embedded server and triggers the frontend resources build process. Starting up the build for the first time might take a while.

Navigate to localhost:8080, and you should see a basic Vaadin application with a button.

You are now ready to start building the app.

Building UIs With Components and Layouts

Vaadin is a component-based framework. You construct user interfaces by instantiating components and putting them into layouts that determine how they get shown. MainView extends VerticalLayout. It means that each added component gets placed underneath the previous one. Vaadin adds padding around the layout and components for visual clarity.

Here is the breakdown of the different components and layouts of the application.

Open src/main/java/com/example/MainView.java. Replace the code in MainView with the code below:

package com.example;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route
public class MainView extends VerticalLayout {

  public MainView() {
    VerticalLayout todosList = new VerticalLayout(); 1
    TextField taskField = new TextField(); 2
    Button addButton = new Button("Add"); 3
    addButton.addClickShortcut(Key.ENTER);
    addButton.addClickListener(click -> {
      4
      Checkbox checkbox = new Checkbox(taskField.getValue());
      todosList.add(checkbox);
    });
    add( 5
      new H1("Vaadin Todo"),
      todosList,
      new HorizontalLayout(
        taskField,
        addButton
      )
    );
  }
}
  1. todosList is a vertical layout that displays the task and checkboxes

  2. taskField is the text input field for new tasks

  3. addButton triggers logic to add new items to the list of todo items

  4. In the listener for the button click, create a checkbox with the value from the taskField as its label.

  5. Call add on the VerticalLayout to define how the components should be displayed. Notice that taskField and addButton are in a HorizontalLayout, which puts them next to each other.

Save and build the application. Vaadin’s live reload functionality should reload the browser window and show the updated UI.

Navigate to localhost:8080 and you should see the following:

Animation of adding a new todo item and checking it.

Adding Styling

Many Vaadin components have built-in style variants that can be added with Java. For instance, you can highlight the Button by giving it the primary style attribute. You do this by adding the following line after the line with new Button:

addButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

You can explore other available theme variants through component specific Variant classes, such as the TextFieldVariant.

Vaadin apps also support styling with CSS. Any style can be applied, but for the sake of simplicity you can bold the text for the CheckBoxes for some visual flair. To add styles to the application, add the following annotation under the @Route line:

@CssImport("styles/shared-styles.css")

The @CssImport annotation looks in a folder in the project root called frontend, so the full path of the file is {project root}/frontend/styles/shared-styles.css. This file is already created for you, but you can add additional style files if you wish. In case of this demo, one is enough for now. The file already contains some styles, but you can add the one below after that :

vaadin-checkbox {
	font-weight: bold;
}

Save all files, close the server and run the application again. The Button should now be blue, and the text for all CheckBoxes is bold.

Next Steps

These topics and many more are covered in the documentation, tutorials, and video courses:

Source code on GitHub.