Using Vaadin with Spring Boot to create User Interfaces

Vaadin is a framework that is designed to make creation and maintenance of high quality web-based applications. Let’s see how to get started with it to create a sample Web application which will run with Spring Boot.

The simplest way to get started with Vaadin is by creating a new Vaadin project is to use the Project Base starter available at: https://vaadin.com/start

Vaadin is an open source Java web framework.

In the form, choose your Technology stack (for example Spring Boot) and enter:

Group ID: om.packagename.myapp.  App Name: webapp.

Click Download and extract the webapp.zip file.
Then, import the project in IntelliJ IDEA or any other IDE:
Click the Open option in the welcome window or select File > Open.

Select the pom.xml file in the webapp directory.
Click Open and Open as Project when prompted.

Let’s have a look at some of the generated project files:

Within the src/main/java folder you will find the Java code organized in packages.

@SpringBootApplication
public class Application extends SpringBootServletInitializer {
  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}

At this point, the core clss is MainView: a Java class that implements the web UI using Vaadin Flow:

@Route @PWA(name = "Vaadin Application", shortName = "Vaadin App", description = "This is an example Vaadin application.", enableInstallPrompt = false) @CssImport("./styles/shared-styles.css") @CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field") public class MainView extends VerticalLayout {
  public MainView(@Autowired GreetService service) { // Use TextField for standard text input         
    TextField textField = new TextField("Your name");
    // Button click listeners can be defined as lambda expressions
    Button button = new Button("Say hello", e -> Notification.show(service.greet(textField.getValue())));
    // Theme variants give you predefined extra styles for components.         
    // Example: Primary button has a 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);
  }
}

Vaadin UIs are built hierarchically from components, so that the leaf components are contained within layout components and other component containers. Building the hierarchy starts from the top of the UI class of the application. You normally set a layout component as the content of the UI and fill it with other components.

Within this class:

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 @CssImport annotation imports the specified CSS file.

The view extends VerticalLayout which shows components vertically.

Within the MainView constructor a set of actions are performed:

A text field is created to enter the user’s name.

A button with the text Say hello on it.
A click-listener (using a lambda expression) is included to display a notification when the user clicks the button
The text field and the button are added to the View using a VerticalLayout.

When the button is clicked, the click-listener recalls the GreetService:

@VaadinSessionScoped
public class GreetService {
  public String greet(String name) {
    if (name == null || name.isEmpty()) {
      return "Hello anonymous user";
    } else {
      return "Hello " + name;
    }
  }
}

Running the Spring Boot Application

To run the application:

mvn clean install spring-boot:run

As a result, a simple textbox field will display with a button. By clickin on the button the listener will print the content of the text field at the bottom of the screen:

Vaadin is an open source Java web framework.

Now let’s be a bit more adventurous! We will add a simple Grid component to display a List of Java objects:

@Route @PWA(name = "Vaadin Application", shortName = "Vaadin App", description = "This is an example Vaadin application.", enableInstallPrompt = false) @CssImport("./styles/shared-styles.css") @CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field") public class MainView extends VerticalLayout {
  public MainView(@Autowired GreetService service) {
    setJustifyContentMode(JustifyContentMode.CENTER);
    setWidth("100%");
    List < Person > personList = new ArrayList < > ();
    personList.add(new Person(100, "Lucas", "Kane", 68));
    personList.add(new Person(101, "Peter", "Buchanan", 38));
    personList.add(new Person(102, "Samuel", "Lee", 53));
    Grid < Person > grid = new Grid < > (Person.class);
    grid.setItems(personList);
    grid.removeColumnByKey("id");

    // The Grid<>(Person.class) sorts the properties and in order to reorder the properties we use the 'setColumns' method.  
    grid.setColumns("name", "surname", "age");
    add(grid);
    setSizeFull();
  }
}

As you can see, the code is pretty much self-explanatory. A com.vaadin.flow.component.grid.Grid is created, passing as argument in its constructor a List of Person objects.

The result, when executed is the following:

Vaadin is an open source Java web framework.