Spring Vaadin Hibernate Tutorial > 7. Introducción a Vaadin.

Escrito por 2 junio, 2016Desarrollo de software
Tutorial Spring Vaadin Hibernate, Introducción a Vaadin

En esta séptima entrada del tutorial Spring Vaadin Hibernate vamos a centrarnos en la capa web. Ya hemos explicado anteriormente todo lo relacionado con las capas de persistencia y negocio, ahora nos falta centrarnos en la parte más visual.

Tal y como comentamos desde el principio vamos a hacer uso del framework Vaadin.

¿Qué es Vaadin?

Vaadin es un framework Java para la creación de aplicaciones web. Podíamos haber elegido cualquiera de los frameworks web existentes como Spring MVC, JSF o GWT, pero nos decantamos por Vaadin debido a la serie de importantes características que nos ofrece:

  • Toda la programación se realiza en Java, por lo que no es necesario tener un gran nivel en HTML, CSS o JavaScript.
  • Permite la integración con Spring.
  • La documentación que existe sobre este framework es extensa y muy bien realizada por la propia organización de Vaadin.
  • Relativo a la creación de tests:
    • Facilidad a la hora de crear test unitarios.
    • Permite crear tests unitarios de la capa cliente de forma sencilla.
    • Creación de tests basados en pantallazos.
  • Es responsive, por lo que sólo tendremos que programar una vez para diferentes dispositivos.

Configurando nuestra aplicación y su despliegue

Las aplicaciones de Vaadin se despliegan como aplicaciones web de Java, que pueden tener diversos servlets. Por lo que para empezar vamos a hacer una pequeña introducción sobre qué es un servlet.

Los servlets son programas Java que admiten peticiones HTTP a través de un navegador y devuelven una respuesta (normalmente en formato HTML). A su vez existen contenedores de servlets, los cuales reciben peticiones HTTP y son capaces de redireccionar estas peticiones a los servlets correspondientes.

Para nuestro ejemplo hemos hecho uso de Apache Tomcat como contenedor de servlets, y haremos uso de estos servlets para la interacción del usuario con nuestra aplicación.

Lo primero de todo es crear nuestra estructura de directorios para alojar nuestra aplicación web. Dado que debemos mantener una coherencia entre el nombre de los módulos y su uso, la parte web de nuestro proyecto se alojará en el módulo web, quedando estructurado de la siguiente forma:

web

A continuación deberemos crear y configurar el fichero web.xml que se encuentra dentro de la directorio WEB-INF. ¿Para qué sirve este archivo? Es el encargado de describir cómo se debe desplegar nuestra aplicación web.

Parámetros importantes del fichero web.xml

  • context-param: se define un parámetro y su valor para el mismo. En este caso indicamos que el valor para productionMode es false, lo que nos permite acceder a funcionalidades de depuración como, por ejemplo, la consola del servidor.
  • listener: indicamos que el encargado de “escuchar” las peticiones que se hagan a nuestro contenedor de servlets es el definido en listener-class.
  • servlet: se utiliza para definir los parámetros del propio servlet, como son:
    • servlet-name: el nombre que le daremos a nuestro servlet.
    • servlet-class: indicamos la clase de nuestro servlet. En nuestro caso, ya que estamos trabajando con Vaadin y Spring, será de la clase com.vaadin.spring.server.SpringVaadinServlet.
    • init-param: parámetros de inicio del servlet. La diferencia entre definir un parámetro en init-param o en context-param es que los valores añadidos en init-param sólo pueden ser accesibles para ese servlet en particular, mientras que si los declaramos en context-param serán accesible para todos los servlets definidos en el web.xml. En nuestro caso indicamos que tenemos un atributo con el nombre UI cuyo valor se encuentra en es.mhp.ui.MainUI, que no es más que la clase donde hemos definido nuestra interfaz de usuario (de la que hablaremos a continuación).
  • servlet-mapping: en este tag definiremos qué servlet atenderá cada petición en función de la URL:
    • servlet-name: el servlet al que estamos haciendo mención.
    • url-pattern: especificamos sobre qué URLs se realiza el mapping. De manera que si el usuario accede a una URL que cumpla la condición descrita en el tag url-pattern, será ese servlet el que conteste a la petición. Para entender mejor el funcionamiento de este atributo: http://docs.roguewave.com/hydraexpress/3.5.0/html/rwsfservletug/4-3.html
  • contextConfigLocation: mediante este parámetros indicamos a Spring que archivos de configuración debe abrir. Nosotros indicaremos que quién definirá esta configuración será el archivo applicationContext.xml, explicado en una anterior entrada relativa a Spring.

Primeros pasos en Vaadin

Una aplicación Vaadin tiene una o más interfaces de usuario que deben de heredar de la clase UI (User Interface) de Vaadin. Y una UI es parte de la página web en la que Vaadin se ejecuta.

Como ya comentamos anteriormente, tenemos la clase MainUI donde definimos nuestra interfaz de usuario:

Características importantes de esta clase:

  • @Theme: indicamos que el estilo a utilizar será valo, el cual viene ya creado por Vaadin.
  • @SpringUI: indicamos que esta clase será nuestra UI (interfaz de usuario).
  • extends UI: como podemos observar, nuestra UI debe extender de la clase abstracta UI de Vaadin.
  • SpringViewProvider y Navigator: dado que vamos a trabajar con vistas a nuestro proyecto, Spring nos provee de su propia implementación para ellas. Lo que necesitamos es hacer uso de la implementación de la clase SpringViewProvider que junto con el Navigator de Vaadin van a permitirnos de forma sencilla la transición entre las diferentes vistas. ¿Qué es una vista? Las vistas son las encargadas de representar componentes visuales (botones, formularios, desplegables, etc…) en pantalla. Algunos ejemplos de los componentes que implementa Vaadin podemos encontrarlos en http://demo.vaadin.com/sampler/
  • VerticalLayout: nos encontramos ante un componente de Vaadin, el cual contendrá todas las vistas que utilizará nuestro navigator. La característica principal de este componente es que los elementos que le añadamos estarán alineados de forma vertical. Además, hay que tener en cuenta que ocupa el 100% del ancho y su altura no está definida, de modo que la altura se ajustará al contenido de forma automática.
  • @WebListener: programa diseñado para escuchar los diferentes eventos que se producen en el ciclo de vida de la aplicación web. En nuestro caso heredamos de ContextLoaderListener de Spring.

A continuación iniciamos nuestro navegador, el cual recibe como parámetro la UI (es decir, this) y un contenedor de componentes. Seguidamente añadimos las vistas al navegador mediante el viewProvider, encargado de obtener las vistas del contexto de Spring.

Ahora solo nos falta añadir un botón, que al ser pulsado le indicará a nuestro navigator que debe mostrar la vista AddressView por medio del método navigateTo.

Vistas

Ya tenemos claro como navegar a una vista, y ahora veremos un sencillo ejemplo de una vista de Spring. Seguimos con AddressView:

  • Con la anotación @SpringView  indicamos a Spring que esta vista debe estar en su contexto y que su nombre es el que indicamos con name (es necesario esta anotación para que el viewProvider pueda obtener estas vista).
  • Dado que siempre que podemos generalizar lo llevamos a cabo, en este caso todas nuestras vistas heredarán de AbstractView. Una nota importante es darnos cuenta que ya que nos encontramos en la capa de negocio, por lo que las clases que manejaremos deben ser DTOs (como ya explicamos en la cuarta entrada del tutorial).
  • IAddressService: puesto que nos encontramos en la vista AddressView, es aquí donde debemos mostrar los datos correspondientes a la entidad Address, por ello inyectamos las dependencias que necesitamos para poder realizar las operaciones de acceso a datos de esta entidad a través de los ya definidos Services.

Vamos a ver como se crearía un grid (componente de Vaadin similar a una tabla) con datos obtenidos de la base de datos a través del servicio en cuestión:

Es decir, los pasos que hemos seguido para llevarlo a cabo son los siguientes:

  1. Realizamos la llamada a través de nuestro service (variable iAddressService) para que obtenga estos datos (método findAllAddresses).
  2. Creamos un contenedor de beans de tipo AddressDTO y le añadimos nuestro conjunto de DTOs obtenidos en el paso anterior.
  3. Creamos un grid donde añadimos este contenedor de beans.
  4. Añadimos a un VerticalLayout el grid con todos nuestros DTOs.

Ejecutar nuestra aplicación

Si hemos seguido los pasos anteriores ya estamos listos para poder comprobar el funcionamiento de nuestra aplicación. Para ello deberemos copiar el artefacto, archivo .war, que genera nuestro proyecto (en el directorio /web/target de nuestra aplicación) y copiarlo en la carpeta webapps de nuestro servidor Apache Tomcat. Una vez copiado debemos arrancar nuestro servidor ejecutando el archivo startup de dentro de la carpeta bin del Tomcat. Si queremos poder analizar más detalladamente el funcionamiento de nuestra aplicación (hacer debug) arrancaremos el servidor mediante la ejecución del archivo debug en la misma carpeta.

Dado que cada vez que compilemos necesitaremos realizar este procedimiento para poder mostrar los cambios realizados, en MHP Software hacemos uso de un script que nos facilita esta tarea, automatizando el proceso. Puedes consultar la entrada “Despliegue de una aplicación web en Tomcat con Intellij IDEA Community Edition” en el blog , donde se explica cómo llevar a cabo la automatización señalada.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.

ACEPTAR
Aviso de cookies