In this article I will show you how to build a portlet for the Liferay Portal using JavaServer Faces (JSF). I am not going to explain in detail how to setup Liferay, there are a lot of articles on that subject. I assume you have Java, Tomcat, Liferay, Ant and the Portal plugin SDK up and running.

Setting up the build

The first step is to create the directory and file structure. I will use the pluginsdk to do it for us. Execute the following command in the command line in the directory ‘{pluginsdk}/portlets’:

create.bat sample-Jsf-Portlet "Sample Jsf Portlet"

The first parameter is the name of the portlet, also the name of the directory that will be created for this portlet. The second parameter is the title or display name for the portlet: you will be see the portlet in Liferay with this display name.

After executing the above statement the portlet is created as a plain JSP portlet in a new sub directory. Navigate to the created sub directory and build the portlet using the following command:

ant all

After the build and deploy have been completed fire up your application server and verify if the portlet is up and running.

Setting up JavaServer Faces

The next step is to configure the portlet to run using JSF instead of JSP.

Delete all the files in the ‘docroot/WEB-INF/src’ directory.

Next set up the appropiate libraries, copy the following JARs to ‘docroot/WEB-INF/lib’:

• jsf-api.jar
• jsf-impl.jar
• jsf-portlet.jar

Next modify the ‘docroot/WEB-INF/web.xml’ to look exactly like this:

< ?xml version="1.0" encoding="UTF-8"?>
<web -app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<context -param>
<param -name>javax.faces.STATE_SAVING_METHOD</param>
<param -value>client</param>
</context>
<context -param>
<param -name>javax.faces.application.CONFIG_FILES</param>
<param -value>/WEB-INF/faces-config.xml</param>
</context>
<context -param>
<param -name>com.sun.faces.validateXml</param>
<param -value>false</param>
</context>
<listener>
</listener><listener -class>com.liferay.util.bridges.jsf.sun.LiferayConfigureListener</listener>

<servlet>
</servlet><servlet -name>FacesServlet</servlet>
<servlet -class>javax.faces.webapp.FacesServlet</servlet>

<servlet -mapping>
</servlet><servlet -name>FacesServlet</servlet>
<url -pattern>/faces/*</url>

<security -constraint>
<web -resource-collection>
</web><web -resource-name>Page Sources</web>
<url -pattern>*.jsp</url>
<url -pattern>*.jspx</url>
<url -pattern>*.xhtml</url>
</security></web>
<auth -constraint>
<role -name>nobody</role>
</auth>

<security -role>
<role -name>nobody</role>
</security>

Next modify the ‘docroot/WEB-INF/portlet.xml’, change the following lines:

<portlet -class>com.sun.faces.portlet.FacesPortlet</portlet>
<init -param>
<name>com.sun.faces.portlet.INIT_VIEW</name>
<value>/view.jsp</value>
</init>

Create a new file ‘docroot/WEB-INF/faces-config.xml’ and add the following content:

< ?xml version="1.0" encoding="UTF-8"?>
< !DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces -config xmlns="http://java.sun.com/JSF/Configuration">
</faces>

Add the following line to the build properties file ‘docroot/WEB-INF/liferay-plugin-package.properties’:

portal-dependency-jars=commons-beanutils.jar,commons-collections.jar,commons-digester.jar,jstl.jar,jstl-impl.jar

This will setup the portlet to run in the JSF context.

Modify the view

Open the ‘docroot\view.jsp’ and replace the content with:

< %@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
< %@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f :view>
<p>Hello World, from a JSF portlet</p>
</f>

Compile, Deploy and Run

Compile and deploy the code using the above Ant command. The portlet is being deployed to the application server. Add the portlet to a page and view the result.

I hope this helped you to get build JSF based portlets. Download the source. Take care!