This tutorial is written using the following environment:
- Hardware: Mac Book Pro 17 “Notebook (2.6 Ghz Intel Core
i7, 8 GB
- 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
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:
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:
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:
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:
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:
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.
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.