Programación IV. Guía No.

4 1

Facultad: Informática y Ciencias Aplicadas

Escuela: Informática
Asignatura: Programación IV

Tema: “Fundamentos del framework JavaServer Faces

(JSF)”.
Objetivos

Identificar los componentes principales del framework JavaServer Faces (JSF).

Comprender cómo funcionan los Managed Beans.
Comprender los elementos básicos de la interfaz de usuario de JSF.
Crear aplicaciones Web utilizando JSF.

Introducción Teórica

¿Qué es JavaServer Faces (JSF)?

Es el marco de aplicaciones web estándar para Java Enterprise Edition (JEE).
Es una tecnología que fue diseñada para simplificar la interfaz de usuario para aplicaciones web Java.
Uno de los puntos clave, fue el apoyo de las herramientas creadas para este tipo de aplicaciones.
Por ser un estándar de Java, la tecnología cuenta con el apoyo de una industria muy sólida.
Esta tecnología ha crecido mucho en su uso a nivel mundial. Cuenta con un fuerte apoyo de IDEs de Java
(NetBeans, Eclipse, IntelliJ IDEA y otros), así como de servidores de aplicaciones con el objetivo de soportar
y desplegar las aplicaciones creadas con este framework.
La tecnología JSF incluye:
• Una interfaz de programación (API) que permite manipular los componentes típicos de una interfaz
gráfica (formularios, cajas de texto, botones, listas, tablas, objetos de acceso a datos, etc.), permite
manipular eventos, proporciona validación y conversión de datos en el lado del servidor y navegación
entre páginas, además de otras características.
• Dos bibliotecas de etiquetas JSP personalizadas (etiquetas JSF) para proporcionar los componentes de
la interfaz gráfica y para conectar los componentes a objetos en el lado del servidor.

JavaBeans Administrados (Managed Beans).

Un Managed Bean es una clase Java que sigue la nomenclatura de los JavaBeans. No están obligados a extender
de ninguna otra clase, esto tiene la ventaja que JSF es menos intrusivo que el uso de Struts.
Un Managed Bean se puede declarar de distintas maneras:
▪ Con anotaciones, antes del nombre de la clase: @ManagedBean
 2 Programación IV. Guía No. 4

▪ Como Bean CDI (Contexts and Dependency Injection), antes del nombre de la clase: @Named. Debe
agregar un archivo llamado “beans.xml” en la carpeta “web/WEB-INF” (en la versión JAVA EE 8 es
opcional).
▪ En el archivo faces-config.xml: <managed-bean>…</managed-bean>

Validadores, Convertidores y manejo de mensajes en JSF.

Las validaciones en JSF aseguran que los datos de nuestra aplicación sean consistentes de acuerdo a los datos
introducidos por el usuario. Entre las validaciones que podemos realizar tenemos: rangos de números o límites,
largo de cadenas y formatos de fechas, entre muchas validaciones más. JSF provee distintos tipos de
validaciones, por ejemplo: validaciones estándar, validaciones en los métodos de los Managed Bean.
Este proceso permite asegurar que antes de actualizar la información del modelo, es decir, las propiedades de
nuestro Model Managed Bean, tengamos la certeza que la información se encuentra con el formato y el tipo de
dato deseado.
Hay dos maneras de ejecutar las validaciones en nuestros componentes JSF:
1. Validación individual por campo: la podemos realizar de varias maneras:
o Agregando un atributo “required” al “tag JSF” dentro de nuestra página JSF.
o Agregando un atributo “validator” al “tag JSF” dentro de nuestra página JSF.
o Agregando un validador como un “tag JSF” interno
o Como complemento, el despliegue de errores lo podemos realizar usando el tag “h:message”,
para mostrar errores en un componente.

2. Validación por campo interdependientes: se ejecuta dentro de los métodos de tipo “action”.
Para desplegar errores que no tienen que ver directamente con un componente sino con errores
generales de la página, podemos utilizar la etiqueta “h:messages”, la cual se utiliza para mostrar varios
errores de una sola vez.

Ejemplo de uso de validadores.

Validador estándar:
<h:inputText id=”edadId” required=”true” value=”#{empleadoBean.edad}”>
<f:validateLongRange minimum=”18” máximum=50”/>
</h:inputText>

Validador personalizado:
<h:inputText id=”ipId” required=”true” value=”#{ipBean.ipValor}”>
<f:validator validatorId=”validadorIp”/>
</h:inputText>

En este caso, el nombre del validador debe de estar definido en el archivo faces-config o debe de utilizar la
notación de “faces validator” e implementar el método “validate” dentro de este Bean.

Convertidores en JSF.
Los convertidores cubren la necesidad de asignar valores entre la vista y el modelo de manera automática
manejando tipos distintos al default, es decir, el manejo de cadenas.
 Programación IV. Guía No. 4 3

Los convertidores cubren la necesidad de desplegar la información del modelo. Por ejemplo podemos convertir
una cadena que representa a su vez una fecha y esa fecha podemos convertirla a un tipo de asignarlas a nuestro
modelo. Con ello logramos la conversión del tipo de dato “String” y lo asignamos a un tipo “Date” en nuestro
modelo.
De igual manera los convertidores cubren la necesidad de desplegar la información del modelo con un formato
en específico por ejemplo un tipo entero o un tipo decimal podríamos desplegarlo con cierto formato a la vista
del usuario.
En JSF podemos manejar:
Conversiones implícitas: son los tipos de conversiones que JSF realiza de manera automática, por
ejemplo al utilizar tipos primitivos, BigInteger o String.
Ejemplo:
<h:inputText id=”edadId” value=”#{empleadoBean.edad}”>

En este caso, se está utilizando un atributo “edad” dentro del bean “empleadoBean” y este valor es de tipo
entero. Entonces el elemento que capturemos asociado a este campo de texto se va a convertir de un string
directamente a un tipo entero al asignarlo en nuestro Managed Bean.

Conversiones explícitas: en este caso tenemos dos formas de hacerlo:

o Utilizando el atributo “converter”:
<h:inputText value=”#{empleadoBean.edad}” converter=”javax.faces.Integer”/>

En este caso, simplemente asignamos el tipo de dato al cual queremos convertir.

o Utilizando un componente de tipo “converter”:

<h:inputText value=”#{empleadoBean.edad}”>
<f:converter converterId=”javax.faces.Integer” />
</h:inputText>

En este caso, lo que hacemos es agregar un nuevo elemento anidado de tipo “converter” y definimos
el tipo de dato al cual queremos convertir el valor que estemos capturando en el “inputText”.

JSF también permite crear convertidores personalizados. Los pasos para crear y utilizar una clase personalizada
de tipo “Converter” son los siguientes:
❖ En la página JSF:
<h:inputText id=”fechaId” value=”#{empleadoBean.fechaNacimiento}”
convert=”util.ConvertidorFecha”/>
 4 Programación IV. Guía No. 4

Para utilizar este tipo de convertidores basta con definir el atributo “convert” y especificar cuál es la
clase que va a ser la conversión respectiva.
Clase Java de tipo “Converter” contiene el código del convertidor. Esta clase debe de implementar la
interfaz “javax.faces.convert.Converter”.

❖ La clase Converter se debe de registrar en el archivo faces-config.xml o agregar la anotación

@FacesConverter a la clase de tipo Converter.

❖ La clase Converter además debe sobreescribir el método getAsObject() o getAsString() dependiendo

del tipo de conversión que se requiera.

Procedimiento

Crear una carpeta con el nombre Practica 4 para guardar los ejemplos y ejercicios, en el escritorio de su
computadora.

Guía 4 Ejemplo 1. Crear una aplicación Web utilizando el framework JSF.

Ir al menú File → New Project. En la ventana que aparece seleccionamos en Categories Java With Ant ->
Java Web -> Web Application y damos clic en el botón Next:

Luego indicamos el nombre del proyecto y la ruta donde lo deseamos guardar y damos clic en el botón Next:
 Programación IV. Guía No. 4 5
Seleccionamos el Servidor Web y la versión que utilizaremos y damos clic en el botón Next:

En la siguiente ventana, seleccionamos el framework “JavaServer Faces”, verificamos que la librería

registrada sea “JSF 2.3” y los demás parámetros aceptamos los indicados por defecto, damos clic en el botón
Finish:

De esta manera hemos creado nuestro primer proyecto Web JSF con Java.
Observemos que la estructura de este tipo de proyecto es distinta a la que hemos venido trabajando hasta el
momento. Nos muestra un archivo llamado “index.xhtml”, otro llamado “web.xml” y también se agrega la
librería “JSF 2.3 – javax.faces.jar”:

El archivo “web.xml” describe la configuración de la aplicación web:

 6 Programación IV. Guía No. 4

Debemos agregar también a nuestro proyecto la librería “Java EE Web 8 API Library” con los pasos que ya
conocen.
En el archivo “index.xhtml” podemos cambiar la etiqueta “h:head” y la etiqueta “h:body” con información
personalizada, así:

Para ejecutar la aplicación damos clic derecho en el proyecto y elegir Run.

Veremos en nuestro navegador la salida de la página index.xhtml de nuestro proyecto. Observar que el puerto
de escucha aparece en la url:

De esta forma hemos creado y ejecutado nuestro primer proyecto Web JSF con Java.
 Programación IV. Guía No. 4 7
Guía 4 Ejemplo 2. Ejemplo de uso de Managed Bean.
En el proyecto creado en el ejemplo 1, agregamos una clase Java en el package “beans.modelo”, le colocamos
el nombre “Candidato” y agregamos el siguiente código:

Haremos los siguientes cambios en la página index.xhtml:

Podemos ejecutar nuestro proyecto y visualizar su funcionamiento:

Guía 4 Ejemplo 3. Uso de Backing Beans.

 8 Programación IV. Guía No. 4

Si recordamos de la teoría este concepto es más bien una clasificación de los Managed Beans que vamos a
tener en JSF. Así que vamos a crear a continuación otro Managed Bean, el cual va a hacer las veces del
controlador de nuestra aplicación.
Agregamos una clase Java en el package “backing”, le colocamos el nombre “VacanteForm” y agregamos el
siguiente código:

El siguiente paso es modificar el archivo index.xhtml, agregando un botón que llame al método “enviar”, de
la siguiente manera:

A continuación, crearemos las páginas “exito” y “fallo”.

En la página exito.xhtml agregamos el siguiente código:
 Programación IV. Guía No. 4 9
En la página fallo.xhtml agregamos el siguiente código (podemos copiar el código de la página “éxito” y
realizar los cambios necesarios):

Para que funcione el injection realizado en el Backing Bean, debemos crear en la carpeta WEB-INF un archivo
de tipo “xml”, le colocaremos el nombre “beans” y agregamos el siguiente código (podemos copiar las
referencias “http” del archivo “web.xml” y cambiamos la parte final de la última url):

Podemos ejecutar nuestro proyecto y visualizar su funcionamiento.

Guía 4 Ejemplo 4. Ejemplo de uso de validadores.

Vamos a realizar las siguientes modificaciones al Bean Candidato:
 10 Programación IV. Guía No. 4

A continuación, modificaremos la página index.xhtml, para agregar los nuevos atributos de la clase Candidato,
y también para agregar las validaciones, así:

Como último paso, debemos modificar el bean VacanteForm de la siguiente manera:

 Programación IV. Guía No. 4 11

Podemos probar la funcionalidad implementada en nuestra aplicación.

Guía 4 Ejemplo 5. Ejemplo de uso de convertidores.

Vamos a modificar el bean Candidato de la siguiente manera, ya no solo recibiremos atributos de tipo String,
sino que cambiaremos el tipo de dato del atributo “salarioDeseado” a int y agregaremos un nuevo atributo de
tipo “Date”, así:
 12 Programación IV. Guía No. 4

Luego, en la página index.xhtml, realizamos los siguientes cambios:

Probemos la funcionalidad implementada.

Guía 4 Ejemplo 6. Ejemplo de uso de mensajes.

Vamos a crear un archivo llamado “mensajes.properties”. Este archivo lo vamos a colocar dentro de una
carpeta llamada “Other Sources”. Creamos entonces la carpeta siguiendo los siguientes pasos:

Ahora, creamos el archivo properties en esta carpeta, así:

 Programación IV. Guía No. 4 13

En el archivo recién creado, agregamos el siguiente código:

En este archivo hemos agregado cada uno de los mensajes que queremos modificar de nuestro formulario JSF,
así que vamos a representar cada uno de los campos de nuestro formulario.
Para ello podemos utilizar un identificador único para nuestro formulario para que no tengamos problemas, en
dado caso de que tengamos muchos formularios.
En ocasiones también es necesario cambiar los mensajes de error que nos manda JSF.
Así que para poder cambiarlos podemos realizar un proceso similar al anterior creando un archivo de
propiedades y posteriormente a través del archivo de faces-config especificar cuál es el archivo que vamos a
utilizar para modificar los mensajes que maneja JSF. Así que vamos a agregar otro archivo llamado
“jsf.properties” en la carpeta Other Sources:
 14 Programación IV. Guía No. 4

El mensaje que vamos a modificar en este caso el mensaje de valor requerido, y para ello vamos a hacer
referencia al componente de tipo UIInput y en particular al mensaje que se maneja en los campos que se marcan
como requeridos:

Así que en este caso en lugar de mostrar el mensaje por default que se muestra en inglés ahora vamos a
especificar la cadena “Valor Requerido”.
Ahora como siguiente paso para que nos reconozca este cambio en el componente que marquemos como
requerido vamos a crear nuestro archivo “faces-config.xml” ya que aquí es donde vamos a realizar la
asociación de nuestros nuevos archivos de propiedades para que muestren las nuevas etiquetas.
Además también en este archivo podemos especificar cuál es el lenguaje que queremos mostrar por default
pudiendo ser por ejemplo inglés, español, etc.
Creamos nuestro archivo dentro de la carpeta WEB-INF, así:
 Programación IV. Guía No. 4 15
En el archivo creado, agregamos el siguiente código:

Como siguiente paso vamos a modificar nuestro archivo index.xhtml para que podamos asociar ahora los
mensajes que estamos agregando en nuestro archivo mensajes.properties, ya que lo hemos agregado al archivo
faces-config. Hacemos los siguientes cambios:

Recordemos que estas son las etiquetas que se están mostrando en nuestro formulario así que todas estas
etiquetas son las que vamos a modificar.
Bien ya tenemos todos los cambios y ahora vamos a ejecutar nuestro proyecto.
Cualquier cambio que hagamos en nuestro archivo mensajes.properties, se aplicará en nuestro JSF.

Guía 4 Ejemplo 7. Ejemplo de uso de internacionalización con JSF.

En este ejemplo vamos a ver el concepto de internacionalización, lo que nos permitirá agregar varios idiomas
a nuestra aplicación web JSF.
 16 Programación IV. Guía No. 4

Lo primero que vamos a hacer es agregar un nuevo archivo de propiedades en la carpeta Other Sources y le
colocamos el nombre “mensajes_en”. En este archivo, agregamos el siguiente código:

Vamos a agregar también en la carpeta Other Sources otro archivo de propiedades con el nombre “jsf_en” y
agregamos el siguiente código:

El siguiente paso es indicar qué idioma vamos a manejar en nuestra aplicación. Esto lo podemos hacer de dos
formas. Podemos hacerlo de manera programática o podemos hacerlo en el archivo faces-config, de esta
manera:

Ejecutamos la aplicación para observar los cambios implementados:

Observamos que funciona correctamente.

Sin embargo, debido a que ya estamos utilizando dos idiomas, vamos a hacer las modificaciones también para
que nuestros archivos de propiedades también tengamos el idioma respectivo. Para ello renombramos los
archivos jsf.properties y mensajes.properties a jsf_es.properties y mensajes_es.properties respectivamente.

De esta manera podemos identificar y modificar el lenguaje de nuestra aplicación sin afectar la programación
y solamente agregando archivos de propiedades respetando el estándar de internacionalización de Java
conocido como “i18n” podemos agregar nuevos idiomas a nuestras aplicaciones JSF.

Guía 4 Ejemplo 8. Manejo de eventos en JSF.

 Programación IV. Guía No. 4 17
Vamos a hacer algunos cambios en el bean Candidato. Lo que vamos a hacer es agregar algunos campos más
para poder trabajar con el concepto de “valueChangeListener”, de esta manera:

Vamos a hacer otros cambios, pero ahora a nuestra clase vacanteForm. Vamos a agregar un método de tipo
valueChangeListener para que cuando modifiquemos el valor en el campo codigoPostal, en automático se
llenen los campos colonia y ciudad. Para ello, agregamos el siguiente método:

Ahora, vamos a hacer las modificaciones en nuestra página index.xhtml:

 18 Programación IV. Guía No. 4

Como siguiente paso, vamos a modificar nuestros archivos de Properties, vamos al archivo de mensajes tanto
en inglés como en español. Vamos a agregar los atributos que hemos definido anteriormente, así:
 Programación IV. Guía No. 4 19
Con eso ya tenemos todos los cambios y vamos a ejecutar nuestra aplicación:

Lo siguiente que vamos a hacer es agregar un campo de comentario para que se muestre u oculte dependiendo
de la acción que seleccionemos. Para ello vamos a aplicar el concepto de “actionEvent” en nuestro proyecto
JSF. Lo primero que vamos a hacer es agregar el campo de comentario a nuestro Bean Candidato:

Como siguiente paso vamos a modificar nuestra página index.html para agregar este campo, así:
 20 Programación IV. Guía No. 4

Ahora, vamos a modificar la clase vacanteForm creando el método “ActionEvent” de mostrar u ocultar el
campo de comentario:

El siguiente paso es agregar las etiquetas en los archivos de propiedades, así en el archivo mensajes_es
agregamos el siguiente código:

Hacemos lo mismo también para el archivo mensajes_en:

Con eso ya tenemos todos nuestros cambios, por lo que podemos probar nuestra aplicación:
 Programación IV. Guía No. 4 21

Guía 4 Ejemplo 9. Manejo de componentes en JSF.

Agregaremos un componente en nuestra página index.xhtml, el componente que vamos a agregar es un
componente de tipo “selectItem”. Así que vamos a modificar nuestro proyecto para manejar este componente.
Lo primero que vamos a hacer es modificar nuestro Bean Candidato de la siguiente manera:

Como siguiente paso vamos a modificar nuestros archivos de propiedades, los archivos que manejan las
etiquetas. Abrir nuestro archivo en español y hacemos estos cambios:
 22 Programación IV. Guía No. 4

Hacemos los mismos cambios para el archivo en inglés:

A continuación, vamos a modificar el archivo index.xhtml para manejar este cambio en el campo “colonia”,
de la siguiente manera:

El siguiente paso es modificar nuestro Managed Bean vacanteForm para que ahora pueda manejar el
componente “selectOneMenu” según la opción que hayamos seleccionado. Ahora debe de procesar ese valor:
 Programación IV. Guía No. 4 23
Hemos finalizado los cambios. Podemos probar la funcionalidad del aplicativo:

Lo que vamos a hacer ahora es que vamos a separar el componente de “colonia”, ya no vamos a tener los
valores de la colonia directamente en el Managed Bean, sino que tendremos una clase de modelo para manejar
exclusivamente los valores de las colonias; así que vamos a crear una clase “Colonia” para simular una lista
obtenida de una base de datos, pero realmente con esto ya queda un diseño muy simple para poder obtener los
valores de manera dinámica, así que vamos a realizar los siguientes cambios en nuestro proyecto.
Lo primero que vamos a hacer es en el package beans.model crear nuestra clase “Colonia” de la siguiente
manera:
 24 Programación IV. Guía No. 4

Ahora vamos a crear una clase llamada “ColoniaHelper” en el package “beans.helper”. Esta clase realmente
va a ser un intermediario para conectarse a una base de datos o alguna fuente donde venga la información de
cada una de las colonias y nuestro Managed Bean para poder separar la funcionalidad y no tener todo en una
misma clase:
 Programación IV. Guía No. 4 25

A continuación, vamos a modificar el archivo index.xhtml de la siguiente forma:

Finalmente, debemos modificar la clase vacanteForm, vamos a inyectar nuestro componente “coloniaHelper”
para poder hacer las validaciones respectivas:
 26 Programación IV. Guía No. 4

Ya podemos probar nuestra aplicación:

Con este ejemplo ya tenemos todo preparado para que se pueda obtener algún tipo de información de otra
fuente sin ningún problema, ya está todo perfectamente separado. De igual forma, en este ejemplo seguimos
utilizando el componente de tipo selectItem, pero ahora también utilizamos el componente selectItems y con
ayuda de las clases que hemos creado, hemos hecho las modificaciones a nuestra clase para manejar de manera
dinámica el código postal y que cargue la colonia respectiva. Ya no tenemos más esta información mezclada
en nuestro Managed Bean, sino que lo hemos pasado a otra clase que maneja el catálogo de colonias.

Guía 4 Ejemplo 10. Uso de Facelets y Templates en JSF.

Básicamente lo que vamos a hacer en este ejemplo es agregar un estilo e imágenes a nuestro proyecto JSF para
que tenga un look and feel distinto, una apariencia distinta así que vamos a agregar varias características como
son hojas de estilos, algunas imágenes de background, para que tengamos una imagen mejor en nuestra
aplicación.
Los recursos que vamos a utilizar los compartirá el docente para que puedan descargarlos y utilizarlos en su
aplicación.
El primer paso es crear una nueva carpeta llamada “resources” dentro de la carpeta Web Pages. Dentro de esta
carpeta vamos a crear otra carpeta llamada “css” que es donde vamos a depositar los estilos CSS de nuestra
aplicación.
 Programación IV. Guía No. 4 27
Dentro de esa carpeta css vamos a crear un nuevo archivo de tipo CSS que se llamará “estilos”. En este archivo
vamos a pegar el contenido del archivo CSS proporcionado.
Dentro de la carpeta resources vamos a agregar algunas imágenes, así que vamos a crear una nueva carpeta
llamada “images”
Estas rutas de preferencias debemos de respetarlas así como los nombres de las carpetas, pues estas carpetas
las reconoce en automático el servidor de JSF, así que es importante que respetemos los nombres indicados de
las carpetas.
A continuación, vamos a copiar en esta carpeta las imágenes proporcionadas.

El siguiente paso es dentro de la carpeta WEB-INF crear una nueva carpeta llamada “plantillas”. Dentro de
esta carpeta vamos a crear un nuevo archivo de tipo xhtml que tendrá el nombre “plantilla”, y agregamos el
siguiente código:

Ahora vamos a aplicar esta plantilla a las páginas que ya tenemos creadas. Vamos a abrir la página index.xhtml
y vamos a aplicarle la plantilla, de esta manera:
 28 Programación IV. Guía No. 4

Así ya tenemos todos los cambios en nuestra aplicación. Vamos a ejecutarla para ver como luce:

De esta manera, en esta práctica hemos revisado e implementado las funcionalidades de un proyecto de tipo
JSF.