Introducción
En este artículo crearemos una aplicación con el Framework Vaadin Fusion, con el Backend Spring Boot y Base de Datos Mysql, utilizando el Starter Vaadin, como pueden observar en la figura 1, que nos ayudara a la configuración del proyecto a desarrollar de una manera mas facíl.
Figura 1
Antes de comenzar, explicare un poco sobre Vaadin Flow y Vaadin Fusion, para que puedan observar las diferencias, en que proyecto puedan utilizarlo o si necesitas de los dos mundos puedas usar ambas opciones.
Vaadin Flow: Es un framework para construir aplicaciones web 100% en Java. Permitiendo a los desarrolladores construir aplicaciones de una sola página completamente en Java. Se puede utilizar HTML, JavaScript y CSS para la personalización, pero no es necesario para construir una aplicación. Cuando se utiliza la API de Java, las aplicaciones Vaadin se ejecutan del lado del servidor dándole acceso a los datos y el servicio proporciona la seguridad y estabilidad, sin necesidad de crear API de REST.
Vaadin Flow esta:
- Basado en componentes
- Programático
- Event-Driven.
En un post anterior desarrolle un ejemplo con Vaadin Flow,
Vaadin Fusion: Es un framework para construir aplicaciones web reactivas del lado del cliente. Las vistas se basan en componentes web, construidos con LitElement que es una librería que ayuda a construir componentes web y el modelo de programación que utiliza es el estándar de TypeScript que es muy similar a React. Por otro lado el servidor Vaadin exporta funciones tipado, asíncronas para el acceso al servidor, dándole el mismo tipo de información tanto en el servidor como en el cliente. La información de tipo se genera automáticamente en base a las clases del servidor, lo que significa que notarás cambios en la API en tiempo de compilación, pero no en tiempo de ejecución. Por ultimo Las aplicaciones de Fusion están construidas sobre estándares web, haciéndolas más estables que las alternativas que se encuentran en el mercado.
Para desarrollar una aplicación simple que utilice la API de Fusion TypeScript consiste en tres archivos.
- Un archivo que contiene la vista.
- Un archivo de configuración de ruta.
- Una página de índice.
- Basado en componentes
- Declaración
- Reactivo.
Flow y Fusion son frameworks complementarios. Se Pueden usar cualquiera de ellos o combinarlos en la misma aplicación. Por ejemplo, hacer vistas internas de administrador con el Flow y una vistas de usuario final que necesitan trabajar offline con Fusion.
Nota: Fusion sólo está disponible desde la versión de Vaadin 15 en adelante.
A continuación las herramientas que vamos a utilizar.
Requisitos:
Descripción | Software | Link de Descarga |
Lenguaje de programación | Java SE 11 | |
Entorno Integrado de Desarrollo (IDE) | Intellij o vscode | |
Framework | Vaadin |
|
Base de Datos | MySQL | |
Entorno Integrado GUI | MySQL Workbench |
Creación de la aplicación con Vaadin Fusion
Ingresamos al sitio web de vaadin. Lo primero que hacemos es crear la vista, para este ejemplo adicionamos una vista en blanco como se muestra en la figura 2
Figura 2
- Nombre: Estudiante
- URL: estudiante
- Plantilla: Seleccionamos en Blanco
- Tipo: Seleccionamos TypeScript + Html
Figura 3
En este paso se realiza la configuración de la aplicación, como se puede observar en la figura 4.
- Nombre: VaadinFusion
- Grupo ID: Por defecto
- Vaadin: Seleccionamos Vaadin 18
- UI: Seleccionamos TypeScript + Html
- Backend: Seleccionamos la base de datos.
Figura 4
- Haz clic en Descargar, y obtendrás un archivo .zip que contiene un proyecto Maven.
- Para este ejemplo vamos a utilizar el IDE vscode, abrimos el proyecto y se visualiza como en la figura 5.
Figura 5
El proyecto contiene dos carpetas muy importantes que son las siguientes:
- /frontend - Esta carpeta contiene todo el código del Frontend.
- /src/main/java - Esta carpeta incluye todo el código del Backend, que es una aplicación de Spring Boot.
En el siguiente paso ejecutamos la aplicación con este comando:
mvn
Deberá abrirse la aplicación en el navegador predeterminado, como se puede observar en la figura 6.
Figura 6
Añadir la dependencia de Mysql y Lombok
Añadimos las dependencias de Mysql y Lombok a la sección <dependencias> en el archivo pom.xml.
<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector- java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>
Debemos validar que el IDE hizo la importación de las dependencias, o volver a ejecutar el comando.
mvn
Crear Backend en Spring Boot para acceder a los datos
Primero, creamos una clase con el nombre Estudiante.java para usarla como modelo de datos en el paquete com.example.application.data.entity.
@Data @NoArgsConstructor @AllArgsConstructor @Entity public class Estudiante extends AbstractEntity { @NotNull @NotEmpty private String nombre; private String apellido; }
Segundo, creamos una interfaz con el nombre IEstudianteRepositorio.java para dar soporte a las operaciones CRUD, dándole funcionalidades a la clase entidad en el paquete com.example.application.data.repository.
@Repository public interface IEstudianteRepositorio extends JpaRepository<Estudiante, Integer> { }
Tercero, creamos una clase con el nombre EstudianteEndpoint.java, adicionando la anotación @Endpoint para hacer que los métodos y tipos de datos estén disponibles en TypeScript para el Frontend.
@Endpointpublic class EstudianteEndpoint {private IEstudianteRepositorio repo;public EstudianteEndpoint(IEstudianteRepositorio repo) {this.repo = repo;}public List<Estudiante> getEstudiantes() {return repo.findAll();}public Estudiante saveEstudiante(Estudiante estudiante) {return repo.save(estudiante);}public void deleteEstudiante(Integer idEstudiante) {repo.deleteById(idEstudiante);}}
Vaadin hace que los métodos getEstudiante(), deleteEstudiante() y saveEstudiante() estén disponibles como métodos asincrónicos en TypeScript. También generará una interfaz de TypeScript para Estudiante, para que pueda acceder al mismo tipo-información de ambos lado tanto en el servidor y en el cliente.
Cuarto, modificamos el archivo Application.properties, que nos permite configurar la aplicación Spring Boot para este caso configuramos la conexión a la base de datos MySQL con nombre de usuario sa y contraseña sa, por defecto se ejecuta la aplicación en el puerto 8080.
server.port=${PORT:8080} logging.level.org.atmosphere = warn spring.mustache.check-template-location = false #Conexion BD Mysql spring.datasource.url = jdbc:mysql://localhost:3306/esajug spring.datasource.username = root spring.datasource.password = Maria23* spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect spring.jpa.hibernate.ddl-auto=update
Finalizamos la parte del Backend, ahora el paso siguiente es integrarlo con el Frontend.
Integrar el Endpoint con Vaadin Fusion
Abrir en la carpeta el frontend/views/estudiante/estudiante-view.ts y reemplacemos el siguiente código:
import { Binder, field } from "@vaadin/form"; import { css, customElement, html, internalProperty, LitElement, } from "lit-element"; import Estudiante from "../../generated/com/example/application/data/entity/Estudiante"; import EstudianteModel from "../../generated/com/example/application/data/entity/EstudianteModel"; import "@vaadin/vaadin-text-field"; import "@vaadin/vaadin-button"; import { deleteEstudiante, getEstudiantes, saveEstudiante, } from "../../generated/EstudianteEndpoint"; @customElement("estudiante-view") export class EstudianteView extends LitElement { @internalProperty() private estudiantes: Estudiante[] = []; @internalProperty() private message = ""; private binder = new Binder(this, EstudianteModel); static get styles() { return css` :host { display: block; padding: var(--lumo-space-l); } `; } render() { const { model } = this.binder; return html`<h1>Estudiante</h1> <div class="message">${this.message}</div> <ul> ${this.estudiantes.map( (person) => html`<li>${person.nombre} ${person.apellido} <vaadin-button @click=${() => this.clear(person.id)}> <iron-icon icon="lumo:minus" slot="prefix"></iron-icon> Delete </vaadin-button </li>` )} </ul> <h2>Nuevo EStudiante</h2> <div class="form"> <vaadin-text-field label="Nombre" ...=${field(model.nombre)} ></vaadin-text-field> <vaadin-text-field label="Apellidos" ...=${field(model.apellido)} ></vaadin-text-field> <vaadin-button @click=${this.add}> <iron-icon icon="lumo:plus" slot="prefix"></iron-icon>Add </vaadin-button> </div>`; } async add() { const saved = await this.binder.submitTo(saveEstudiante); if (saved) { this.estudiantes = [...this.estudiantes, saved]; this.binder.clear(); } } async firstUpdated() { this.estudiantes = await getEstudiantes(); } async clear(id: any) { await deleteEstudiante(id); this.estudiantes = this.estudiantes.filter((t) => t.id !== id); } }
Aquí una breve descripción del código y funcionamiento:
- EstudianteView está mapeado a un elemento HTML personalizado <estudiante-view> con @customElement.
@internalProperty() private estudiantes: Estudiante[] = []; @internalProperty() private mensaje = '';
private binder = new Binder(this, EstudianteModel);
Crea un binder para el formulario y carga la información del modelo generado.Lleva un registro del valor del modelo, maneja validaciones y envía el valor al endpoint.
Define dos propiedades internas: estudiante y mensaje para mantener el estado del componente. Cada vez que una propiedad cambie, la plantilla se vuelve a renderizar.
- render() define una plantilla reactiva que se actualiza cada vez que cambia una propiedad.
<ul> ${this.estudiantes.map( (person) => html`<li>${person.nombre} ${person.apellido} <vaadin-button @click=${() => this.clear(person.id)}> <iron-icon icon="lumo:minus" slot="prefix"></iron-icon> Delete </vaadin-button </li>` )} </ul>
La plantilla utiliza utiliza <ul> para listar todos los estudiantes, el operador map sobre el array de estudiantes y crea una etiqueta <li> para cada estudiante. Adiciona un botón eliminar a cada elemento que llama al método clear() con el id del estudiante. Por ultimo se comunica con el backend para obtener la lista de todo los estudiantes cuando el componente se actualiza por primera vez.
<vaadin-text-field label="Nombre" ...=${field(model.nombre)}> </vaadin-text-field> <vaadin-text-field label="Apellidos" ...=${field(model.apellido)}> </vaadin-text-field> <vaadin-button @click=${this.add}> <iron-icon icon="lumo:plus" slot="prefix"></iron-icon> Guardar </vaadin-button>
- Index.html
Muestra un formulario para adiciona un nuevo estudiante. El formulario utiliza dos componentes de Vaadin: vaadin-text-field y vaadin-button. Los campos se enlaza al Binder con la ayuda del operador de extensión (...=${field(...)}) . El botón Guardar invoca el método Add() cuando hace clic sobre él validando el formulario y guarda el nuevo estudiante en el backend.
- Index.ts
Por otro lado también se da la salida a todas las rutas en #outlet.
Para concluir, se desarrollo una aplicación con spring boot y vaadin fusion conectada a una base de datos MySQL. La aplicación web se visualizara como en la figura 7.
