RSS

Vaadin basic example

12 ago

vaadin-logo After the short introduction, server-side RIA framework, we are going to make a our first easy example with Vaadin. As we mentioned in the previous post Vaadin is perfectly integrated with Maven 2. There is a specific Maven 2 archetype for Vaadin which can be found in here Using Vaadin with Maven.

Here we can download an archetype called vaadin-archetype-clean that help us to crear a Maven 2 project which will be imported to our favorite IDE later. The following chunk of code shows us how to call the vaadin-archetype-clean archetype:.

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

What we are going to do is opening a command shell in our desktop and executing the previous Maven command. A Maven 2 project will be generated so that we will begin with our Vaadin development. The output generated will be as follows:

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

If we are going to use the Vaadin archetype more times it would be better to include the vaadin-archetype-clean in our archetype catalog. We can do this with ease in Eclipse or STS. So that we need to click in Create a new Project and select Maven. It will open a new wizard to create a Maven project, after clicking next the wizard shows us the next screen.

To include a new archetype to our catalog we click in the Add Archetype button. The next screen will showed us and it should be filled as the next image is.

addinVaadinArchetypeEclipse

Thevaadin-archetype-clean will be added to our project now. We noticed that the version archetype is 1.5.2.

archetypeViewWithVaadinEclipse

We have already finished with our archetype generation. Now we can create a Maven 2 project for Vaadin. We have to tell our groupId as we did from command line:

createAVaadinProjectGroupIdArtifact

… and that’s all. If we go to the Eclipse package explorer view we can see our recently created Maven project.

VaadinPackageExplorer

If we open the project’s pom file we notice that there are quite information available.

.

<?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>

… but as we can noticed more of that information is commented. We are explaining a little by little. In the build -> plugins section there are 2 uncommented plug-ins:

  • maven-compiler-plugin. It is required to the compilation phase in any proyecto Maven 2 phase. If we want to change the java version to compile our project we can do it here.

  • maven-jetty-plugin. Our Vaadin application needs to servlet containter to be tested. In our case Jetty will be used. We could use another option like Tomcat or a web server such as JBoss or Websphere Application Server. If you have some time I recommend take a look at Spring tc Server Developer that comes with the great tool Spring insight.

The rest of the plug-ins are commented:

  • gwt-maven-plugin. As we mentioned in Vaadin is perfectly integrated with GWT. To include GWT components we should execute this plug-in. In the current example we don’t need to use it so it could be left commented.

  • vaadin-maven-plugin. This widget has an update-widgetset goal which allows us updating the widgets set we had in our Vaadin project. We aren’t going to use this plug-in yet.

In the repositories –> repository section there are vaadin-snapshots and vaadin-addons. The last one won’t be used yet.

In dependencies –> dependency , the only required dependency is going to be the Vaadin one, that’s easy. Later if we want to add GWT components we should add its dependencies besides the java validation-api ones.

Now it is time to take a look to webapp folder. Our Maven project is ‘no more’ than a web project. Because of that we need a context xml (context.xml) file and a descriptor xml file (web.xml).In the context.xml file we are going to point the context where our application can be found. This context has been generated by the vaadin-archetype-clean archetype. We will add some Spring features in next posts.

The web.xml file gives us more information about of our application. Its content is showed next.

<?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>

Every Vaadin request must be intercepted by a servlet called com.vaadin.terminal.gwt.server.ApplicationServlet. In the mapping servlet element we notice this. Besides that we need to define a starting application class to our project, MyVaadinApplication as default. If we want to add some widgets to our project, they have to be annotated in the web.xml file. If not our application won’t be able to find them.

Now it’s time to look at the generated Java code generated by the archetype. Our application will always extend from the com.vaadin.Application class and we will have to override the init method. The init method is quite straightforward (Vaadin is similar to Swing or SWT programming, all of them follow a event-driven paradigm). So we are going to add a main windown and one button with one handler which will handle the button clicks event. When the user will click in the button a new label with a message will be visible. The next images show us our how our project looks like.

VaadinExampleApplication

VaadinExampleApplication2

This post is thought to be an easy Vaadin introduction. The main ideas about Vaadin I would like to stand out:

  • Our Vaadin project can be developed along with Maven 2 with no problem.

  • Our Vaadin need a web.xml file where a com.vaadin.terminal.gwt.server.ApplicationServlet will be indicated.

  • At the same time we have to especifie a starting class to our aplication.

  • Widget set can be added within the web.xml file.

  • A common Vaadin class extends from com.vaadin.Application class and override the init method.

  • Vaadin is pretty similar to Swing or SWT, we should define a main windown and add visual components to it. We can control the components behaviour adding some handler methods.

  • PD: you can find some help about Maven concepts in the following posts:

    About these ads
     
1 comentario

Publicado por en 12 agosto, 2011 en GWT, J2EE, Vaadin

 

Etiquetas: , , , , , , ,

Una respuesta a “Vaadin basic example

  1. Pingback: JavaPins

Deja un comentario

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

 
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 69 seguidores

A %d blogueros les gusta esto: