Java Server Faces

JSF
• Framework Java que permite construir
páginas como interfaces de usuario
– Distintos tipos de componentes.
– Estados y eventos/funcionalidad (JavaScript).
– Asociación entre datos de la interfaz y datos
de la aplicación web (Java Beans, etc).
– Especificación de la navegación del usuario.
– Colección de etiquetas JSP asociadas.
 JSF-JSP: Algunas características
• Especificación en las etiquetas de vías de
acceso a recursos (imágenes, etc) relativas y
absolutas para el servidor. Traducción
automática al cliente.
• Asociación directa con datos de la aplicación
(Java Beans, etc) de datos en las etiquetas:
– Datos necesarios para la visualización de la página.
– Datos proporcionados por el usuario (formularios).
– Otros datos que permiten parametrizar el código del
servidor que genera la interfaz.
JSF-JSP: Algunas características, II
• La especificación del controlador MVC pasa a
un fichero de configuración XML
• El modelo está formado por los Beans que
guardan los datos generados por la aplicación.
• Cada solicitud incorpora datos nuevos, que
pueden ser parámetros de control o información
a incorporar al modelo del servidor
• Utiliza exclusivamente peticiones POST, que
van siempre al servlet principal. No permiten
motores de búsqueda ni guardar URLs favoritas.
Ejemplo sencillo de aplicación JSF
Aplicación que:
• Pide al usuario que se identifique.
• Tras pulsar un botón, se muestra al
usuario en otra página la información
textual disponible para él.
• Permite la vuelta a la página inicial
pulsando en otro botón.
 Ejemplo sencillo de
aplicación JSF, II
• Páginas web: Identificación e información
• Página de identificación:
– Campo de texto que pide la identificación
– Campo de texto para introducir la identificación
– Botón para pedir la información
• Página de información:
– Campo de texto que muestra la identificación
– Campo de texto que muestra la información
– Botón para volver a la página inicial
 Ejemplo sencillo de
aplicación JSF, III
• Modelo de datos, indicado en faces-config.xml:
– Bean de aplicación con la tabla de usuarios-info
– Bean de sesión con el usuario actual y su info.
• Control de la navegación, indicado en faces-
config.xml: Se pasa de la página de
identificación a la de información y de ésta a la
de identificación mediante eventos de acción
(cadena de caracteres)
• Botones: CommandButtons con acción asociada
de ejecución (método sin argumentos que
devuelve String de la clase del bean).
 Directivas
• <%@ page
contentType="application/xhtml+xml“
%>
• <%@ taglib
uri="http://java.sun.com/jsf/html“
prefix="h“
%>
• <%@ taglib
uri="http:.//java.sun.com/jsf/core“
prefix="f“
%>
Controlador y componente principal
• Carga del servlet
javax.faces.webapp.FacesServlet al
arrancar la aplicación (se incluye en
web.xml con la indicación
<load-on-startup>1</load-on-startup>).
• Todas las componentes JSF están en
ficheros JSP dentro del cuerpo de una
etiqueta <f:view>.
 Etiquetas y componentes
• Hay dos tipos de etiquetas JSF: Las etiquetas
de componentes gráficas (HTML) y las etiquetas
de carácter transversal (core).
• Clases: Etiquetas, componentes y mostradores
(renderers). Se genera un mini-Dom ampliado.
• Cada etiqueta de componente gráfica da lugar a
un objeto de la clase de componente
correspondiente y un renderer, formando los
primeros un árbol.
• Ejemplo: La etiqueta h:inputtext genera una
componente UIInput con un mostrador de texto.
 Funcionalidad de etiquetas
transversales
• Acciones para la manipulación de eventos
• Conversión de datos
• Validación de datos
• Internacionalización
(se describirán más adelante)
 Ciclo de vida
(generación de respuestas)
1. Crear o reusar árbol de componentes
2. Aplicar parámetros de la petición
3. Validar valores obtenidos y ejecutar
acciones de eventos de cambio de valor
4. Incorporar datos de la aplicación
5. Ejecutar acciones de eventos a nivel de
aplicación (botones, enlaces, etc)
6. Crear respuesta
En cada etapa se pueden generar eventos
 Ciclo de vida, II
1 Crear
5
123 Eventos abc

Aplicación

3 Validar
2 4
Pasar Incorporar
6
HTML
 Depuración
• Hay herramientas que permiten seguir el
ciclo de vida de la aplicación
– jsftutorials.net/faces-config/phaseTracker.html
 Componentes gráficas:
Estructura general
<f:view>
<h:form>
…
</h:form>
</f:view>
 Componentes gráficas: Texto fijo
• <h:outputText
value=“${price}”
lang=“en_US”
/>
 Componentes gráficas:
Campo de texto
• <h:inputText
required=“true”
maxLength=“3”
value=#{book.price}>
</h:inputText>
Componentes gráficas: Imagen
• <h:graphicImage
height=“20”
length=“100”
value=“/images/book.gif”
/>
 Componentes gráficas:
Menús de selección
• <h:selectOneMenu
id="selectOneCar“
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectOneMenu>
 Componentes gráficas:
Recuadros de selección múltiple
• <h:selectManyCheckbox
id="cars“
value="#{carsBean.car}">
<f:selectItems
value="#{carBean.carList}"/>
</h:selectManyCheckbox>
 Componentes gráficas:
Recuadros seleccionables
• <h:selectBooleanCheckbox
title="emailUpdates“
value="#{jsfex.wantsUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText
value="Would you like email
updates?"/>
Componentes gráficas: Paneles
Tabla con números

1 2

Pie de tabla
Componentes gráficas: Paneles, II
• <h:panelGrid columns=“2“
<f:facet name="header">
<h:outputText value="Tabla con números"/>
</f:facet>
<h:outputText value="1" />
<h:outputText value="2" />
<h:outputText value="3" />
<f:facet name="footer">
<h:outputText value=“Pie de tabla" />
</f:facet>
</h:panelGrid>
 Componentes gráficas: Tablas
• <h:dataTable id="books“ value="#{BookStore.items}“
var=“book">
<h:column>
<f:facet name="header">
<h:outputText value="#{msg.storeNameLabel}"/>
</f:facet>
<h:outputText value="#{book.name}"/> </h:column>
<h:column> <f:facet name="header">
<h:outputText value=“#{msg.storeTypeLabel}”/>
</f:facet> <h:outputText value="#{book.subject}"/>
</h:column> </h:dataTable>
 Componentes gráficas:
Mensajes de errores del usuario
• Incluye todos los mensajes de error:
<h:messages style=“color: red” />
• Incluye mensajes de error de una componente:
<h:message
style="color: red“
for="useraddress" />
<h:inputText id="useraddress“
value="#{jsfexample.address}“
required="true"/>
 Componentes gráficas:
Botón, enlace con acción
• <h:commandButton
action=“#{bean.method}”
value=“OK”
/>
• <h:commandLink
action=“#{bean.method}”
value=“UAM”
/>
 Modelo de datos de aplicaciones
basadas en JSF
• Normalmente, cada página JSF muestra datos
de un objeto específico, que suele ser un bean o
una colección de beans asociados a la página.
• JSF permite asociar de manera simple un objeto
a cada página JSF. La especificación del objeto
asociado a una página se hace mediante el
fichero de configuración faces-config.xml en
lugar de utilizar un servlet.
• El proceso de asociación de objetos a páginas
JSF se denomina gestión de los beans.
 Modelo de datos de aplicaciones
basadas en JSF, II
• La gestión de los beans se lleva a cabo
mediante la invocación del constructor por
defecto del bean.
• En caso de que el valor asignado a un
atributo por el constructor por defecto no
sea el deseado, la especificación del bean
gestionado por una página JSF
determinada puede asignarle otro valor.
 Modelo de datos en JSF: Ejemplo de
especificación de beans gestionados
<managed-bean>
<managed-bean-name>uNumber</managed-bean-name>
<managed-bean-class>gn.UNumber</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>minimum</property-name>
<property-class>long</property-class>
<value>0</value>
</managed-property>
…
• Acceso a la información: ${uNumber.minimum}.
Modelo de conversión de datos
• La estructura de datos utilizada en la
presentación no es la misma que se utiliza
en la representación de datos por el
servidor.
– Ejemplo: Una fecha se puede mostrar
mediante tres cadenas de caracteres.
• JSF proporciona conversores estándar.
• Se pueden definir más conversores.
Ejemplos de conversores de datos
• <h:outputText
value=“${price}”
lang=“en_US”
converter=<f:convertNumber
type=“currency”
maxFractionDigits=“2”
/> />
• <h:outputText value="#{article.date}">
<f:convertDateTime dateStyle="full"/>
</h:outputText>
 Modelo de validación
• JSF permite definir restricciones sobre los
valores de determinados datos
introducidos por los usuarios.
• JSF proporciona validadores estándar.
• Se pueden definir más validadores.
 Ejemplos de validadores
• <h:inputText
required=“true”
maxLength=“3”
value=#{article.price}>
<f:validateLongRange
minimum=“#{article.minPrice}”
maximum=“#{article.maxPrice}”
/>
</h:inputText>
 Uso de expresiones UEL
• Los atributos de las componentes y otros
objetos generados por JFS se evalúan en
el momento que les corresponde del ciclo
de vida.
• Por ejemplo, los valores que se obtienen
de la aplicación, como los contenidos de
las etiquetas, se evalúan en la fase de
incorporación de datos de la aplicación,
tras procesar los parámetros de la
solicitud.
 Uso de expresiones UEL, II
• Para controlar la evaluación de los atributos, sus
valores son normalmente expresiones UEL de
evaluación retardada, #{…}.
• Normalmente son expresiones que corresponden
a l-values, es decir que su valor es una referen-
cia asignable. Por ejemplo, no pueden ser el
resultado de una operación o una comparación ni
números, pero pueden ser atributos de objetos.
También pueden ser colecciones o
enumeraciones.
 Modelo de eventos
• Las acciones del usuario generan eventos, que
son objetos de una clase JSF.
• Los eventos de acción, como los botones y los
enlaces, dan lugar a una petición al servidor y
pueden activar acciones en él.
• Los eventos de cambio de valor, como la
selección de items en una lista y la activación de
un check box, además de poder generar la
evaluación de métodos JS en el cliente, pueden
activar acciones específicas en el servidor,
como el acceso a una base de datos.
 Modelo de eventos: Ejemplo
• <h:commandButton
action=“#{bean.method}”
value=“OK”/>
• class Bean { …
String method() { … } }
• Los objetos registrados para recibir
eventos reciben el valor que devuelve
method()
 Recordatorio: Ciclo de vida
5 1 Crear
Eventos
123 Aplicación abc

3 Validar y
eventos c.v.
2 4
Pasar Incorporar
6
HTML
Modelo de eventos: Priorización
• Las acciones desencadenadas en el
servidor por los eventos de acción se
ejecutan inmediatamente antes de
generar la respuesta.
• Las acciones desencadenadas en el
servidor por los eventos de cambio de
valor se ejecutan en la fase de validación.
Modelo de eventos: Priorización, II
• A veces se desea que las acciones asociadas a
eventos de acción modifiquen datos necesarios
en fases previas, como la incorporación de
datos de la aplicación (por ejemplo, si un dato
generado por el usuario se utiliza en la
presentación inmediata).
• A veces se desea priorizar la ejecución de las
acciones asociadas a eventos de cambio de
valor (por ejemplo, si modifican datos
necesarios en otra acción del mismo tipo).
Modelo de eventos: Priorización, III
• Si una componente gráfica tiene su
atributo immediate con valor true, las
acciones desencadenadas en el servidor
por los eventos de acción y cambio de
valor se ejecutan al final de la fase de
aplicación de parámetros de la petición,
resolviendo los problemas anteriores.
 Modelo de navegación
• JSF permite especificar la navegación entre
páginas mediante reglas que indican qué
eventos permiten pasar de una página a otra.
• El evento null dirige de nuevo a la última
página.
• La especificación de la navegación en
aplicaciones basadas en JSF se hace mediante
el fichero de configuración faces-config.xml en
lugar de utilizar un servlet.
 Modelo de navegación:
Formato de las reglas
<navigation-rule>
<from-view-id>/init.jsp</from-view-id>
<navigation-case>
<from-outcome>event</from-outcome>
<to-view-id>/end.jsp</to-view-id>
</navigation-case>
</navigation-rule>
 Ejercicios obligatorios
• [JSF1] Escribir en un documento de texto
la lista de tareas necesarias para
implementar el ejemplo sencillo de
aplicación JSF descrito en estas
transparencias.
• [JSF2] Implementar el ejemplo sencillo de
aplicación JSF descrito en estas
transparencias.
 Inclusión de mensajes
(parte del texto de la página)
• Fichero
src/articles/ArticleMsgs.properties:
…
ServerError=Request not completed
ClientError=Form not filled
…
 Inclusión de mensajes:
Carga selectiva
• Fichero Articles.jsp:
<f:loadBundle
basename=“articles.ArticleMsgs“
var=“artmsg“/>
…
<h:outputText
value=“#{artmsg.ServerError}”/>
 Inclusión de mensajes:
Carga global
• Fichero faces-config.xml:
• <resource-bundle>
<base-name>
articles.ArticleMsgs
</base-name>
<var>artmsg</var>
</resource-bundle>
• Fichero Articles.jsp:
<h:outputText value=“#{artmsg.ServerError}”/>
 Parametrización de mensajes
• Fichero de propiedades:
…
Selección=El socio {0} ha sido seleccionado
…
• Fichero Socios.jsp:
<f:loadBundle basename=“…“ var=“sls“/>
<h:outputFormat value=“#{sls.Seleccion}”>
<f:param value=“#{socios.seleccion}”/>
</h:outputFormat>
• Permite cambiar el orden de las palabras en
distintos idiomas.
Componentes gráficas: Adaptación
de mensajes de errores del usuario

<h:inputText id=“cap” label=“Capitulo”

value=“#{LibroBean.capNum}”
converterMessage = “#{ErrMsg.capE}”>
 Internacionalización
• Forma idiomática (locale): Especifica un idioma,
país y variante del idioma
• Ejemplo:
– Inglés de Estados Unidos
– Español de España, variante andaluza
– Francés
• Se especifica mediante una cadena de la forma
XXX_YYY_ZZZ
– Ejemplo: en_US
– Normalmente, el país se pone con mayúsculas
 Internacionalización, II
• Ficheros de propiedades:
ArticleMessages.properties
ArticleMessages_en_UK.properties
ArticleMessages_en_US.properties
ArticleMessages_es_ES.properties
ArticleMessages_es_MX.properties
• Alternativa:
ArticleMessages_en.properties
ArticleMessages_es.properties
 Internacionalización, III
• Cada navegador en cada PC tiene una
preferencia idiomática establecida.
• Cada aplicación web puede tener una
preferencia idiomática propia.
• En general, las componentes gráficas
pueden establecer un locale específico.
 Internacionalización, IV
• Preferencia idiomática de una aplicación JSF:
Fichero faces-config.xml
<application><locale-config>
<default-locale>es_ES</default_locale>
<supported-locale>es_MX
</ supported-locale>
<supported-locale>en_UK
</ supported-locale>
</locale-config></application>
 Internacionalización, V
• Internacionalización de aplicaciones web
generales:
Exige programación en Java
– Utilizar la clase PropertyResourceBundle,
construyendo instancias a partir de un locale
y los ficheros de propiedades.
– Construir los mensajes que aparecen en las
páginas a partir de los
propertyResourceBundles consruidos.
 Ejercicios optativos
• [JSF3] Complementar la aplicación del
ejercicio anterior de manera que se pueda
hacer la gestión a través de ella de los
usuarios y mensajes asociados.
• [JSF4] Completar la aplicación del
ejercicio anterior incorporando una versión
en otro idioma