Vaadin on Flowing Code

Vaadin TreeGrid con carga diferida, filtrado y ordenamiento.

Thu, 13 May 2021 14:24:02 +0000

Estoy dando mis primeros pasos en Vaadin 14 después de mucho, mucho tiempo de trabajar en proyectos de Vaadin 8 y quiero compartir mi experiencia cuando me tocó trabajar con el componente TreeGrid para mostrar datos en una estructura jerárquica. Me encontré con esta situación en la que necesitaba agregar filtrado y ordenamiento a un TreeGrid de Vaadin que estaba utilizando carga diferida. Como base, tenía este artículo de similar implementación utilizando el componente Grid, pero algunas cuestiones son diferentes si hablamos de TreeGrid, así que pensé que sería una buena idea compartir todos los pasos necesarios y algunos tips a tener en cuenta para este tipo de implementación.

Repaso de otro año: La nueva normalidad

Wed, 07 Apr 2021 19:32:57 +0000

Nuestra vida, modo de disfrutar, vivir y trabajar ha cambiado pero todavía estamos dando lo mejor para proveer los servicios de calidad que nuestros clientes necesitan. Este es un repaso de otro año contando nuestros más importantes hitos alcanzados.

Aplicación Demo Vaadin 10 + Spring: estadísticas de la Copa Mundial Rusia 2018

Wed, 20 May 2020 18:06:58 +0000

Para probar algunas nuevas e interesantes tecnologías web, decidimos crear una pequeña aplicación demo que muestre ideas que podrían ayudar a un desarrollador cuando intente decidir cuáles usar en un nuevo proyecto. Esto lo realizamos, teniendo en mente el objetivo de que sea responsiva, que permita mostrar información acumulada y en tiempo real del Mundial de Fútbol que actualmente se desarrolla en Rusia.

Tecnologías

Las tecnologías elegidas fueron:

Vaadin 10: La nueva versión de este popular framework, basada en los nuevos estándares impulsados por los browsers más populares.
Spring Framework: El framework de inyección de dependencias estándar, que actúa como la columna vertebral de la mayoría de los proyectos en java actuales.
REST API: Nuestro proyecto utiliza la API que puede encontrarse aquí. La misma expone los datos como una API REST entregando la información en formato JSON.

Características

Esta es la lista de las principales características de la aplicación:

Es responsiva, mostrará correctamente la información independientemente del dispositivo que se utilice. Esto es posible gracias a Vaadin y Polymer.
Dependiendo del dispositivo en que navegues el sitio (especialmente dispositivos móviles), puedes agregar la aplicación a la pantalla de inicio, para que se vea como una aplicación nativa. El único inconveniente es que no funcionará en modo offline (aún, capaz pronto).
Se pueden seguir los resultados de los partidos en tiempo real. Utilizando WebSockets, la aplicación mantiene un canal de comunicación abierto entre el navegador y el servidor, por lo que las actualizaciones pueden ser informadas al cliente tan pronto como se reciban de la API

Construcción

Se necesita tener un buen punto de inicio para comenzar un nuevo proyecto. Para nosotros, ese punto de inicio fue el starter Vaadin Base Project with String. Al seleccionar esta opción, nos beneficiamos del hecho de que ya tiene una configuración Spring probada y en funcionamiento, por lo que la decisión fue fácil.

Responsividad

Alcanzamos esta meta, trabajando en paralelo en el desarrollo de un nuevo addon para Vaadin que permite construir nuevas aplicaciones usando una estructura simple que se encarga de construir los elementos visuales habituales presentes en una aplicación responsiva: hamburger menu, paper-cards y más.

Además, utilizamos algunas técnicas CSS como media queries para completar los toques finales.

PWA

Para permitir que la aplicación pueda agregarse a la pantalla de inicio de un dispositivo, y se muestre como una aplicación nativa, generamos un manifiesto PWA, con algunas propiedades que puede imitar fácilmente, utilizando una herramienta como el App Manifest Generator.

Actualizaciones en tiempo real

Esto es realmente fácil de implementar, gracias a la tecnología @Push de Vaadin, la cual está basada en Websockets. Solamente agregando una simple anotación al layout principal y la aplicación cobrará vida.

Puede aprender más sobre esta tecnología en la documentación oficial de Vaadin.

Roadmap

Estas son las funcionalidades que quisiéramos poder implementar en un futuro cercano:

Estilos CSS y temas en Vaadin 14

Mon, 11 May 2020 15:14:57 +0000

Hace una semana fue publicada la nueva version LTS del framework de presentación.
Mientras es posible encontrar toda la información de las nuevas caractrísticas en el sitio oficial, me gustaría hacer foco en una característica en particular, a la que yo encuentro muy interesante: el manejo de estilos.
A lo largo de los años vimos diferentes maneras de administrar los estilos en las aplicaciones Vaadin.
En Vaadin 6 se podian modificar los estilos usando CSS simple. Por supuesto, tenías dos opciones: construir todo desde cero o heredar alguno de los temas ya integrados como Reindeer, Runo o Chameleon. Ese esquema de herencia se basó en la sentencia @import de CSS, que es la base del comportamiento en cascada de los estilos CSS.
El problema con este enfoque es que dificulta la personalización por la complejidad del DOM renderizado y la falta de variables que pudieran ayudar a modificar ciertos aspectos de los temas base como tamaño y el espaciado, que varias reglas tenían en común.

Inauguración de oficinas y charlas de Vaadin

Mon, 11 May 2020 14:55:49 +0000

El martes pasado organizamos un pequeño evento, que tuvo dos objetivos principales. El primero de ellos fue el de darnos a conocer con los desarrolladores de la ciudad y de la zona, y presentarles nuestras instalaciones. El segundo objetivo, fue el de dar el puntapié inicial para una planificación de charlas de tecnología previstas para el año próximo.
En este primer encuentro, realizamos un par de presentaciones. Para comenzar, hablamos sobre Vaadin 8, ofrecimos una descripción general del framework y su arquitectura, y una lista de las principales nuevas características desde Vaadin 7.
Luego presentamos la nueva plataforma Vaadin 10, explicando las nuevas tecnologías detrás del framework y las nuevas características disponibles en la versión de prueba para desarrolladores.
Para finalizar, invitamos a todos con bocaditos y bebidas en la terraza abierta, con un cielo estrellado como telón de fondo, donde pudimos hablar de nuevas tecnologías y generar nuevos contactos.
¡Compartimos algunas fotos del evento!

Implementación de Spring Security en una aplicación Vaadin

Mon, 11 May 2020 14:46:54 +0000

Hoy voy a escribir un poco sobre mi experiencia en tratar de dar seguridad a una aplicación simple de Vaadin usando uno de los frameworks de seguridad más populares: las extensiones de seguridad de SpringFramework.
Esta publicación abordará la parte de realizar una configuración predeterminada para que funcione, por supuesto que después de esto, tendremos muchas cosas para hacer en el proyecto para terminar de implementarlo, como almacenar y recuperar los datos de usuario de la base de datos utilizada, elegir el algoritmo de encriptación de contraseña, etc. Pero al menos tendrás una visión general de lo que se debe hacer para lograr esto.

Capacidades de edición de la Grilla de Vaadin

Mon, 11 May 2020 14:37:51 +0000

En esta oportunidad, me gustaría hablar un poco sobre algo que creo que es una de las funcionalidades más poderosas del componente “Vaadin Grid”: la función de edición. La vista predeterminada del componente es una vista de solo lectura, de los datos de la tabla cargados en este componente. Pero si habilitamos el editor, podremos modificar visualmente las celdas de la grilla y cambiar los datos que ésta mantiene en la memoria del servidor. Analicemos algunas dificultades en el uso esta función y cómo superarlas.

Edición en línea

Si observamos la aplicación demo de ejemplo, veremos que el Editor es como un pequeño formulario que se abre cada vez que hacemos doble clic en una fila. Diferente al comportamiento previo del componente, en las versiones anteriores de Vaadin (Table). Con Table, cuando hacemos doble clic, la fila completa cambia a modo lectura/escritura, sin convertir la fila en un “mini-formulario” como ahora lo hace Grid. Por supuesto, este comportamiento es configurable, puedes deshabilitarlo simplemente invocando a setBuffered(false).

A pesar de ser de alguna manera mucho más visual, este nuevo comportamiento podría no ser no deseado para aquellas aplicaciones empresariales que dependen más del teclado, y no tanto del mouse, para manejar la tabla o la grilla.

Pero si los usuarios desean este tipo de manejo de la grilla, entonces el complemento Grid Fast Navigation Addon es lo ideal. Éste utiliza Component Extension featurepara darle a la grilla una nueva apariencia, que hace que la edición sea mucho más fácil y la transforma, otorgándole una de edición sencilla al estilo de Excel.

Complemento Grid Fast Navigation en acción.

Componentes

Otra cosa que evitó que algunos desarrolladores dejaran de usar Table y comenzaran a usar Grid, fue que no se podía usar un componente estándar dentro de una celda de la grilla. Si se desea, por ejemplo, utilizar casillas de verificación dentro de una celda, se debe crear una clase especial, llamada “renderer”, que debe manejar el lado cliente y el lado del servidor de esa celda.

Afortunadamente, hay algunos complementos que pueden ayudarte con esa tarea. El que se destaca es Grid renderes collection (disponible para las versiones Vaadin 7 y 8). Esta colección proporciona muchos componentes que permiten manejar selecciones, casillas de verificación, imágenes, etc.

En la última versión de Vaadin, una de las características más interesantes es el nuevo Renderer, que da la capacidad de utilizar un componente Vaadin dentro de una celda de una grilla. Se puede ver una vista previa en la aplicación de ejemplo.

Sin embargo, si estás utilizando Vaadin 7, podrías usar una versión experimental de esta característica, instalando Component Renderer Addon.
¡Pruébalo!

Resumen de nuestro año: #QuedateEnCasa #Cuidate

Tue, 14 Apr 2020 20:16:54 +0000

A pesar de que estamos transitando estos tiempos bastante inciertos y la realidad del mundo hoy es muy diferente a lo que era un año atrás, Flowing Code está cumpliendo 3 años y queríamos aprovechar el momento para reconocer el buen trabajo y el crecimiento que logramos. Así que aquí va un resumen de nuestro último año: