Skip to main content

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

Popular posts from this blog

Spring boot video streaming example-HTML5

This article shows you how to stream MP4 video in Spring Boot web application 
User Interface

Project Structure

Home Controller
@Controller
public class HomeController {
 @Autowired
 private MyResourceHttpRequestHandler handler;
 private final static File MP4_FILE = new File("D:\\videofiles\\video1.mp4");
 // supports byte-range requests
 @GetMapping("/index")
 public String home() {
  return "index";
 }
 // supports byte-range requests
 @GetMapping("/byterange")
 public void byterange( HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  request.setAttribute(MyResourceHttpRequestHandler.ATTR_FILE, MP4_FILE);
  handler.handleRequest(request, response);
 }}
Spring Boot 
@SpringBootApplication
@ComponentScan({ "com" })
public class KnowledgefactorydemoApplication {
 public static void main(String[] args) {
  SpringApplication.run(KnowledgefactorydemoApplication.class, args);
 }}
MyResource HttpRequestHandler
@Componen…

DataTable-Pagination example with Spring boot,jQuery and ajax free download

This article shows you DataTable-Pagination example with Spring boot, jQuery and ajax. 

Following technologies stack being used:
Spring Boot 2.1.1.RELEASESpring 5.1.3.RELEASE Maven 3DatatablejQueryFree Markerjavascriptajax Project Structure
View(index.ftl) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Knf|Pagination-Datatables</title> <!-- Tell the browser to be responsive to screen width --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../css/jquery.dataTables.min.css"> <body>  <section class="content">   <div class="container-fluid">    <table id="example" class="display" style="width: 100%">     <thead>      <tr>       <th>First name</th>       <th>La…

9 Best Job Posting Sites for Employee 2020-2022

One of the most common ways today’s job seekers uncover employment opportunities are by using online sources. There are hundreds of job boards, both generic and niche, as well as aggregators, social media channels, networking groups, and staffing company websites to choose from. The good news is they provide plenty of listings. The bad news is you can be easily overwhelmed by so many options. Here, knowledge factory offers 9 of what is generally considered the best job search websites around. There are many others, of course, but this list of best job search websites should give you a good starting point for your next job hunt: 1. LinkedIn
This top networking site allows you to find jobs through your extended network. User profiles serve as resumes. You can easily share career-related content and solicit or supply recommendations. Additionally, you can join groups, participate in conversations, and follow companies you find interesting and relevant to your job search. Premium pai…