Introducción a Vaadin

0
14733

En este tutorial vamos a ver una introducción a Vaadin, que es un framework de la capa de vista en Java

Índice de contenidos

1. Introducción

Vaadin es un framework de desarrollo de SPA que permite escribir el código de dichas aplicaciones en Java o en cualquier otro lenguaje soportado por la JVM 1.6+. Esto permite la programación de la interfaz gráfica en lenguajes como Java 8, Scala o Groovy, por ejemplo.

Uno de las características diferenciadores de Vaadin es que, contrario a las librerías y frameworks de JavaScript típicas, presenta una arquitectura centrada en el servidor, lo que implica que la mayoría de la lógica es ejecutada en los servidores remotos. Del lado del cliente, Vaadin está construido encima de Google Web Toolkit, con el que puede extenderse.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: MacBook Pro Intel Core 2 Duo 8GB RAM.
  • Sistema Operativo: Mac OS Yosemite 10.10
  • Entorno de desarrollo: Eclipse Mars 4.5
  • JRE 1.8.0_51
  • Apache Maven 3.3.3
  • Apache Tomcat 8.0.24

3. Creación de un proyecto Vaadin

Para empezar a desarrollar aplicaciones en Vaadin se nos presentan dos alternativas muy sencillas:

  • Utilizar los plugins específicos para IDEs como NetBeans, Eclipse o IntelliJ (utilizan como gestor de dependencias Ivy)
  • Crear directamente un proyecto con Maven haciendo uso del arquetipo de aplicación con Vaadin.

En este tutorial se seguirá la segunda alternativa, ya que tenemos un mejor control de lo que estamos haciendo, reduciendos los niveles de «magia» considerablemente.

Empezamos creando el proyecto Vaadin en una terminal con Maven. Para ello utilizamos la última versión del arquetipo de aplicación de este tipo:

Iremos suministrando al asistente de Maven los datos de grupo y nombre de artefacto de nuestro proyecto. En mi caso:

  • Grupo: com.autentia.vaadin.
  • Artefacto: tutorial_vaadin.
  • Version: la por defecto, 1.0-SNAPSHOT.

Si todo ha ido bien, podremos cambiar al directorio creado y realizar una instalación de la aplicación Vaadin:

Dependiendo de si ya tenemos las dependencias en nuestro repositorio local de Maven, ésta última operación será más o menos larga. Lo que se llevará la mayoría de tiempo es la compilación de los módulos de Widgets de Vaadin personalizados (esqueleto MyAppWidgetSet auto-generado por el arquetipo).

Como alternativa, podemos hacer uso del objetivo verify, que construirá y pasarás las pruebas a nuestro proyecto:

Vamos a arrancar la aplicación con el servidor Jetty empotrado en el arquetipo de Vaadin:

Si ahora abrimos un navegador y accedemos a http://localhost:8080/ , veremos la aplicación de muestra de Vaadin ejecutándose:

intro_vaadin_1

3.1. Importación a un proyecto Eclipse

Importemos ahora el proyecto en Eclipse mediante «Import Maven Project».

NOTA: Si al realizar la importación del proyecto, Eclipse nos muestra un mensaje de error parecido a «Plugin execution not covered by lifecycle configuration […] update-theme» lo que me ha funcionado a mí es añadir el objetivo en conflicto (en este caso, update-theme) dentro de lifecycle-mapping de org.eclipse.me2:

pom.xml

4. Fundamentos de la clase UI

Entre los ficheros fuente que nos ha generado el arquetipo Maven de Vaadin, el más interesante es MyUI.java:

MyUI.java

Repasemos las partes más interesantes de este código:

  • Líneas 1-2: Mediante anotaciones, le decimos a Vaadin qué temas y conjunto de Widgets vamos a hacer uso. También podremos decirle el título de la página con @Title, por ejemplo.
  • Línea 3: La superclase UI representa una página que se mostrará en el cliente.
  • Línea 6: El método init() es el punto de entrada de toda subclase de UI. Su objetivo básico es la inicialización y configuración de la interfaz gráfica visible al usuario. Es ejecutada en cada refresco de página.
  • Línea 7: Como muchos frameworks de este tipo, la organización de la interfaz viene dada por la definición de layouts.
  • Líneas 11-12: Fácil definición de funciones de callback para la comunicación asíncrona con el servidor.
  • Líneas 22-24: Ya que hace uso de la especificación 3.0+ de Servlets, no existe necesidad de un archivo web.xml, si no que mediante anotaciones podemos exponer nuestra clase con una URI personalizada.

5. Layouts programáticos vs declarativos

A la hora de definir layouts, Vaadin nos permite elegir entre hacerlo mediante código Java (muy parecido a la definición con Swing) o haciendo uso de ficheros HTML específicos.

Por ejemplo, la creación de un layout de un formulario, en su versión programática sería algo parecido a lo siguiente:

SampleForm.java

La versión declarativa de este snippet constaría de un fichero HTML de definición de los espacios donde reside cada componente, la clase Java que lee dicho fichero y por último, el propio código de lógica del formulario.

SampleFormLayout.html

SampleFormLayout.java

SampleForm.java

El resultado de ambos es el mismo:

intro_vaadin_2

6. Conclusiones

Vaadin presenta una alternativa interesante a toda la fiebre de librerías y frameworks del lado del cliente con JavaScript para la creación de aplicaciones de una sola página, rápidas e interactivas, volviendo a la arquitectura del lado servidor. Bien vale que se le eche un ojo, ya que su comunidad no hace más que crecer.

7. Referencias

Dejar respuesta

Please enter your comment!
Please enter your name here