VAADIN - crear un frontend integrado a una aplicacion backend de springboot

 Vaadin es un framework que te permite construir toda la interfaz de usuario con código Java, sin escribir una sola línea de HTML, CSS o JavaScript. El framework se encarga de todo el trabajo pesado, generando el frontend automáticamente.

• Ventajas:

• Productividad: Al usar solo Java, eliminas el contexto de múltiples tecnologías, lo que puede aumentar la velocidad de desarrollo.

• Tipado estricto: Puedes aprovechar el tipado de Java para detectar errores de UI en tiempo de compilación.

• Ideal para: Aplicaciones empresariales, dashboards y sistemas de gestión donde la lógica de negocio es compleja y la UI necesita ser robusta.

pasos para integrar el framework vaadin a nuestra aplicacion

1. actualizar el archivo pom.xml:

<dependency>

    <groupId>com.vaadin</groupId>

    <artifactId>vaadin-spring-boot-starter</artifactId>

    <version>24.4.4</version>

</dependency>

<repositories>

    <repository>

        <id>Vaadin Directory</id>

        <url>https://maven.vaadin.com/vaadin-addons</url>

    </repository>

</repositories>

2. crear la carpeta donde se guardaran nuestras vistas

src/main/java/com/ejemplo/tuapp/ui/

3. crear la carpeta donde se guardaran los estilos.

src/main/resources/META-INF/resources/frontend/themes/app-theme/

4. crear el archivo styles.css 

en la carpeta creada.

/* Este es el archivo principal de estilos para la aplicación Vaadin. Define los estilos de los componentes en la clase NotificationView. */

/* Estilos para el layout principal */ .main-layout { background-color: #f8f8f8; font-family: Arial, sans-serif; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

/* Estilos para el título principal */ .page-title { color: #4a4a4a; text-align: center; margin-bottom: 1.5rem; }

/* Estilos para el contenedor del formulario */ .form-container { width: 100%; max-width: 500px; background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

/* Estilos para el botón de envío */ .send-button { background-color: #4285f4; color: white; font-weight: bold; border-radius: 5px; padding: 0.75rem 1.5rem; cursor: pointer; transition: background-color 0.2s ease; }

.send-button:hover { background-color: #357ae8; }

/* Estilos para la cuadrícula de resultados */ .response-grid { margin-top: 2rem; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

/* Estilo para las cabeceras de la cuadrícula */ vaadin-grid-cell-content[part="header-cell"] { background-color: #ececec; font-weight: bold; }

5. crear el archivo de Configuración de Vaadin

En la misma carpeta crear la clase VaadinAppConfig.java

package com.bazan.demopushme.ui;

import com.vaadin.flow.component.page.AppShellConfigurator;

import com.vaadin.flow.component.page.Push;

import com.vaadin.flow.theme.Theme;

/**

 * Clase de configuración para la aplicación Vaadin.

 * Esta clase configura el tema de Vaadin para toda la aplicación.

 * Debe tener la anotación @Theme y extender la interfaz AppShellConfigurator.

 */

@Theme(value = "app-theme")

@Push

public class VaadinAppConfig implements AppShellConfigurator {

}