Vaadin

format_list_bulleted Contenido keyboard_arrow_down

ImprimirCitar

Vaadin (Pronunciación finlandesa: [ˈʋɑːdin]) es una plataforma de desarrollo de aplicaciones web de código abierto para Java. Vaadin incluye un conjunto de componentes web, un framework web Java y un conjunto de herramientas que permiten a los desarrolladores implementar interfaces gráficas de usuario (GUI) web modernas utilizando únicamente el lenguaje de programación Java (en lugar de HTML y JavaScript), únicamente TypeScript o una combinación de ambos.

Historia

El desarrollo se inició inicialmente como un adaptador sobre el framework web de código abierto Millstone 3, lanzado en 2002. Este introdujo un motor de comunicación y renderizado de cliente basado en Ajax. Durante 2006, este concepto se desarrolló por separado como producto comercial. Como consecuencia, gran parte de la API del lado del servidor de Vaadin sigue siendo compatible con las API similares a Swing de Millstone.A principios de 2007, el nombre del producto se cambió a IT Mill Toolkit y se lanzó la versión 4. Utilizaba una implementación propietaria de JavaScript Ajax para la renderización del lado del cliente, lo que dificultaba bastante la implementación de nuevos widgets. A finales de 2007, se abandonó la implementación propietaria del lado del cliente y se integró GWT sobre los componentes del lado del servidor. Simultáneamente, la licencia del producto se cambió a la licencia Apache 2.0 de código abierto. La primera versión lista para producción de IT Mill Toolkit 5 se lanzó el 4 de marzo de 2009, tras un período beta de más de un año.El 11 de septiembre de 2008, se anunció públicamente que Michael Widenius, el principal autor de la versión original de MySQL, invirtió en IT Mill, la empresa finlandesa desarrolladora de Vaadin. El monto de la inversión no se ha revelado.El 20 de mayo de 2009, IT Mill Toolkit cambió su nombre a Vaadin Framework. El nombre proviene de la palabra finlandesa para cierva, o más precisamente, reno hembra. También se puede traducir del finlandés como "Insisto". Además del cambio de nombre, se lanzó una versión preliminar de la 6.ª versión, junto con un sitio web comunitario. Posteriormente, IT Mill Ltd, la empresa creadora de Vaadin Framework de código abierto, cambió su nombre a Vaadin Ltd.El 30 de marzo de 2010, se inauguró el Directorio de Vaadin. Este añadió un canal para distribuir componentes adicionales al framework Vaadin, tanto de forma gratuita como comercial. En la fecha de lanzamiento, ya había 95 complementos disponibles para descargar.

Historia de la liberación
Versión LTS	Fecha de lanzamiento	Notas y nuevas características desde el lanzamiento anterior de la versión LTS
6	20 de mayo de 2009	Liberación inicial
7	3 de febrero de 2013
8	21 de febrero de 2017	Las mejoras incluyen una API de unión de datos reescrita que utiliza características Java modernas como parámetros de tipo y expresiones de lambda, y un uso de memoria y CPU más eficiente.
10	25 de junio de 2018	Es posible utilizar componentes UI de Vaadin de cualquier tecnología compatible con componentes Web. Vaadin Directory añade distribución de componentes web. Vaadin Flow, la próxima generación de Vaadin Framework, fue presentado como un marco web Java lado servidor en la parte superior de los componentes de la interfaz de usuario de Vaadin.
14	14 agosto 2019	Nuevos componentes UI, soporte CDI y OSGi, integración de Gradle, registro dinámico de rutas, atajos de teclado API, soporte para npm y Bower.
23	1o de marzo de 2022	Nuevo modelo de liberación. Nuevos componentes UI, sistema de diseño reelaborado, banderas de características, npm es ahora el administrador de paquetes predeterminado.

Vaadin Flow (Java API)

Vaadin Flow (anteriormente Vaadin Framework) es un framework web Java para crear aplicaciones y sitios web. El modelo de programación de Vaadin Flow permite a los desarrolladores usar Java como lenguaje de programación para implementar interfaces de usuario (UI) sin necesidad de usar HTML o JavaScript directamente. Vaadin Flow cuenta con una arquitectura del lado del servidor, lo que significa que la mayor parte de la lógica de la IU se ejecuta de forma segura en el servidor, lo que reduce la exposición a atacantes. Del lado del cliente, Vaadin Flow se basa en los estándares de componentes web. La comunicación cliente/servidor se gestiona automáticamente mediante WebSocket o HTTP con mensajes JSON ligeros que actualizan tanto la IU en el navegador como el estado de la IU en el servidor.

La API Java de Vaadin Flow incluye clases como TextField, Button, ComboBox, Grid y muchas otras que se pueden configurar, estilizar y añadir a instancias de objetos de diseño de clases como VerticalLayout, HorizontalLayout y SplitLayout, entre otras. El comportamiento se implementa añadiendo detectores a eventos como clics, cambios en el valor de entrada, etc. Las vistas se crean mediante clases Java personalizadas que implementan otro componente de interfaz de usuario (personalizado o proporcionado por el framework). Estas clases de vista se anotan con @Route para exponerlas al navegador con una URL específica. El siguiente ejemplo ilustra estos conceptos:

@Route()"hola-mundo") // expone la vista a través de http://localhost:8080/hello-worldpúblico clase MainView extensivos VerticalLayout {} // amplía un componente UI existente público MainView() {} // crea un campo de texto TextField texto Campo = nuevo TextField()"Entra tu nombre"); // crea un botón Button botón = nuevo Button()"Enviar");  // añade comportamiento al botón usando el evento de clic botón.añadirClickListener()evento - No. añadir()nuevo Párrafo()"Hola." + texto Campo.# Valor()) ); // añade los componentes UI a la vista (VerticalLayout) añadir()texto Campo, botón); }}

La siguiente es una captura de pantalla del ejemplo anterior:

Hilla (TypeScript API)

Hilla (anteriormente Vaadin Fusion) es un framework web que integra backends Java de Spring Boot con frontends reactivos implementados en TypeScript. Esta combinación ofrece una plataforma de desarrollo con total seguridad de tipos, combinando la lógica de negocio del lado del servidor en Java y la seguridad de tipos del lado del cliente con el lenguaje de programación TypeScript. Las vistas se implementan utilizando Lit, una biblioteca ligera para crear componentes web. A continuación, se muestra un ejemplo de una vista básica implementada con Hilla:

@costo Elemento()'la vista mundial-hola ')Exportación clase HolaWorld Ver extensivos LitElement {} render() {} Regreso html` ■div "Tu nombre" ■vaadin-button @click="${esto.Di hola.}"Conseguir saludar" ■/div titulada `; } Di hola.() {} showNotificación()¡Hola! '); }}

Componentes UI de Vaadin

Vaadin incluye un conjunto de componentes de interfaz de usuario (UI) implementados como componentes web. Estos componentes incluyen una API Java del lado del servidor (Vaadin Flow), pero también pueden usarse directamente en documentos HTML. Los componentes de interfaz de usuario de Vaadin funcionan con eventos de ratón y táctiles, se pueden personalizar con CSS, son compatibles con WAI-ARIA, admiten teclado y lectores de pantalla, y admiten idiomas de derecha a izquierda.

La siguiente tabla muestra una lista de los componentes de interfaz de usuario incluidos en Vaadin:

Componentes de la vaa
Clase Java	Nombre del elemento HTML	Descripción	Licencia
`Accordion`	`vaadin-accordion`	Un conjunto verticalmente apilado de paneles expandibles	Apache 2.0
`Anchor`	`a`	Permite la navegación a una URL dada	Apache 2.0
`AppLayout`	`vaadin-app-layout`	Una estructura de diseño de aplicaciones comunes	Apache 2.0
`Avatar`	`vaadin-avatar`	Una representación gráfica de una persona	Apache 2.0
(no disponible)	`vaadin-badge`	Un elemento de texto de color para etiquetar contenido	Apache 2.0
`Board`	`vaadin-board-row`	Componente de diseño para construir vistas sensibles	Comercial
`Button`	`vaadin-button`	Permite a los usuarios realizar acciones	Apache 2.0
`Crud`	`vaadin-crud`	Un componente para gestionar Crear, Leer, Actualizar y Eliminar operaciones	Comercial
`Chart`	`vaadin-chart`	Gráficos interactivos con diferentes tipos como bar, pie, línea y otros	Comercial
`Checkbox`	`vaadin-checkbox`	Un campo de entrada que representa una opción binaria	Apache 2.0
`Combo box`	`vaadin-combo-box`	Muestra una lista de elementos que se pueden filtrar	Apache 2.0
`ConfirmDialog`	`vaadin-confirm-dialog`	A modal Dialog utilizado para confirmar las acciones del usuario	Apache 2.0
`ContextMenu`	`vaadin-context-menu`	Un menú que aparece en el clic derecho o en la prensa táctil larga	Apache 2.0
`CookieConsent`	`vaadin-cookie-consent`	Una pancarta que debe cumplir con leyes de privacidad como el GDPR y el CCPA	Comercial
`CustomField`	`vaadin-custom-field`	Un componente para envolver múltiples componentes como un solo campo	Apache 2.0
`DatePicker`	`vaadin-date-picker`	Permite entrar una fecha escribiendo o seleccionando desde un overlay de calendario	Apache 2.0
`DateTimePicker`	`vaadin-date-time-picker`	Un campo de entrada para seleccionar una fecha y un tiempo	Apache 2.0
`Details`	`vaadin-details`	Un panel expandible para mostrar y ocultar contenido	Apache 2.0
`Dialog`	`vaadin-dialog`	Una ventana emergente para mostrar otros componentes en una sobrepuesta	Apache 2.0
`EmailField`	`vaadin-email-field`	Un campo de texto que sólo acepta direcciones de correo electrónico como entrada	Apache 2.0
`Form layout`	`vaadin-form-layout`	Un diseño para construir formas sensibles con múltiples columnas	Apache 2.0
`Grid`	`vaadin-grid`	Data grid or data table component for tabular data	Apache 2.0
`GridPro`	`vaadin-grid-pro`	Proporciona edición en línea con la navegación completa del teclado	Comercial
`HorizontalLayout`	`vaadin-horizontal-layout`	Lugares componentes lado a lado en una fila	Apache 2.0
`Icon`	`iron-icon`	Muestra un icono personalizado o de una colección de más de 600 iconos (`VaadinIcons` enum)	Apache 2.0
`Image`	`img`	Muestra una imagen de un archivo de recursos o de datos binarios generados a tiempo de ejecución	Apache 2.0
`ListBox`	`vaadin-list-box`	Permite seleccionar uno o más valores de una lista desplazable de elementos	Apache 2.0
`LoginForm`	`vaadin-login-form`	Un componente que contiene un formulario de login	Apache 2.0
`LoginOverlay`	`vaadin-login-overlay`	A modal or fullscreen login form	Apache 2.0
`MenuBar`	`vaadin-menu-bar`	Una barra de botones horizontal con menús desplegables jerárquicos	Apache 2.0
`MessageList`	`vaadin-message-list`	Un componente para mostrar mensajes y construir chats y secciones de comentarios	Apache 2.0
`Notification`	`vaadin-notification`	Componente de superposición utilizado para proporcionar retroalimentación al usuario	Apache 2.0
`NumberField`	`vaadin-number-field`	Un campo de texto que sólo acepta la entrada numérica (decimal, integral o decimal grande)	Apache 2.0
`PasswordField`	`vaadin-password-field`	Un campo de entrada para introducir contraseñas enmascaradas por defecto	Apache 2.0
`ProgressBar`	`vaadin-progress-bar`	Muestra el estado de terminación de una tarea o proceso	Apache 2.0
`Radio button`	`vaadin-radio-button`	Permite seleccionar exactamente un valor de una lista de opciones relacionadas pero mutuamente excluyentes	Apache 2.0
`RichTextEditor`	`vaadin-rich-text-editor`	Un campo de entrada para entrar en texto rico	Comercial
`Scroller`	`vaadin-scroller`	Un contenedor componente para crear áreas pergables en la UI	Apache 2.0
`Select`	`vaadin-select`	Un componente de campo de entrada para elegir un único valor de un conjunto de opciones	Apache 2.0
`SplitLayout`	`vaadin-split-layout`	Un componente con dos áreas de contenido y un mango de separación arrastrable entre ellas	Apache 2.0
`Tabs`	`vaadin-tabs`	Organizar y agrupar contenidos en secciones	Apache 2.0
`TextArea`	`vaadin-text-area`	Un componente de campo de entrada para la entrada de texto multilínea	Apache 2.0
`TextField`	`vaadin-text-field`	Un componente para introducir y editar texto	Apache 2.0
`TimePicker`	`vaadin-time-picker`	Un campo de entrada para entrar o seleccionar un tiempo específico	Apache 2.0
`TreeGrid`	`vaadin-grid`	Un componente para mostrar datos tabulares jerárquicos agrupados en nodos expandibles y collapibles	Apache 2.0
`Upload`	`vaadin-upload`	Un componente para subir uno o más archivos con progreso y estado de carga	Apache 2.0
`VerticalLayout`	`vaadin-vertical-layout`	Coloca los componentes de arriba a abajo en una columna	Apache 2.0

Certificaciones

Vaadin ofrece dos modalidades de certificación para demostrar que un desarrollador domina Vaadin Flow:

Certified Vaadin 14 Developer
Vaadina certificada 14 Professional

Para obtener la certificación, un desarrollador debe revisar la documentación, seguir los videos de capacitación y realizar un examen en línea.Certificaciones anteriores (ahora no disponibles):

Vaadin examen en línea para el desarrollador certificado Vaadin 7
Vaadin examen en línea para Vaadin 8 desarrollador certificado

Véase también

Lista de marcos de aplicación web ricos

Referencias

^ "Release Vaadin 24.8.0 · vaadin/platform · GitHub". GitHub. Retrieved 2025-06-19.
^ "Release Vaadin 23.5.18 · vaadin/platform · GitHub". GitHub. Retrieved 2025-05-28.
^ "Release Vaadin 14.12.8 · vaadin/platform · GitHub". GitHub. Retrieved 2025-04-23.
^ "Michael "Monty" Widenius invirtiendo en Finés IT Mill". Invertir en Finlandia. Archivado desde el original el 2011-07-20. Retrieved 2009-01-31.
^ Asay, Matt. "Monty Widenius invierte en Acta II: IT Mill". CNET News. Archivado desde el original en 2016-03-11. Retrieved 2009-01-31.
^ Sani, Ilari (10 de marzo de 2009). Mill, avointa Ajaxia Suomesta. Tivi [fi] (en finlandés). Alma Media. Retrieved 11 de julio 2024.
^ "Vaadin Directory abre sus puertas". vaadin.com. Retrieved 2021-09-07.
^ Vaadin. "Vaadin libera Vaadin Framework 8". www.prnewswire.com (Libertad de prensa).
^ Vaadin. "Vaadin moderniza el desarrollo Java con su mayor liberación hasta la fecha: Vaadin 10". www.businessinsider.com.
^ "Vaadin 14.0.0 en GitHub". GitHub.
^ "Un modelo de liberación más simple tención Vaadin". vaadin.com. Retrieved 2022-08-11.
^ "Vaadin 23 finalmente está aquí! "Váadin". vaadin.com. Retrieved 2022-08-11.
^ "Training". Vaadin. Retrieved 2021-09-08.

Más lectura

Duarte, A. (2021) Vaadin práctico: Desarrollo de aplicaciones web en Java. Apress.
Duarte, A. (2018) Aplicaciones Data-Centric con Vaadin 8. Packt Publishing.
Frankel, N. (2013) Vaa de aprendizaje 7, segunda edición. Packt Publishing.
Duarte, A. (2013) Vaadin 7 UI Diseño por ejemplo: Guía del principiante. Packt Publishing.
Holan, J., " Kvasnovsky, O. (2013) Vaadin 7 Cookbook. Packt Publishing.
Taylor C. (2012) Recetas de Vaadina. Packt Publishing.
Frankel, N. (2011) Vaa de aprendizaje. Packt Publishing.
Grönroos, M. (2010) Libro de Vaadin. Vaadin Ltd.

Enlaces externos

Sitio oficial
Vaaden en GitHub

v t e Marcos web
Comparación
. NET	ASP. NET Core AJAX Datos dinámicos MVC Razor Formularios Web Blazor DNN BFC MonoRail Umbraco WebSharper
C++	CppCMS Drogon Wt
ColdFusion	ColdBox Platform
Lisp común	CL-HTTP
Haskell	Servidor Snap Sí.
Java	AppFuse Grails GWT ICEfaces JHipster JWt Mojarra Jugar Plataforma de aplicación remota Seam Sling Primavera Stripes Struts Tapiz Vaadin Vert.x Wicket WaveMaker ZK
JavaScript	Angular/AngularJS Backbone.js Clausura Dojo Toolkit Ember.js Express.js Ext JS Rápido htmx j Query Knockout.js Meteor MooTools NestJS Siguiente.js Nuxt.js Node.js OpenUI5 Prototipo Reacción Remix Sencha Touch SproutCore Svelte Vue.js
Perl	Catalyst Bailarina Maypole Mojolicious WebGUI
PHP	CakePHP CodeIgniter Drupal eZ Publish Libre de grasa Flujo FuelPHP Grav Gyroscope Horde ¡Joomla! Laminas Laravel li3 Midgard MODX Phalcon PHP-Fusion PHP-Nuke Pop PHP PRADO ProcessWire Qcodo Silverstripe Symfony TYPO3 WordPress XOOPS Yii
Python	BlueBream CherryPy CubicWeb Django FastAPI Flask Grok Nevow Pyjs Pilones Pirámid Quijote Tornado TurboGears web2py Zope 2 más...
Ruby	Merb Padrino Ruby on Rails Sinatra
Rust	Rocket
Scala	Ascensor Jugar Scalatra
Smalltalk	AIDA/Web Seaside
Otros idiomas	Application Express (PL/SQL) Grails (Groovy) OpenACS (Tcl) Phoenix (Elixir) Shiny (web framework) (R) SproutCore (JavaScript-Ruby) Yaws (Erlang)

Más resultados...