Vaadin + Spring Boot with example

Today, 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);
 }
}

Comments