Vaadin Framework - Instalar las Herramientas de Desarrollo - Una Referencia del Conjunto de Herramientas

Una Referencia del Conjunto de Herramientas
Esta sección presenta una referencia al entorno de desarrollo. Vaadin es compatible con una amplia variedad de herramientas, por lo que puede utilizar cualquier IDE para escribir el código, casi cualquier servidor web Java para desplegar la aplicación, utilizar la mayoría de los navegadores web y cualquier plataforma de sistema operativo compatible con Java.

En este ejemplo, utilizamos el siguiente conjunto de herramientas:

  • Windows, Linux, o Mac OS X
  • Oracle Java SE 8
  • Eclipse IDE for Java EE Developers
  • Apache Tomcat 8.0 (Core)
  • Navegador Google Chrome
  • Framework Vaadin

El anterior conjunto de herramientas son una buena opción de herramientas, pero puede utilizar casi cualquier herramienta con la que se sienta cómodo.

Recomendamos utilizar Java 8 para desarrollar con Vaadin, pero debe asegurarse de que todo el conjunto de herramientas sea compatible.
Figura 1. Procesos y Desarrollo con el Conjunto de Herramientas

Los Procesos y Desarrollo con el Conjunto de Herramientas ilustran el conjunto de herramientas de desarrollo. Desarrolla tu aplicación como un proyecto de Eclipse. El proyecto debe incluir, además de su código fuente, las librerías de Vaadin. También puede incluir temas (estilos) específicos del proyecto.

Es necesario compilar y desplegar un proyecto en un contenedor web antes de poder utilizarlo. Puede desplegar un proyecto a través de la Plataforma de Herramientas Web (WTP) para Eclipse (incluida en el paquete de Eclipse EE), el cual permite el despliegue automático de aplicaciones web desde Eclipse. También puede desplegar un proyecto manualmente, creando un archivo de aplicación web (WAR) y desplegarlo en el contenedor web.

Vaadin Framework - Instalar las Herramientas de Desarrollo - Visión General

Visión General
Puede desarrollar aplicaciones Vaadin en prácticamente cualquier entorno de desarrollo que tenga el SDK de Java y se despliegue en un contenedor Servlet Java. Puede utilizar Vaadin con cualquier IDE de Java o ningún IDE en lo absoluto. Vaadin tiene un soporte especial para los IDE de Eclipse y NetBeans, así como para IntelliJ IDEA.
pasos de instalación
Figura 1. Pasos de instalación de Vaadin

Administrar Vaadin y otras librerías Java de forma manual puede ser tedioso, por lo que es recomendable usar un sistema de compilación que administre dependencias automáticamente. Vaadin se distribuye en el repositorio central de Maven y puede utilizar con cualquier sistema de gestión de dependencias o de compilación que pueda acceder a los repositorios de Maven, como Ivy o Gradle, además de Maven.

Vaadin tiene una multitud de opciones de instalación para diferentes IDEas y administradores de dependencias. También puede instalarlo desde un paquete de instalación:

  • Con el IDE de Eclipse, utilice el Plugin de Vaadin para Eclipse, como se describe en "Plugin de Vaadin para Eclipse"
  • Con el complemento de Vaadin para el IDE de NetBeans ("Creación de un Proyecto con el IDE de NetBeans") o IntelliJ IDEA
  • Con Maven, Ivy, Gradle u otro gestor de dependencias compatible con Maven, en Eclipse, NetBeans, IDEA o utilizando la línea de comandos, como se describe en "Utilizar Vaadin con Maven"
  • Desde el paquete de instalación sin administración de dependencias, como se describe en "Paquete de Instalación de Vaadin"

Framework Vaadin - Introducción - Antecedentes

Antecedentes
El Framework Vaadin no se escribió de la noche a la mañana. Después de trabajar con interfaces de usuario web desde el comienzo de la Web, un grupo de desarrolladores se reunieron en el año 2000 para formar IT Mill. El equipo tuvo el deseo de desarrollar un nuevo paradigma de programación que apoyara la creación de interfaces de usuario reales para aplicaciones reales usando un lenguaje de programación real.

La librería fue originalmente llamada Millstone Library. La primera versión fue utilizada en una gran aplicación de producción que IT Mill diseñó e implementó para una compañía farmacéutica internacional. IT Mill hizo la aplicación en el año 2001 y todavía está en uso. Desde entonces, la compañía ha producido decenas de grandes aplicaciones empresariales con la librería y ha demostrado su capacidad para resolver problemas difíciles con facilidad. Millstone 3 fue lanzado como código abierto en 2002.

El progreso a menudo ha requerido decisiones difíciles para evitar llevar una carga hereditaria innecesaria en el futuro. Sin embargo, nuestro objetivo siempre ha sido mantener las migraciones fáciles.

Versión 4 con renderizado de una sola página
La próxima generación de la librería, IT Mill Toolkit 4, fue lanzado en el año 2006. Introdujo un motor de presentación completamente nuevo basado en AJAX. Esto permitió el desarrollo de aplicaciones AJAX sin necesidad de preocuparse por las comunicaciones entre el cliente y el servidor.

Versión 5 Alimentada por GWT
IT Mill Toolkit 5, lanzado inicialmente a finales del año 2007, dio un paso importante hacia AJAX. La representación del lado del cliente de la interfaz de usuario se reescribió completamente utilizando GWT, Google Web Toolkit.

IT Mill Toolkit 5 introdujo muchas mejoras significativas tanto en la API del servidor como en la funcionalidad. Reescribir el motor del lado del cliente con GWT permitió el uso de Java tanto en el cliente como en el servidor. La transición de JavaScript a GWT hizo que el desarrollo e integración de componentes personalizados y la personalización de componentes existentes fueran mucho más fáciles que antes, y también permite una fácil integración de componentes GWT existentes. La adopción de GWT en el lado del cliente, por sí sola, no provocó cambios en la API del servidor, porque GWT es una tecnología de navegador que se oculta detrás de la API. También el tema (estilos) fue completamente revisado en IT Mill Toolkit 5.

La Versión 5 fue publicada bajo la Licencia Apache 2, una licencia de código abierto sin restricciones, para crear una expansión más rápida de la base de usuarios y hacer posible la formación de una comunidad de desarrolladores.

Nacimiento de la Versión 6 de Vaadin
IT Mill Toolkit fue renombrado como Vaadin Framework, o Vaadin en resumen, en la primavera del 2009. Más tarde IT Mill, la empresa, también fue renombrada como Vaadin Ltd. Vaadin significa en finlandés una hembra adulta reno de montaña semi-domesticado.

Con Vaadin 6, el número de desarrolladores que utilizan el framework explotó. Junto con la versión, fue lanzado el Plugin de Vaadin para Eclipse, ayudando a la creación de proyectos Vaadin. La introducción de Vaadin Directory a principios del 2010 le dio un nuevo impulso, ya que el número de componentes disponibles se multiplicó casi de la noche a la mañana. Muchos de los componentes originalmente experimentales han madurado desde entonces y ahora son utilizados por miles de desarrolladores. En el año 2013, estamos viendo un tremendo crecimiento en el ecosistema alrededor de Vaadin. El tamaño de la comunidad de usuarios, al menos si se mide por la actividad del foro, ya ha superado los frameworks del lado del servidor de la competencia e incluso GWT.

La Revisión Mayor con Vaadin 7
Vaadin 7 fue una revisión importante que cambió la API de Vaadin mucho más de lo que hizo Vaadin 6. Se volvió más orientado a la web que Vaadin 6. Estamos haciendo todo lo posible para ayudar a que Vaadin se eleve alto en el universo web. Parte de este trabajo es fácil y casi rutinario - corrección de errores e implementación de características. Pero ir más alto también requiere estar más determinación. Este fue uno de los objetivos de Vaadin 7: rediseñar el producto para que la nueva arquitectura permita a Vaadin superar muchos retos de larga data.

La inclusión de Google Web Toolkit en Vaadin 7 fue un desarrollo significativo, ya que significaba que Vaadin ahora también ofrece soporte para GWT. Cuando Google abrió el desarrollo de GWT en el verano de 2012, Vaadin (la compañía) se unió al nuevo comité de dirección de GWT. Como miembro del comité, Vaadin puede trabajar hacia el éxito de GWT como una fundación de la comunidad de desarrollo web Java.

Vaadin Framework 8 con la Nueva API de Vinculacion de Datos
El mayor cambio en Vaadin Framework 8 es la modernización completa de la API de vinculación de datos. Vincular componentes a orígenes de datos es una de las principales características del Framework Vaadin, ya que elimina la necesidad de mezclar explícitamente datos entre componentes y datos de objetos, normalmente beans. El antiguo modelo de datos fue diseñado en tiempos anteriores a las características de Java tales como los genéricos. Mientras que el modelo de datos fue mejorado a lo largo de los años, fue fundamentalmente anticuado y complejo de utilizar. La nueva API de vinculación de datos funciona con mucha más fluidez en Java 8, especialmente con las características de Java 8, tales como expresiones y flujos lambda. Por lo tanto, para poder utilizar completamente las nuevas características de Java 8, hemos planteado los requisitos de Java 6 a 8. El cambio que deber hacer el Framework Vaadin hasta la fecha con las tecnologías de Java más actuales utilizadas por los desarrolladores.

Vaadin Framework - Introducción - Objetivos y Filosofía

Objetivos y Filosofía
En pocas palabras, la ambición de Vaadin es ser la mejor herramienta posible cuando se trata de crear interfaces de usuario web para aplicaciones empresariales. Es fácil de adoptar, ya que está diseñado para dar soporte a los programadores de nivel básico y avanzado, así como a expertos en usabilidad y diseñadores gráficos.

Al diseñar Vaadin, hemos seguido la filosofía inscrita en las siguientes reglas.

Herramienta adecuada para el propósito correcto
Debido a que nuestros objetivos son altos, el enfoque debe ser claro. Vaadin está diseñado para crear aplicaciones web. No está diseñado para crear sitios web o demos publicitarios. Usted puede encontrar, por ejemplo, JSP/JSF más adecuado para tales fines.

Simplicidad y facilidad de mantenimiento
Hemos decidido destacar la solidez, simplicidad y facilidad de mantenimiento. Esto implica seguir las mejores prácticas bien establecidas en los frameworks de interfaz de usuario y garantizar que nuestra implementación represente una solución ideal para su propósito sin interferencias o presumir.

Elección entre IU declarativas y dinámicas
La Web está inherentemente centrada en el documento y está muy vinculada a la presentación declarativa de las interfaces de usuario. Vaadin permite diseños declarativos de vistas, diseños e incluso interfaces de usuario completas. Vaadin Designer permite crear visualmente diseños de este tipo. Sin embargo, el enfoque programático mediante la construcción de componentes de interfaces de usuario de Java libera al programador de sus limitaciones. Para crear vistas altamente dinámicas, es más natural crearlas mediante programación.

Las herramientas no deberían limitar su trabajo
No debería haber ningún límite en lo que puede hacer con el framework: si por alguna razón los componentes de interfaz de usuario no admiten lo que necesita lograr, debe ser fácil agregar nuevos a su aplicación. Cuando se necesite crear nuevos componentes, el papel del framework es fundamental: este facilita la creación de componentes reutilizables que son fáciles de mantener.

Vaadin Framework - Introducción - Soporte para IDEs

Soporte para IDEs
Aunque Vaadin no está vinculado a ningún IDE específico, y de hecho puede utilizarlo fácilmente sin ningún IDE, proporcionamos soporte especial para el IDE Eclipse, IntelliJ IDEA y el IDE NetBeans, que se han convertido en el entorno más utilizado para el desarrollo de Java.


Un plug-in oficial de Vaadin está disponible para los IDE de Eclipse y NetBeans. Ayudan a:


  • crear nuevos proyectos Vaadin,
  • crear temas personalizados,
  • crear widgets personalizados del lado del cliente,
  • descargar complementos desde el directorio de Vaadin, y
  • actualizar fácilmente a una versión más reciente de la biblioteca de Vaadin.

La disponibilidad de las características depende del IDE. La última edición de IntelliJ IDEA viene con soporte incorporado para Vaadin.


Vaadin Designer es un plug-in comercial disponible para el IDE Eclipse e IntelliJ IDEA. Permite la edición visual de diseños declarativos que puede utilizar en sus aplicaciones. Consulte "Vaadin Designer" para obtener más información.



Utilizar el plug-in Vaadin es la forma recomendada para instalar Vaadin para el desarrollo. La instalación de los IDE y de los complementos se describe en "Instalación de las Herramientas de Desarrollo". La creación de un nuevo proyecto Vaadin con cada IDE se describe en "Creación de un Proyecto Vaadin".

Vaadin Framework - Introducción - Ejemplo de la Aplicación de Tutorial

Ejemplo de la Aplicación de Tutorial
Sigamos la larga tradición de decir primero "¡Hola Mundo!" Cuando se aprende un nuevo framework de programación. Primero, utilizando la API principal del servidor.
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

@Title("My UI")
public class HelloWorld extends UI {
    @Override
    protected void init(VaadinRequest request) {
        // Crear el contenido raiz del diseño para la intefaz de usuario
        VerticalLayout content = new VerticalLayout();
        setContent(content);

        // Mostrar el saludo
        content.addComponent(new Label("Hola Mundo!"));

        // Tener un botón pulsable
        content.addComponent(new Button("Pulsame!",
            click -> Notification.show("Pulsado!")));
    }
}
Una aplicación Vaadin tiene una o más interfaces de usuario que extienden de la clase com.vaadin.ui.UI. Una interfaz de usuario es una parte de la página web en la que se ejecuta la aplicación Vaadin. Una aplicación puede tener varias interfaces de usuario en la misma página, especialmente en portales o en diferentes ventanas o pestañas. Una interfaz de usuario se asocia a una sesión de usuario, y una sesión se crea para cada usuario que utiliza la aplicación. En el contexto de nuestra interfaz de usuario Hola Mundo, basta con saber que se crea una sesión subyacente cuando el usuario accede primero a la aplicación abriendo la página, y se invoca en ese momento el método init().

El título de la página, que se muestra en el título de la ventana o pestaña del navegador, se define con una anotación. El ejemplo utiliza un componente de diseño como el contenido raíz de la interfaz de usuario, como es el caso con la mayoría de las aplicaciones de Vaadin, que normalmente tienen más de un componente. A continuación, crea un nuevo componente de interfaz de usuario Label, que muestra un texto simple y establece el texto en "Hola Mundo!". La etiqueta se agrega al diseño.

El ejemplo también muestra cómo crear un botón y manejar eventos clic del botón. El manejo de eventos se describe en "Eventos y Oyentes" y la parte práctica en "Manejo de Eventos con Oyentes". En Java 8, puede implementar oyentes con expresiones lambda, lo que simplifica significativamente el código del manejador.

El resultado de la aplicación Hola Mundo, cuando se abre en un navegador, se muestra en la Aplicación Hola Mundo.
Figura 1. Aplicación  Hola Mundo

Para ejecutar un programa, debe empaquetarlo como un paquete WAR de aplicación web y desplegarlo en un servidor, tal como se explica en "Despliegue de una Aplicación". Durante el desarrollo, normalmente se despliega en un servidor de aplicaciones integrado con el IDE.

Vaadin Framework - Introducción - Visión General

Visión General

Vaadin Framework es un framework de desarrollo de aplicaciones web Java que está diseñado para facilitar la creación y el mantenimiento de interfaces de usuario de alta calidad basadas en la web. Vaadin soporta dos modelos diferentes de programación: del lado del servidor y del lado del cliente. El modelo de programación basado en servidor es el más poderoso. Le permite olvidarse de las interfaces de usuario web y programar de forma similar a como programaría una aplicación de escritorio con un conjunto de herramientas Java convencionales como AWT, Swing o SWT. Pero más fácil.

Aunque la programación web tradicional es una forma divertida de pasar el tiempo aprendiendo nuevas tecnologías web, es probable que desee ser productivo y concentrarse en la lógica de la aplicación. El framework Vaadin del lado del servidor se encarga de gestionar la interfaz de usuario en el navegador y las comunicaciones AJAX entre el navegador y el servidor. Con el enfoque Vaadin, no es necesario aprender y tratar directamente con las tecnologías del navegador, como HTML o JavaScript.

Arquitectura de una aplicación Vaadin
Figura 1. Arquitectura de una aplicación Vaadin

La arquitectura de una aplicación Vaadin ilustra la arquitectura básica de aplicaciones web hechas con Vaadin. La arquitectura de aplicaciones del lado del servidor consiste en el framework del lado del servidor y un motor del lado del cliente. El motor se ejecuta en el navegador como código JavaScript, el cual representa la interfaz de usuario, y la interacción del usuario con el servidor. La lógica de la interfaz de usuario de una aplicación se ejecuta como un Servlet Java en un servidor de aplicaciones Java.

Como el motor del lado del cliente se ejecuta como JavaScript en el navegador, no se necesitan los plugins del navegador para utilizar aplicaciones hechas con Vaadin. Esto le da una ventaja sobre los frameworks basados en Flash, Java Applets, u otros plugins. Vaadin cuenta con el apoyo de Google Web Toolkit para una amplia gama de navegadores, de modo que el desarrollador no necesita preocuparse por el soporte del navegador.

Como HTML, JavaScript, y otras tecnologías de navegador son esencialmente invisibles para la lógica de aplicación, puede pensar en el navegador web sólo como una plataforma de cliente ligero. Un cliente ligero visualiza la interfaz de usuario y comunica los eventos de usuario al servidor en un nivel bajo. La lógica de control de la interfaz de usuario se ejecuta en un servidor web Java, junto con la lógica de negocio. Por el contrario, una arquitectura cliente-servidor normal con una aplicación de cliente dedicada incluiría una gran cantidad de comunicaciones específicas de la aplicación entre el cliente y el servidor. Básicamente eliminar el nivel de interfaz de usuario de la arquitectura de aplicación hace que nuestro enfoque sea muy eficaz.

Detrás del modelo de desarrollo controlado por el servidor, Vaadin hace el mejor uso de técnicas AJAX (Asynchronous JavaScript y XML, consulte "AJAX" para una descripción) que hacen posible crear aplicaciones RIA (Rich Internet Applications) que son tan sensibles e interactivas como aplicaciones de escritorio.

Además del desarrollo de aplicaciones Java del lado del servidor, puede desarrollar del lado del cliente creando nuevos widgets en Java, e incluso aplicaciones del lado del cliente que funcionan únicamente en el navegador. El framework del lado del cliente Vaadin incluye Google Web Toolkit (GWT), el cual proporciona un compilador de Java para JavaScript que se ejecuta en el navegador, así como un framework de interfaz de usuario con todas las características. Con este enfoque, Vaadin es Java puro en ambos lados.

Vaadin utiliza un motor de lado del cliente para representar la interfaz de usuario de una aplicación del lado del servidor en el navegador. Todas las comunicaciones cliente-servidor están bien ocultas bajo el capó. Vaadin está diseñado para ser extensible, y de hecho puede utilizar cualquier widget de terceros fácilmente, además del repertorio de componentes que ofrece Vaadin. De hecho, puede encontrar cientos de complementos en el directorio Vaadin.

Vaadin permite una separación flexible entre el aspecto, la estructura y la lógica de interacción de la interfaz de usuario. Puede diseñar los diseños de forma programática o declarativa, al nivel de su elección. El aspecto final se define en temas CSS o Sass, tal como se describe en "Temas".

Esperamos que esto sea suficiente sobre la arquitectura básica y las características de Vaadin por ahora. Puedes leer más sobre esto más adelante en "Arquitectura", o saltar directamente a cosas más prácticas en "Escribir una Aplicación Web del Lado del Servidor".