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 deaplicació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 deaplicació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

• <%@ pagecontentType="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 componentes2. Aplicar parámetros de la petición3. Validar valores obtenidos y ejecutar

acciones de eventos de cambio de valor4. Incorporar datos de la aplicación5. Ejecutar acciones de eventos a nivel de

aplicación (botones, enlaces, etc)6. Crear respuestaEn cada etapa se pueden generar eventos

Ciclo de vida, II

123 abc

6HTML

1 Crear

2Pasar

3 Validar4

Incorporar

5Eventos

Aplicación

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

3

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:commandButtonaction=“#{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:outputTextvalue=“${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:inputTextrequired=“true”maxLength=“3”value=#{article.price}>

<f:validateLongRangeminimum=“#{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

123 abc

6HTML

1 Crear

2Pasar

3 Validar yeventos c.v.

4Incorporar

5Eventos

Aplicación

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.propertiesArticleMessages_en_UK.propertiesArticleMessages_en_US.propertiesArticleMessages_es_ES.propertiesArticleMessages_es_MX.properties

• Alternativa:ArticleMessages_en.propertiesArticleMessages_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