In this article, by Jonas X. Yuan, Xinsheng Chen & Frank Yu, authors of Liferay User Interface Development, we will learn about vaadin portlets in liferay user interface development.

This article specifically covers:

• Required software
• Configuring Tomcat 6.0 in Eclipse
• Installing Vaadin Eclipse plugin
• Creating a Vaadin project
• Deploying a Vaadin project as a portlet
• Integrating Vaadin portlet and Liferay environment

Liferay User Interface Development

Develop a powerful and rich user interface with Liferay Portal 6.0 Design usable and great-looking user interfaces for Liferay portals Get familiar with major theme development tools to help you create a striking new look for your Liferay portal Learn the techniques and tools to help you improve the look and feel of any Liferay portal A practical guide with lots of sample code included from real Liferay Portal Projects free for use for developing your own projects

(For more resources on this subject, see here.)

Introduction

Vaadin portlets are developed with Vaadin framework. The Vaadin framework can also be used to develop standalone web applications. Liferay portal supports the Vaadin portlets.

In this section, we will write a Vaadin portlet for Liferay portal using the Vaadin Eclipse plugin.

Required software

Install the following software for the development environment, if they are not already there:

• Eclipse Java EE IDE
• Liferay portal 6.x.x with Tomcat 6.0.x

Configuring Tomcat 6.0 in Eclipse

If you have not already done so, configure Tomcat 6.0 in Eclipse as follows:

1. Start Eclipse. Click on Window | Preferences.
2. Expand Server. Click on Runtime Environment.
3. Click on Add ....
4. Select Apache Tomcat v6.0. Click on Next.
5. Click on Browse and open the tomcat-6.0.x directory.
6. Click on Finish.

Installing Vaadin Eclipse plugin

You can automatically create a Vaadin portlet prototype for Liferay portal with the Vaadin Eclipse plugin. Here is how you can install it:

1. Assuming that Eclipse is open. Click on Help. Select Install New Software ...
2. Click on Add ....
3. Input Name: Vaadin, Location: http://vaadin.com/eclipse. Click on OK.
4. Click on Finish.

The Vaadin Eclipse plugin will be installed. It will take several minutes.

Liferay User Interface Development

Develop a powerful and rich user interface with Liferay Portal 6.0

Published: November 2010
eBook Price: $29.99
Book Price: $49.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

(For more resources on this subject, see here.)

Creating a Vaadin project

We can now create a Vaadin project with the Vaadin Eclipse plugin. Our Vaadin portlet will be written in this Vaadin project. Here is the procedure:

1. Click on File | New | Project ....
2. Expand Vaadin. Select Vaadin Project. Click on Next.
3. Input Project name: FirstVaadin. For Project location, Use default location is automatically checked. Input Target runtime: Apache Tomcat v6.0, Configuration: Default Configuration for Apache Tomcat v6.0. For Deployment configuration, select Generic portlet (Portlet 2.0). For Vaadin version, if Vaadin has not yet been installed, click on Download.... Install the latest version of Vaadin, say, 6.4.3. Click on Next.
4. Use default values for the following windows. Click on Finish.

A runnable prototype of a Vaadin portlet has been created in this FirstVaadin project. Expanding the FirstVaadin/WebContent/WEB-INF directory, you will find the following files:

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

These are Liferay portlet configuration files that you are familiar with. The Vaadin Eclipse plugin has automatically generated these files based on the Generic portlet (Portlet 2.0) deployment configuration.

Let us have a look at the contents of the portlet.xml file:

<portlet>
  <portlet-name>Firstvaadin Application portlet</portlet-name>
  <display-name>FirstVaadin</display-name>
  <portlet-class>com.vaadin.terminal.gwt.server.ApplicationPortlet2
</portlet-class>
  <init-param>
    <name>application</name>
    <value>com.example.firstvaadin.FirstvaadinApplication</value>
  </init-param>
  // ignore details
</portlet>

You may have noticed two things:

• The init-param does not introduce a JSP file for the portlet-class. This means that the user interface is implemented by the com.example.firstvaadin.FirstvaadinApplication Java class.
• That com.example.firstvaadin.FirstvaadinApplication class may be used as a servlet, which is a standalone web application.

In this section, we are only concerned with a Vaadin project as a portlet.

Deploying a Vaadin project as a portlet

We now deploy the Vaadin portlet.

1. Start Tomcat 6.0.x with Liferay 6.0, if it is not running.
2. Highlight FirstVaadin in Eclipse and right-click on it. Click on Export | WAR file
3. For Destination, click on Browse and select liferay-portal-6.0.x/deploy/. Click on Finish.

When you see the 1 portlet for FirstVaadin is available for use message in the log file, the FirstVaadin portlet has been deployed successfully. Log in as the Portal Administrator. Find the FirstVaadin portlet in the Vaadin category. Add the FirstVaadin portlet onto a page. Here is how it looks:

Liferay User Interface Development

Develop a powerful and rich user interface with Liferay Portal 6.0

Published: November 2010
eBook Price: $29.99
Book Price: $49.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

(For more resources on this subject, see here.)

Integrating Vaadin portlet and Liferay environment

How can we access Liferay database in a Vaadin portlet? Who is the logged in user? Can we generate an action URL? To answer these questions, we need to integrate the Vaadin portlet and the Liferay environment.

Let us update the above-mentioned Vaadin portlet as follows:

1. Uncomment the following two lines in the FirstVaadin/WebContent/WEB-INF/portlet.xml file:
   

   <!-- <portlet-mode>edit</portlet-mode> -->
   <!-- <portlet-mode>help</portlet-mode> -->

2. Update com.example.firstvaadin.FirstvaadinApplication class in the FirstVaadin/src/ folder as follows:
   

   public void init() {
     mainWindow = new Window("Vaadin Portlet Application");
     setMainWindow(mainWindow);
     //ignore details
   }
   public void handleActionRequest(ActionRequest request,
     ActionResponse response, Window window) {
     response.setRenderParameter("action", "edit");
   }
   public void handleRenderRequest(RenderRequest request,
     RenderResponse response, Window window) {
     String loggedInUserIdStr = request.getRemoteUser();
     //ignore details
     window.setContent(viewContent);
   }
   public void handleResourceRequest(ResourceRequest request,
     ResourceResponse response, Window window) {
     if (request.getPortletMode() == PortletMode.EDIT)
       window.setContent(editContent);
     //ignore details
   }

The edit and help mode configuration works together with the handleResourceRequest method in the com.example.firstvaadin.FirstvaadinApplication class. Now when you click on the wrench-shaped configuration icon, you will see the following screen:

When you click on the Preferences link, the UI for the edit mode will open:

When you click on the Help link, the UI for the help mode will open:

Because the Vaadin portlet is running in the Portlet 2.0 context, the handleRenderRequest method of the com.example.firstvaadin.FirstvaadinApplication class will run every time the page is loaded, if the request is not a resource URL request. In this handleRenderRequest method, the code checks if the the user has logged in or not. If the user has logged in, the code will go to the Liferay database, get the user's screen name and display it. In the following screenshot, the default content is displayed:

In the above screenshot, an action URL is defined for the Upgrade him! link. After you click on the Upgrade him! link, the handleActionRequest method will run (You can update database and perform other actions in the handleActionRequest method). After that the handleRenderRequest method will run. The handleRenderRequest method will check if the handleActionRequest method has run. If the handleActionRequest has run, the handleRenderRequest will display the corresponding content, as follows:

You can see that he has changed from a pauper to a prince. It is amazing!

In the above update of the Vaadin portlet, we have achieved the following goals:

• Display intended content
• Access database
• Show the logged-in user
• Use render method
• Generate an action URL
• Call action method
• Change content in UI

What's happening?

As Liferay portal contains Vaadin's widget set, themes, JAR file and all required configuration in portal.properties as follows, the above features are basically sufficient for coding UI in a Vaadin portlet.

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

As shown in the above code, the portal first specifies the location of the portal-wide Vaadin themes and widget set (that is, client side JavaScript). Then it specifies the base Vaadin theme to load automatically for all Vaadin portlets. A portlet can also include an additional theme that is loaded after the shared theme. Finally it specifies the shared widget set that is used by all Vaadin portlets running in the portal.

Summary

In this article we have covered:

• Required software
• Configuring Tomcat 6.0 in Eclipse
• Installing Vaadin Eclipse plugin
• Creating a Vaadin project
• Deploying a Vaadin project as a portlet
• Integrating Vaadin portlet and Liferay environment

Further resources on this subject:

• User Interface in Production
• Advanced Theme in Liferay User Interface Development
• Silverlight 4 User Interface: Date and Time Input, Tables, and Ratings
• DWR Java AJAX User Interface: Basic Elements (Part 1)
• User Interface Design in ICEfaces 1.8: Part 1
• Creating an Administration Interface in Django

About the Author :

Books From Packt