Vaadin 7 Cookbook

Download and install the latest version from the Eclipse download page (specifically Eclipse IDE for Java EE Developers), http://www.eclipse.org/downloads.

There is an Eclipse extension for Vaadin, which helps us with the creation of Vaadin projects, widget set compilation, and so on. The instructions on how to install the extension are at http://vaadin.com/eclipse.

Carry out the following steps in order to create a new project in Eclipse IDE:

Let's have a look at what has been generated by Eclipse.

The following table explains the content of the important directories:

Now we can try to change the code inside the HellovaadinUI class, so the application prints out the name of the system user.

String user = System.getProperty("user.name");
Label label = new Label("Hello Vaadin user: " + user);
layout.addComponent(label);

Carry out the following steps in order to create a new project in Maven:

We have made a new Vaadin application from the Maven archetype and all the content needed for running the application was generated fr us.

Let's have a look at the folder structure in the project.

Maven archetype could be described as a project template. We can create our own archetypes by running the following command inside the Maven project:

mvn archetype:generate

We can configure auto-redeploys in Jetty. The scanning interval can be set to, for example, 2 seconds. After we recompile the code, Jetty redeploys the application so we don't have to stop and start the application server after each change in the code. The following change needs to be made in the pom.xml file:

<scanIntervalSeconds>2</scanIntervalSeconds>

More about the Jetty plugin can be found on the following link:

http://docs.codehaus.org/display/JETTY/Maven+Jetty+Plugin

Let's install Gradle before we start from http://gradle.org/installation.

Create a new directory where we will place the new project:

mkdir vaadin-in-gradle

Carry out the following steps in order to create a new project in Gradle:

Gradle is following the convention over configuration paradigm and that is why Gradle build scripts are so minimalistic. For example, the default source folder for Groovy files is src/main/groovy and we can change it by the following code that we place inside the build script build.gradle.

sourceSets {
  main {
    groovy {
      srcDirs = ['src/groovy']
    }
  }
}

The next valuable thing about Gradle is good documentation:

http://www.gradle.org/docs/current/userguide/userguide_single.html

Let's have a bit more detailed look at what the Gradle plugin for Vaadin did for us.

When we run the createVaadinProject target, the plugin creates two files. MyApplication.groovy inside com.example.myapplication package and web.xml in src/main/webapp/WEB-INF folder.

The plugin also defines the vaadinRun target that starts up the Jetty web server and deploys the application.

There are other targets such as createVaadinTheme, devmode, widgetset, and more in the Vaadin plugin. All these, and more information about the plugin configuration, can be found on the GitHub page:

https://github.com/johndevs/gradle-vaadin-plugin

Scala installation is quite easy. Just go to http://www.scala-lang.org/downloads, download Scala, and set up system variables as follow:

We have to maintain our project anyhow and we are going to utilize Gradle.

Carry out the following steps in order to create a new Scala project:

We have made a Gradle project in which we have applied the scala plugin. The Scala plugin inside the Gradle build script ensures that all the .scala files inside the src/main/scala source folder will be compiled. Scala files are compiled to .class files that are then deployed on the Jetty webserver.

The deployment descriptor (web.xml file) defines one servlet. When users access the URL with the /* pattern, which is mapped to the Vaadin servlet, MyVaadinUI is shown in the browser.

The important thing we need to check is the init-param element of the Vaadin servlet. It needs to point exactly to the UI class, which represents our application. The path to the UI class must be the full name of the class together with the package, for example, app.MyVaadinUI.

Install the Eclipse Groovy/Grails Tool Suite (GGTS). download link is available at the Grails pages at http://grails.org/products/ggts.

Carry out the following steps in order to create a new Grails project with Vaadin:

We have made a Grails project where we have replaced the Grails view layer with a Vaadin framework. The integration between Grails and Vaadin is done by the Grails plugin that is connecting these two frameworks. As you have experienced, the Vaadin plugin is available via the Grails plugin system (http://grails.org/plugin/vaadin).

Let's have a close look at what the Vaadin plugin has generated for us.

The MyUI.groovy file has been generated inside the grails-app/vaadin source folder. MyUI represents the Vaadin user interface, which is shown to the user in the browser window.

package app

import com.vaadin.ui.UI
import com.vaadin.ui.VerticalLayout
import com.vaadin.server.VaadinRequest
import com.vaadin.ui.Label
import com.vaadin.grails.Grails

class MyUI extends UI {

  @Override
  protected void init(VaadinRequest vaadinRequest) {
    VerticalLayout layout = new VerticalLayout()
    String homeLabel = Grails.i18n("default.home.label")
    Label label = new Label(homeLabel)
    layout.addComponent(label)
    setContent(layout)
  }
}

We should store all the Vaadin code we create inside the grails-app/vaadin source folder.

The Vaadin plugin needs to have information about the location of the MyUI class in order to add that information to the web.xml deployment descriptor. Therefore, a new file VaadinConfig.groovy has been generated inside the grail-app/conf folder.

vaadin {
  mapping = [ "/*": "app.MyUI" ]
  productionMode = false
}

environments {
  production {
    vaadin {
      productionMode = true
    }
  }
}

In VaadinConfig.groovy, we can change the path to the UI class. We can also add more UI classes.

vaadin {
  mapping = [ "/*": "app.MyUI", "/ui/*": "app.YourUI" ]

The last thing which has been done during the plugin installation is the removal of the URL mapping inside the UrlMappings.groovy file.