Creating your first Vaadin Portlet for Liferay

In this short blog post I just want to show how to create a basic Vaadin portlet for the Liferay platform, which from version 6 includes support for the Vaadin framework.

Before you start developing portlets with Vaadin, you have to integrate the Vaadin themes, widgetset and jars into the Liferay portal. You can find on this wiki page detailed instructions. When you download Liferay, you can find the /liferay/tomcat-7.0.42/webapps/ROOT/html/VAADIN folder, where content has to be replaced by files from the Vaadin framework, which you download as a .zip file. Assuming you downloaded Liferay bundled with Tomcat and Vaadin as a .zip, you have to:

• Remove /liferay/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/vaadin.jar file
• Extract vaadin-server.jar file from downloaded Vaadin framework and copy vaadinBootstrap.js file into /liferay/tomcat-7.0.42/webapps/ROOT/html/VAADIN folder
• Extract vaadin-themes.jar file from downloaded Vaadin framework and replace themes folder in /liferay/tomcat-7.0.42/webapps/ROOT/html/VAADIN folder
• Extract vaadin-client-compiled.jar file from downloaded Vaadin framework and replace widgetsets folder in /liferay/tomcat-7.0.42/webapps/ROOT/html/VAADIN folder
• Copy vaadin-server.jar, vaadin-shared.jar from root folder and jsoup.jar from lib folder of vaadin framework into /liferay/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib folder

Now you can develop Vaadin portlets for Liferay. You have more options how to create a vaadin portlet for Liferay, but probably the fastest way is to use vaadin plugin. Just create vaadin project, extract it as .war and deploy it on Liferay’s tomcat.