JSF (JAVA SERVER FACES)

Ing. Marco Antonio Toscano Freire
 INTRODUCCION
JSF es un framework de interfaz de usuario para aplicaciones JEE, el cual
fue diseñado para mejorar la productividad de los desarrolladores al utilizar
un conjunto de componentes reutilizables en la construcción de un interfaz
de usuario.
JSF es una tecnología basada en componentes, flexible, poderosa diseñada
para simplificar el desarrollo de las aplicaciones web in JAVA.
Los principales componentes de la tecnología JSF son los siguientes:
● API para representar los componentes gráficos y manejar eventos,
conversión de datos, navegación en la página etc.
● Tag Libraries especializados para JSP que permita manejar los tags JSF
dentro de la página.
::.BENEFICIOS.::

Entre los beneficios que nos brinda la tecnología JSF están los
siguientes:
● Nos brinda una separación clara entre el comportamiento y la
presentación.
● Apalancar componentes gráficos con conceptos de la capa web
sin limitarnos a utilizar una tecnología en particular o en lenguaje
de marcado.
● Provee una arquitectura rica para manejar el estado de los
componentes, procesamiento de datos de los componentes,
validación de las entradas de usuario y manejo de eventos.
● Habilidad de facilitar la internacionalización en las aplicaciones.
::.ELEMENTOS DENTRO DE UNA APLICACIÓN JSF.::
Entre los componentes que forman parte de una aplicación JSF típica
tenemos los siguientes elementos:
● Un conjunto de páginas JSP
● Un conjunto de backing beans, los cuales son componentes
JavaBeans los cuales defines propiedades y funciones para los
componentes gráficos sobre una página.
● Un archivo de configuración de la aplicación el cual define las reglas de
navegación de las páginas, configura los beans y otros objetos
personalizados, el cual se asocia al descriptor de despliegue (web.xml)
● Componentes personalizados como validators, converters y
listeners., así como tags personalizados para representar objetos
dentro de la página.
::.CICLO DE VIDA JSF.::
::.CICLO DE VIDA JSF.::

Restore View.- En esta fase el Servlet de JSF construye la vista de la

página solicitada como un “tree component”, la cual guarda la vista en
una instancia de FacesContext con el objetivo de poder renderizarle
posteriormente si fuera el caso; en esta fase JSF enlaza los
manejadores de eventos y validadores a los componentes.
Apply Request Values.- En esta fase se extraen los valores de los
parámetros enviados en el request y se almacenan localmente en el
componente lo cual se realiza a través de la ejecución método decode
de cada componente.
Process Request Event.- En esta fase el Servlet llama al método
processEvent de cada componente para el procesamiento
respectivo.
::.CICLO DE VIDA JSF.::
Se puede continuar a la siguiente fase si al ejecutar todos los métodos el
valor retornado es false.
Process Validation.- En esta fase se procesan las diferentes
validaciones registradas en la fase inicial para lo cual se ejecuta el
método validate de los diferentes validadores. Por cada método
ejecutado que retorne false , el Servlet encola el mensaje de error al
FacesContext.
Process Event.- Esta fase verifica que si existió algún error durante la
fase anterior, el control salta a la fase Render Response.
Update Model Values.- En esta fase los valores de los componentes
enlazados son copiados a los respectivos campos dentro del objeto
(JavaBean), para lo cual se ejecuta el método del componente
updateModel.
::.CICLO DE VIDA JSF.::

Process Event.- Esta fase verifica que si existió algún error

durante la fase anterior, el control salta a la fase Render
Response.
Invoke Applications.- Durante esta fase el Servlet procesa los
eventos a nivel de aplicación (submit, link) ejecutando los
correspondientes handlers
Render Response.- En esta fase el Servlet crea como respuesta
un “tree component” y delega la renderización de la página al
Tomcat, al final de esta fase el estado de la respuesta es
almacenado de tal forma que el Servlet fue acceder a la fase de
Restore View durante las siguientes peticiones a la misma página.
::. Componente: Label.::
Label (HtmlOuputLabel).- Para representar un Label en JSF
utilizamos el componente outputLabel. Este componente mejora la
usabilidad de los formularios al proveer un atributo for que identifica el
componente (control formulario) al cual esta atado o tiene relación:
Entre algunos de los atributos podemos mencionar:

● id.- Describe el identificador del componente

● value.- Describe el valor actual que tomara el componente
● lang.- Describe el lenguaje a ser utilizado
● for: Describe el componente al cual esta ligado el label.
::. Componente: Texto.::
Text.- En JSF utilizamos el tag inputText en el cual podemos definir
los siguientes atributos básicos:
● id.- Describe el identificador del componente
● value.- Describe el valor actual que tomara el componente
● required.- Especifica que este componente tiene un valor requerido
● maxlenght.- Define el número máximo de caracteres que deben ser
ingresados.
● label.- Define el nombre a ser usado para referirse a este
componente.
● eventos.- onclick, ondblclick, onkeydown, onkeypress, etc..
::. Componente: Imagen.::
Imágenes.- Para representar una imagen en JSF debemos usar el
tag graphicImage en el cual podemos definir los siguientes
atributos básicos:

 id.- Describe el identificador del componente

 value.- Describe el valor actual que tomara el componente
 url.- Especifica el path o dirección de la imagen.
 alt.- Representa un texto alternativo para la imagen.
 eventos.- onclick, ondblclick, onkeydown, onkeypress
::. Componente: Boton.::

Botones.- En JSF se usa el tag commandButton el cual actua

como un tipo submit. En este componente podemos definir los
siguientes atributos básicos:

 Id.- Describe el identificador del componente

 value.- Describe el valor actual que tomara el componente
 action.- Representa la acción a invocarse cuando este componente es
activado por el usuario
 eventos.- onclick, ondblclick, onkeydown, onkeypress
::. Componente: Texto Formateado.::

Texto Formateado.- En JSF el tag outputFormat es un componente

que permite renderizar texto que contiene caracteres especiales
(parámetros) que pueden ser llenado con valores en tiempo de ejecución.
Conociendole a este proceso con el nombre de interpolación.
::. Componentes: Selección .::

Selección.- Para utilizar componentes que permiten realizar la selección

de un valor o conjunto de valores JSF maneja los siguientes
componentes:
✔ SelectBooleanCheckBox.- Este componente muestra un simple
checkbox.
✔ SelectManyCheckBox.- Este componente muestra un conjunto de
checkbox que pueden ser usados para mostrar un conjunto de
opciones.
✔ SelectOneRadio.- Este componente muestra un conjunto de
RadioButtons que pueden ser usados para mostrar un conjunto de
opciones con exclusión.
::. Componentes: Selección .::
✔ SelectOneMenu.- Este componente muestra un solo componente a
la vez y permite una selección simple.
✔ SelectManyMenu.- Este componente muestra un solo componente
a la vez pero permite una selección múltiple.
✔ SelectOneListbox.- Este componente muestra varios items a la vez
pero permite solo una selección simple.
✔ SelectManyListbox.- Este componente muestra varios items a la
vez pero permite una selección múltiple.

Cada uno de estos componentes para representar el conjunto de datos

utilizan el tag selectedItem con los atributos itemLabel y itemValue
para colocar lo que se mostrará al usuario y el valor que tendrá
respectivamente.
::. Componente: Tabla.::

Table.- En JSF para representar una tabla se utiliza el componente

dataTable el cual se basa en un esquema de columnas el cual permite
mostrar los atributos de un objeto. Entre los atributos más importantes
se tiene:

✔ value.- Representa la lista de objetos que mostraremos.

✔ var.- Representa el alias de cada objeto dentro de la lista, el cual
permitirá recuperar cada uno de los atributos del objeto.
✔ rows.- Representa el número de filas que se mostrarán antes de
paginar.
::. Componente: Tabla.::
::.ROLES.::
Una de las características interesantes dentro de la especificación JSF es
el desarrollo de la aplicación desde roles diferentes los cuales son los
siguientes:

 Autor Página.- Crear las páginas utilizando los tag libraries de JSF.
 Desarrollador de Aplicaciones.- Programar los componentes
personalizados como validators, converters, listeners y backing
beans.
 Autor Componentes.- Crear los componentes gráficos personalizados y
sus renders.
 Arquitecto Aplicación.- Configurar la aplicación, incluir las definiciones de
reglas de navegación, configurar objetos personalizados y crear los
descriptores de despliegue.
::.PROCESO DE DESARROLLO .::

Para desarrollar una aplicación JSF usualmente se requiere realizar

los siguientes pasos:
Ø Mapeando la instancia del FacesServlet
Ø Crear las páginas usando los componentes UI y los tags.
Ø Definir la reglas de navegación en el archivo de configuración.
Ø Desarrollar los backing beans
Ø Añadir las declaraciones de los manejadores de los beans en el
archivo de configuración.
::.PROCESO DE DESARROLLO .::
Mapeando la instancia del FacesServlet
Toda las aplicaciones JSF deben incluir un mapeo a la instancia del
FacesServlet en sus descriptores de despliegue. La instancia del
FacesServlet recibe peticiones, las procesa y inicializa los recursos.

Creando las páginas

Esta tarea es responsabilidad del autor de páginas el cual se
preocupa de posicionar los elementos en las páginas, mapear los
componentes a los beans y añadir tags que registren convertidores,
validadores, o listeners sobre los componentes.
::.PROCESO DE DESARROLLO .::
HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<HEAD> <title>Hello</title> </HEAD>
<%@ page contentType="application/xhtml+xml" %>

Declarando las tag libraries

Para que se pueda utilizar los componentes JSF sobre las páginas JSP se
necesita dar acceso a dos tag library estándar, el tag library para el
componente HTML y el tag library core. Los cuales se muestran a
continuación:
l <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
l <%@ taglib uri="http:.//java.sun.com/jsf/core" prefix="f" %>
::.PROCESO DE DESARROLLO .::
El siguiente paso es añadir las vistas y los tags del form , todos los
componentes de JSF deben estar colados dentro de la vista, este tag
representa el contenedor; el tag form tiene el mismo comportamiento que
un formulario en HTML.
::.PROCESO DE DESARROLLO .::
Definiendo la Navegación de Página
Definir la navegación involucra determinar a que páginas nos
dirigiremos cuando un usuario presiona un botón o un hiperlink , esta
lógica se encuentra definida en el archivo de configuración faces-
config.xml el cual utiliza un poderoso sistema basado en reglas.

<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-
outcome>
<to-view-id>/menu.jsp</to-view-id>
</navigation-case>
</navigation-rule>
::.PROCESO DE DESARROLLO .::
<navigation-rule>
<from-view-id>/menu.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-
outcome>
<to-view-id>/otro.jsp</to-view-id>
</navigation-case>
</navigation-rule>

Desarrollando los Backing Beans

– El desarrollo d los beans es responsabilidad del desarrollador de
aplicaciones, los backing beans definen propiedades y métodos que
son asociados con los componentes de la UI que son usados sobre la
página.
 ::.CONVERTIDORES .::
 Los diferentes componentes de una aplicación JSF necesitan ser
convertidos de las cadenas “String” a los diferentes tipos definidos en
los componentes excepto cuando el componente espera datos tipo
String.
 JSF provee un conjunto de convertidores estándares localizados
en el paquete java.faces.convert entre los tipos de datos que tenemos
convertidores están los siguientes: BigDecimal, BigInteger, Boolean,
Byte, Chracter, Datetime, Double, Float, Integer, Long, Number,
Short.
 Cada uno de estos convertidores tiene asociado un mensaje de error
estándar.
::.MANAGED BEAN (Backing Beans) .::
 En un aplicación JSF cada página web (jsp, jspx, xhtml) tiene
una clase java (generalmente) que representa su controlador,
el cual se encarga manejo los eventos de la interfaz de usuario
y actualizar el modelo en base a esa interacción.

 Esta clase java es conocida como managed bean la cual

contiene atributos y métodos de acceso (getter and setters)
que sirven para representar y manipular los diferentes
elementos en la interfaz de usuario.
::. JSF EXPRESSION LANGUAJE .::
 JSF EL es un lenguaje de scripting orientado a objetos usado por JSF
para enlazar los componentes de la interfaz de usuario con las
propiedades y métodos del managed bean.

 Con JSF EL se puede establecer validaciones sobre las propiedades

para efectos de renderización, por ejemplo podriamos mostrar que se
muestre o no un elemento basado en una condición de la siguiente
forma:
::. CREANDO UN CONVERTIDOR.::

• Para construir un convertidor

personalizado necesitamos
realizar los siguientes pasos:
• Crear una clase que
implemente la interfaz
javax.faces.Converter.
En la cual
implementaremos los
métodos getAsObject y
getAsString
::. CREANDO UN CONVERTIDOR.::

• Registrar el convertidor con la aplicación.

• Usar el convertidor
::. VALIDADORES.::
JSF provee un conjunto de clases estándares y tag asociados que el
•

autor de las páginas y el desarrollador de aplicaciones puede utilizar

para validar los datos de los componentes.
Entre los validadores tenemos los siguientes:
•

Ø DoubleRangeValidator
Ø LengthValidator
Ø LongRangeValidator
Todos los validators implementan la interface javax.faces.Validator.
•

JSF maneja cuatro tipos de mecanismos de validación: Construcción,

•

Aplicación, Personalizados, Método.

 ::. VALIDADORES.::
Para
• crea un validador
necesitamos realizar los
siguientes pasos:
Ø Crear una clase que
implemente la interfaz
javax.faces.validator.V
alidator, en la cual
implementamos el
método validate.
::. CREANDO UN VALIDADOR.::
• Registrar el validador con la aplicación.

• Usar el validador
 Mensajes
Para mostrar o renderizar los mensajes generados en los diferentes
validaciones de JSF como campos requeridos, validadores,
convertidores JSF utiliza dos componentes:
● message.- Este componente se utiliza para mostrar los mensajes
para un componente específico para lo cual utiliza el atributo for el
cual determina para que componente se mostrarán los mensajes.

● Messages.- Este componente es genérico, es decir valida todos los

mensajes de la pagina en general.
 Internacionalización (I18N)
JSF permite manejar la internacionalización de una aplicación a través de
los Message Bundles que son un conjunto de archivos .properties que
representan todos las propiedades que se quieren internacionalizar.
Para configurarlos se tiene que realizar lo siguiente:
● Crear los archivos .properties para los diferentes idiomas, los cuales
deben tener el mismo nombre y separados por un underscore seguido
de la localización. Ejm: mensajes_es.properties,
mensajes_en.properties etc.
● Registrar en el faces-config.xml los componentes:
● locale-config: el cual permite configurar los lenguajes que serán
soportados por la aplicación asi como el que utilizará por defecto.
● resource bundle: el cual permite utilizar la internacionalizacion en
la aplicacion de una manera global.
 Internacionalización (I18N)
Utilizarlo en las paǵinas JSF a travéz de la variable var definida en el
resource bundle. A continuación se muestran las configuraciones:

Configuración en el faces­config.xml y llamada en la JSF