icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-02-01

Tutorial visitado 41.583 veces Descargar en PDF
Introducción a RichFaces.

Introducción a RichFaces.


0. Índice de contenidos.


1. Introducción

RichFaces es una librería de componentes visuales para JSF, escrita en su origen por Exadel y adquirida por Jboss. Además, RichFaces posee un framework avanzado para la integración de funcionalidades Ajax en dichos componentes visuales, mediante el soporte de la librería Ajax4JSF.

Son características de RichFaces las siguientes:

  • se integra perfectamente en el ciclo de vida de JSF,
  • incluye funcionalidades Ajax, de modo que nunca vemos el JavaScript y tiene un contenedor Ajax propio,
  • contiene un set de componentes visuales, los más comunes para el desarrollo de una aplicación web rica (Rich Internet Application), con un número bastante amplio que cubren casi todas nuestras necesidades,
  • soporta facelets,
  • soporta css themes o skins,
  • es un proyecto open source, activo y con una comunidad también activa.

Aunque así enumeradas prodrían ser características aplicables también a ICEFaces..., haremos una comparativa al final.

Como inconvenientes, podríamos decir que:

  • usando Ajax4JSF tenemos que indicar qué parte de la pantalla tiene que repintarse. No es tan simple como ICEfaces, pero implica tener más control sobre los eventos que se producen en la interfaz de usuario.
  • en las últimas versiones siempre se les cuela alguna "peora", que merma la funcionalidad de algún componente y donde, por ejemplo, funcionaba la subida de ficheros mediante un componente JSF con barra de progreso en Internet Explorer, ahora solo funciona en Firefox. Aunque también es cierto que se detecta y soluciona en la siguiente versión.

El objetivo de este tutorial es mostrar lo necesario para hacer uso de la librería y explorar alguno de sus componentes visuales, comparándola, por último, con ICEfaces.

En la redacción de este tutorial se da por hecho que el lector tiene experiencia en JSF y gestiona sus proyectos con Maven.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17' (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1
  • RichFaces 3.3.2.GA
  • Maven 2.2.1.
  • Eclipse 3.5: Ganymede, con IAM (plugin para Maven).
  • Apache Tomcat 6.0.20 con la jdk 1.5.

3. Añadiendo el soporte para RichFaces.

Lo primero, como siempre, el contenido necesario en el 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.training</groupId>
	<artifactId>richFacesAppDemo</artifactId>
	<packaging>war</packaging>
	<name>richFacesAppDemo Maven Webapp</name>
	<version>1.0-SNAPSHOT</version>
	<build>
		<finalName>richFacesAppDemo</finalName>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.5</source>
					<target>1.5</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
	<!-- asignamos el repositorio de Maven de Jboss -->
	<repositories>
		<repository>
			<id>repository.jboss.com</id>
			<name>Jboss Repository for Maven</name>
			<url>http://repository.jboss.com/maven2/</url>
		</repository>
	</repositories>
	<dependencies>
		<!-- Necesitamos las librerías de jsf (la implementación de referencia) porque vamos a desplegar en Tomcat -->
		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>1.2_12</version>
		</dependency>
		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>1.2_12</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<!-- vamos a trabajar con facelets -->
		<dependency>
			<groupId>com.sun.facelets</groupId>
			<artifactId>jsf-facelets</artifactId>
			<version>1.1.14</version>
		</dependency>
		<!-- librerías de RichFaces -->
		<dependency>
			<groupId>org.richfaces.ui</groupId>
			<artifactId>richfaces-ui</artifactId>
			<version>3.3.2.GA</version>
		</dependency>
	</dependencies>
</project>

Lo siguiente a configurar sería el descriptor de despliegue de nuestra aplicación web, deberíamos incluir lo siguiente en el fichero web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>RichFaces Demo</display-name>
	<!-- configuración propia de JSF -->
	<context-param>
		<param-name>javax.faces.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>server</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>*.jsf</url-pattern>
	</servlet-mapping>
	<!-- sufijo de las páginas que incluyen árboles de componentes basados en facelets -->
	<context-param>
		<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
		<param-value>.xhtml</param-value>
	</context-param>
	<!-- filtro de Ajax4JSF -->
	<filter>
		<display-name>Ajax4jsf Filter</display-name>
		<filter-name>ajax4jsf</filter-name>
		<filter-class>org.ajax4jsf.Filter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>ajax4jsf</filter-name>
		<servlet-name>Faces Servlet</servlet-name>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
		<dispatcher>INCLUDE</dispatcher>
		<dispatcher>ERROR</dispatcher>
	</filter-mapping>
</web-app>

Por último, necesitamos configurar el gestor de vistas para facelets en el fichero faces-config.xml:

<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
                              "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
	<application>
		<view-handler>com.sun.facelets.FaceletViewHandler
	</application>
</faces-config>

Una vez hecho esto, podemos desplegar la aplicación bajo Apache Tomcat y desarrollar con el soporte de facelets y RichFaces de una forma bastante productiva.


4. Añadir un componente visual de RichFaces.

Para añadir un componente visual de RichFaces tenemos que incluir el espacio de nombres correspondiente al nodo raíz de nuestra página xhtml, así crearemos una página index.xhtml incluyendo lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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:rich="http://richfaces.org/rich">
    <f:view>
    <!-- aquí incluiremos nuestros componentes JSF -->
    </f:view>
</html>	

Una vez hecho esto, solo tenemos que elegir el componente a incluir dentro de nuestra página de entre todos los disponibles dentro de la Component Suite de RichFaces.

Para comenzar, nosotros vamos a añadir un calendario dentro de una caja decorada:

...
  <rich:panel>
    <f:facet name="header">
      <h:outputText value="RichFaces calendar" />
    </f:facet>
    <h:form>
		<h:panelGrid columns="2">
			<h:panelGroup>
				<h:outputLabel value="Fecha" />
			</h:panelGroup>
			<rich:calendar datePattern="d/M/yyyy HH:mm" />
		</h:panelGrid>
    </h:form>
  </rich:panel>
...

Ahora, si desplegamos, debería mostrar un componente de selección de fecha similar al siguiente:

Introducción a RichFaces

El calendario es visualmente atractivo a la par que funcional, puesto que permite la selección de hora y minutos mediante un Input Number Spinner.


5. Añadir el soporte de un managedBean.

Este punto no es estrictamente el objetivo del tutorial, si bien, sobre la base del componente añadido vamos a cubrir la asignación de su valor a una propiedad de un controlador o managedBean.

Para ello vamos a crear una clase, un POJO, con un atributo de tipo java.util.Date (con su correspondiente método set y get):

package com.autentia.training;

import java.util.Date;

public class Bean {
	
	private Date birthDay;

	public void setBirthDay(Date birthDay) {
		this.birthDay = birthDay;
	}

	public Date getBirthDay() {
		return birthDay;
	}
	
	
}

configuramos la clase como un managedBean en el fichero faces-config.xml:

...
	<managed-bean>
		<managed-bean-name>bean</managed-bean-name>
		<managed-bean-class>com.autentia.training.Bean</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
...

Y añadimos una referencia al atributo del managedBean en el componente, como sigue:

...
  <rich:calendar datePattern="d/M/yyyy HH:mm" value="#{bean.birthDay}"/>
...

Si ahora incluimos en la página un componente de acción para submitir la fecha, junto con un campo de salida para mostrar el valor seleccionado, probaremos que funciona todo el ciclo de vida de JSF.

...
	<h:commandButton action="foo" value="Asignar" />

	<rich:spacer height="20px"/>		
	<rich:separator height="5px"/>
	<rich:spacer height="20px"/>
			
	<h:outputLabel value="Fecha seleccionada: " /><h:outputText value="#{bean.birthDay}"/>
...

El efecto será que, trás submitir, se recarga toda la página, puesto que aún no hemos hecho uso de Ajax, asignando en el campo de salida la fecha selecionada.

Introducción a RichFaces

Para añadir funcionalidad ajax a los componentes, no habría más que incluir el soporte necesario de Ajax4JSF que viene por defecto con RichFaces.


6. Comparativa con ICEfaces.

Nosotros tenemos proyectos en los que trabajamos con una u otra librería y la productividad es bastante alta con ambas, sobre todo porque hacemos uso de componentes por composición de facelets.

Si tuvieramos que compararlas, lo haríamos teniendo en cuenta las siguientes características:

Característica ICEfaces RichFaces
Soporte de Ajax Es transparente para el desarrollador, lo implementa de forma nativa en todos los componentes mediante la propiedad partialSubmit Tenemos que hacer uso de Ajax4JSF, que no es tan transparente para el desarrollador, puesto que, además de introducir los componentes de RichFaces, tenemos que añadir componentes no visuales de la librería Ajax4JSF.
Librerías en las que se basan Usa el soporte de prototypejs, aunque la parte de Ajax la han rescrito y para los efectos visuales utilizan script.aculo.us. Usa el soporte de prototypejs y script.aculo.us, aunque soporta también jquery.
Personalización de la interfaz de usuario Incorpora el concepto de skins y distribuye 3 temas. Incorpora el concepto de skins y distribuye 12 temas, aunque se pueden encontrar más en el repositorio de SNAPSHOTS.
Número de componentes Tiene 79 componentes en la versión básica, a los que hay que sumar 32 de la versión empresarial, esta última es de pago. La percepción es que estan inviertiendo esfuerzos en mejorar la versión empresarial y, como es lógico, esperan obtener beneficio económico por ello. Tiene 212 componentes entre los propios de RichFaces y los de Ajax4JSF. Con RichFaces todos los componentes son OpenSource y podemos usar un Pick List sin contratar nada, sin embargo, con ICEfaces sin queremos un Dual List o pagamos o lo implementamos nosotros.
Licencia MPL 1.1, que cubre la LGPL V 2.1. Si bien disponen de una versión empresarial con licencia comercial. LGPL V 2.1. en su totalidad.
Relevancia Ha sustituido a Woodstock como librería de componentes de referencia de Sun para el desarrollo de aplicaciones RIA. Se distribuye, por defecto, con NetBeans. Es la librería de componentes visuales de Jboss, se integra, por defecto con Jboss Seam, aunque éste también soporta ICEfaces.

7. Referencias.


8. Conclusiones.

RichFaces es una buena elección, sobre todo si viene de la mano de Jboss Seam.

Aunque siempre hay que estar alerta porque siguen naciendo nuevos gallos para el corral, lo siguiente: evaluar PrimeFaces, que viene pisando fuerte.

Si estáis interesados en el contenido de nuestros tutoriales y tenéis una necesidad formativa al respecto no dudeis en poneros en contacto con nosotros. En Autentia nos dedicamos, además de a la consultoría, desarrollo y soporte a desarrollo, a impartir cursos de formación de las tecnologías con las que trabajamos.

Un saludo.

Jose

jmsanchez@autentia.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2011-10-20-13:55:00

Autor: n2j73

Excelente trabajo

Fecha publicación: 2011-08-18-15:39:13

Autor: djtobe

hola, sera que alguien me puede ayudar a implementar en un solo proyecto richfaces y primefaces ?
he intentado y no he podido, si alguien conoce un buen tutorial donde enseñen a unirlos me lo podrian compartir? como quedaria el web.xml y que librerias serian necesarias? muchas gracias!

Fecha publicación: 2010-11-03-17:43:40

Autor: 3rror32

Excelente inicio!! =) voy tomando esta nueva tecnologia y vere que puedo hacer Gracias!!

Fecha publicación: 2010-02-16-07:23:08

Autor: jcarmonaloeches

Muy interesante, como todos los últimos tutoriales que leo por tu parte.

Voy a trabajarlo un poco.

Saludos y gracias,
Jaime.