Aprendiendo Vaadin #2: Usando Maven

Gestor de proyectosLlevaba 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 creé un pequeño proyecto al que llamé AprendiendoVaadin y monté un primer entorno de desarrollo siguiendo las indicaciones del libro de Vaadin, usando Eclipse y como guía las instrucciones para instalar el plugin de Eclipse y para crear y ejecutar un nuevo proyecto. El plugin de Vaadin para Eclipse requiere adicionalmente el plugin Apache IvyDE, y como puede resultar evidente, al crear un nuevo proyecto éste se configura automáticamente para usar como gestor de dependencias Apache Ivy.

Como en mi caso llevo años trabajando con Maven, y tampoco los resultados de Google Trends son muy alentadores para Apache Ivy, he preferido cambiar y usar Maven. Para esta tarea el libro de Vaadin en mi opinión se queda bastante corto, así que espero que este post pueda servir de ayuda a algún iniciado como yo. El primer paso fue crear el proyecto Maven al que llamé AprendiendoVaadinConMaven en Eclipse, usando el plugin Maven Integration for Eclipse (m2eclipse). Para ello usé el arquetipo Maven vaadin-archetype-application:

y a continuación los parámetros:

Maven-params

De esta forma se consigue un proyecto inicial básico que incluye a la clase principal MyVaadinUI:

public class MyVaadinUI extends UI
{

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                layout.addComponent(new Label("Thank you for clicking"));
            }
        });
        layout.addComponent(button);
    }

}

Como mi intención es continuar con el trabajo hecho en mi anterior post sobre Vaadin, toca renombrar esta clase a AprendiendoVaadinUI y cambiar su contenido. Tras hacer un Refactor->Rename de Eclipse y cambiar su contenido debe quedar algo así:

public class AprendiendoVaadinUI extends UI {

	private final String BTN_CAPTION_MOSTRAR_MENSAJE = "Mostrar mensaje";
	private final String BTN_CAPTION_OCULTAR_MENSAJE = "Ocultar mensaje";
	private final String MENSAJE = "Hola Mundo!!!";

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		final Label mensaje = new Label(MENSAJE);
		final Button button = new Button(BTN_CAPTION_MOSTRAR_MENSAJE);

		layout.setMargin(true);
		setContent(layout);

		layout.addComponent(button);
		mensaje.setVisible(false);
		layout.addComponent(mensaje);

		button.addClickListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				mensaje.setVisible(!mensaje.isVisible());
				if (mensaje.isVisible())
					button.setCaption(BTN_CAPTION_OCULTAR_MENSAJE);
				else
					button.setCaption(BTN_CAPTION_MOSTRAR_MENSAJE);
			}
		});
	}
}

Por el momento todo bien, tras ejecutar un mvn package ya tengo el correspondiente war. Pero con esto no es suficiente, este war no funcionará, porque al intentar entrar en la aplicación el servidor buscará la antigua clase MyVaadinUI. Para corregir esto hay que editar el archivo web.xml y cambiar la clase asignada al servlet de entrada:

<servlet-name>Vaadin Application Servlet</servlet-name>
        <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
        <init-param>
            <description>Vaadin UI to display</description>
            <param-name>UI</param-name>
            <param-value>com.dherrerabits.aprendiendovaadin.AprendiendoVaadinUI</param-value>
        </init-param>

Ahora ya es posible ejecutar la aplicación. El arquetipo de Maven para Vaadin viene preparado y configurado para ejecutar mediante Jetty. Para ello, usando Maven desde Eclipse, en Goals escribimos jetty:run y a continuación se puede probar la aplicación mediante la url http://localhost:8080/

Bien, el problema ahora es que en este punto no se puede hacer debug desde Eclipse. Para solucionar esto habrá que habilitar el debugging remoto. Para ello, en la configuración Maven recién creada con el Goal jetty:run accedemos a la pestaña JRE y especificamos los siguientes argumentos para la máquina virtual:

-Xdebug -Xrunjdwp:transport=dt_socket,address=4000,server=y,suspend=n

Ahora al iniciar Jetty en la consola aparecerá el mensaje:

Listening for transport dt_socket at address: 4000

A continuación es necesario crear una configuración de debug. Para ello haremos botón derecho sobre el proyecto, “Debug As…”-> “Debug Configurations…” y creamos una nueva “Remote Java Application”. Importante recordar aquí que el puerto que hemos indicado en el paso anterior es el 4000:

vaadin-debug

Y ahora sí ya es posible hacer debug. Con esto ya por fin tenemos un entorno de desarrollo Vaadin con Maven completo.

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

Anuncios

Un pensamiento en “Aprendiendo Vaadin #2: Usando Maven

  1. interezante articulo, estoy iniciando en vaadin tambien, es bueno saber que hay web que hablen del framework en habla hispana, estare muy atento a tus articulos, muchas gracias por compartirlos, si sirve de algo hice un blog solo con el libro de vaadin en español, esta en proyecto pero sirve tambien de guia … el link es http://ellibrodevaadin.blogspot.com/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s