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.
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.
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
- Nombre: Estudiante
- URL: estudiante
- Plantilla: Seleccionamos en Blanco
- Tipo: Seleccionamos TypeScript + Html
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.
- 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.
- /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.
mvn
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>
mvn
Crear Backend en Spring Boot para acceder a los datos
@Data @NoArgsConstructor @AllArgsConstructor @Entity public class Estudiante extends AbstractEntity { @NotNull @NotEmpty private String nombre; private String apellido; }
@Repository public interface IEstudianteRepositorio extends JpaRepository<Estudiante, Integer> { }
@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);}}
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
Integrar el Endpoint con Vaadin Fusion
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.
- 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
- Index.ts
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.