Vaadin Framework: migrando desde Vaadin 6 a Vaadin 7

Vaadin13Tras el reciente lanzamiento de Vaadin 7, a continuación os describo algunos de los cambios que considero son los más importantes que se han introducido en la nueva versión.

La mayoría de las APIs de Vaadin 7 son compatibles con Vaadin 6, pero hay algunos cambios importantes que afectan a las aplicaciones.

Cambiar a Vaadin 7 trae una serie de características diseñadas para hacer el desarrollo más fácil. Se trata de una versión donde se han mejorado algunas partes de la API que se habían estancado y con una necesidad de mejora desde hace años.

La gran mayoría de la API no ha cambiado, prácticamente muchas partes en los últimos 10 años solo han tenido cambios de nombre de paquete. Mientras que cada aplicación requiere algunos pasos de migración, los pasos mínimos necesarios para muchas aplicaciones son bastante simples, aunque algunos cambios adicionales pueden ser útiles para beneficiarse de algunas de las nuevas características tales como la mejora de enlace a datos (data binding).

El primer paso es actualizar las bibliotecas de Vaadin. Mientras que Vaadin 6 tenía un simple JAR y diferentes JARs de GWT, Vaadin 7 se empaqueta como múltiples JARs que incluyen también GWT. Si estamos utilizando la última versión del plug-in de Vaadin para Eclipse, actualizando la versión, crea una configuración de Ivy, pero también se puede descargar un paquete ZIP con todos los archivos JARs necesarios y sus dependencias.

El primer cambio de código que se aplica a las aplicaciones Vaadin 6 concierne a la clase com.vaadin.Application que ya no existe. El punto de entrada principal para la aplicación es ahora un com.vaadin.ui.UI, que sustituye a Application y su ventana principal. Al cambiar a UI, también conseguimos soporte multi-ventana sin necesidad de hacer trucos para hacer que funcione. Por otro lado, una nueva UI (interfaz de usuario) se crea en la recarga de la página. Si preferimos mantener el estado de la UI (interfaz de usuario) a través de refrescar la página de la misma manera que lo hace Vaadin 6, sólo tenemos que añadir la anotación @PreserveOnRefresh en nuestra clase UI.

Para una mínima migración, sin embargo, es posible sustituir la Application con LegacyApplication y su ventana principal con LegacyWindow y posponer un poco lo tratado con UIs, pero cuando migramos a UIs, sacamos más provecho de sus nuevas características. La clase Window ahora solo se utiliza para “sub-windows” (ventanas flotantes dentro de una página), no a nivel de browser “browser level” ventanas o pestañas (la página web entera).

Un ejemplo que aclararía mejor las cosas sería:

Vaadin 6:

package com.example.myexampleproject;
 
import com.vaadin.Application;
import com.vaadin.ui.*;
 
public class V6tm1Application extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("V6tm1 Application");
		Label label = new Label("Hello Vaadin!");
		mainWindow.addComponent(label);
		setMainWindow(mainWindow);
		setTheme(“mytheme”);
	}
}

Vaadin 7:

package com.example.myexampleproject;
 
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.*;
 
@Theme("mytheme")
public class MyApplicationUI extends UI {
 
    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout view = new VerticalLayout();
        view.addComponent(new Label("Hello Vaadin!"));
        setContent(view);
    }
}

Además, reemplazar com.vaadin.terminal.gwt.server.ApplicationServlet por com.vaadin.server.VaadinServlet en web.xml y su parámetro “application” por “UI“, señalando a la clase UI y la aplicación está lista para funcionar. Del mismo modo, ApplicationPortlet se ha convertido en VaadinPortlet.

Algunos nombres de paquetes también se han cambiado, pero una reorganización simple de importación en el IDE lo soluciona.

Si tenemos un tema personalizado, importar, por ejemplo, “../reindeer/legacy-styles.css” en lugar de “../reindeer/styles.css”. El tema ahora se selecciona con una anotación @Theme en nuestra clase UI en lugar de realizar una llamada a setTheme(), el uso queda claro en el ejemplo anterior.

La mayoría de las cuestiones pendientes deben aparecer como errores de compilación y en la mayoría de los casos serán fáciles de arreglar en el IDE.

Tener en cuenta que el soporte para algunas versiones de navegadores más antiguos -incluyendo IE6 y IE7- no funcionarán en Vaadin 7. Si a pesar de todo si se necesitan, Vaadin 6 seguirá con soporte hasta el final de su ciclo de vida (previsto para Junio de 2014, cinco años después de la liberación de Vaadin 6). Para obtener más información acerca de los navegadores admitidos, consular las notas de la versión.

Convertir un proyecto Maven

Convertir un proyecto Maven suele ser bastante sencillo: reemplazar la dependencia Vaadin con dependencias de los otros artefactos Vaadin necesarios, eliminar cualquier dependencia de JAR GWT, reemplazar el GWT plug-in con el Vaadin plug-in y todo vuelve a compilar. La manera más fácil de obtener las secciones necesarias y las dependencias es crear un nuevo proyecto desde el vaadin-application-arquetipo y copiar las secciones pertinentes de la misma al proyecto.

Tener en cuenta que Vaadin 7 requiere Java versión 6 o superior y la versión servlet 2.4 o superior (o 2.0 portlet o superior). Si el proyecto está configurado para versiones anteriores, hay que actualizar las dependencias correspondientes y la versión del compilador.

Windows, Panels y otros layout

En Vaadin 6, los componentes Window, Panel y algunos otros tenían un diseño de layout predeterminado y addComponent () etc. Esto a menudo causaba confusión y problemas de diseño de layout cuando se desconocían los layout o se olvidaba en ocasiones establecer sus parametros, Vaadin 7 ahora requiere establecer explícitamente el contenido. Véase por ejemplo Creación de una aplicación básica.

Si queremos reducir al mínimo el impacto de esto en el aspecto y en el tema de una aplicación antigua, podemos reproducir la vieja estructura estableciendo simplemente un VerticalLayout (con márgenes activado) como contenido y agregaremos a este layout los componentes antes que un Panel/UI/Window.

A tener en cuenta que la clase Window solo lo usaremos para sub-ventanas, no a nivel de ventanas de navegador.

La información relativa a las ventanas del navegador está ahora en objetos Page (View), incluyendo el tamaño de la ventana del navegador, fragmento URI y título de la página.  La configuración de la ubicación del navegador (redirigiendo a una URL) se puede también realizar vía Page.

El API de notificaciones también ha cambiado, ahora se utiliza el método estático Notification.show en lugar de Window.showNotification ().

Las instancias actuales de UI, Page, VaadinService, VaadinRequest y VaadinResponse son fácilmente accesibles mediante UI.getCurrent(), Page.getCurrent (), etc. La sesión se puede obtener utilizando UI.getSession() y la petición (request) y la respuesta (response) están disponibles desde VaadinService.getCurrent* (). Por lo tanto, no hay necesidad de declarar explícitamente un ThreadLocal para realizar un seguimiento de ellos.

VaadinSession también ofrece un nuevo punto de entrada para bloquear el acceso a los componentes Vaadin desde hilos (threads) en segundo plano, en sustitución del antiguo enfoque de la sincronización con la instancia Application – véase javadoc para VaadinSession.lock () para más detalles.

Para personalizar la creación de UIs – por ejemplo, crear UIs diferentes para dispositivos móviles y de escritorio – se puede usar un UIProvider personalizado.

Forms y enlaces a datos (Data binding)

Las aplicaciones empresariales están todas basadas en datos, Vaadin 6 ha tenido carencias de personalización en el manejo de ellos. Mientras que ha sido posible crear formularios para la entrada de datos, muchas situaciones han requerido o bien pasar por el mecanismo de Form o el uso de trucos complicados para personalizar los layouts, etc.

Aunque los formularios (Forms) existen todavía en Vaadin 7 y una gran cantidad de código antiguo para el enlace de datos funciona principalmente como siempre, la versión 7 trae mejoras:

Si queremos seguir utilizando los viejos mecanismos, hay que tener en cuenta que, por ejemplo TextField tiene ahora el tipo String, y las conversiones automáticas se aplican así como la validación aplicada en valores convertidos al tipo de modelo de datos. Podemos migrar formularios de vistas de entrada de datos por formularios.

El antiguo QueryContainer se ha eliminado, por lo que es hora de cambiar a SQLContainer o alguna otra implementación de contenedores.

Si estamos utilizando una implementación personalizada de Container.Indexed, hay un método más que se puede aplicar – ver el javadoc de getItemIds(int, int) para obtener más información y una utilidad de hacer la implementación más fácil.

Property.toString() no se debe utilizar para obtener el valor de la propiedad, usar Property.getValue() en su lugar.

Add-ons

Si el proyecto se basa en add-ons del directorio de Vaadin, tenemos que tener en cuenta que no todos se han actualizado para Vaadin 7 y algunos pueden ser sólo compatibles con versiones beta antiguas de Vaadin 7. Comprobar los add-ons que utilizamos antes de realizar la migración.

Es posible que tengamos que hacer clic en “Available for 7″ en la página de add-ons para obtener la versión correcta del complemento.

Podemos ver una lista de add-ons con versión disponible para Vaadin 7 mediante la búsqueda.

Tenemos que tener en cuenta también que hay un conjunto de como por ejemplo CustomField que está integrado en Vaadin 7.

El add-on SQLContainer se integró a partir de Vaadin 6.7 en su core y por supuesto también en Vaadin 7.

Navegación

Además del soporte de bajo nivel para manejar fragmentos URI, Vaadin 7 también proporciona un nivel más alto dentro del marco de la navegación web, permitiendo centrarse en el contenido de las vistas en lugar de la mecánica de cómo navegar por ellas.

La mejor manera de familiarizarse con las nuevas funciones de navegación es revisar los tutoriales sobre cómo crear una aplicación bookmarkable, utilizando parámetros con vistas, control de acceso para las vistas, manejo de inicios de sesión, confirmaciones de cambio en vistas y la crear una vista de inicio de sesión.

Al cerrar la sesión de un usuario, podemos utilizar Page.setLocation() para redirigir al usuario a una página apropiada.

Componentes

Button ha dejado de ser un Field y no tiene un constructor que tome un nombre de método a llamar, utilizaremos la clase interna anónima en su lugar. Debido a esto, CheckBox ya no es un Button y utiliza un ValueChangeListener en lugar de un ClickListener.

DateField ya no admite soporte en milisegundos y ahora por defecto es un día.

Label ahora soporta convertidores.

Los métodos de formato personalizados para RichTextArea se han eliminado, utilizaremos PropertyFormatter o un convertidor en lugar de sobreescribir los métodos de formato.

Otros

LoginForm, Deprecated. A partir de 7.0. Este componente ha dejado de cumplir con su deber de forma fiable en los navegadores compatibles y un VerticalLayout con dos campos de texto se puede utilizar en su lugar.

Los temas Runo, Reindeer, Chameleon y liferay vienen como un .jar en Vaadin 7.

Enlaces de interés

Documento completo de migración de Vaadin 6 a Vaadin 7 https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7