RSS

Ejemplo básico con Vaadin y Maven

07 Ago

vaadin-logo Después de la breve introducción que se dio en server-side RIA framework, vamos a realizar un breve ejemplo con Vaadin que sirva de primera toma de contacto. Como ya contamos en el post anterior Vaadin queda perfectamente integrado con Maven 2. Es más tenemos un arquetipo específico en Maven 2 para Vaadin que podemos encontrar en Using Vaadin with Maven.

Aquí podemos encontrar el arquetipo llamado vaadin-archetype-clean que nos servirá para crear un proyecto Maven 2 que más tarde importaremos desde nuestro IDE favorito. Como vemos a continuación tiene el esquema típico de cualquier arquetipo de Maven.

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-clean -DarchetypeVersion=LATEST -DgroupId=com.hopcroft.vaadin -DartifactId=vaadin-example -Dversion=1.0 -Dpackaging=war

Lo que vamos a hacer por lo tanto es abrir una shell en nuestro escritorio y ejecutar el anterior comando. Podemos ver como se genera un proyecto Maven 2 para nuestro primer proyecto de prueba de Vaadin. La salida por consola es la siguiente.

new-host:workspace-sts-2.7.1.RELEASE Ivan$ mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-clean -DarchetypeVersion=LATEST -DgroupId=com.hopcroft.vaadin -DartifactId=vaadin-example -Dversion=1.0 -Dpackaging=war
[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Stub Project (No POM) 1
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] >>> maven-archetype-plugin:2.0:generate (default-cli) @ standalone-pom >>>
[INFO] 
[INFO] <<< maven-archetype-plugin:2.0:generate (default-cli) @ standalone-pom <<<
[INFO] 
[INFO] --- maven-archetype-plugin:2.0:generate (default-cli) @ standalone-pom ---
[INFO] Generating project in Interactive mode
[INFO] Archetype repository missing. Using the one from [com.vaadin:vaadin-archetype-clean:1.5.2] found in catalog remote
[INFO] Using property: groupId = com.hopcroft.vaadin
[INFO] Using property: artifactId = vaadin-example
[INFO] Using property: version = 1.0
[INFO] Using property: package = com.hopcroft.vaadin
Confirm properties configuration:
groupId: com.hopcroft.vaadin
artifactId: vaadin-example
version: 1.0
package: com.hopcroft.vaadin
 Y: : 
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 5:03.227s
[INFO] Finished at: Sun Aug 07 20:38:27 CEST 2011
[INFO] Final Memory: 7M/81M
[INFO] ------------------------------------------------------------------------
new-host:workspace-sts-2.7.1.RELEASE Ivan$ ls -lah
total 0
drwxr-xr-x   6 Ivan  staff   204B  7 ago 20:38 .
drwx------+ 26 Ivan  staff   884B 21 jul 17:41 ..
drwxr-xr-x   7 Ivan  staff   238B 21 jul 17:41 .metadata
drwxr-xr-x   5 Ivan  staff   170B 21 jul 17:43 Servers
drwxr-xr-x   4 Ivan  staff   136B  7 ago 20:38 vaadin-example
drwxr-xr-x   9 Ivan  staff   306B 21 jul 17:44 vaadin-roo
new-host:workspace-sts-2.7.1.RELEASE Ivan$ cd vaadin-example/
new-host:vaadin-example Ivan$ ls -lah
total 16
drwxr-xr-x  4 Ivan  staff   136B  7 ago 20:38 .
drwxr-xr-x  6 Ivan  staff   204B  7 ago 20:38 ..
-rw-r--r--  1 Ivan  staff   5,7K  7 ago 20:38 pom.xml
drwxr-xr-x  3 Ivan  staff   102B  7 ago 20:38 src

Si tenemos en mente utilizar este arquetipo en más ocasiones puede ser más cómodo incluir en nuestro catálogo de arquetipos a vaadin-archetype-clean. Lo podemos hacer fácilmente en Eclipse ó STS. Para ello abrir Crear Nuevo Proyecto y seleccionamos Maven. Se nos abre la pantalla para crear un nuevo proyecto Maven le damos a siguiente y se nos presenta la siguiente pantalla.

Para agregar un nuevo arquetipo a nuestro catálogo pinchamos en el botón Add Archetype. Nos saldrá la siguiente pantalla la cual tendremos que rellenar tal y como pone en la captura.

addinVaadinArchetypeEclipse

El arquetipo vaadin-archetype-clean creado se agregará a nuestro catálogo. En concreto podemos ver que la último versión del arquetipo es la 1.5.2.

archetypeViewWithVaadinEclipse

Con esto ya hemos terminado con el proceso de creación de nuestro arquetipo. Vamos a aprovechar y crearemos un proyecto Maven 2 para Vaadin a partir de aquí. Le daremos nombre a nuestro groupId y a nuestro artefacto tal como haciamos por línea de comandos:

createAVaadinProjectGroupIdArtifact

… y ya está. Podemos ver en la vista de explorar de paquetes de Eclipse como se ha generado nuestro artefacto / proyecto Maven.

VaadinPackageExplorer

Si abrimos el pom.xml recien creado vemos que tiene bastante información.

.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.hopcroft.vaadin</groupId>
  <artifactId>vaadin-example</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>Vaadin Web Application</name>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <vaadin.version>6.6.2</vaadin.version>
    <gwt.version>2.3.0</gwt.version>
    <gwt.plugin.version>2.2.0</gwt.plugin.version>
  </properties>

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.5</source>
          <target>1.5</target>
        </configuration>
      </plugin>

      <!-- Compile custom GWT components or widget dependencies with the GWT compiler -->
      <!--
      <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>gwt-maven-plugin</artifactId>
        <version>${gwt.plugin.version}</version>
        <configuration>
          <webappDirectory>${project.build.directory}/${project.build.finalName}/VAADIN/widgetsets</webappDirectory>
          <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
          <runTarget>vaadin-example</runTarget>
          <hostedWebapp>${project.build.directory}/${project.build.finalName}</hostedWebapp>
          <noServer>true</noServer>
          <port>8080</port>
          <compileReport>false</compileReport>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>resources</goal>
              <goal>compile</goal>
            </goals>
          </execution>
        </executions>
        <dependencies>
          <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-dev</artifactId>
            <version>${gwt.version}</version>
          </dependency>
          <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-user</artifactId>
            <version>${gwt.version}</version>
          </dependency>
        </dependencies>
      </plugin>
      <plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-maven-plugin</artifactId>
        <version>1.0.2</version>
        <executions>
          <execution>
            <configuration>
            </configuration>
            <goals>
              <goal>update-widgetset</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
      -->

      <!-- A simple Jetty test server at http://localhost:8080/vaadin-example can be launched with the Maven goal jetty:run 
        and stopped with jetty:stop -->
      <plugin>
        <groupId>org.mortbay.jetty</groupId>
        <artifactId>maven-jetty-plugin</artifactId>
        <version>6.1.24</version>
        <configuration>
          <stopPort>9966</stopPort>
          <stopKey>vaadin-example</stopKey>
          <!-- Redeploy every x seconds if changes are detected, 0 for no automatic redeployment -->
          <scanIntervalSeconds>0</scanIntervalSeconds>
          <!-- make sure Jetty also finds the widgetset -->
          <webAppConfig>
            <contextPath>/vaadin-example</contextPath>
            <baseResource implementation="org.mortbay.resource.ResourceCollection">
              <!-- Workaround for Maven/Jetty issue http://jira.codehaus.org/browse/JETTY-680 -->
              <!-- <resources>src/main/webapp,${project.build.directory}/${project.build.finalName}</resources> -->
              <resourcesAsCSV>src/main/webapp,${project.build.directory}/${project.build.finalName}</resourcesAsCSV>
            </baseResource>
          </webAppConfig>
        </configuration>
      </plugin>
    </plugins>
  </build>

  <repositories>
    <repository>
      <id>vaadin-snapshots</id>
      <url>http://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
      <releases>
        <enabled>false</enabled>
      </releases>
      <snapshots>
        <enabled>true</enabled>
      </snapshots>
    </repository>
    <repository>
      <id>vaadin-addons</id>
      <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
  </repositories>

  <!--
  <pluginRepositories>
    <pluginRepository>
      <id>codehaus-snapshots</id>
      <url>http://nexus.codehaus.org/snapshots</url>
      <snapshots>
        <enabled>true</enabled>
      </snapshots>
      <releases>
        <enabled>false</enabled>
      </releases>
    </pluginRepository>
    <pluginRepository>
      <id>vaadin-snapshots</id>
      <url>http://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
      <snapshots>
        <enabled>true</enabled>
      </snapshots>
      <releases>
        <enabled>false</enabled>
      </releases>
    </pluginRepository>
  </pluginRepositories>
  -->

  <dependencies>
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin</artifactId>
      <version>${vaadin.version}</version>
    </dependency>
    <!--
    <dependency>
      <groupId>com.google.gwt</groupId>
      <artifactId>gwt-user</artifactId>
      <version>${gwt.version}</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.validation</groupId>
      <artifactId>validation-api</artifactId>
      <version>1.0.0.GA</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.validation</groupId>
      <artifactId>validation-api</artifactId>
      <version>1.0.0.GA</version>
      <classifier>sources</classifier>
      <scope>provided</scope>
	</dependency>
    -->
  </dependencies>

</project>

Pero la mayoría de ella está comentada. Vamos a ir viendolo poco a poco. En la sección de build -> plugins vemos que tenemos dos plugins sin comentar:

  • maven-compiler-plugin. Necesario en cualquier proyecto Maven 2 para realizar su compilación. Por defecto se crea para que utilice Java 1.5. Si queremos modificar sólo tenemos que cambiar los valores preestablecidos.

  • maven-jetty-plugin. Nuestra aplicación con Vaadin para ser probada necesita ser instalada en un contenedor de servlets Jetty. Podría utilizar Tomcat u otro servidor web como JBoss o Websphere Application Server. Si se tiene tiempo recomiendo utilizar Spring tc Server Developer con la genial utilidad Spring insight.

Hay otros plugins que están comentados:

  • gwt-maven-plugin. Como comentabamos en Vaadin se integra perfectamente con GWT. Para incluir componentes GWT debemos ejecutar este plugin. En este primer ejemplo no vamos a usar ninguno por lo tanto no será necesario descomentarlo.

  • vaadin-maven-plugin. Este widget tiene como goal update-widgetset. El cual nos permitirá actualizar el conjunto de widgets que tengamos en nuestro proyecto Vaadin. Como no vamos a usar esta funcionalidad, el plugin puede permanecer comentado.

En la sección repositories –> repository vemos que tenemos disponibles vaadin-snapshots y vaadin-addons. Aunque éste último no va a ser utilizado.

En la sección dependencies –> dependency sólo va a ser necesario que se incluya la dependencia con Vaadin, así de fácil. Más adelante si tenemos componentes de GWT deberemos añadir sus dependencias además de las de validation-api.

El siguiente elemento del proyecto que vamos a ver es su carpeta de webapp. El proyecto de Maven no deja de ser un proyecto web y nuestra aplicación una aplicación web. Necesitamos por tanto un fichero xml de contexto y un fichero de descripción web.xml.En el fichero de contexto context.xml sólamente vamos a indicar el contexto del que cuelga nuestra aplicación. El contexto que ha sido generado por el arquetipo es en nuestro caso vaadin-example. No hay nada más que ver aquí a no ser que queramos integrar nuestra aplicación con Spring … lo cual haremos en otro post.

El fichero web.xml nos da alguna información más. Podemos ver su contenido a continuación.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
    <display-name>Vaadin Web Application</display-name>
    <context-param>
        <description>Vaadin production mode</description>
        <param-name>productionMode</param-name>
        <param-value>false</param-value>
    </context-param>
    <servlet>
        <servlet-name>Vaadin Application Servlet</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.hopcroft.vaadin.vaadin_example.MyVaadinApplication</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Vaadin Application Servlet</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>
</web-app>

Toda aplicación Vaadin debe pasar por un servlet llamado com.vaadin.terminal.gwt.server.ApplicationServlet. En el mapping del servlet vemos como cualquier petición dirigida será maneja por él. Además tenemos que definir la aplicación de comienzo para nuestro proyecto. En nuestro caso se llama MyVaadinApplication. Si queremos añadir componentes de usuario / widget debemos definirlos en el fichero web.xml. En caso contrario nuestra aplicación será incapaz de encontrarlos.

Vamos ahora a pasar al código de ejemplo que genera el arquetipo. Nuestra clase java heredará siempre de com.vaadin.Application y sobreescribirá el método init que será ejecutado al principio como su nombre indica. El método init no tiene mucha historia (es bastante parecido a como se programa con Swing o SWT). Tenemos una ventana que establecemos como principal. Vamos a añadir a esa ventana un botón con un manejador. Dicho manejador gestionará los eventos de click sobre el botón. De manera que cuando pinchemos se muestre una etiqueta que muestre el mensaje que se puede ver. Vamos a ejecutar nuestro proyecto y vamos a verlo en funcionamiento.

VaadinExampleApplication

VaadinExampleApplication2

Quiero que este post sirva como una primera toma de introducción con Vaadin. Así pues no lo voy a complicar más. Los conceptos que me gustaría que quedasen claros son:

  • Podemos integrar nuestro proyecto Vaadin con Maven 2 sin ningún problema.

  • Nuestros proyectos vaadin necesitan de un descriptor web.xml donde indicaremos el servlet ApplicationServlet que interceptará nuestras llamadas.

  • Asimismo deberemos indicar el punto de entrada (clase java) a nuestra aplicación.

  • También podremos indicar otros elementos como componentes de usuario / widgets.

  • Una clase de Vaadin extiende de la clase com.vaadin.Application y sobreescribe el método init donde inicializaremos nuestra aplicación.

  • Vaadin es muy similar a Swing o SWT, debemos definir una ventana de trabajo y agregar componentes visuales a ella. A su vez podemos asociar a estos componentes visuales manejadores que gestionen los eventos.

  • Hasta el siguiente post!!

    PD: puedes encontrar algún post sobre el funcionamiento básico de Maven en:

     
Deja un comentario

Publicado por en 7 agosto, 2011 en GWT, J2EE, RIA, Vaadin

 

Etiquetas: , , , ,

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

 
A %d blogueros les gusta esto: