Liferay supports developing and deploying JSF portlets on Liferay Portal by using Liferay Faces Bridge. The bridge supports deploying JSF web applications as portlets on any JSR 286 (Portlet 2.0) compliant portlet container, like Liferay Portal 5.2, 6.0, 6.1, and 6.2. Liferay Faces Bridge makes developing JSF portlets as similar as possible to JSF web app development. In this tutorial, you’ll learn the portlet development process and how to leverage Liferay Faces Bridge’s full potential with your JSF portlets. This will make it easy for you to implement portlets using JSF.
Liferay IDE, with its powerful portlet plugin wizard, provides you with a great environment to create a JSF portlet project. The wizard lets you select a component suite that’s right for your project, including JSF’s standard UI component suite, ICEfaces, Liferay Faces Alloy, PrimeFaces, and RichFaces. Of course, you can use any development environment you like for building JSF portlets, but Liferay IDE is hard to beat. Next, you’ll use Liferay IDE to create your JSF portlet project.
Creating a JSF Portlet Project
In this tutorial, you’ll create a JSF portlet project using Liferay IDE/Developer Studio, so you can see just how easy it is. If you don’t have it installed yet, see the Developing Apps with Liferay IDE learning path for full details. If you do have it installed, launch it.
Go to File → New → Liferay Plugin Project.
In the project creation wizard’s first window, you’ll name your project and specify its development and runtime environments.
2.1 Fill in the Project name and Display name. Project names must not have any spaces and it’s best to specify them in lowercase. The Display name, however, can have spaces. You should specify the portlet’s Display name just as you want it displayed to the user.
2.2. Leave the Use default location checkbox checked. By default, the default location is set to your current Plugins SDK. If you’d like to change where your plugin project is saved in your file system, uncheck the box and specify your alternate location.
2.3. Select the Ant (liferay-plugins-sdk) option for your build type. If you’d like to use Maven for your build type, navigate to the Using Maven From Liferay IDE tutorial for details.
2.4. Your configured SDK and Liferay Runtime should already be selected. If you haven’t yet pointed Liferay IDE to a Plugins SDK, click Configure SDKs to open the Installed Plugin SDKs management wizard. You can also access the New Server Runtime Environment wizard if you need to set up your runtime server; just click the New Liferay Runtime button next to the Liferay Portal Runtime dropdown menu.
2.5. Select Portlet as your Plugin type and click Next.
In this window, you’ll select the portlet framework for your portlet and a UI component suite.
3.1 Select the JSF 2.x portlet framework.
Immediately, the wizard lists the available JSF component suites in the bottom section of the window. The list of component suites includes the JSF Standard suite, ICEfaces, Liferay Faces Alloy, PrimeFaces, and RichFaces.
3.2. Select the UI component suite you’d like to use and click Finish.
Great! Your new JSF portlet plugin project is ready for you to develop JSF portlets.
To access components from a component suite, make sure to declare that suite as
an XML namespace attribute in the
<f:view> element of your facelet file. For
example, if you’d selected PrimeFaces as your project’s UI component suite,
you’d add a namespace for it (e.g.,
your facelet file’s
See how easy that was? Now that you’ve created a generic or modified JSF portlet, it’s time to deploy your JSF portlet to the portal and see what it looks like.
Deploying JSF Portlets
Liferay provides a mechanism called auto-deploy that makes deploying JSF
portlets (and any other plugin types) a breeze. All you need to do is drop the
.war file into the deploy directory, and the portal makes the
necessary changes specific to Liferay and then deploys the plugin to the
application server. This is a common method of deployment used throughout the
For this part of the tutorial, you’ll learn how to deploy a JSF portlet using IDE/Developer Studio and the terminal.
Deploying in Developer Studio: Drag your portlet project onto your server. When deploying your plugin, your server displays messages indicating that your plugin was read, registered and is now available for use.
Reading plugin package for [your-project] Registering portlets for [your-project] 1 portlet for [your-project] is available for use
If at any time you need to redeploy your JSF portlet while in Developer Studio, right-click your portlet located underneath your server and select Redeploy.
Deploying in the terminal: Open a terminal window in your portlet’s project directory and enter the following command.
BUILD SUCCESSFUL message indicates that Ant built your portlet’s WAR file
and that it’s now being deployed. If you switch to the terminal window running
Liferay, within a few seconds you should see a message, like the following
message, indicating that your plugin is available to use in the portal:
1 portlet for [your-project] is available for use
If you don’t see such a message, double-check your plugin’s configuration.
In your web browser, log in to the portal. Click the Add button, which appears as a Plus symbol in the top right hand section of your browser. Then click Applications, find the portlet in the Sample category, and click Add. Your portlet appears on the page, but Liferay Faces lets you know when a UI component requires a page refresh to render the first time. Refresh the page and the portal renders your JSF portlet.
It’s just that easy to create and deploy JSF portlet plugins!
Developing Liferay Faces Portlets with Maven
Using Portlet Preferences with JSF
Liferay Faces Alloy UI Components
Liferay Faces Bridge UI Components