Vaadin Portlets in Liferay User Interface Development

Exclusive offer: get 80% off this eBook here
Liferay User Interface Development

Liferay User Interface Development — Save 80%

Develop a powerful and rich user interface with Liferay Portal 6.0

₨924.00    ₨184.80
by Frank Yu Jonas X. Yuan Xinsheng Chen | November 2010 | Open Source

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

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
        Read more about this book      

(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: ₨924.00
Book Price: ₨1,540.00
See more
Select your format and quantity:
        Read more about this book      

(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: ₨924.00
Book Price: ₨1,540.00
See more
Select your format and quantity:
        Read more about this book      

(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:


About the Author :


Frank Yu

Frank has 10 years of extensive experience in Vignette-based and Liferay-based portal design, development, architecture, and project management, particularly in healthcare portal application development. As a project lead and senior Liferay architect, he provides portal design and architecture consulting services and manages multiple onshore and offshore teams to build portal and CMS applications for his clients.

His team leadership and hand-on experience in areas such as portlets, portal themes and skins, the customization of portal frameworks, CMS, architecture, and performance tuning have been proven to be very valuable for his clients. He also has deep knowledge in system integration with multiple legacy systems, all major RDBMS and J2EE application servers. Previously, he worked on different portal products or applications at InterComponentWare, Pay By Touch, and McKesson, a Fortune-14 healthcare company. He holds an M.S. degree in Computer & Information Sciences and was a Ph.D. candidate in cancer research. He received his B.S. degree from Nanjing University, China.

Jonas X. Yuan

Jonas X. Yuan is a Chief Architect of ForgeLife LLC and an expert on Liferay Portal, e-commerce, and Content Management Systems (CMS). As an open source community contributor, he has published five Liferay books from 2008 to 2012. He is also an expert on Liferay integration with Ad Server OpenX, different search engines, enterprise content including videos, audio, images, documents, and web contents, and other technologies, such as BPM Intalio and Business Intelligence Pentaho, LDAP, and SSO. He holds a Ph.D. in Computer Science from the University of Zurich, where he focused on Integrity Control in federated database systems.

He earned his M.S. and B.S. degrees from China, where he conducted research on expert systems for predicting landslides. Previously, he worked as a Project Manager and a Technical Architect in Web GIS (Geographic Information System).
He is experienced in Systems Development Lifecycle (SDLC) and has deep, hands-on skills in J2EE technologies. He developed a BPEL (Business Process Execution Language) engine called BPELPower from scratch at the NASA data center. As the chief architect, Dr. Yuan successfully led and launched several large-scale Liferay/Alfresco e-commerce projects for millions of users each month.

He has worked on the following books: Liferay Portal Enterprise Intranets, 2008; Liferay Portal 5.2 Systems Development, 2009; Liferay Portal 6 Enterprise Intranets, 2010; Liferay User Interface Development, 2010; Liferay Portal Systems Development, 2012.

Xinsheng Chen

Xinsheng Chen is a web application architect. He holds an MS degree in Computer Science from California State University, San Bernardino. His focus was on online banking applications. He also has a Bachelor's degree from Wuhan University, China. Mr. Chen was previously a QA engineer working at VMware, Inc. He later led a team in developing four educational computer games for a Florida school district. Mr. Chen has rich experience in J2EE technologies. He also has extensive experience in Content Management Systems (CMS), including Alfresco. He has worked on 23 Liferay Portal projects. He is also the co-author of Liferay Beginner's Guide and Liferay User Interface Development.

Books From Packt


Liferay Portal 6 Enterprise Intranets
Liferay Portal 6 Enterprise Intranets

Liferay Portal 5.2 Systems Development
Liferay Portal 5.2 Systems Development

Silverlight 4 User Interface Cookbook
Silverlight 4 User Interface Cookbook

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

Learning the Yahoo! User Interface library
Learning the Yahoo! User Interface library

Asterisk Gateway Interface 1.4 and 1.6 Programming
Asterisk Gateway Interface 1.4 and 1.6 Programming

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

Yahoo User Interface 2.X Cookbook: RAW
Yahoo User Interface 2.X Cookbook: RAW


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software