Introducción a JSF

1. Introdución a JSF
Curso : Java EE
División de Alta Tecnología

2. Contenido del capitulo
TEMAS
1. ¿Qué es el JSF? ¿Qué es un UI Component?
2. Conceptos de convertidores, validaciones, eventos y
listeners
3. Definición de Facets
4. Conceptos de renders y renders Kit
5. Ciclo de Vida de componentes JSF
División de Alta Tecnología

3. ¿Qué es el JSF? ¿Qué es un UI Component?
‡La tecnología JavaServer Faces constituye un marco de
trabajo (framework) de interfaces de usuario del lado
de servidor para:
‡ Desarrollar aplicaciones web basadas en tecnología Java
‡ Utilizando el patrón MVC (Modelo Vista Controlador).
División de Alta Tecnología

4. ¿Qué es el JSF? ¿Qué es un UI Component?
‡El objetivo de la tecnología JavaServer Faces es desarrollar
aplicaciones web de forma parecida a como se construyen
aplicaciones locales con Java tales como:
1. Swing, AWT (Abstract Window Toolkit), SWT (Standard Widget
Toolkit) o cualquier otra API similar..
‡JavaServer Faces pretende facilitar la construcción de estas
aplicaciones proporcionando un entorno de trabajo (framework) vía
web que gestione:
‡ Las acciones producidas por el usuario en su página HTML
‡ Las traduce a eventos que son enviados al servidor con el objetivo
de:
‡ Regenerar la página original
‡ Reflejar los cambios pertinentes provocados por dichas
acciones.
División de Alta Tecnología

5. ¿Qué es el JSF? ¿Qué es un UI Component?
‡Componentes principales
‡Los principales componentes de la tecnología JavaServer Faces son:
‡ Una API y una implementación de referencia para:
‡ Representar componentes de interfaz de usuario (UI-User Interface) y
manejar su estado
‡ Manejar eventos, validar en el lado del servidor y convertir datos
‡ Definir la navegación entre páginas
‡ Soportar internacionalización y accesibilidad, y
‡ Proporcionar extensibilidad para todas estas características.
‡ Una librería de etiquetas JavaServer Pages (JSP) personalizadas para
dibujar componentes UI dentro de una página JSP.
División de Alta Tecnología

6. ¿Qué es el JSF? ¿Qué es un UI Component?
Fuente: Web Reference - http://www.webreference.com/programming/java_server/2.html
División de Alta Tecnología

7. ¿Qué es el JSF? ¿Qué es un UI Component?
‡Características principales
‡La página JSP, miform.jsp, especifica
componentes de la interfaz de usuario
mediante etiquetas personalizadas definidas
por la tecnología JSF.
‡LA UI de la aplicación web (representada por
miUI en la figura) maneja los objetos
referenciados por la JSP, que pueden ser de
los siguientes tipos:
‡ Objetos componentes que mapean las
etiquetas sobre la página JSP.
‡ Oyentes de eventos, validadores y
convertidores registrados y asociados a
los componentes.
‡ Objetos del modelo que encapsulan los Diagrama de una aplicación JSF
datos y las funcionalidades de los
componentes específicos de la aplicación
(lógica de negocio).
División de Alta Tecnología

8. ¿Qué es el JSF? ¿Qué es un UI Component?
‡UI Component
‡Son los controles que permiten componer la interfaz de
usuario (listados, botones, etc.)
1. Todos implementan la interfaz UIComponent, que permite moverse por el
árbol de componentes, añadir facetas, validadores, atributos, etc.
‡Los componentes tienen dos partes:
‡ El componente en si (que implementa la funcionalidad)
‡ El productor (renderer).
‡ Así, por ejemplo, un campo de entrada normal
‡ O uno de contraseña sólo se distinguen por el productor, siendo el componente igual para ambos
(UIInput).
División de Alta Tecnología

9. ¿Qué es el JSF? ¿Qué es un UI Component?
‡UI Component
‡La tecnología JavaServer Faces proporciona una arquitectura de
componentes rica y flexible que incluye:
‡ Un conjunto de clases UIComponent para especificar el estado
y comportamiento de componentes UI.
‡ Un modelo de Producción(renderizado) que define cómo
producir(renderizar) los componentes de diferentes formas.
‡ Un modelo de eventos y oyentes que define cómo manejar los
eventos de los componentes.
‡ Un modelo de conversión que define cómo conectar
convertidores de datos a un componente.
‡ Un modelo de validación que define cómo registrar validadores
con un componente
División de Alta Tecnología

10. Conceptos de convertidores, validaciones,
eventos y listeners
‡Convertidores
‡Sirven para convertir de objeto a cadena y de cadena a objeto.
Implementan la interfaz Converter.
1. Pueden tener parámetros, que se pueden fijar usando el tag f:attribute o a través de
setters y getters (proveyendo además un tag personalizado para su uso, al estilo de los
validadores).
2. Todos los componentes que heredan de UIOutput pueden tener un convertidor
asociado.
‡Los tags personalizados deben añadir los convertidores por medio
del método setConverter del interfaz UIComponent.
‡Se declaran en el archivo de configuración de JSF.
1. Pueden tener un tipo asociado, en cuyo caso, no es necesario declararlos
explícitamente en los JSPs, sino que JSF los invocan automáticamente en función del
tipo de campo de los beans. Para definir un convertidor para un tipo explícito hay que
usar <converter-for-class> en el fichero de configuración.
División de Alta Tecnología

11. Conceptos de convertidores, validaciones,
eventos y listeners
‡Validadores
‡ El sistema JSF procesa todas las validaciones registradas con los
componentes JSF.
‡Examina los atributos del componente especificados por las reglas de
validación y evalúa las reglas con los valores de dichos atributos.
‡Si un valor incumple una regla, la implementación JSF añade un
mensaje de error y se produce(renderize) la respuesta para que se
dibuje en la página incluyendo los mensajes de error.
‡ Por ejemplo: Existe un atributo en todos los tags de entrada
llamado "required" que es de tipo boolean y que define si se debe
asignar un validador que obligue a rellenar el campo.
‡ Aparte de este atributo, existen algunos validadores estándar de
JSF como, p.e., validadores de rango.
‡ Pueden recibir parámetros siempre que se implementen como
clases aparte deben cumplir la interfaz Validator.
División de Alta Tecnología

12. Conceptos de convertidores, validaciones,
eventos y listeners
‡Eventos
‡Cada evento debe definir una interfaz oyente personalizada. Dicha
interfaz debe heredar de FacesListener.
1. Igualmente, se suele definir otra interfaz para los componentes que generan eventos
de un determinado tipo.
2. Por ejemplo: se define ActionSource para componentes que generan ActionEvents.
‡Todos los eventos heredan de FacesEvent.
1. Se recomienda que todas las clases de eventos acaben con el sufijo Event.
2. Se pueden crear eventos personalizados.
‡JSF define sólo dos tipos de evento y sus correspondientes oyentes:
1. ActionEvent/ActionListener: lanzado por componentes UICommand.
2. ValueChangedEvent/ValueChangeListener: lanzado por componentes UIInput.
División de Alta Tecnología

13. Conceptos de convertidores, validaciones,
eventos y listeners
‡Oyentes (Listeners)
‡Cada componente debe tener un método addLoQueSeaListener y otro
removeLoQueSeaListener por cada interfaz oyente que pueda
notificar.
‡ Para registrar un oyente hay que usar su correspondiente tag personalizado. Por
ejemplo:
<h:loQueSea>
<f:valueChangeListener
type="oyente.configurado.en.faces.config"/>
</h:loQueSea>
‡Toda implementación de oyente debe devolver en el método
getPhaseId() la fase del ciclo de vida en la que desea recibir el
evento.
1. Los eventos se van encolando y procesando en el FacesContext a medida que el ciclo de
vida va avanzando.
División de Alta Tecnología

14. Facetas (Facets)
‡Facetas (Facets)
‡ Son componentes hijos de otro componente pero que cumplen una
función especial.
‡ Son relaciones que pueden ser ortogonales y existir fuera del árbol
de componentes.
‡ Por ejemplo: las etiquetas de título del control de pestañas, las
cabeceras de las tablas, etc.
División de Alta Tecnología

15. Conceptos de renders y renders Kit
‡Productor(Renderer)
Existen dos formas de producción:
‡Directa: sobreescribiendo los métodos: decode, encodeBegin,
encodeChildren y encodeEnd, así como getRendererType() para que
devuelva null.
‡Delegada: se basa en clases que heredan de la clase abstracta
Renderer.
1. Para delegar en un productor hay que hacer que getRendererType() devuelva el tipo de
productor a usar. JSF le pedirá ese tipo de productor al RenderKit en uso.
División de Alta Tecnología

16. Kits de producción (render kits)
‡ Heredan de RenderKit.
‡ Suponen una colección de productores especializados
para cierto tipo de dispositivos. Por ejemplo:
podemos tener un kit para HTML y otro para WML.
‡ Los kits de definen en faces-config:
<render-kit>
...
<renderer>
<renderer-type>tipo.logico.de.renderer</renderer-type>
<renderer-class>clase.renderer</renderer-class>
</renderer>
...
</render-kit>
División de Alta Tecnología

17. Ciclo de Vida de componentes JSF
‡ Ciclo de vida JSF
‡ El ciclo de vida de una página JavaServer Faces page es
similar al de una página JSP:
‡ El cliente hace una petición HTTP (Hiper Text Transfer Protocol) de la
página y el servidor responde con la página traducida a HTML.
‡ Sin embargo, debido a las características extras que ofrece la tecnología
JavaServer Faces, el ciclo de vida proporciona algunos servicios
adicionales mediante la ejecución de algunos pasos extras.
División de Alta Tecnología

18. Ciclo de Vida de componentes JSF
División de Alta Tecnología

19. Ciclo de Vida de componentes JSF
‡ Ciclo de vida JSF
El ciclo de vida completo es:
‡ Restaurar vista
‡ Aplicar valores de la petición
‡ Procesar validaciones
‡ Actualizar modelo
‡ Invocar aplicación
‡ Producir respuesta
División de Alta Tecnología

20. Ciclo de Vida de componentes JSF
‡ Escenarios del Ciclo de vida JSF
‡ Existen tres escenarios posibles. Cada escenario pasa por distintas
fases del ciclo de vida:
‡Petición JSF genera respuesta JSF:
ŃCiclo de vida completo
‡Petición no-JSF genera respuesta JSF:
ŃRestaurar vista
ŃProducir respuesta
‡Petición JSF genera respuesta no-JSF (ejemplo: generar XML)
ŃRestaurar vista
ŃAplicar valores de la petición
ŃProcesar validaciones
ŃActualizar modelo
ŃInvocar aplicación
ŃDesvío a productor no-JSF
División de Alta Tecnología

21. Ciclo de Vida de componentes JSF
‡ Laboratorio 1
División de Alta Tecnología