Aprendiendo Vaadin #6: Usando SpringVaadinIntegration con soporte de navegación

Llevaba tiempo buscando una forma de poder desarrollar una aplicación RIA sin tener que sufrir una dura curva de aprendizaje, aprovechando mis conocimientos de Java y obteniendo unos resultados suficientemente buenos. De primeras, GWT me pareció una buena opción, pero después descubrí Vaadin, que bajo mi punto de vista va un paso más allá y me convenció mucho más. En esta serie de entradas compartiré mis primeras experiencias con este framework.

En mi anterior post sobre Vaadin expliqué de una forma práctica cómo implementar soporte de navegación en una aplicación Vaadin. Para ello creé dos vistas, y para poder usar autowiring de spring en las vistas, las clases para las vistas debían ser internas a la clase UI que albergaba al navegador encargado de dar el soporte para navegación.
Usando el plugin SpringVaadinIntegration tendremos la posibilidad de usar autowiring en las clases vista de forma independiente a la clase UI. Para conseguir esto, voy a partir del mismo código del ejemplo anterior para ir modificándolo.

Como primer paso copiamos el proyecto del post anterior a un nuevo proyecto al que llamaré ApVaadinSpringVaadinIntegration. Para añadir la dependencia en maven de SpringVaadinIntegration necesitaremos definir en nuestro pom.xml el repositorio de Vaadin add-ons (si no lo tenemos ya definido, como en mi caso) y ya podremos definir la dependencia. Para añadir el repositorio al pom (si es que no lo tenemos ya agregado):

<repositories>
    <repository>
        <id>vaadin-addons</id>
        <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
</repositories>

Y para añadir la dependencia del plugin:

<dependencies>
    <dependency>
        <groupId>ru.xpoft.vaadin</groupId>
        <artifactId>spring-vaadin-integration</artifactId>
        <version>1.7.3</version>
    </dependency>
</dependencies>

Antes de terminar con el pom nos aseguraremos de que aún contamos con la dependencia heredada al copiar el proyecto spring-web, pues la necesitaremos.

Ahora haremos los cambios necesarios al archivo web.xml. Es necesario redefinir el servlet de entrada de Vaadin y sustituirlo por el servlet aportado por el plugin SpringVaadinIntegration. Ahora podremos eliminar todas las referencias a la clase UIProvider que en nuestro ejemplo habíamos denominado MyUIProvider. La referencia al servlet en nuestro web.xml debe quedar así:

<servlet>
    <servlet-name>Test Application</servlet-name>
    <servlet-class>ru.xpoft.vaadin.SpringVaadinServlet</servlet-class>
    <init-param>
        <param-name>beanName</param-name>
        <param-value>MyVaadinUI</param-value>
    </init-param>
</servlet>

Y ahora podemos eliminar la clase MyUIProvider y también la clase Inject, ambas heredadas del ejemplo anterior al copiar el proyecto. A continuación modificaremos nuestra clase MyVaadinUI para hacerla funcionar con el plugin. La etiquetamos como @Component y @Scope(«prototype»). Los diferentes valores que podemos usar para la etiqueta @Scope son:

• @Scope(«prototype»): crea una nueva instancia por cada nueva página.
• @Scope(«session»): guarda la instancia UI en la sesión de usuario para ser reusada.
• Opción por defecto: si no definimos el @Scope se usará en modo Singleton. Esto es, en todas las llamadas y en todos los casos se usará la misma instancia UI.

Ahora es posible extraer de nuestra clase UI las clases vista internas. Nos las llevamos fuera, al mismo paquete donde tenemos declarada la clase MyVaadinUI.

Al extraer las clases vista hay que etiquetarlas con las etiquetas ya conocidas @Component, @Scope, y con la etiqueta @VaadinView. Además, lo que normalmente hacíamos en el constructor ahora lo haremos en un método PostConstruct debidamente etiquetado. Así nuestras vistas serán instanciadas automáticamente, gracias al plugin.

Un problema con el que nos encontramos tras hacer todo esto es que nuestras vistas ya no conocen el servicio helloService. Ahora sí podremos inyectarlo mediante autowiring gracias al plugin SpringVaadinIntegration. De hecho, este servicio ya no nos sirve de nada en nuestra clase UI, así que lo mejor será borrarlo de ella.

El siguiente problema con el que nos encontramos es que nuestras vistas, que antes conocían a la instancia de nuestro Navigator, ahora han dejado de conocerla. La buena noticia es que ya no la vamos a necesitar en nuestras vistas para navegar de una vista a otra, usaremos Links (enlaces) para navegar. Eso sí, para seguir contando con soporte de navegación necesitaremos definir un nuevo Navigator haciendo uso de la clase DiscoveryNavigator que es proporcionada por el plugin y sustituyendo al antiguo Navigator en nuestra clase MyVaadinUI.
Por último, eliminamos de nuestras vistas todas las referencias al antiguo botón que ya no usaremos.

Después de todo esto, nuestra clase MyVaadinUI tendrá este aspecto, muy limpio:

@Component("MyVaadinUI")
@Scope("prototype")
public class MyVaadinUI extends UI {
	
	DiscoveryNavigator navigator;
	protected static final String STARTVIEW = "";
	protected static final String MAINVIEW = "main";  

	@Override
	protected void init(VaadinRequest request) {    	
        	getPage().setTitle("Ejemplo de navegación");        
       		navigator = new DiscoveryNavigator(this, this);        
    	}    
}

Del mismo modo, las vistas también han quedado bastante reducidas y limpias. El código para la vista StartView quedaría así:

@Component
@Scope("prototype")
@VaadinView(MyVaadinUI.STARTVIEW)
public class StartView extends VerticalLayout implements View {
	
	@Autowired
	HelloService helloService;
	
	@PostConstruct
	public void PostConstruct() {
		setSizeFull();
        	addComponent(new Link("Ir a la vista principal (MainView)", new ExternalResource("#!" + MyVaadinUI.MAINVIEW)));
	}
	
	@Override
	public void enter(ViewChangeEvent event) {
		Notification.show(helloService.sayHello(this));
	}
}

y el código para la vista MainView quedaría muy similar:

@Component
@Scope("prototype")
@VaadinView(MyVaadinUI.MAINVIEW)
public class MainView extends VerticalLayout implements View {

	@Autowired
	HelloService helloService;
	
	@PostConstruct
	public void PostConstruct() {
		setSizeFull();
		addComponent(new Link("Ir a la vista inicial (StartView)", new ExternalResource("#!" + MyVaadinUI.STARTVIEW)));
	}
	
	@Override
	public void enter(ViewChangeEvent event) {
		Notification.show(helloService.sayHello(this));
	}
}

Tras todo esto, tenemos una aplicación muy similar a la que teníamos, pero con menos clases y menos líneas de código, mucho más limpia y sencilla. Ahora podemos usar autowiring en las vistas, y podemos definir las vistas externamente a la clase UI.

Puedes descargar el código fuente de este ejemplo aquí.