Quick Start: Vaadin with Spring Boot

In this blog, we will go through how to develop web application 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.
Following technologies stack being used:
  • Spring Boot 2.1.1.RELEASE
  • Spring 5.1.3.RELEASE 
  • Maven 3
  • JDK 1.8
  • Eclipse Oxygen
  • Vaadin

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)VaadinUI 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);
 }
}
7)Run
$ mvn spring-boot:run
8)Test

Comments