Integrar Vaadin a Spring Boot

Integrar el Framework Vaadin a una aplicación web desarrollada usando Spring Boot, esta integración facilita el desarrollo de aplicaciones web, el módulo Spring MVC se encargará de manejar los componentes web, mientras que Vaadin será utilizado para la generación de la UI (Interfaz de Usuario), requerimos agregar el starter pom: vaadin-spring-boot-starter.

En este tutorial crearemos la clásica aplicación hola mundo, damos por entendido que posees conocimientos básicos de Vaadin y Spring Boot, nos centraremos en explicar lo concerniente a la integración de ambas tecnologías.

Tutorial Spring Boot Vaadin

Lo primero que haremos será agregar las dependencias necesarias, aparte de las requeridas por un proyecto web Spring Boot debemos agregar lo siguiente, al archivo pom.xml.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <modelVersion>4.0.0</modelVersion>

    <groupId>tutor.programacion</groupId>
    <artifactId>springboot-vaadin</artifactId>
    <version>1.0.0</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.3.RELEASE</version>
    </parent>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <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.0</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>

Para la integración requerimos lo siguiente:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
</dependency>

Para este tutorial usaremos la versión 8.x de Vaadin por lo que añadiremos el siguiente BOM con la versión indicada.

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>8.0.0</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

Iniciamos la aplicación web como cualquier otra, del mismo modo que lo hemos visto en tutoriales anteriores.

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

Ya podemos empezar a crear la UI, para ello debemos extender la clase com.vaadin.ui.UI y anotar dicha clase con la anotación @SpringUI opcionalmente podemos indicar la ruta que será usada para acceder a esta vista.

@SpringUI(path = "/home")
public class HomeUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        
        VerticalLayout layout = new VerticalLayout();

        Label label = new Label("Integración Spring Boot - Vaadin");
        Button button = new Button("click", e -> Notification.show("Hola Vaadin/Spring Boot"));
        
        layout.addComponent(label);
        layout.addComponent(button);

        setContent(layout);
    }
}

Sobre escribimos el método init(VaadinRequest) para inicializar la UI, creamos un contenedor que organiza sus elementos de manera vertical y le añadimos dos elementos, una etiqueta y un botón, al presionar el botón se mostrará un mensaje de notificación.

Este framework dispone de muchas otras anotaciones, controles, contenedores, y más elementos que podemos usar para crear nuestras UI, más adelante en tutoriales avanzados los veremos y profundizaremos en cada uno de ellos.

Por ahora este es el resultado al ejecutar nuestra aplicación.

tutorial vaadin spring boot

Hemos logrado crear una UI web sin necesidad de escribir una sola línea de código HTML, JavaScript, o cualquier otro lenguaje, solo hemos escrito código Java y Vaadin se ha encargado de generar la vistas web ha partir de dicho código.

En el siguiente tutorial veremos como integrar la tecnología de persistencia Hibernate JPA y desarrollaremos una aplicación que pueda ejecutar las operaciones CRUD, hasta la próxima.

Descargar proyecto: springboot-vaadin.zip

Comentarios

Temas relacionados

Entradas populares de este blog

tkinter Grid

tkinter Canvas

Histogramas OpenCV Python

Python Binance API