Create a Vaadin Portlet for Liferay

In this tutorial will be explained how to create a Vaadin Portlet for Liferay Portal from scratch.
We will use Eclipse Juno (but it applies to next versions as well), a Liferay Portal installation (version 6.1 in this tutorial) and the RIA framework Vaadin.




Requirements:

1) An Eclipse IDE for J2EE, if you have not one you can download and unzip a copy from www.eclipse.org

2) A Liferay Portal installation, you you have not one you can download and unzip a copy from www.liferay.com

3) A Liferay SDK for portlet developement, you can search, download and unzip a copy from www.liferay.com

Set up Liferay Environment for creating portlets

1) Installation of Liferay Eclipse IDE. Open Eclipse and select the menu item Help -> Eclipse Marketplace:

2) Search for "liferay" and press "Install" to the item "Liferay IDE":

3) Open Liferay Perspective to show Liferay IDE toolbar, and set up a new Liferay SDK:

4) Select Liferay SDK path and press OK:

5) To edit it in the future just select "Edit":

6) Create a new Server:

7) Select the Liferay version to use, 6.1 in this example:

8) In "Server Runtime Environment" press "Configure runtime environment" if you want to change the java version (i.e. from java 6 to java 7):

9) In "Select runtime JRE" it is possibile to select a JRE from installed JREs, alternatively you can set up a new JRE pressing the button "Installed JREs":

10) At the end of this procedure press "Finish". The new server will be added and it will be possibile to start it in Run or Debug mode.

Create a new Vaadin Portlet for Liferay

1) From the liferay toolbar select "New Liferay Project":

2) In "Project name"just insert the application name, other configurations shoud be already correct, change them just if you have multiple SDK or Runtimes, as needed, then press "Next":

3) Select the option "Vaadin" then press "Next":

4) The base code for the portlet will be generated:

5) Due to a little bug in Liferay IDE you have to edit the file "portlet.xml" to change the row n. 9 from:

<name>view-template</name>

to:

 <name>application</name>

The main application code is contained in the package with the name of the project that you have specified in the previous steps:

6) It is now possibile to run the portlet on the destination server. To do this add the portlet to the server, right click on the server and choose "Add and remove...":

Select the portlet and click "Add" and then click to "Finish":

Now you are ready, just start the server in desired mode, "debug" or "run", go to portal url address, add the deployed portlet in a page, from the liferay portlet catalog: