Introduction

Vaadin is a framework for building rich internet applications which can be run as standalone web applications or as portlets. Liferay 5.3 will include Vaadin support but you don't have to wait for the 5.3 release to create Vaadin portlets.

This article explains how to create a Vaadin application that can be run as a Liferay portlet by using the Vaadin Eclipse plugin. If you just want to try out deploying a war file containing an example application, you should check out this article.

Prerequisites

To complete this tutorial you should install the following software on your environment.

• Eclipse IDE for Java EE Developers
• Liferay Portal 5.2.3 (Tomcat 6.0 bundle)

Installing the Eclipse plugin

The easiest way to create Vaadin portlets is to use the Vaadin Eclipse plugin. Install the latest version of the Eclipse plugin (version 1.0 at the time of writing) by adding the following update site URL to your Eclipse. By opening the same URL in your browser, you get more detailed installation instructions.

[http://vaadin.com/eclipse]

Create a New Vaadin Project

First we need to create a new Vaadin project. You can do this by selecting New -> Project... -> Vaadin Project.

Next you must give a name for the project (I'll use HelloVaadin). And you must select Generic portlet as the deployment configuration. Also make sure that you have Vaadin 6.1.2 selected. If the version 6.1.2 is not available in the menu, you should click the Download... button to download the latest release (which currently is 6.1.2).

You can use the default settings on all of the next stages but make sure that the last stage has the Create portlet configuration checkbox selected. This means that the following portlet configuration files are automatically generated under the WebContent/WEB-INF directory.

• liferay-display.xml
• liferay-portlet.xml
• portlet.xml
• liferay-plugin-package.properties

You also need to make sure the compiler compliance level is set to 1.5 and the project Java Facet is at version 5.0 if you're using the default 1.5 JRE provided in the Liferay installation package. This means exactly that Version, not that Version or above. Otherwise you'll get java.lang.UnsupportedClassVersionError: Bad version number in .class file error when trying to use the portlet. You can do this in the Java Compiler and Project Facets sections of the properties of your project. This error looks like this e.g. in the tomcat console:

Deploying the Application as a Portlet

The example project is now ready to be deployed into Liferay. Startup your Liferay portal and after it's running right-click the project and select Export... -> WAR file. Select the deploy directory of your Liferay installation as the target directory to directly hot-deploy the Vaadin application.

Next you can login as Bruno (or any other user with the administrator role) and add the portlet into your portal.

Deploying the Application as a Web Application

You can easily deploy and debug the same application also as a web application outside the portal.

Open the Servers view on your Eclipse. If you haven't defined any servers, you should do it now. After defining a server (I'll assume Tomcat here), right-click the Tomcat and select Add and Remove... to add the HelloVaadin project to be run in the Tomcat. Start the Tomcat server and open your browser with the URL http://localhost:8080/HelloVaadin/HellovaadinApplicationServlet to run the Vaadin application without the portal.

Prepare Your Liferay 5.2 to Handle Multiple Vaadin Portlets

This chapter will be obsolete when using Liferay 5.3 or later release.

If you are planing to deploy multiple Vaadin portlets, you should use a shared Vaadin library and shared resources.

1. Download and unzip the Vaadin package from http://vaadin.com/download.
2. Copy the vaadin-6.1.x.jar file (found in the WebContent/WEB-INF/lib directory) to LIFERAY_HOME/tomcat-6.0.18/webapps/ROOT/WEB-INF/lib/vaadin.jar. Notice that you must remove the version information from the filename.
3. Copy the VAADIN directory and all subdirectories (found under the WebContent directory) into LIFERAY_HOME/tomcat-6.0.18/webapps/ROOT/html.
4. Next you must create (or edit) your portal-ext.properties file (in the LIFERAY_HOME/tomcat-6.0.18/webapps/ROOT/WEB-INF/classes directory) and add the following lines so that the Vaadin application knows where to find the theme and widgetset resources.

vaadin.resources.path=/html
vaadin.theme=reindeer
vaadin.widgetset=com.vaadin.portal.gwt.PortalDefaultWidgetSet

On deployment you should exclude the vaadin-6.1.x.jar file from the war package since now your portlets use the shared vaadin.jar. See the liferay-plugin-package.properties file for the source of the dependency.

Troubleshooting

Why is my application not visible?

Check if you have defined the height of the main layout of your application as percentages. The portlet height might be zero and therefore heights defined as percentages are also zero. You can fix this by defining the height in pixels (e.g. setHeight("500px")).

Resources

• Vaadin
• Book of Vaadin - Vaadin manual
• Vaadin Eclipse plugin - Eclipse IDE integration plugin
• Mail Portlet example
• http://vaadin.com/web/sami/liferay - Vaadin applications in Liferay blog post
• Code, Deploy and Test with Liferay and Vaadin - Screencast @ Youtube
• Vaadin Mail Portlet Tour on Liferay - Screencast @ Youtube