Introducción a Primefaces

Índice de contenidos

1. Introducción
2. Añadiendo el soporte para Primefaces
3. Creando una página de prueba
4. Añadir el soporte de un ManagedBean
5. Comparativa con otras librerías
6. Conclusiones

1. Introducción

PrimeFaces es una librería de componentes visuales open source
desarrollada y mantenida por Prime
Technology,
una compañía Turca de IT especializada en consultoría ágil, JSF, Java
EE y Outsourcing. El proyecto es liderado por Çağatay Çivici, un
miembro del «JSF Expert Group» (y forofo del Barça).

Las principales características de Primefaces son:

• soporte nativo de Ajax, incluyendo Push/Comet.
• kit para crear aplicaciones web para móviles.
• es compatible con otras librerías de componentes, como JBoss
  RichFaces.
• uso de javascript no intrusivo (no aparece en línea dentro de
  los elementos, sino dentro de un bloque <script>).
• es un proyecto open source, activo y bastante estable entre
  versiones.

Algunos inconvenientes podrían ser:

• para utilizar el soporte de Ajax tenemos que indicarlo
  explícitamente, por medio de atributos específicos de cada componente.
• no podemos utilizar el soporte de Ajax de JSF 2 (mediante
  <f:ajax>) con los componentes de Primefaces.

Este tutorial no pretende hacer un análisis exahustivo de todos los
componentes de Primefaces (más de 90 en el momento de escribir este
tutorial), sino servir de introducción y mostrar lo necesario para
poder utilizar la librería en nuestras aplicaciones web.

Este tutorial se apoya en el
de mi compañero Jose de introducción a RichFaces,
y la similitud de los ejemplos se ha hecho a propósito, para que
resulte más sencillo comparar la utilización de ambas librerías.

2. Añadiendo el soporte para Primefaces

Configuración del pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.autentia.tutorial</groupId>
	<artifactId>primefacesAppDemo</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>primefacesAppDemo Maven Webapp</name>

	<build>
		<finalName>primefacesAppDemo</finalName>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.5</source>
					<target>1.5</target>
				</configuration>
			</plugin>
		</plugins>
	</build>

	<repositories>
		<!-- Repositorio de Maven de JBoss -->
		<repository>
			<id>maven2-repository.jboss.com</id>
			<name>Jboss Repository for Maven</name>
			<url>http://repository.jboss.com/maven2</url>
		</repository>
		<!-- Repositorio con el API y la implementación de JSF 2 -->
		<repository>
			<id>maven2-repository.dev.java.net</id>
			<name>Java.net Repository for Maven</name>
			<url>http://download.java.net/maven/2</url>
		</repository>
		<!-- Repositorio de Primefaces -->
		<repository>
			<id>prime-repo</id>
			<name>Prime Technology Maven Repository</name>
			<url>http://repository.prime.com.tr/</url>
			<layout>default</layout>
		</repository>
	</repositories>

	<dependencies>
		<!-- API e implementación de JSF 2. Del repo dev.java.net -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.0.2-b10</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.0.2-b10</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<!-- Librerías de Primefaces -->
		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>2.0.2</version>
		</dependency>
	</dependencies>
</project>

Descriptor de despliegue de la aplicación web:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">

	<display-name>Introducción a Primefaces</display-name>

	<!-- Configuración de JSF -->
	<context-param>
		<description>
			Define the value returned by Application.getProjectStage(). Allowed values: Production,	Development,
			UnitTest, SystemTest, Extension. Default value is Production.
		</description>
		<param-name>javax.faces.PROJECT_STAGE</param-name>
		<param-value>Development</param-value>
	</context-param>
	<context-param>
		<description>Do not render comments in facelets (xhtml) pages. Default is false.</description>
		<param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
		<param-value>true</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	
	<!-- Servlet de recursos de Primefaces -->
	<servlet>
		<servlet-name>Resource Servlet</servlet-name>
		<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>Resource Servlet</servlet-name>
		<url-pattern>/primefaces_resource/*</url-pattern>
	</servlet-mapping>

	<welcome-file-list>
		<welcome-file>index.xhtml</welcome-file>
	</welcome-file-list>
</web-app>

Por último, y lo mejor, el fichero de configuración de JSF. Con el
uso de anotaciones en nuestros bean manejados y el soporte nativo de
Facelets, este fichero puede ser tan simple como esto:

<?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
	version="2.0">

</faces-config>

3. Creando una página de prueba

Para probar si funciona nuestra configuración, vamos a crear la
página index.xhtml, con el siguiente contenido:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.prime.com.tr/ui">

<html>
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Prueba con Primefaces</title>
	</h:head>
	
	<h:body>
		<h:form>
			<p:panel header="Prueba con Primefaces">
				<h:panelGrid columns="2">
					<h:outputLabel value="Fecha" />
					<p:calendar pattern="dd/MM/yyyy" />
				</h:panelGrid>  
			</p:panel>
		</h:form>
	</h:body>
</html>
</f:view>

Hemos especificado el espacio de nombres «xmlns:p» para poder
utilizar la librería de componentes de Primefaces y, como no, hemos
añadido un componente calendario dentro de un panel, aunque podríamos
haber elegido cualquiera de los que hay en la librería
de componentes de Primefaces.

Si abrimos la página con un navegador, veremos el resultado:

4. Añadir el soporte de un ManagedBean

Vamos a añadir un controlador para nuestra vista que guarde en una
variable la fecha seleccionada en el calendario. Además, cuando se
seleccione
la fecha, se realizará una llamada por Ajax al método «cambioFecha» del
controlador, que añadirá un mensaje de Faces que se mostrará en la
página.

El fichero PruebaView.java es el siguiente:

package com.autentia.tutorial.view;

import java.io.Serializable;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.DateSelectEvent;


@ManagedBean
@ViewScoped
public class PruebaView implements Serializable {

	private static final long serialVersionUID = 8995118759276351827L;

	private Date date;

	
	public void cambioFecha(DateSelectEvent event) {
		DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
		
		FacesContext.getCurrentInstance().addMessage(null,
				new FacesMessage("Fecha seleccionada: " + formatter.format(event.getDate())));
	}
	
	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}
}

Debemos modificar el código de nuestra vista para enlazar el valor
de la fecha del calendario con la variable «date» del controlador.
Además habrá que llamar al método «cambioFecha» cuando cambie la
selección y añadir el componente que mostrará los mensajes. Se ha
utilizado el componente «growl» de Primefaces, que mostrará los
mensajes dentro de unos «pop-ups» que desaparecerán transcurridos unos
segundos.

<h:form>
	<p:growl id="growl" />
	<p:panel header="Prueba con Primefaces">
		<h:panelGrid columns="2">
			<h:outputLabel value="#{pruebaView.date}" />
			<p:calendar pattern="dd/MM/yyyy"
				selectListener="#{pruebaView.cambioFecha}"
				onSelectUpdate="growl" />
		</h:panelGrid>
	</p:panel>
</h:form>

Ahora, cuando cambiemos la fecha del calendario, veremos que aparece
el siguiente mensaje:

5. Comparativa con otras librerías

Para terminar, vamos a ver un resumen de las características de
Primefaces comparándolo con otras dos librerías: ICEfaces y RichFaces.
El siguiente cuadro amplía el
desarrollado por Jose en su tutorial de introducción a RichFaces,
añadiendo las características propias de Primefaces.

6. Conclusiones

Existen actualmente bastantes librerías de componentes para JSF. El
elegir utilizar una u otra dependerá en gran medida del número y la
calidad de componentes que nos ofrezca, la estabilidad en los cambios
de versión, el disponer de una buena documentación y la utilización e
integración con otros estándares.

Se puede decir que Primefaces cumple sobradamente con todas esas características, por lo que puede
ser una buena elección. Además hay que tener en cuenta que no estamos
limitados a utilizar una única librería, aunque en ese caso habría
investigar un poco más para estar seguros de que no se produzcan
incompatibilidades entre ellas, que podrían darnos muchos quebraderos de cabeza.

Desde Autentia siempre
procuramos estar al día en este tipo de tecnologías y os animamos a que
deis también el paso si no lo habéis hecho ya. Esperamos que nuestros
tutoriales os ayuden un poquito a conseguirlo.

Un saludo.