Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating a portlet with Primefaces

1. Environment

This tutorial is written using the following environment:

  • Hardware: Mac Book Pro 17 “Notebook (2.6 Ghz Intel Core
    i7, 8 GB
    DDR3)
  • Operating System: Mac OS X Snow Leopard 10.6.4
  • Spring MVC Portlet 3.0.4
  • Maven 2.2.1
  • Eclipse 3.6 (Helios) with M2Eclipse
  • Liferay 6.0.5
  • Primefaces 2.2.1

2. Introduction

In this tutorial we will see how to configure our Liferay project to make use of the JSF 2.0 features through the Primefaces library, an introduction to this library.

Here we will focus on the necessary configuration and we will see a very simple example to know that everything went well.

3. Creating the project

To create the project we have to follow the same steps

The only thing that will change (if you want) is the name of the artifactId, which we will call liferay-primefaces.

4. Adding dependence on primefaces

To add the dependency of primefaces to our project we have to edit the pom.xml file and add the following dependencies to the existing ones:

javax.faces
jsfapi
2.0
com.sun.faces
jsfimpl
2.0.4b09
org.primefaces
primefaces
2.2
org.portletfaces
portletfacesbridge
2.0.0BETA3
javax.servlet.jsp
jspapi
2.0
provided

If you have any problem downloading these downloads try adding the following repositories in your pom.xml:

5. Configuring portlet.xml

As you know, if you have followed other previous tutorials on portlets, the portlet.xml file is the most important in projects of these characteristics, since this is where you define the portlets that your project will have and the views and classes that they will implement it. In this case we are going to define a single portlet with VIEW and EDIT views. Note that to use the JSF 2.0 features of primefaces, the class in our portlet must be org.portletfaces.bridge.GenericFacesPortlet.

Here is the content of the pom.xml file:

1
PrimeFaces Portlet
org.portletfaces.bridge.GenericFacesPortlet
javax.portlet.faces.defaultViewId.view
/view.xhtml
javax.portlet.faces.defaultViewId.edit
/edit.xhtml
text/html
view
edit
PrimeFaces Portlet
PrimeFaces Portlet
JSF 2.0

6. Configuring web.xml

The next step is to configure the web.xml file where we will define the servlet that will be responsible for managing the requests that have to enter the life cycle of JSF 2.0. This would be the resulting content:

Faces Servlet
javax.faces.webapp.FacesServlet
1

7. Configuring faces-config.xml

Everyone who has ever worked with JSF will know that this is a very important file, but since version 2.0 it has become an optional file since everything can be defined with annotations. The fact is that the bridge that uses our portlet requires this file even if it contains nothing, if it does not exist it will throw an error. Here you have an example of content:

8. Configuring liferay-portlet.xml and liferay-display.xml files

We already know that these files are exclusive to Liferay and are used to define portlet characteristics that are only relevant for Liferay such as: what category to place the portlet, if it is going to be instantiable, how are you going to manage the permissions, etc …

Here I propose some examples for the content of these files:

liferay-portlet.xml

1
true
false

liferay-display.xml

9. Developing the portlet

So far we have the project configured to start developing our JSF 2.0 portlet with the Primefaces library. This example is based on the sample portlet that the Primefaces people describe in their official documentation.

The first step will be the implementation of a welcome page to our porlet, which we will develop in the file /view.xhtml, defined in the portlet.xml, with the following content:

Welcome to Gambit Portlet Powered by PrimeFaces

As you can see, it simply shows in text in the VIEW mode of the portlet. Now we are going to implement the functionality of the portlet in the EDIT mode for which we are going to edit the file /edit.xhtml with the following content:

In this example we are going to implement a betting game. First, the total obtained after each roll is shown, then the user can enter the amount that he wants to bet as the color is red or black.

Finally we will implement the functionality of the game in a ManagedBean that will act as controller with the following content:

In this class, defined as ManagedBean with annotations there is no need to edit the file faces-config.xml, we define the attributes and logic of the game, showing a message inside the portlet indicating whether the user has won or lost the bet.

10. Testing the result

To test the result, all we have to do in a package of our project is to run mvn clean package in the terminal, followed by mvn liferay: deploy. It is very important not to forget to modify the property of our pom.xml pointing to the deploy folder of the Liferay server that we want to use for the test.

This will display our portlet in Liferay and we can instantiate it in any page with what we would see the following

With the necessary permissions, for example, managing with Bruno, we could access the portlet preferences .

At this point we can play the money betting on red or black. In case of winning it would.

And in case of losing.

11. Conclusions

As you can see, creating a portlet using the latest version of JSF is not complicated, thanks to the GenericFacesPortlet bridge and the Primefaces library. The most important thing is that you stay with how the project is configured, the example is an example.

The post Creating a portlet with Primefaces appeared first on Target Veb.



This post first appeared on Targetveb, please read the originial post: here

Share the post

Creating a portlet with Primefaces

×

Subscribe to Targetveb

Get updates delivered right to your inbox!

Thank you for your subscription

×