JavaServer Faces

Índice
Introducción - La tecnología JavaServer Faces.................................................................1
Beneficios de la tecnología JavaServer Faces – Mejoras sobre JSP.................................2
Componentes de una aplicación JSF.................................................................................2
Ejemplo de creación paso a paso de una aplicación JSF...................................................3
1.- Mapear la instancia del FacesServlet. ....................................................................3
2.-Crear las páginas.......................................................................................................4
3.-Definir la navegación entre páginas..........................................................................6
4.-Desarrollar los beans.................................................................................................6
5.-Añadir las declaraciones de los beans manejados.....................................................7
Versiones de JSF...............................................................................................................7
Implementaciones y Extensiones populares de JSF..........................................................8
Conclusión.........................................................................................................................8
Bibliografía........................................................................................................................9
 Trabajo de Programación Distribuida. JavaServer Faces.

Introducción - La tecnología JavaServer Faces

La tecnología JavaServer Faces (JSF) es un Framework de componentes para interfaces
de usuario del lado del servidor para aplicaciones web basadas en tecnología Java
(JavaEE).

Los principales componentes de la tecnología JSF son:

• Una API para representar los componentes de la interfaz de usuario (cajas de

texto, listas deplegables, etc), gestionar su estado, manejar eventos, realizar
validación del lado del servidor, conversiones de datos, definición de la
navegación entre páginas, gestionar la internacionalización y accesibilidad y
permitir al usuario ampliar todas estas características.

• Dos bibliotecas de etiquetas (tag libraries) de JSP para poder representar los
componentes de la interfaz de usuario en una página JSP y para enlazar dichos
componentes con objetos del lado del servidor.

El modelo de programación bien definido que establece JSF y las bibliotecas de

etiquetas hacen significativamente más sencillo construir y mantener aplicaciones web
con interfaces de usuario en el lado del servidor. De esta forma, con poco esfuerzo se
puede conseguir:

• Añadir controles de usuario a una página simplemente añadiendo la etiqueta

correspondiente al componente.

• Enlazar los eventos generados por estos componentes con el código de la

aplicación en el lado del servidor.

• Construir una interfaz de usuario con componentes reusables y ampliables.

• Guardar y restaurar el estado de la interfaz de usuario sin las limitaciones del

ámbito request de las peticiones al servidor.

La siguiente figura muestra como los interfaces de usuario que se crean con la
tecnología JSF (en el ejemplo myUI) se ejecutan en el servidor y se envían al cliente
para ser representados en el navegador:

La página JSP del ejemplo (myform.jsp) es también una página JSF, ya que incluye
etiquetas JSF, es decir representa los componentes de la interfaz de usuario usando
etiquetas personalizadas (custom tags) definidas por la tecnología JSF.

Página 1
 Trabajo de Programación Distribuida. JavaServer Faces.

El interfaz de usuario para la aplicación web (representado en el ejemplo por myUI)

gestiona los objetos que referencia la página, que son los siguientes:

• Los objetos de la interfaz de usuario que se corresponden con las etiquetas de la

página JSP
• Los manejadores de eventos, validadores y conversores referenciados por los
componentes.
• Los JavaBeans que encapsulan los datos y la funcionalidad especifica de los
componentes.

Beneficios de la tecnología JavaServer Faces – Mejoras

sobre JSP
Una de las principales ventajas de la tecnología JSF es que ofrece una separación clara
entre el comportamiento y la presentación.

Las aplicaciones web construidas con la tecnología JSP consiguen esto solo en parte, ya
que una aplicación que solo utilice páginas JSP no puede hacer corresponder peticiones
HTTP con manejadores de eventos específicos de los componentes, ni gestionar los
elementos de la interfaz de usuario como objetos con estado en el servidor tal como
hace una aplicación JSF.

La separación de la lógica y la presentación permite a cada miembro del equipo de

desarrollo de una aplicación web centrase en su parte del proceso de desarrollo y
proporciona un modelo de programación simple para enlazar las partes.

Por ejemplo, los diseñadores de páginas sin conocimientos de programación pueden

usar los componentes del interfaz de usuario que proporciona JSF y enlazarlos con
objetos del lado del servidor sin necesidad de escribir código.

Otro objetivo importante de la tecnología JSF es llevar un paso más allá los conceptos
de componentes de interfaz de usuario y capa web, sin limitarlos a un lenguaje de
scripts ni de marcado determinado.

Componentes de una aplicación JSF

Como la mayoría de las aplicaciones web JavaEE, una aplicación JSF esta formada
típicamente por los siguientes componentes:

• Un conjunto de páginas JSP

• Un conjunto de backing beans, que son componentes JavaBeans que definen
propiedades y funciones para los componentes del interfaz de usuario de la
página
• Un fichero de configuración de recursos de la aplicación, que define las reglas
de navegación entre páginas y se utiliza para configurar los beans y otros objetos
de la aplicación.

Página 2
 Trabajo de Programación Distribuida. JavaServer Faces.

• Un descriptor de despliegue (fichero web.xml).

• Las bibliotecas de etiquetas estándar definida por JSF para representar los
componentes de la interfaz de usuario y otros objetos de la página.

Ejemplo de creación paso a paso de una aplicación JSF

Los pasos necesarios para crear una aplicación JSF sencilla son los siguientes:

1. Mapear la instancia del FacesServlet.

2. Crear las páginas
3. Definir la navegación entre páginas
4. Desarrollar los beans
5. Añadir las declaración de los beans manejados

1.- Mapear la instancia del FacesServlet.

Un requisito de cualquier aplicación JSF es que todas las peticiones a la aplicación que
impliquen la utilización de componentes JSF deben pasar por el FacesServlet. Una
instancia de este servlet gestiona el ciclo de vida de las peticiones a la aplicación web e
inicializa los recursos requeridos por la tecnología JSF.

El ciclo de vida de las aplicaciones JSF es más complicado que el de las páginas JSP, ya
que está dividido en múltiples fases para soportar el modelo de componentes de la
interfaz de usuario, que es más complejo:

Para asegurar que la instancia del FacesServlet se invoca, se debe establecer su mapeo
en el fichero descriptor despliegue, como con cualquier otro servlet.

Un ejemplo de mapeo del FacesServlet sería el siguiente:

Página 3
 Trabajo de Programación Distribuida. JavaServer Faces.

<servlet>
<display-name>FacesServlet</display-name>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>/ejemploJSF/*</url-pattern>
</servlet-mapping>

En este ejemplo se utiliza un prefijo (ejemploJSF) para identificar las páginas JSP que
contienen componentes JSF. Por tanto, un ejemplo de URL para una página de la
aplicación JSF sería:

http://localhost:8080/aplicacionJSF/ejemploJSF/paginaInicial.jsp

2.-Crear las páginas

Crear las páginas de una aplicación JSF implica incluir los componentes de la interfaz
de usuario en las páginas, mapear los componentes a los beans asociados y agregar las
etiquetas que registran los conversores, validadotes y manejadores de eventos de los
componentes.

Como en cualquier página JSP, se deben añadir las etiquetas HTML y HEAD a la
página, por ejemplo:
<HTML xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<HEAD> <title>Ejemplo JSF</title> </HEAD>
...
</HTML>

También se debe incluir la directiva de página que especifica el tipo de contenido:

<%@ page contentType="application/xhtml+xml" %>

2.1. Declarar las bibliotecas de etiquetas

Para usar los componentes JSF en las páginas JSP, las páginas deben tener acceso a las
dos bibliotecas estándar de etiquetas: la bibliotecas de etiquetas de los componentes
HTML y la de los componentes core. Para ello se emplean las siguientes declaraciones
taglib:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

La primera declaración declara los componentes HTML con el prefijo “h”. Todas las
etiquetas de los componentes HTML tendrán este prefijo. Los componentes de la
biblioteca core tendrán el prefijo “f”.

Página 4
 Trabajo de Programación Distribuida. JavaServer Faces.

2.2. Agregar las etiquetas view y form

Todos los componentes de una página JSF se estructuran como parte de un árbol de
componentes, llamado view. La etiqueta view representa la raíz de este árbol, y todas las
etiquetas de los componentes JSF de la página deben estar dentro de una etiqueta view.

La etiqueta form representa un formulario de introducción de datos que permite al

usuario introducir datos y enviarlos al servidor, normalmente pulsando un botón. Todos
los componentes JSF que representan controles de usuario editables (como los campos
de texto y los menús) deben estar anidados dentro de la etiqueta form. Se puede
especificar el atributo id de la etiqueta form para identificarlo.

La página de ejemplo, tras añadir las etiquetas view y form, quedaría así:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:view>
<h:form id="formularioEjemploJSf">
</h:form>
</f:view>

2.3. Agregar componentes al formulario

Una vez que se ha creado esta estructura de página se pueden ir añadiendo los
componentes que formarán la interfaz de usuario.

Algunos de los componentes que más se usan al crear una página JSF son los siguientes:

• outputText. Se utiliza para mostrar una etiqueta de texto que no puede

modificar el usuario. El texto que se muestra se define en el atributo value de la
etiqueta y puede ser una constante, o estar asociado a una propiedad de un
backing bean, como en el siguiente ejemplo:

<h:outputText value="#{DatosUsuario.nombre}">

• graphicImage. Permite insertar una imagen localizada en la URL establecida en

el atributo url de la etiqueta. A continuación se muestra un ejemplo:

<h:graphicImage id="waveImg" url="/wave.med.gif" />

• inputText. Muestra una caja de texto editable. Los atributos más usados son
label, para mostrar una etiqueta descriptiva junto a la caja de texto, value para
asociar el valor a una propiedad de un backing bean. Dentro de la etiqueta
inputText se puede anidar otra para hacer validaciones, como se muestra en el
siguiente ejemplo:

<h:inputText id="userNo" label="User Number"

value="#{UserNumberBean.userNumber}">
<f:validateLongRange
minimum="#{UserNumberBean.minimum}"
maximum="#{UserNumberBean.maximum}" />
</h:inputText>

Página 5
 Trabajo de Programación Distribuida. JavaServer Faces.

• commandButton. Muestra un botón con el texto indicado en el atributo value y

se produce el resultado definido en el atributo action. Este es un ejemplo:

<h:commandButton action="success" value="Submit" />

3.-Definir la navegación entre páginas

Definir la navegación entre páginas implica definir a qué página ir cuando el usuario
pulsa un botón o un hiperenlace. La navegación de la aplicación se define en el fichero
de configuración de recursos, usando un sistema basado en reglas.

A continuación se muestra un ejemplo de reglas de navegación:

<navigation-rule>
<from-view-id>/paginaInicial.jsp</from-view-id>
<navigation-case>
<from-outcome>exito</from-outcome>
<to-view-id>/respuesta.jsp</to-view-id>
</navigation-case>
</navigation-rule>

Esta regla de navegación establece que desde la página paginaInicial.jsp, si se produce

el resultado lógico (outcome) exito la aplicación navegará a la página respuesta.jsp.

Un resultado lógico se produce cuando se pulsa un botón o hiperenlace que tiene

establecido dicho resultado en su atributo action. Por ejemplo, la pulsación del
siguiente botón definido en la página paginaInicial.jsp, produciría la navegación a
respuesta.jsp atendiendo a la regla de navegación del ejemplo:

<h:commandButton id="submit" action="success"

value="Enviar" />

4.-Desarrollar los beans

Una aplicación JSF típica asocia un backing bean con cada página de la aplicación. El
backing bean define propiedades y métodos que están relacionados con los
componentes de la interfaz de usuario usados en la página.

De esta forma, por ejemplo, el desarrollador puede ligar el valor de un componente a la

propiedad de un bean usando el atributo value de la etiqueta del componente para
referirse a dicha propiedad.

Por ejemplo, si queremos que el componente de texto nombreUsuario esté asociado a

la propiedad nombre del bean DatosUsuario, escribiríamos lo siguiente:

<h:inputText id="nombreUsuario" label="Nombre del usuario"

value="#{DatosUsuario.nombre}">
...
</h:inputText>

Página 6
 Trabajo de Programación Distribuida. JavaServer Faces.

La definición de la propiedad nombre en el backing bean DatosUsuario sería la

siguiente:

String nombre = null;

...
public void setNombre(String nombre) {
nombre = nombre;
}
public Integer getNombre() {
return nombre;
}

5.-Añadir las declaraciones de los beans manejados

Tras desarrollar los backing beans que se usarán en la aplicación, se necesita

configurarlos en el fichero de configuración de recursos de la aplicación para que la
implementación de JSF pueda automáticamente crear nuevas instancias de los beans
cuando se necesite.

A continuación se muestra una declaración de ejemplo para el bean DatosUsuario:

<managed-bean>
<managed-bean-name>DatosUsuario</managed-bean-name>
<managed-bean-class>
aplicacionJSF.DatosUsuario
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Esta declaración indica al entorno JSF que el bean manejado DatosUsuario se crea
como una instancia de la clase java aplicacionJSF.DatosUsuario y que tiene el ámbito
de sesión.

Esto hace que los desarrolladores puedan hacer referencia a sus propiedades en las
páginas, mediante expresiones declarativas del lenguaje EL (Expression Language),
como la que vimos anteriormente:

value="#{DatosUsuario.nombre}"

Versiones de JSF

• JSF 1.0 (2004-03-11) — Versión inicial de la especificación JSF.

• JSF 1.1 (2004-05-27) — Solución de bugs sin introducir nueva funcionalidad.
• JSF 1.2 (2006-05-11)
o Utiliza XML Schema para la definición de los ficheros de configuración,
en vez de DTD
o Mejoras para permitir diseños multi-marcos o multi-páginas
o Mejoras en la seguridad al guardar el estado del cliente
o Corrección de errores

Página 7
 Trabajo de Programación Distribuida. JavaServer Faces.

• JSF 2.0 (12-08-2009) – Supone un revisión importante de la especificación JSF.

Algunas de las nuevas características que incorpora son:
o Desarrollo racionalizado de aplicaciones web. Se permite reemplazar los
ficheros XML de configuración por anotaciones y convenciones. Se
simplifica la navegación y se facilita el acceso a los recursos.
o Plantillas y componentes compuestos. JSF 2 amplía las posibilidades de
las plantillas e introduce los componentes compuestos.
o Manejo de eventos, JavaScript y Ajax. Se modifica el modelo de eventos
y modifica el ciclo de vida para añadir soporte nativo para Ajax.
o Adopción de la tecnología de Facelets como tecnología de vista. Esto
elimina los conflictos de ciclo de vida que existían con JSP. Los facelets
también permiten crear etiquetas más fácilmente con lenguaje de
marcado, en vez de con código Java.

Implementaciones y Extensiones populares de JSF

• Apache MyFaces Trinidad. Es una implementación robusta de JSF que
incluye además componentes de la interfaz gráfica adicionales y proporciona las
siguientes funcionalidades:
o Partial Page Rendering. Permite no tener que refrescar toda la página
cuando se produzca algún evento, y solo refrescar los componentes que
se vean afectados.
o Validación del lado del cliente integrada
o Soporte para trabajar con ventanas de diálogo
o Ámbito pageFlowScope, que permite la comunicación entre páginas
• Framework Spring. Framework para el desarrollo de aplicaciones JavaEE que
no obliga a usar un modelo de programación particular y ofrece libertad a los
desarrolladores para usar cualquier tecnología JavaEE, aportando soluciones
bien documentadas.
• ICEFaces. Framework de código abierto que permite desarrollar aplicaciones
JavaEE utilizando JSF y Ajax.
• PrettyFaces. Es una extensión de código abierto para JSF 1.2 y JSF 2.0 que
permite cambiar las URLs de las aplicaciones web para facilitar la labor de los
motores de búsqueda. También permite definir acciones a ejecutar en la carga de
las páginas, integración sin fisuras con la navegación y otras funcionalidades.
• ExadelFiji. Extiende la tecnología JSF para incluir presentaciones de datos más
dinámicas usando gráficos y diagramas.

Conclusión
A partir de mi experiencia profesional usando una implementación de JSF (Oracle ADF
Faces) y la documentación consultada para la elaboración de este trabajo, he podido
extraer las siguientes conclusiones:

• JSF facilita enormemente la creación de interfaz de usuario de las aplicaciones

web, ya que se aprovecha de las funcionalidades proporcionadas por JSP y evita
al usuario la creación de custom tags, y escribir gran parte del código necesario

Página 8
 Trabajo de Programación Distribuida. JavaServer Faces.

para validar, cargar, mantener el estado y responder a los eventos de los

componentes de la interfaz de usuario.

• A pesar de estas mejoras, el desarrollo de aplicaciones JSF sigue resultando

complicado para el desarrollador, ya que implica la utilización de numerosas
tecnologías: HTML, CSS, XML, JSP, código Java, JavaScript, etc. tiene un ciclo
de vida complicado, y sobre todo, porque se pretenden conseguir resultados
como los de una aplicación de escritorio desarrollada por ejemplo con Swing o
Visual Basic (aspecto uniforme, componentes de la interfaz de usuario
complejos, manejadores de eventos, conservación del estado) utilizando
navegadores que trasladan toda la complejidad al servidor y que emplean el
protocolo sin estado y limitado HTTP.

• A pesar de ello, las innegables ventajas de las aplicaciones web (independencia

de la plataforma y del navegador, no es necesario realizar instalaciones, gestión
centralizada de la aplicación en el servidor) hacen que la industria del desarrollo
de software se haya inclinado definitivamente hacia ellas, y por tanto, el
desarrollo de tecnologías como JSF se hace imprescindible para simplificar el
trabajo del desarrollador. Actualmente existen varias implementaciones robustas
de JSF, salen nuevas versiones con frecuencia que resuelven problemas e
incorporan las sugerencias de los programadores y es una tecnología que sin
duda seguirá desarrollándose en el futuro para atender las necesidades
relacionadas con la creación de interfaces de usuario para aplicaciones web.

Bibliografía
1. Web de Sun Microsystems sobre la tecnología JavaServer Faces:

http://java.sun.com/javaee/javaserverfaces/index.jsp

2. Artículo de la Wikipedia (en inglés) sobre JavaServer Faces

http://en.wikipedia.org/wiki/JavaServer_Faces

3. JSRs (Java Specification Request) sobre JSF en la web de Java

Community Process

http://jcp.org/en/jsr/overview

4. Web de Apache MyFaces Trinidad

http://myfaces.apache.org/trinidad/index.html

5. Web del Framework Spring

http://www.springsource.org/documentation

6. Web de ICEFaces

http://www.icefaces.org/main/home/

7. Web de PrettyFaces

Página 9
 Trabajo de Programación Distribuida. JavaServer Faces.

http://ocpsoft.com/prettyfaces/

Página 10