Creación de un portlet con Primefaces

0. Índice de
contenidos.

• 1. Entorno
  
• 2. Introducción
  
• 3. Creando el proyecto
  
• 4. Añadiendo la dependencia de primefaces
• 5. Configurando portlet.xml
• 6. Configurando web.xml
• 7. Configurando faces-config.xml
• 8. Configurando ficheros liferay-portlet.xml y liferay-display.xml
• 9. Desarrollando el portlet
• 10. Probando el resultado
• 11. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core
  i7, 8 GB
  DDR3)
• Sistema Operativo: Mac OS X Snow Leopard 10.6.4
• Spring MVC Portlet 3.0.4
• Maven 2.2.1
• Eclipse 3.6 (Helios) con M2Eclipse
• Liferay 6.0.5
• Primefaces 2.2.1

2. Introducción

En este tutorial vamos a ver como configurar nuestro proyecto de Liferay para hacer uso de las características de JSF 2.0 a través de la librería Primefaces, este enlace tenéis una introducción a esta librería.

Aquí nos vamos a centrar en la configuración necesaria y vamos a ver un ejemplo muy simple para saber que todo ha ido bien.

3. Creando el proyecto

Para crear el proyecto tenemos que seguir los mismos pasos que encontramos en este otro tutorial: Ejemplo básico con Spring MVC Portlet.

Lo único que va a cambiar (si queréis) es el nombre del artifactId, el cual vamos a llamar liferay-primefaces.

4. Añadiendo la dependencia de primefaces

Para añadir la dependencia de primefaces a nuestro proyecto tenemos que editar el fichero pom.xml y añadir las siguientes dependencias a las existentes:

Si tenéis algún problema al descargar estas depedendencia probar a añadir los siguientes repositorios en vuestro pom.xml:

5. Configurando portlet.xml

Como ya sabéis, si habéis seguido otros tutoriales anteriores sobre portlets, el fichero portlet.xml es el más importante en los proyectos de estas características, dado que es aquí donde se definen los portlets que va a tener nuestro proyecto y las vistas y clases que lo van a implementar. En este caso vamos a definir un único portlet con las vistas VIEW y EDIT. A destacar que para utilizar las características JSF 2.0 de primefaces, la clase de nuestro portlet tiene que ser org.portletfaces.bridge.GenericFacesPortlet.

Aquí se muestra el contenido del fichero pom.xml:

6. Configurando web.xml

El siguiente paso a dar es configurar el fichero web.xml donde vamos a definir el servlet que se va a encargar de gestionar las peticiones que tengan que entrar por el ciclo de vida de JSF 2.0. Este sería el contenido resultante:

7. Configurando faces-config.xml

Todo el que alguna vez haya trabajado con JSF sabrá que este es un fichero muy importante, pero a partir de la versión 2.0 se ha convertido en un fichero opcional dado que todo se puede definir con anotaciones. El caso es que el bridge que utiliza nuestro portlet requiere de este fichero aunque no contenga nada, si no existe nos lanzará un error . Aquí os dejo un ejemplo de contenido:

8. Configurando ficheros liferay-portlet.xml y liferay-display.xml

Ya sabemos que estos ficheros son exclusivos de Liferay y que se utilizan para definir características del portlet que sólo son relevantes para Liferay como: en que categoría situar el portlet, si va a ser instanciable, como va a gestionar los permisos, etc …

Aquí os propongo unos ejemplos para el contenido de estos ficheros:

liferay-portlet.xml

liferay-display.xml

9. Desarrollando el portlet

Hasta aquí ya tenemos el proyecto configurado para poder comenzar a desarrollar nuestro portlet JSF 2.0 con la librería de Primefaces. Este ejemplo está basado en el portlet de ejemplo que la gente de Primefaces describe en su documentación oficial. Es que mi fuerte no es la imaginación 😉

El primer paso va a ser la implementación de una página de bienvenida a nuestro porlet, la cual la vamos a desarrollar en el fichero /view.xhtml, definido en el portlet.xml, con el siguiente contenido:

Como veis simplemente muestra en texto en el modo VIEW del portlet. Ahora vamos a implementar la funcionalidad del portlet en el modo EDIT para lo cual vamos a editar el fichero /edit.xhtml con el siguiente contenido:

En este ejemplo vamos a implementar un juego de apuestas. En primer lugar se muestra el total obtenido después de cada tirada, luego el usuario puede introducir la cantidad que desea apostar y a que color entre rojo o negro.

Por último vamos a implementar la funcionalidad del juego en un ManagedBean que va a actuar de controlador con el siguiente contenido:

En esta clase, definida como ManagedBean con anotaciones de ahí que no haya que editar el fichero faces-config.xml, definimos los atributos y la lógica del juego, mostrando un mensaje dentro del portlet indicando si el usuario a ganado o perdido la apuesta.

10. Probando el resultado

Para probar el resultado lo único que tenemos que hacer en un package de nuestro proyecto ejecutando mvn clean package en el terminal, seguido de mvn liferay:deploy. Muy importante no olvidar modificar la propiedad de nuestro pom.xml apuntando a la carpeta deploy del servidor de Liferay que queramos utilizar para la prueba.

Esto desplegará nuestro portlet en Liferay y podremos instanciarlo en cualquier página con lo que veríamos lo siguiente:

Con los permisos necesarios, por ejemplo, logándonos con Bruno, podríamos a acceder a las preferencias del portlet como se muestra en la imagen:

Con lo que deberíamos ver algo como esto:

En este punto ya podemos jugarnos el dinero apostando al rojo o al negro. En caso de ganar se mostraría de esta forma:

Y en caso de perder:

11. Conclusiones

Como veis crear un portlet utilizando la última versión de JSF no es nada complicado, gracias al bridge GenericFacesPortlet y a la librería de Primefaces. Lo más importante es que os quedéis con como se configura el proyecto, el ejemplo es eso un ejemplo.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.