Vaadin ( pronunciación finlandesa: [ˈʋɑːdin] ) es una plataforma de código abierto para el desarrollo de aplicaciones web . La plataforma Vaadin incluye un conjunto de componentes web , un marco web Java y un conjunto de herramientas e iniciadores de aplicaciones. Su producto estrella, Vaadin Platform (anteriormente Vaadin Framework) permite la implementación de interfaces de usuario web HTML5 utilizando el lenguaje de programación Java .
Desarrollador (es) | Vaadin Ltd. |
---|---|
Lanzamiento estable | 19.0.9 (14 de junio de 2021 [1] ) [±] 20.0.4 (5 de julio de 2021 [2] ) [±] 14.6.5 (LTS) (29 de junio de 2021 [3] ) [±] |
Repositorio | Repositorio Vaadin |
Escrito en | Java , JavaScript |
Plataforma | Plataforma cruzada |
Tipo | Marco web |
Licencia | Licencia Apache 2.0 |
Sitio web | vaadin.com |
Historia
El desarrollo se inició por primera vez como un adaptador sobre el marco web de código abierto Millstone 3 lanzado en el año 2002. Introdujo un motor de comunicación y renderización de clientes basado en Ajax . Durante 2006, este concepto se desarrolló por separado como producto comercial. Como consecuencia de esto, una gran parte de la API del lado del servidor de Vaadin sigue siendo compatible con las API tipo Swing de Millstone .
A principios de 2007, el nombre del producto se cambió a IT Mill Toolkit y se lanzó la versión 4. Usó una implementación Ajax de JavaScript patentada para la representación del lado del cliente, lo que hizo que fuera bastante complicado implementar nuevos widgets. A finales del año 2007, se abandonó la implementación propietaria del lado del cliente y GWT se integró en la parte superior de los componentes del lado del servidor. Al mismo tiempo, 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 realizó el 4 de marzo de 2009, después de un período beta de más de un año.
El 11 de septiembre de 2008, se anunció públicamente [5] [6] que Michael Widenius , el autor principal de la versión original de MySQL, invirtió en IT Mill, el desarrollador de Vaadin. El tamaño de la inversión no se revela.
El 20 de mayo de 2009, IT Mill Toolkit cambió su nombre a Vaadin Framework . El nombre proviene de la palabra finlandesa para cierva , más precisamente, una hembra de reno . También se puede traducir del finlandés como "insisto". Además del cambio de nombre, se lanzó una versión preliminar de la versión 6 junto con un sitio web comunitario. Más tarde, IT Mill Ltd, la compañía detrás de Vaadin Framework de código abierto, cambió su nombre a Vaadin Ltd.
El 30 de marzo de 2010, se abrió Vaadin Directory. Agregó un canal para distribuir componentes complementarios al marco principal de Vaadin, tanto de forma gratuita como comercial. En la fecha de lanzamiento, ya había 95 complementos disponibles para descargar. [ cita requerida ]
El 22 de febrero de 2017, se lanzó Vaadin Framework 8. [7] Las mejoras incluyen una API de enlace de datos reescrita que utiliza características modernas de Java, como parámetros de tipo y expresiones lambda, y un uso más eficiente de la memoria y la CPU.
El 25 de junio de 2018, se lanzó Vaadin 10. [8] Vaadin 10 hizo posible el uso de componentes de Vaadin de cualquier tecnología compatible con Web Components y Vaadin Directory mejorado para incluir la distribución de Web Components. Vaadin Flow, la próxima generación de Vaadin Framework, se presentó como un framework web Java del lado del servidor sobre los componentes de Vaadin.
El 5 de septiembre de 2018, se lanzó Vaadin 11 con integración de Gradle , algunos componentes nuevos y Vaadin Charts 6.1.
El 5 de diciembre de 2018, Vaadin 12 fue liberado. [9]
El 6 de marzo de 2019, Vaadin 13 fue liberado. [10]
El 14 de agosto de 2019, se lanzó Vaadin 14. [11] Es la última versión de LTS (Long Term Support) con mantenimiento gratuito durante 5 años. Una de las principales novedades es la compatibilidad con npm y Bower (en modo de compatibilidad).
La última versión estable al 24 de mayo de 2020 es Vaadin 14.2.0, lanzada el 20 de mayo de 2020. [12]
Vaadin 14.2.0 ve la introducción de pnpm [13] como administrador de paquetes.
Componentes de Vaadin
Los componentes de Vaadin son un conjunto completo de componentes web para desarrolladores de aplicaciones. Los componentes se pueden utilizar en documentos web (sin frameworks) y frameworks web compatibles con Web Components. Estos componentes son el núcleo de Vaadin Flow, un marco web de Java que ofrece una API de Java además de cada componente de Vaadin.
Uso básico
Los componentes de Vaadin se instalan normalmente con npm o Bower. Por ejemplo, el siguiente comando instala el vaadin-button
componente:
bower instalar vaadin / vaadin-button
Una vez instalado, el componente se puede utilizar en una página web de la siguiente manera:
< html > < head > < link rel = "import" href = "bower_components / vaadin-button / vaadin-button.html" /> head > < cuerpo > < vaadin-button onclick = 'alert ("Hola, mundo ") ' > Haz clic en mí vaadin-button > body > html >
La siguiente es una captura de pantalla de la página anterior:
Componentes disponibles
La siguiente tabla muestra una lista de los componentes web de código abierto gratuitos incluidos en Vaadin:
Componente | Nombre del elemento | Descripción |
---|---|---|
Botón | botón de vaadin | Elemento para botones personalizados |
Caja | casilla de verificación vaadin | Elemento para casillas de verificación personalizadas |
Caja combo | vaadin-combo-box | Muestra una lista de elementos con filtrado. |
Menú de contexto | menú contextual de vaadin | Muestra elementos dependientes del contexto para cualquier elemento de la página. |
Selector de fechas | vaadin-date-picker | Un campo de selección de fecha con un calendario mensual desplazable |
Diálogo | vaadin-dialog | Muestra diálogos modales |
Menú desplegable | menú desplegable de vaadin | Componente web personalizable para menús desplegables |
Diseño de formulario | diseño de forma de vaadin | Diseño adaptable configurable para elementos de formulario |
Red | vaadin-grid | Elemento de tabla de datos / cuadrícula de datos |
Conjunto de iconos de interfaz de usuario | vaadin-iconos | Una colección de más de 600 iconos |
Artículo | vaadin-item | Un contenedor para elementos del artículo. |
Cuadros de lista reutilizables | cuadro de lista de vaadin | |
Notificación | notificación-vaadin | Notificaciones personalizadas |
Disposición ordenada | diseño-ordenado-vaadin | Alinear elementos HTML horizontal o verticalmente |
Controles de entrada temáticos | ||
Barra de progreso | barra de progreso vaadin | Barras de progreso personalizadas |
Boton de radio | botón-de-radio-vaadin | Botones de radio personalizados |
Diseño dividido | vaadin-split-layout | Partición de un diseño en áreas redimensionables |
Pestañas de navegación | vaadin-tabs | Pestañas personalizadas |
Subir | vaadin-upload | Cargue varios archivos con indicación de progreso |
Flujo de Vaadin
Desarrollador (es) | Vaadin Ltd. |
---|---|
Lanzamiento estable | 2.0.10 / 3 de septiembre de 2019 [14] |
Versión de vista previa | 3.0.0.alpha1 / 16 de agosto de 2019 [15] |
Repositorio | Repositorio de flujo |
Plataforma | Java |
Tipo | Marco web |
Licencia | Licencia Apache 2.0 |
Sitio web | vaadin.com/flow |
Vaadin Flow (anteriormente Vaadin Framework ) es un marco web para crear aplicaciones web y sitios web . El modelo de programación de Vaadin Flow es similar al de Vaadin Framework: utiliza Java como lenguaje de programación para crear contenido web. Vaadin Flow presenta una arquitectura del lado del servidor, lo que significa que la mayor parte de la lógica se ejecuta en el servidor. En el lado del cliente, Vaadin Flow se basa en los estándares de componentes web .
Vaadin Flow incluye compatibilidad con componentes web para desarrolladores de Java y permite el uso de plantillas HTML (basadas en Polymer ) con comunicación automatizada cliente-servidor. También incluye API para enrutamiento (conexión de componentes de interfaz de usuario a URL), enlace de datos (sincronización de campos de entrada con modelos de datos del lado del servidor) y manipulación DOM del lado del servidor .
Uso básico
El siguiente es un ejemplo elemental del uso de Vaadin Flow:
@Route ( "Hola mundo" ) pública clase MainView extiende VerticalLayout { public MainView () { TextField textField = new TextField ( "Ingrese su nombre" ); Botón botón = nuevo botón ( "Soy más" , evento -> add ( nueva Span ( "Hola" + textField . GetValue ()))); agregar (campo de texto , botón ); } }
La siguiente es una captura de pantalla de la aplicación anterior:
Características
Implementación de la interfaz de usuario solo con Java
Vaadin Flow permite el uso de componentes de interfaz existentes y la implementación de nuevos mediante el uso de código Java que se ejecuta en el lado del servidor. Es posible crear y modificar el DOM desde el lado del servidor. El constructor en el siguiente fragmento de código muestra cómo crear un nuevo div
elemento HTML , establecer su id
atributo y agregar un detector de clics:
@Route ( "" ) la clase pública MainView extiende Div { public MainView () { Div div = new Div (); div . setText ( "Haga clic en mí" ); div . getElement (). setAttribute ( "id" , "principal" ); div . getElement (). addEventListener ( "click" , evento ( DomEventListener ) -> add ( new Span ( "Hola, mundo" ))); agregar ( div ); } }
Integración de componentes web
La integración de componentes web se proporciona a través de las anotaciones @Tag
y @Import
. El siguiente fragmento de código muestra cómo encapsular un componente web existente en un componente Java del lado del servidor:
@Tag ( " juicy -ace-editor" ) @HtmlImport ( "bower_components / juicy-ace-editor / juicy-ace-editor.html" ) clase pública JuicyAceEditor extiende Div { setMode public void ( modo String ) { getElement (). setAttribute ( "modo" , modo ); } }
Enrutador
El enrutador es un concepto central en Vaadin Flow y permite la navegación a través de URL. El enrutador permite la conexión de URL a los componentes de la interfaz de usuario. Se basa en la API de historial de HTML5, que permite a los usuarios finales navegar por las páginas conservando el estado de la página. El siguiente fragmento de código muestra cómo usar la @Route
anotación para mostrar el componente anotado cuando el usuario final solicita una URL como :http://yourdomain.com/hello/world
@Route ( "hola / mundo" ) public class HelloWorldComponent extiende Div { public HelloWorldComponent () { setText ( "¡Hola, mundo!" ); } }
El enlace de datos
El enlace de datos se realiza a través de la Binder
clase. Permite sincronizar los valores en los campos de entrada con modelos de datos del lado del servidor. El siguiente fragmento de código muestra cómo vincular el name
campo Java (a través del getter y setter correspondientes ) de una Person
clase hipotética al valor de un TextField
componente:
TextField nameField = nuevo TextField ();Carpeta < Persona > carpeta = nueva Carpeta <> (); aglutinante . bind ( nameField , Person :: getName , Person :: setName );
Plantillas HTML
Vaadin Flow permite la definición de plantillas HTML con comunicación automatizada cliente-servidor y enlace de datos (cuando se utilizan plantillas basadas en polímeros ). El siguiente es un ejemplo de una plantilla basada en polímeros:
< link rel = "import" href = "../bower_components/polymer/polymer-element.html" > < link rel = "import" href = "../bower_components/vaadin-text-field/vaadin-text-field .html " >< dom-module id = "hello-world" > < template > < vaadin-text-field label = "Your name" value = "{{name}}" > vaadin-text-field > < botón al hacer clic = "saludar" > Haz clic en mí button > < div id = "greeting" > [[greeting]] div > template > < script > clase HelloWorld extiende Polymer . Elemento { static get is () { return 'hello-world' } } customElements . define ( HelloWorld . es , HelloWorld ); script > dom-module >
El siguiente fragmento de código muestra cómo conectar la plantilla anterior a un componente Java del lado del servidor:
@Tag ( "hello-world" ) @HtmlImport ( "src / hello-world.html" ) clase pública HelloWorld extiende PolymerTemplate < HelloWorld . HelloWorldModel > { La interfaz pública HelloWorldModel extiende TemplateModel { String getName (); void setGreeting ( saludo de cadena ); } @EventHandler private void greet () { getModel (). setGreeting ( "Hola," + getModel (). getName ()); } }
Personalización de apariencia
La personalización de la apariencia se puede realizar con CSS , estilos personalizados HTML o mediante la configuración de temas prefabricados.
Integración de primavera
Vaadin Flow incluye la integración de Spring Framework 5 y Spring Boot 2.
Certificaciones
Vaadin ofreció 2 pistas de certificación pagas que se toman en línea (no disponibles a partir del 8 de noviembre de 2019). Esto fue para mostrar las habilidades y el conocimiento del desarrollador sobre Vaadin Framework y herramientas relacionadas, para el desarrollo exitoso de aplicaciones web.
- Examen en línea de Vaadin para desarrollador certificado de Vaadin 7
- Examen en línea de Vaadin para desarrollador certificado de Vaadin 8
Para aprobar la certificación, necesitaba pasar por toda la documentación y haber completado un par de aplicaciones web utilizando el marco. Los exámenes también evalúan sus conocimientos en ciertas áreas de Java SE, Java EE, GWT (Google Web Toolkit) y HTML / JS / CSS.
Las certificaciones para Vaadin 8, 10 y 14 ya están disponibles, desde el lanzamiento del Learning Center el 3 de diciembre de 2019. Consisten en una serie de videos divididos en dos pistas principales, Foundation y Professional, y una prueba final para obtener la certificación.
Ver también
- Lista de marcos de aplicaciones web enriquecidos
Referencias
- ^ "Lanzamiento de Vaadin 19.0.9 · vaadin / plataforma · GitHub" . GitHub . Consultado el 14 de junio de 2021 .
- ^ "Lanzamiento de Vaadin 20.0.4 · vaadin / plataforma · GitHub" . GitHub . Consultado el 5 de julio de 2021 .
- ^ "Liberar Vaadin 14.6.5 · vaadin / plataforma · GitHub" . GitHub . Consultado el 29 de junio de 2021 .
- ^ "Lanzamiento de Vaadin 8.13.2 · vaadin / framework · GitHub" . GitHub . Consultado el 12 de julio de 2021 .
- ^ "Michael" Monty "Widenius invirtiendo en finlandés IT Mill" . Invierte en Finlandia. Archivado desde el original el 20 de julio de 2011 . Consultado el 31 de enero de 2009 .
- ^ Bueno, Matt. "Monty Widenius invierte en el acto II: IT Mill" . Noticias CNET . Archivado desde el original el 11 de marzo de 2016 . Consultado el 31 de enero de 2009 .
- ^ Vaadin. "Vaadin lanza Vaadin Framework 8" . www.prnewswire.com .
- ^ Vaadin. "Vaadin moderniza el desarrollo de Java con su mayor lanzamiento hasta la fecha: Vaadin 10" . www.businessinsider.com .
- ^ "Lanzamiento de Vaadin 12.0.0 en GitHub" .
- ^ "Lanzamiento de Vaadin 13.0.0 en GitHub" .
- ^ "Lanzamiento de Vaadin 14.0.0 en GitHub" .
- ^ "Lanzamiento de Vaadin 14.2.0 en GitHub" .
- ^ "pnpm Administrador de paquetes rápido y eficiente en espacio en disco" .
- ^ "Versión 2.0.10 - Versión de mantenimiento · vaadin / flow · GitHub" . GitHub .
- ^ "Release Vaadin Flow 3.0.0.alpha1 · vaadin / flow · GitHub" . GitHub .
Otras lecturas
- Duarte, A. (2018) Aplicaciones centradas en datos con Vaadin 8 . Packt Publishing.
- Frankel, N. (2013) Learning Vaadin 7, segunda edición . Packt Publishing.
- Duarte, A. (2013) Vaadin 7 UI Design by Example: Beginner's Guide . Packt Publishing.
- Holan, J. y Kvasnovsky, O. (2013) Libro de cocina Vaadin 7 . Packt Publishing.
- Taylor C. (2012) Recetas Vaadin . Packt Publishing.
- Frankel, N. (2011) Aprendiendo Vaadin . Packt Publishing.
- Grönroos, M. (2010) Libro de Vaadin . Vaadin Ltd.
enlaces externos
- Página web oficial