Vaadin + Spring Boot

Vaadin + Spring Boot - example

Today, we will go through how to develop web applications using the Vaadin framework.

Vaadin is the only framework that allows you to write UI 100% in Java without getting bogged down in JS, HTML, and CSS. If you prefer, you can also create layouts in HTML or with a visual designer. Vaadin apps run on the server and handle all communication automatically and securely.

1. Project Structure

2. Maven/Dependency Management [pom.xml]

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
                 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.knowledgefactory</groupId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <artifactId>springboot-vaadin</artifactId>
    <name>springboot-vaadin</name>
    <description>Demo project for Springboot-vaadin</description>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.1.RELEASE</version>
        <relativePath />
        <!-- lookup parent from repository -->
    </parent>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.
                                                outputEncoding>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-spring-boot-starter</artifactId>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>8.0.5</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

3. User Class

package com.knowledgefactory;

public class User {
    private int id;
    private String name;
    private String mail;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMail() {
        return mail;
    }

    public void setMail(String mail) {
        this.mail = mail;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public User(int id, String name, String mail) {
        super();
        this.id = id;
        this.name = name;
        this.mail = mail;
    }
}

4. UserService Class

package com.knowledgefactory;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Component;

@Component
public class UserService {
    public List<User> findAll() {
        User user1 = new User(1, "KnowledgeFactory", 
                           "KnowledgeFactory@gmail.com");
        User user2 = new User(2, "KnowledgeFactoryduplicate", 
                         "KnowledgeFactoryduplicate@gmail.com");
        List<User> users = new ArrayList<>();
        users.add(user2);
        users.add(user1);
        return users;
    }
}

5. Vaadin UI Class

package com.knowledgefactory;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SpringUI
public class VaadinUI extends UI {
    /**
     * 
     */
    private static final long serialVersionUID = -7896040466986437670L;
    @Autowired
    private UserService service;
    private Binder<User> binder = new Binder<>(User.class);
    private Grid<User> grid = new Grid<User>(User.class);
    private TextField name = new TextField("Name");
    private TextField mail = new TextField("Mail");
    private Button save = new Button("Save");

    @Override
    protected void init(VaadinRequest request) {
        updateGrid();
        grid.setColumns("name", "mail");
        binder.bindInstanceFields(this);
        VerticalLayout layout = new VerticalLayout(grid, name, mail, save);
        setContent(layout);
    }

    private void updateGrid() {
        List<User> users = service.findAll();
        grid.setItems(users);
        setFormVisible(false);
    }

    private void setFormVisible(boolean visible) {
        name.setVisible(visible);
        mail.setVisible(visible);
        save.setVisible(visible);
    }
}

6. Spring Boot

package com.knowledgefactory;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

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