Vaadin is a framework for building rich internet applications which can be run as standalone web applications or as portlets. Liferay 6 includes support for Vaadin, but you can also deploy Vaadin application into Liferay 5.2.x portal.
This tutorial explains how to create a Vaadin application that can be run as a Liferay portlet by using the Vaadin Eclipse plugin.
To complete this tutorial you should install the following software on your environment.
Or you can use an older Liferay 5.2.x version, but in this case you must complete the Vaadin installation as described at the end of this tutorial.
The easiest way to create Vaadin portlets is to use the Vaadin Eclipse plugin. Install the latest version of the Eclipse plugin (version 1.2.1 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]
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 (Portlet 2.0) as the deployment configuration. Select the latest Vaadin version (6.4.3 at the time of writing). If the wizard suggest an older version, you should click the Download... button to download the latest release.
![]() |
You can use the default settings on all of the next stages. After the wizard completes, you should have a new project in your workspace with the name HelloVaadin. As we selected the Generic portlet (Portlet 2.0) deployment configuration, the plugin has automatically generated the following configuration files under the WebContent/WEB-INF directory.
Also the plugin generates a simple Hello World style Vaadin application inside the src directory.
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.
![]() |
After you see the "1 portlet for HelloVaadin is available for use" message on the Liferay logs, you can login as Bruno (or any other user with the administrator role) and add the portlet application into your portal.
![]() |
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.
If you are using an older Liferay 5.2.x version of the portal, you must manually install the shared Vaadin library jar and shared resources.
vaadin.resources.path=/html vaadin.theme=reindeer vaadin.widgetset=com.vaadin.portal.gwt.PortalDefaultWidgetSet
On deployment you should exclude the vaadin-6.x.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.
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")).
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 5.2.x installation package. 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:
![]() |
10 Attachments | Average (0 Votes) ![]() ![]() ![]() ![]() |