javaserver faces - conectaempleo … · componentes de jsf construyen la interfaz de usuario en el...

JavaServer Faces

JavaServer Faces | TELEFÓNICA // 3

1. ¿Qué es JavaServer Faces?La tecnología JavaServer Faces (JSF) es un framework de interfaz de usuario para la creación de aplicaciones Web con tecnologías Java EE.

Se fundamenta en los componentes del lado del servidor, que se ejecutan en un servidor Web compatible con JSF, como Tomcat, WildFly o GlassFish; entre otros. Esto quiere decir que los componentes de JSF construyen la interfaz de usuario en el lado del servidor, convirtiéndolos a formato HTML para que así puedan ser “renderizados” (formados visualmente) en el navegador.

NavegadorContenedor Web

miform.jsp

miform.jsp“renderizar”HTML

Petición HTTP

Respuesta HTTP

La tecnología JavaServer Faces se compone de dos elementos principales:

• Un API JEE, que se utiliza para el diseño de componentes y la gestión de su estado. Incluyendo un conjunto de funcionalidades para el manejo de eventos y validación de datos en el lado del servidor, conversiones, generación de mensajes y reglas de navegación de páginas, entre otras.

API JEE


• Un conjunto de bibliotecas de etiquetas para agregar componentes a páginas web y para la conexión de componentes y objetos en el lado del servidor.

Bibliotecas de etiquetas


Estos dos elementos facilitan y simplifican el desarrollo y el mantenimiento de aplicaciones web usando las interfaces de usuario del lado del servidor, normalizando y estandarizando el desarrollo de aplicaciones web.

Ofrece una clara separación entre el comportamiento y la presentación, lo que permite a cada miembro del equipo de desarrollo de una aplicación Web enfocarse en su parte del proceso, y proporciona un sencillo modelo de programación para enlazar todas las piezas.

La tecnología JavaServer Faces (JSF) es un framework de interfaz de usuario para la creación de aplicaciones Web con tecnologías Java EE.


2. Creación de un proyecto JSF en EclipseEn Eclipse no existe tipo de proyecto para JSF, para trabajar con JSF hay que realizar los siguientes pasos:

En Eclipse no existe tipo de proyecto para JSF, para trabajar con JSF hay que realizar los siguientes pasos:

• Crear un proyecto “Dynamic Web”.

• En propiedades del proyecto en “Project Facets” añadir la “facet” para JavaServer Faces (versión actual 2.2).

Un “facet” (faceta) define características y requisitos para un proyecto Java EE y se utiliza como parte de la configuración de ejecución.

Cuando se agrega una faceta a un proyecto, este se configura para realizar una determinada tarea, cumplir con ciertos requisitos, o tener ciertas características. Con la faceta “JSF” se añade al proyecto el fichero “faces-config.xml” y se carga una librería de JSF.

La imagen siguiente muestra como elegir la faceta para JSF.

Añadir la faceta JSF al proyecto


• Una vez añadida la faceta, en las propiedades del proyecto, expandiendo “Proyect Facets” se encuentra la opción “JavaServer Faces”, con la que habrá que especificar la librería que implemente la especificación JSF de JEE.

Existen dos librerías muy extendidas y utilizadas, son:

−MyFaces de Apache.

−Mojarra de Oracle.

En este caso se procede a descargar Mojarra, tal y como indica la imagen siguiente.

Especificar l librería que implementa la especificación JSF de JEE


• Añadir la librería de la especificación JSF al proyecto, desde “Java Server Faces” de la faceta JSF, pulsando sobre el botón con el icono de librería” o desde l opción clásica de “Java Build Path - Add Library - User Library”, tal como muestra la imagen.

Añadir la librería de JSF al proyecto


El proyecto creado ya puede trabajar con JSF, en la carpeta “WEB-INF”, junto con el descriptor de despliegue “web.xml” se h creado el fichero de configuración de JSF “faces-config.xml”, cuyo contenido es el de la derecha.

En este fichero se configuran los “Managed Bean”, aunque a partir de la versión 2 se puede hacer por anotaciones. Este tipo de bean son como los de cualquier otro tipo, clases sencillas, con sus datos y sus funciones “get” y “set”, pero están gestionados por JSF, permitiendo permiten el enlace entre los controles del interfaz del usuario y sus propiedades, utilizando expresiones EL.

<?xml version=”1.0” encoding=”UTF-8”?><faces-config xmlns=”http://xmlns.jcp.org/xml/ns/javaee” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=”http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd” version=”2.2”></faces-config>


http://xmlns.jcp.org/xml/ns/javaee

http://www.w3.org/2001/XMLSchema-instance

http://xmlns.jcp.org/xml/ns/javaee

http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd

3. Primera página JSFLas páginas JSF son de tipo XHTML, con etiquetas propias de JSF y de HTML. Su código se “renderiza” a HTML en el contenedor Web.

Una forma de trabajar con JSF es a partir de plantillas (templates) que forman diferentes partes de las páginas, siendo la página final una composición de estas plantillas. De momento para simplificar se va a crear una página que utilice como base una plantilla de una sola página, como la que se obtiene en Eclipse con “File New - XHTML Page” y se denomina “Common Facelet Page”, tal como muestra la imagen.

Creación de una página XHTML para JSF con Eclipse


La página generada tiene esta en su estructura estas partes:

• La definición de los espacios de nombres y vocabulario de las etiquetas JSF a utilizar. En este caso los proporcionados por las librerías “facelets” con prefijo “ui”, “core” con prefijo “f” y “html” con prefijo “h”.

• Una etiqueta que define el fichero de recursos en el que deben de estar todos los mensajes susceptibles de cambiar de idioma, es el fichero fundamental para implementar la “I18N”.

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:f=”http://java.sun.com/jsf/core” xmlns:h=”http://java.sun.com/jsf/html”>

<f:loadBundle basename=”com.juan.jsf.resources” var=”msg” />//elficherodebeestarubicadoenlacarpetaCLASSPATH


http://www.w3.org/1999/xhtml

http://java.sun.com/jsf/facelets

http://java.sun.com/jsf/core

http://java.sun.com/jsf/html

• A continuación ha generado unos estilos internos en la página, que se podrán quitar, modificar y por supuesto almacenar en un archivo CSS externo.

• El “body” de HTML lo construye con <table> utilizando dos partes:

−Una como cabecera.

−Otra como el propio cuerpo de la página.

El resultado de desplegar en el servidor, esta aplicación formada así y acceder a ella produce este resultado.

Resultado de la ejecución de la página generada por Eclipse


Una forma sencilla de escribir texto es utilizando la etiqueta <h:outputText>, un ejemplo de utilización es.

Pero esta sentencia de por sí, sea poco interesante, poco se ha ganado con respecto a la forma de visualizar texto con HTML. Lo interesante puede ser visualizar el texto almacenado en una de las propiedades del fichero de propiedades que se carga con la etiqueta <f:loadBundle>.

<h:outputTextvalue=”Hola,aquíestamosconJSF!”/>

Las páginas JSF son de tipo XHTML, con etiquetas propias de JSF y de HTML. Su código se “renderiza” a HTML en el contenedor Web.


Para utilizar las cadenas de dicho fichero de propiedades se debe indicar donde se encuentra, existen dos formas de hacerlo:

• En el fichero “faces.config.html”:• En el fichero xhtml de JSF, con una etiqueta:

El código para visualizar un mensaje del fichero de propiedades con los recursos utilizando la etiqueta <h:outputText> sería como se indica.

<application> <resource-bundle> <base-name>com.juan.jsf.mensajes</base-name> <var>msg</var> </resource-bundle> </application></faces-config>

<f:loadBundle basename=”com.juan.jsf.mensajes” var=”msg” />

<h:outputText value=”#{msg.mensaje}”/>


También hay que tener en cuenta en que carpeta se ubica el fichero xhtml, si como en este caso se considera que sea el inicio de la aplicación. Una solución, teniendo en cuenta como Eclipse ha configurado el fichero “web.xml”, es almacenarlo en la carpeta “faces”, que se debe de crear.

Esto es así, porque en “web.xml” está configurado otro de los elementos importantes para trabajar con JSF, es el servlet “javax.faces.webapp.FacesServlet”, controlador de todas las peticiones que se hagan a la aplicación JSF. Este servlet esta “mapeado” a “faces/*”, por tanto si en ese directorio se coloca el xhtml de inicio, y así también se define en <welcome file list> todo funcionara correctamente. El contenido del fichero “web.xml” es como el que se muestra.

La estructura del proyecto en Eclipse es como muestra la imagen.

Estructura del proyecto


<display-name>01_Ejemplo_01_Hola_JSF</display-name><welcome-file-list><welcome-file>/faces/index.xhtml</welcome-file></welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet </servlet-class> <load-on-startup>1</load-on-startup></servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping></web-app>


4. Utilización de Managed BeanUn Managed Bean es un POJO (Plain Old Java Object), algo tan sencillo como una clase que tiene un constructor público sin argumentos y sus propiedades tienen sus correspondientes métodos “get” y “set”.

• Utilizando el fichero faces-config.xml. • Utilizando anotaciones.

<managed-bean> <managed-bean-name>usuarioBean</managed-bean-name> <managed-bean-class>com.juan.modelo.Usuario </managed-bean-class> <managed-bean-scope>session</managed-bean-scope></managed-bean>

package com.juan.modelo;import javax.faces.bean.ManagedBeanimport javax.faces.bean.SessionScoped@ManagedBean(name=”usuarioBean”)@SessionScopedpublic class Usuario {...}


Las anotaciones están definidas en el paquete javax.faces.bean. Son de dos tipos:

• Definición del propio bean:

Anotación Funcionalidad

@ManagedBean Define el POJO como Managed Bean. Tiene dos atributos opcionales:

• name, si no se especifica, el mismo nombre de la clase, en minúsculas, será el utilizado para referenciarle.

• eager, los bean son instanciados cuando son necesitados en una petición, pero poniendo valor true en esta propiedad se instancian cuando se crea el ámbito. Por omisión es false.

@ManagedProperty Para inyectar un valor a la propiedad que anota, en su atributo value se indica dicho valor.


• Definición del ámbito en el que se aplica:

Las anotaciones sobre ámbitos del Managed Bean son:

Anotación Funcionalidad

@NoneScoped No especifica ningún ámbito. Su vida es manejada por los Managed Bean que lo referencian. Solo puede referenciar a otro bean en el mismo ámbito

@RequestScoped Por omisión. Crea una nueva instancia por cada HTTP request. Puede referenciar otros beans de los siguientes ámbitos: none, request, view, session, application.

@ViewScoped Página. En el momento que el usuario abandone la página el bean desaparecerá. Tiene que ser Serializable. Puede referenciar otros beans se los siguientes ámbitos: none, view, session, application

@SessionScoped Sesión. Tiene que ser Serializable. Puede referenciar otros beans se los siguientes ámbitos: none, session, application.

@ApplicationScoped Aplicación. Puede referenciar otros beans se los siguientes ámbitos: none, application

@CustomScoped Personalizado. Su valor puede ser configurado como java.util.Map y el programador puede controlar su ciclo de vida.


En el ejemplo siguiente se van a utilizar dos ManagedBean, que se referencian. La aplicación produce la salida siguiente.

Salida producida por el navegador


Lo bean y su dependencia, así como la relación entre las propiedades del bean y los controles del formulario se muestran en la imagen siguiente.

Dependencia de los bean y relación de propiedades con controles

<<ManagedBean>>HolaBean

- nombre: String- mensajeBean: MensajeBean

+ getNombre(): String- setNombre(String): void+ getSaludo(): String

+ getMensajeBean():MensajeBean+ setMensajeBeen(MensajeBean): voi d

#{holaBean.saludo}

#{holaBean.nombre}

<<ManagedBean>>MensajeBean

- bienvenida: String

+ getBienvenida(): String+ setBienvenida(String):void

@ManagedBean(name="holaBean")

@ManagedBean(name="mensaje")

@ManagedProperty(value="#{mensaje}")

<h:outputText><h:inputText>

<h:outputText>

#{holaBean.nombre}


@ManagedBean(name=”mensaje”)@SessionScopedpublic class MensajeBean implements Serializable { privatestaticfinallongserialVersionUID=1L; privateStringbienvenida=“BienvenidotoJSF2.0”; public String getBienvenida() { return bienvenida; }public void setBienvenida(String bienvenida) { this.bienvenida = bienvenida; }}@ManagedBean(name=”holaBean”)@SessionScopedpublicclassHolaBeanimplementsSerializable{ privatestaticfinallongserialVersionUID=1L; @ManagedProperty(value=”#{mensaje}”) private MensajeBean mensajeBean; public void setMensajeBean(MensajeBean mensajeBean) { this.mensajeBean = mensajeBean; } public MensajeBean getMensajeBean() { return mensajeBean; } private String nombre; public String getNombre() { return nombre; }

Las propiedades del bean HolaBean son:

• nombre, que enlaza con controles “input” y “output” del formulario, con la expresión EL: #{holaBean.nombre}.

• saludo, que enlaza con control “output”, sólo tiene función getSaludo, que es la que se ejecuta en la expresión EL: #{holaBean.saludo}.

• mensajeBean, mediante inyección de dependencia provocada por la anotación @ManagedProperty(value=”#{mensaje}”), almacena el valor de la propiedad bienvenida del bean MensajeBean.

Los códigos de estos dos bean son los que se indican a continuación.


public void setNombre(String nombre) { this.nombre = nombre; } public String getSaludo(){ //chequearsinull if(“”.equals(nombre)||nombre==null){ return “”; }else{ return mensajeBean.getBienvenida() + “ “+ nombre; } }}


El código de la página XHTML es el siguiente.

<h:body><h3>EjemploJSFconManagedBean</h3> <h:outputText id=”nombre” value=”#{holaBean.nombre}”/> <h:form> <h:inputText id=”nombre” value=”#{holaBean.nombre}”></h:inputText> <p></p><h:commandButton value=”Bienvenida”> </h:commandButton> <h2><h:outputText id=”output” value=”#{holaBean.saludo}” /></h2> </h:form></h:body>

En este código se han utilizado las siguientes etiquetas JSF:

• <h:body>, que “renderiza” en la etiqueta html <body>.

• <h:form>, que “renderiza” en la etiqueta html <form>.

• <h:outputText>, que “renderiza” su valor en texto que está dentro de la página.

• <h:inputText>, que “renderiza” a una etiqueta html, <input type=”text”>.

• <h:commandButton>, que “renderiza” a una etiqueta html, <input> para los tipos “submit” o “reset”, por omisión “submit”, que se establezca en su atributo “type”. Con sus atributos “actionListener” o “action” se define quien recibe los parámetros del formulario.


A continuación se van a añadir unas mejoras a este ejemplo.

En la actualidad la tendencia es dejar de usar la anotación @ManagedBean de JSF y sustituirla por el uso de las anotaciones de CDI, como:

• @Named, que permite que el nombre anotado pueda ser usado en expresiones EL. En su propiedad opcional value, se indica el nombre con el que podrá ser utilizado con EL.

• @Dependent, su ciclo de vida depende del ámbito de quien depende.

En el ejemplo el bean MensajeBean queda anotado de la forma siguiente.

//AnotacionesJSF@ManagedBean(name=”holaBean”)@SessionScopedpublicclassHolaBeanimplementsSerializable{ privatestaticfinallongserialVersionUID=1L; @ManagedProperty(value=”#{mensaje}”) private MensajeBean mensajeBean;

//AnotacionesJSF//@ManagedBean(name=”mensaje”)//@SessionScoped//AnotacionesCDI@Named(value=”mensaje”)@Dependentpublic class MensajeBean implements Serializable {

Pero sin embargo la anotación @ManagedProperty de JSF no tiene equivalente en CDI, por lo que en el bean HolaBean, se sigue indicando la inyección de dependencia en su propiedad mensajeBean con el bean MensajeBean mediante dicha anotación.


Una mejora en el formulario generado en HTML es utilizar etiquetas de JSF como:

• <h:panelGrid>, es un contenedor tabular para otros componentes que se “renderiza” en una <table> de HTML. Su propiedad más importante es “columns”.

Cada componente que forma este panel estará en una celda, distribuyéndoles de forma automática en filas, teniendo cada fila tantos componentes como valor tenga el atributo “columns”.

• <h:outputLabel>, “renderiza” en la etiqueta <label> de HTML.

• Si en el formulario del ejemplo en un <h:panelGrid> de dos columnas, la etiqueta <h:inputText> lleva emparejada una etiqueta <h:outputLabel>, no habrá que utilizar ninguna etiqueta <p>o <br> para que el botón este en una línea más abajo.

Aplicando estas etiquetas a la página XHMTL, su código queda como sigue:

<h:body> <h3> <h:outputText id=”titulo” value=”EjemploJSFconManagedBean”/> </h3> <h:form> <h:panelGrid columns=”2”> <h:outputLabel for=”nombre” value=”Nombre: “ /> <h:inputText id=”nombre” value=”#{holaBean.nombre}”></h:inputText> <h:commandButton value=”Bienvenida”> </h:commandButton> </h:panelGrid> </h:form> <h2> <h:outputText id=”output” value=”#{holaBean.saludo}” /> </h2></h:body></html>


Otra mejora importante, como ya se ha comentado es utilizar todos los textos en propiedades de ficheros “properties” para poder configurar cuando sea preciso la “I18N”. Con esto el fichero de propiedades podría ser como el siguiente.

titulo=EjemploJSFconManagedBeanetiqueta_nombre=Nombre:etiqueta_boton=Bienvenida

Añadiendo al fichero “faces-config.xml” las correspondientes entradas para indicar que variable se utilizara para enlazar con las propiedades del fichero “properties” y donde esa este almacenado.

<application> <resource-bundle> <base-name>com.juan.jsf.mensajes</base-name> <var>msg</var> </resource-bundle></application>


El código de la página xhtml es el siguiente.

Y la repuesta generada en el navegador será como la que se muestra en la imagen.

<h:body><h3>EjemploJSFconManagedBean</h3><h:outputText id=”nombre” value=”#{holaBean.nombre}”/> <h:form> <h:inputText id=”nombre” value=”#{holaBean.nombre}”> </h:inputText><p></p> <h:commandButton value=”Bienvenida”> </h:commandButton> <h2><h:outputText id=”output” value=”#{holaBean.saludo}” /></h2> </h:form> </h:body>

Salida mejorada producida por el navegador.


5. Tipos de etiquetas JSFEn JSF existen tres tipos de etiquetas, agrupados cada uno en una librería. Estos son:

• Etiquetas core, de carácter transversal que proporciona utilidades para el desarrollo en áreas como la validación, la conversión, la internacionalización,

• escuchadores, eventos, recursos e integración con Ajax.

No es específica para HTML y ninguno de sus componentes tiene una representación visual.

El prefijo de su espacio de nombres es f.

Su URI es: http://java.sun.com/jsf/core.

• Etiquetas html, son la que definen los componentes gráficos que “renderizan” en etiquetas HTML.

El prefijo de su espacio de nombres es h.

Su URI es: http://java.sun.com/jsf/html.

• Etiquetas facelets, definen funcionalidades para plantillas y diseños, que ayudan a formar el esquema de elementos que componen las páginas y sitios web.

El prefijo de su espacio de nombres es ui.

Su URI es: http://java.sun.com/jsf/facelets.

• También se pueden utilizar etiquetas de JSLT como son:

− La librería core, de prefijo c y URI http://java.sun.com/jsp/jstl/core.

− La librería functions, de prefijo fn y URI http://java.sun.com/jsp/jstl/functions.





http://java.sun.com/jsp/

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:c=”http://java.sun.com/jsp/jstl/core”>

En los archivos XHTML de JSF, cada librería de etiquetas a utilizar esta definida como valor de una propiedad en el espacio de nombres xmlns con el prefijo correspondiente, dentro de la etiqueta <html>.






http://java.sun.com/jsp/jstl/core

6. Ciclo de vida de JSFEl ciclo de vida desde que se recibe una petición hasta que se da la respuesta, está compuesto por 6 fases, tal y como muestra la imagen.

no hay vista disponible

inmediate= true

errores de validación

errores de conversión

no hay vista disponible

1. Restore view

2. Apply request values

3. Process validations

4. Update model values

5. Invoke application

6. Render response

Procesamiento de eventos




Request

Response

Ciclo de vida JSF


Fase Funcionalidad

Restore view Se crea o reconstruye el árbol de componentes de la vista.

Apply request values Se leen los valores de la request y se aplican sobre los componentes. En este momento es cuando se llama a los converters. Si hay algún error en la conversión se irá directamente a la fase “render response”. Si un componente tiene “immediate=true” su validación (y el procesamiento de los eventos provocados por esa validación) se hará en esta fase.

Process validations Se validan todos los componentes (los que tienen “immediate=false”, ya que los que lo tienen a true ya se validaron en la fase anterior). Si falla alguna de las validaciones se irá directamente a la fase “render response“.

Update model values Los valores de los beans de JSF se actualizan con los valores que hasta ahora estaban guardados sólo en los componentes.

Invoke application Se invoca a los métodos de los beans, que están definidos en los “action listeners”

Render response Se pinta la respuesta al usuario. Se pinta el árbol de componentes.


FacesServlet es el servlet controlador que gestiona el ciclo de vida del procesamiento de las peticiones en las aplicaciones web con JSF y como tal está definido en “wb.xml”.

Como cualquier servlet tiene su ciclo de vida en el que se ejecutan las funciones:

• init, una vez creado como objeto Java, cuando recibe la primera petición.

• service, función de servicio para cada petición GET o POST.

• destroy, antes de ser liberado de la memoria.

En cada petición FacesServlet instancia un objeto de la clase FacesContext. Este objeto tiene toda la información necesaria para el procesamiento de la petición (request) y la prestación de la respuesta (response).

FacesContext contiene los objetos ServletContext, ServletRequest, y ServletResponse, pasados al método de servicio de FacesServlet por el contenedor Web. Durante el proceso de la petición y la generación de la respuesta FacesContext es modificado.

El objeto Lifecycle gestiona el procesamiento de todo el ciclo de vida de una petición JSF. Es responsable de la ejecución de las seis fases definidas por la especificación JSF, en el orden especificado. El objeto Lifecycle es gestionado por el contenedor. En cada fase se modifica el objeto FacesContext.


La imagen siguiente muestra la relación entre estos tres objetos.

Lyfecycle FacesContext

FacesServlet

2. pasa el control a Lifecycle 1. crea FacesContext

3. procesa a FacesContexten las 6 fases

Objetos implicados en el proceso de las peticiones JSF

El único objeto instanciado FacesContext, para el procesamiento de la petición y la generación de la respuesta, se puede obtener con el método estático getFacesContext() de FacesContextFactory.

Con la instancia de FacesContext, se obtiene información sobre atributos, mensajes, estado de la respuesta, el contexto de EL, el “kit Render” (quien “renderiza” en HTML) y una instancia de ExternalContext, necesaria para obtener los parámetros que el cliente envía en su petición a ServletFaces.

Con ExternalContext se tiene acceso a los elementos que están fuera de FacesServlet, permite trabajar con información del entorno de la aplicación, tales como:

• Parámetros de inicio.

• Parámetros de la petición.

• Cabeceras de la petición.

• Cookies.

• Locale del cliente.


7. NavegaciónLa navegación implica un conjunto de reglas que define el flujo de páginas de la aplicación.

El flujo se determina en base:

• La pagina actual.

• El resultado de la acción de un usuario.

• La salida (outcome) de un método de acción.

Una vez que la regla de navegación se ha evaluado la aplicación puede:

• Navegar a otra página.

• Quedarse en la misma página.


titulo=EjemploJSFconManagedBeanetiqueta_nombre=Nombre:etiqueta_boton=Bienvenida

• Declarando las reglas de navegación: En el archivo faces-config.xml se declaran las reglas de navegación.

− En cada regla se indica el origen con <from-view.id>

− Cada caso de navegación con <navigation-case>

− En cada caso en <from-outcome> el nombre a utilizar en “action” y en <to-view-id> el nombre de la página xhtml destino.

La navegación se puede definir de cuatro formas:

• Navegación implícita: Utilizando el atributo “action” de los controles como <h:commandButton>, que llevará a la página xhtml que tenga como nombre el valor de dicha propiedad.


http://from-view.id/

<navigation-rule>  <from-view-id>/index.xhtml</from-view-id <navigation-case>  <from-outcome>login</from-outcome>  <to-view-id>/respuesta.xhtml</to-view-id> </navigation-case></navigation-rule>

En página xhtml, se hace referencia al nombre de <from-outcome> como en el código siguiente.

El código siguiente muestra un ejemplo.

<h:commandButton id=”submit” action=”login” value=”#{msg.etiqueta_boton}”/>

<h:commandButton id=”submit” action=”#{saludoBean.navegarRespuesta}” value=”#{msg.etiqueta_boton}”/>

• De forma programática y declaración de reglas. Este caso es útil cuando el destino de la navegación depende del resultado que pueda retornar el método de un bean. dependiendo de su valor así se navegara a una página u otra.

En esta situación se tienen más de un caso de navegación en una regla. En cada caso se añade <from-action> con la expresión EL de invocación a un método del bean y en <from-outcome> se pone el valor devuelto por el método anterior. En <to-view-id> se indica la página a la que navegar.

• De forma programática: Definiendo como valor para el atributo “action” la invocación a uno de los métodos del bean que devuelve el nombre de la página destino.

En el código siguiente se muestra un ejemplo de esta forma.

//Métododelbeanquedevuelvenombredelapáginadestino public String navegarRespuesta(){ return “respuesta”; }


<navigation-rule> <from-view-id>/index.xhtml</from-view-id> <navigation-case> <from-action>#{saludoBean.navegarUnDestino}</from-action> <from-outcome>uno</from-outcome> <to-view-id>/respuesta_uno.xhtml</to-view-id> </navigation-case> <navigation-case> <from-action>#{saludoBean.navegarUnDestino}</from-action> <from-outcome>dos</from-outcome> <to-view-id>/respuesta_dos.xhtml</to-view-id> </navigation-case></navigation-rule>

//Métododelbeanquedevuelvelacadenaconelvalor//quedeterminaelcasodenavegaciónpublicStringnavegarUnDestino(){ Random aleatorio = new Random(); returnaleatorio.nextInt()%2==0?“uno”:“dos”;}

En el ejemplo se ha utilizado la etiqueta <h:link> en las páginas destino para volver a la página de inicio.

En el código siguiente se muestra un ejemplo de esta forma.

<h:linkvalue=”Inicio”outcome=”index”/>

8. Etiqueta <h:outputFormat>, como ejemplo de etiquetas de librería HTML.El componente <h:outputFormat> “renderiza” a textos parametrizados. El texto es “renderizado” en una etiqueta HTML <span> si los atributos de estilos CSS o si su id están definidos.

El texto que se visualiza es el valor de su atributo “value”.

Se caracteriza y diferencia de < h:outputText> por poder tener componentes <f:param>, como también los tienen <h:commandLink> y <h:outputLink>.

Un ejemplo de utilización de <h:outputFormat> con parámetros es el siguiente.

<h:outputFormat value=“Esteeselparámetro0:{0},yesteeselparámetro1:{1}” > <f:paramvalue=”Pepe”/> <f:paramvalue=”Manolo”/></h:outputFormat>

Tiene dos parámetros, que se referencian en el texto de salida con el número de su colocación, encerrado entre llaves y empezando por cero.

El valor de cada el atributo “value” de cada parámetro puede ser como para cualquier otro “value” el resultado de una expresión EL.

En su atributo “escape” con valor true, valor por omisión se visualiza el texto exactamente como es. Con su valor a false se interpreta como carácter HTML o XML.

En el ejemplo siguiente se “renderizaría” a una etiqueta <input> de HTML.

<h:outputFormat value=” <input type=\”{0}\” {1} />” escape=”false”> <f:param value=”text” /> <f:param value=”size=’120’” /></h:outputFormat>


Otra propiedad a utilizar en <h:outputFormat>, así como en otras etiquetas es “rendered”, con valor por omisión true. Si su valor es false, el texto de la propiedad “value” no se visualiza, porque la etiqueta JSF no se “renderiza” a HTML.

En la imagen siguiente se muestra la salida de una página XHTML con varias <h:outputFormat>.

Respuesta HTML generadas por <outputFormat>


9. Paso de parámetros entre páginasEl envío de información desde la interfaz al usuario al servidor, que en JSF son los parámetros de la petición que recoge ServletFaces, se puede implementar utilizando tres formas, cada uno de ellos con una etiqueta de la librería “core” diferente y apoyándose en FacesContext.

• Utilizando <f:param>. Permite adjuntar un parámetro a un componente. Se comporta diferentemente dependiendo del tipo de componente:

− Si se utiliza en un <h:outputFormat>, los distintos parámetros se usan para rellenar las variables ({0}, {1}, ...) que se encuentren en el valor del componente.

− Si se en un <h:commandButton> o en un <h:commandLink>, los parámetros se añaden como un parámetro de la petición.

− Como por ejemplo en el código siguiente.

<h:commandButton id=”submitButton” value=”#{msjs.boton} - #{msjs.lugar}” action=”#{usuario.getResultado}”> <f:param name=”lugar” value=”#{msjs.lugar}” /></h:commandButton>


En el código Java del servidor, por ejemplo en un método de un bean, como en el ejemplo puede ser getResultado, se lee el valor del parámetro utilizando una instancia de ExternalContext, proporcionada por FacesContext.

Es External context quien tiene los parámetros de la petición ,porque estos son ajenos al propio ServletFaces, es información que le llega del cliente.

Entre las funcionalidades de ExternalContext para trabajar con los parámetros esta la función getRequestParameterMap(), que devuelve un mapa Map<String,String>.

El código siguiente muestra su utilización.

public String getResultado(){ FacesContextfc=FacesContext.getCurrentInstance(); this.lugar=getLugarParam(fc); return“resultado”;//Páginaalaquenavegar } //obtener el valor desde “f:param” publicStringgetLugarParam(FacesContextfc){ Map<String,String>params=fc.getExternalContext().getRequestParameterMap(); returnparams.get(“lugar”);//valordelparámetrolugar }


<h:commandButton id="submitButton" value="#{msjs.boton} - #{msjs.lugar}" action="#{usuario.getResultado}"><f:param name="lugar" value="#{msjs.lugar}" />

</h:commandButton>

<h:outputFormat value="#{msjs.saludo}, {0}. #{msjs.dondestas} {1}."><f:param value="#{usuario.nombre}" /><f:param value="#{usuario.lugar}" />

</h:outputFormat>

Parámetro en un componente <h:commandButton>


• Utilizando <f:attribute>. Similar al caso anterior, pero en lugar de añadirlo a la petición (request), se añade como atributo al componente, por lo que se tienen que usar “action listeners”, que reciben el componente en el evento.

• En el ejemplo siguiente se muestra un <commandButton> con dos <f:attribute>.

<h:form id=”form”> <h:commandButton action=”#{usuario.getResultado}” actionListener=”#{usuario.atributoListener}” > <f:attribute name=”nombreusuario” value=”#{msjs.nombre}” /> <f:attribute name=”value” value=”#{msjs.boton}” /> </h:commandButton> </h:form>

<navigation-rule>  <from-view-id>/index.xhtml</from-view-id <navigation-case>  <from-outcome>login</from-outcome>  <to-view-id>/respuesta.xhtml</to-view-id> </navigation-case></navigation-rule>

Un “action listener” se forma simplemente con una función que recibe como parámetro un ActionEvent y está declarada como valor en la propiedad actionListener de un <h:commandButton> o <h:commandLink>.

Por tanto dicha función actúa como escuchadora del evento que se produce cuando se interactúa con el botón o el link. El código de la función “listener” asociada al botón del ejemplo es el siguiente.

En la página xhtml generada en la respuesta y a la que se navega por la acción de la función del bean usuario.getResultado(). Se muestran los valores de los atributos con <outputText>, tal y como indica el código siguiente.

publicvoidatributoListener(ActionEventevent){ UIComponentcomponente=event.getComponent(); Map<String,Object>atributos=componente.getAttributes(); nombre = (String) atributos.get(“nombreusuario”);}

El ActionEvent recibido permite obtener el componente sobre el que se produjo, y una vez obtenida la referencia al componente con la función getAttributes(), se obtiene el Map<String, Object> de cada atributo.

En la imagen siguiente se muestra todo este proceso.

public void atributoListener(ActionEvent event) {UIComponent componente = event.getComponent();Map<String, Object> atributos = componente.getAttribu-

tes();nombre = (String) atributos.get("nombreusuario");

}

<h:commandButton action="#{usuario.getResultado}"actionListener="#{usuario.atributoListener}" >

<f:attribute name="nombreusuario" value="#{msjs.nombre}" />

<f:attribute name="value" value="#{msjs.boton}" /></h:commandButton>

<h:outputText value="#{usuario.nombre}"

Atributo en un componente <h:commandButton>


• Utilizando <f:setPropertyActionListener>.

La anterior forma es programática, se declara un actionListener y se programa. Esta forma es declarativa, se declara la propiedad del acción “listener” y el valor de este atributo es enviado al destino “target” cuando se interactúa con el <commandButton> o el <commandLink> que define la etiqueta “core” <f:setPropertyActionListener>.

En esta etiqueta en el atributo “target” se define el destino, que puede ser el resultado de una expresión que accede a una de las propiedades del bean, como se muestra en el código siguiente.

<h:commandButton action=”#{usuario.getResultado}”value=”Púlsame”> <f:setPropertyActionListener target=”#{usuario.nombre}” value=”Theredquicklyelipensisturtle”/></h:commandButton>


En la página xhtml generada se puede mostrar el valor del atributo con un simple <outputText>, tal y como en el caso anterior.

En la imagen siguiente se muestra todo este proceso.<h:commandButton

action="#{usuario.getResultado}" value="Pulsame"> <f:setPropertyActionListener

target="#{usuario.nombre}“value="The red quicly elipensis turtle"/>

</h:commandButton>

<h:outputText value=“#{usuario.nombre}"

Atributo en un componente <h:commandButton> son <f:setPropertyActionListener>


10. Etiqueta <h:dataTable>La etiqueta <dataTable> genera un componente que es un contenedor tabular para otros componentes hijos, que se “renderiza” en un <table> de HTML.

En la propiedad “value” se puede indicar el origen del cual se van a tomar valores, como por ejemplo puede ser una expresión que haga referencia a una propiedad de un bean. si dicha propiedad es de un tipo colección de Java, la tabla tendrá tantas filas como elementos tenga dicha colección.

Los componentes hijos se “renderizan” en celdas de la tabla, con nuevas filas cuando el número de columnas es alcanzado, como con el componente de la etiqueta <h:panelGrid>

Como las tablas de HTML tiene atributos tales como bordes, ancho, relleno de celdas (cellpading), espacio entre celdas (cellspacing).

Un ejemplo sencillo de tabla formada con <dataTable> es el siguiente.

<h:dataTable border=”2” value=”#{dataTable.nombres}” var=”nombre”> <h:column> <h:outputText value=”#{nombre}”/> </h:column> <h:column> <h:outputText value=”#{nombre}” styleClass=”enfasis”/> </h:column> <h:column> <h:outputText value=”#{nombre}” styleClass=”color1”/> </h:column> </h:dataTable>


Este código cuando se “renderiza” genera la página HTML que se muestra en el navegador de la forma siguiente.

Se pueden utilizar la etiquetas “core” <facet>, cuyo componente generado permite anidar dentro un sólo componente, se suele utilizar en con junto con <h:dataTable> para añadir cabeceras o pies a la columnas, utilizando en su propiedad “name” los valores “header” y “footer”, como en el codigo siguiente.

public class DataTable { private static final String[] nombres = new String[] { new String("Jose"), new String("Manuel"), new String("Andres"), new String("Carlos"), }; public String[] getNombres() { return nombres; }}

<h:column> <f:facet name=”header”> <h:outputText value=”Boton”/> </f:facet> <h:commandButton value=”#{numero}”/> <f:facet name=”footer”> <h:outputTextvalue=”PieBoton”/> </f:facet></h:column>

Ejemplo de <h:dataTable>sencillo


En el ejemplo que muestra la imagen se ha utilizado un <dataTable> con celdas que tienen componentes, como botones, casillas de verificación y listas, con “facet” para cabeceras y pies de dos columnas.

<h:selectOneListbox size="3"><f:selectItem itemValue="siempre" itemLabel="siempre"/><f:selectItem itemValue="amenudo" itemLabel="a menudo"/><f:selectItem itemValue="algunavez" itemLabel="alguna vez" /><f:selectItem itemValue="nunca" itemLabel="nunca" />

</h:selectOneListbox>

<f:facet name="header">

<h:selectBooleanCheckbox value="false"/>

<h:selectOneRadio layout="LINE_DIRECTION" value="nextMonth"><f:selectItem itemValue="si" itemLabel="Si"/><f:selectItem itemValue="no" itemLabel="no" />

</h:selectOneRadio>

<f:facet name=“footer">

<h:commandButton value="#{numero}"/>

<h:inputText value="#{numero}" size="3"/>

<h:outputText value="#{numero}"/> <h:commandLink><h:outputText value="#{numero}"/>

</h:commandLink>

Ejemplo de <h:dataTable> con celdas que utilizan otros componentes


El código del bean que se utiliza para tomar los valores para formar la tabla es el siguiente.

@ManagedBean(name=”dataTable”)@SessionScopedpublicclassDataTable{privateArrayList<String>listaNumeros;publicDataTable(){ listaNumeros=newArrayList<String>(); } publicArrayList<String>getListaNumeros(){ listaNumeros.clear(); Random aleatorio = new Random(); intn=aleatorio.nextInt(8)+3; for(int i=1; i<=n; i++){ listaNumeros.add(Integer.toString(aleatorio.nextInt(1000))); } return listaNumeros; }}


El código del fichero xhtml que contiene la utilización de <h:dateTable> es el siguiente.

<h:dataTable border=”3” value=”#{dataTable.listaNumeros}” var=”numero”> <h:column> <f:facet name=”header” > <h:outputTextvalue=”Números”/> </f:facet> <h:outputText value=”#{numero}”/> </h:column> <h:column> <f:facet name=”header”> <h:outputTextvalue=”CampoTexto”/> </f:facet> <h:inputText value=”#{numero}” size=”3”/> </h:column> <h:column> <f:facet name=”header”> <h:outputText value=”Boton”/> </f:facet> <h:commandButton value=”#{numero}”/> <f:facet name=”footer”> <h:outputTextvalue=”PieBoton”/> </f:facet> </h:column> <h:column> <f:facet name=”header”> <h:outputTextvalue=”Checkbox”/> </f:facet>

</h:column> <h:column> <f:facet name=”header”> <h:outputTextvalue=”Enlaces”/> </f:facet> <h:commandLink> <h:outputText value=”#{numero}”/> </h:commandLink> </h:column><h:column> <f:facet name=”header”> <h:outputText value=”radio boton”/> </f:facet> <h:selectOneRadiolayout=”LINE_DIRECTION”value=”nextMonth”> <f:selectItemitemValue=”si”itemLabel=”Si”/> <f:selectItemitemValue=”no”itemLabel=”no”/> </h:selectOneRadio> </h:column> <h:column> <f:facet name=”header”> <h:outputText value=”listbox”/> </f:facet> <h:selectOneListboxsize=”3”> <f:selectItemitemValue=”siempre”itemLabel=”siempre”/>


< f:selectItemitemValue=”amenudo”itemLabel=”amenudo”/> <f:selectItemitemValue=”algunavez” itemLabel=”alguna vez” /> <f:selectItemitemValue=”nunca”itemLabel=”nunca”/> </h:selectOneListbox> </h:column></h:dataTable>


11. Etiquetas de librería htmlLas etiquetas de la librería html, como se ha ido comprobando “renderizan” en etiquetas html, siempre que su propiedad “rendered” sea true, valor por omisión.

Cada etiqueta se corresponde con un componente de la jerarquía de clases de componentes de JSF organizadas en el paquete javax.faces.component y cuya clase base es UIComponent.

La imagen siguiente muestra esta jerarquía tal y como aparece en el API de JSF de Oracle (https://docs.oracle.com/javaee/7/api/).


http://docs.oracle.com/javaee/7/api/

<<interface interface>>ActionSource

<<interface interface>>StateHolder

<<interface interface>>NamingContainer

<<interface interface>>ValueHolder

<<interface interface>>UIComponent

UIComponentBase

UICommand UIDataUIGraphic UINammingContainer UIForm

UISelectItem UISelectItemsUIPanel UIParameter

UIViewRoot UIMessageUIOutput UIMessages UIColumn

UIInput

UISelectOne

UISelectMany

UISelectBoolean

<<interface interface>>EditableValueHolder

<<interface interface>>ActionSource2

https://docs.oracle.com/javaee/7/api/

<<interface interface>>ContestCallback

La implementación de cada etiqueta de la librería html se corresponde con una clase que hereda de una de la jerarquía anterior que se corresponde con el tipo de componente al que pertenece.

Se puede obtener información de todas estas clases en el API de JEE para JSF (https://docs.oracle.com/javaee/7/api/) dentro del paquete:

javax.faces.component.html

La imagen siguiente muestra una parte de esta jerarquía tal y como figura en la página del API indicada anteriormente.

La imagen siguiente muestra esta jerarquía tal y como aparece en el API de JSF de Oracle (https://docs.oracle.com/javaee/7/api/).


https://docs.oracle.com/javaee/7/api/

http://docs.oracle.com/javaee/7/api/

http://docs.oracle.com/javaee/7/

Clases del paquete javax.faces.component.html


12. ConversionesUn conversor se utiliza para dar formato al texto que se visualiza en algunos componentes.

Por ejemplo, si se desea para mostrar una fecha se puede utilizar un conversor de formato de fechas a un formato personalizado o familiar para el usuario, como “10-03-2005”.

Se utilizan en combinación con los controles de entrada, la entrada del usuario debe estar en el formato especificado por el conversor. Si el formato de la entrada no coincide en el formato, se puede lanzar una excepción en el conversor que se muestra al usuario. El objeto asociado no se actualiza hasta que se corrige el error.

La imagen muestra un ejemplo de un formulario con una entrada numérica u otra de fecha que en su etiqueta JSF se ha especificado un conversor.

Conversores

Conversores

Si el texto no cumple con el conversorse produce un error

Si el texto cumple con el conversorse almacena valor en propiedad del bean y se avanza en la navegación

Funcionamiento de los conversores


Se puede asociar un conversor a una etiqueta con de una de las estas maneras:

• Con el atributo “converter” dentro de la etiqueta. • Utilizando <f:converter> dentro de la etiqueta del componente.

<h:outputText value=”#{bean.fecha}”> <f:converterconverterId=”miConversor”/></ h: outputText>

<h:outputTextvalue=”#{bean.fecha}”converter=”miConversor”>


Las etiquetas JSF que admiten conversores son:

Tipo de etiqueta Etiquetas

De salida <h:outputText> <h:outputLink> <h:outputFormat> <h:outputLabel>

De entrada <h:inputText> <h:inputTextarea>

<h:inputHidden> <h:inputSecret>

De selección <h:selectBooleanCheckbox> <h:selectManyListbox>

<h:selectMaynyMenu> <h:selectOneRadio>

<h:selectOneListbox> <h:selectOneMenu>

JSF proporciona conversores estándar para todos los tipos básicos: Long, Byte, Integer, Short, Character, Double, Float, BigDecimal, BigInteger y Boolean .


Por ejemplo, si el componente se asocia con una propiedad de tipo boolean, JSF elige el conversor de Boolean.

Además existen conversores predefinidos para fechas y números.

• Conversor DateTime: JSF proporciona una etiqueta conversor <f:convertDateTime>.

<h:outputText value=”#{bean.fecha}”>< f:convertDateTimetype=”date”dateStyle=”medium”/></h:outputText>

Los atributos que admite este conversor son los siguientes.

Nombre del atributo Descripción

dateStyle Especifica el estilo de formato para la porción de la fecha de la cadena. Las opciones válidas son de short, medium (por defecto), long y full.

timeStyle Especifica el estilo de formato para la porción de tiempo de la cadena. Las opciones válidas son de short, medium (por defecto), long y full.

timezone Especifica la zona horaria para la fecha. Si no se establece, será la hora del meridiano de Greenwich (GMT).

locale Especifica el idioma local a utilizar para la visualización. Reemplaza la localización actual.

pattern Especifica una patrón de formato determinado para visualizar la fecha.

type Especifica si se debe mostrar la fecha (date), hora (time) o ambas (both). Se usa este atributo o pattern.


• Conversor de Número. Se utiliza para mostrar números en los formatos de base que trabaja para la configuración regional del usuario.

<h:outputText value=”#{bean.numero}”> <f:convertNumbertype=”number”maxIntegerDigits=”3”/></ h: outputText>

Los atributos que admite este conversor son los siguientes.

Nombre del atributo Descripción

CurrencyCode Especifica una cadena de tres caracteres con el código de moneda internacional cuando el atributo tipo es la moneda.

CurrencySymbol Especifica un símbolo específico, como “$”, que se utiliza cuando el tipo de atributo es moneda. Se utiliza este o el anterior.

groupingUsed Si su valor es true (por omisión) se visualiza el carácter separador “.” o “,” según localización.

integerOnly Si su valor es true se visualiza sólo la parte entera del número. Su valor por omisión es false.

locale Especifica el idioma local a utilizar para la visualización. Reemplaza la localización actual.


mixFractionDigits Establece mínimo número de decimales a visualizar.

maxFractionDigits Establece máximo número de decimales a visualizar.

minIntegerDigits Cantidad mínima de dígitos a visualizar para los números enteros.

maxIntegerDigits Cantidad máxima de dígitos a visualizar para los números enteros.

pattern Especifica un patrón de formato determinado para visualizar el número.

pattern Especifica el tipo de número, number (por omisión), currency o percent. Se usa este atributo o pattern.

En el atributo “pattern”, tanto para fechas como para números, se utilizan los mismos caracteres que los utilizados en Java para formar plantillas de este tipo.


La página xhtml del formulario del ejemplo de la imagen tiene este código.

<h:form> <h1><h:outputText value=”Introduzcainformaciondelpago”/></h1> <h:panelGrid columns=”3”> <h:outputTextvalue=”Cantidad”/> <h:inputText id=”cantidad” value=”#{pago.cantidad}”required=”true”> <f:convertNumber minFractionDigits=”2”/> </h:inputText> <h:message for=”cantidad” showSummary=”true” showDetail=”true”/> <h:outputText value=”Tarjeta de crédito”/> <h:inputText id=”tarjeta” value=”#{pago.tarjeta}”/> <h:panelGroup/> <h:outputText value=”Fecha de expiracion (mes/año)”/> <h:inputText id=”fecha” value=”#{pago.fecha}”> <f:convertDateTimepattern=”MM/yyyy”/> </h:inputText> <h:messagefor=”fecha”styleClass=”mensajeError” showSummary=”true”showDetail=”true”/> </h:panelGrid> <h:commandButtonvalue=”Acepta”action=”resultado”/> </h:form>

La página xhtml con la respuesta del ejemplo de la imagen tiene este código.

<h:form> <h1><h:outputTextvalue=”Informaciondelpago”/></h1> <h:panelGrid columns=”2”> <h:outputTextvalue=”Cantidad”/> <h:outputText value=”#{pago.cantidad}”>  <f:convertNumber type=”currency” currencyCode=”EUR”/> </h:outputText> <h:outputText value=”Tarjeta de crédito”/> <h:outputText value=”#{pago.tarjeta}”/> <h:outputText value=”Fecha de expiracion”/> <h:outputText value=”#{pago.fecha}”> <f:convertDateTimepattern=”MM/yyyy”/> </h:outputText> </h:panelGrid> <h:commandButtonvalue=”Volver”action=”index”/> </h:form>

13. Mensajes asociados a los textos de error en conversiones y validaciones

Para visualizar los mensajes de error que se produzcan como consecuencia que los textos no se adapten a los conversores asociados a sus controles se utiliza la etiqueta de la librería html <h:message>.

Los mensajes visualizados tienen que estar en una de las propiedades de un fichero “properties” que se especifica en el archivo “faces-config.xml”, como se muestra en el código siguiente, utilizando las entradas <application> y su nodo hijo <message-bundle>.

Los errores que se pueden producir tanto en las conversiones como en las validaciones están predefinidos en JSF, como valores estáticos en las clases correspondientes del conversor o del componente.

<application> <message-bundle>errores</message-bundle></application>


En el código siguiente se muestra el contenido del archivo “errores.properties” utilizado en el ejemplo de los conversores.

javax.faces.converter.NumberConverter.NUMBER= Errordeconversión,tienequeserunnumerojavax.faces.converter.NumberConverter.NUMBER_detail= ,ejemplo999javax.faces.converter.DateTimeConverter.DATE= Errordeconversión,tienequesermm/aaaajavax.faces.converter.DateTimeConverter.DATE_detail= ,porejemplo10/2014javax.faces.component.UIInput.CONVERSION=Errordeconversiónjavax.faces.component.UIInput.REQUIRED= Hayqueintroducirunvalorjavax.faces.component.UISelectOne.INVALID= Eldatonoesvalidojavax.faces.component.UISelectMany.INVALID= Eldatonoesvalidojavax.faces.converter.BigDecimalConverter.DECIMAL= Tienequeserunnumerojavax.faces.converter.BigIntegerConverter.BIGINTEGER= Tienequeserunnumerojavax.faces.converter.ByteConverter.BYTE= Tienequeserunnumerojavax.faces.converter.DoubleConverter.DOUBLE= Tienequeserunnumero

El texto del mensaje se puede dividir en dos partes:

• Sumario: es el texto propio del mensaje.

• Detalle; es el texto del error que lleva en su parte final

“_detail”.


La etiqueta <h:message> tiene tres atributos que la caracterizan.

Atributo Funcionalidad

for El ID del componente con el que se asocia.

showDetail Con true se visualiza la porción del detalle del mensaje. El valor opcional es false.

showSummary Con true se visualiza la porción del sumario del mensaje. El valor opcional es true.

Otra etiqueta que se puede utilizar para visualizar los mensajes es <h:messages>, la diferencia con la anterior es que este no tiene asociado componente, se visualizan los mensajes que se produzcan para todos los componentes de la vista.


14. ValidacionesJSF permite definir restricciones sobre los valores de determinados datos introducidos por los usuarios. JSF, en la librería “facelets”, proporciona validadores estándar.

Para chequear si un valor es aportado, no necesita anidar un validador dentro de la etiqueta de entrada. En su lugar, utilice el atributo, required=”true”:

Todas las etiquetas JSF de entrada, soportan el atributo required. Se puede combinar un atributo required con un validador anidado:

Otros ejemplos de validaciones son los siguientes.

<h:inputTextvalue=”#{informe.fecha}”required=”true”/>

<h:inputTextvalue=”#{informe.telefono}”required=”true”/><f:validateLength minimum=”9”/></h:inputText>

<h:inputTextrequired=“true”maxLength=“3” value=#{producto.precio}> <f:validateLongRange minimum=“#{producto.minprecio }” maximum=“#{producto.maxprecio }” /></h:inputText> <h:inputTextid=”tarjeta”value=”#{pago.tarjeta}”required=”true” requiredMessage=”#{msgs.campoRequerido}”> <f:validateLength minimum=”13”/></h:inputText>


Las etiquetas estándar de validadores son las que se indican en la tabla siguiente.

Etiqueta Descripción

f:validateDoubleRange Valida un valor double dentro de un rango.

f:validateDoubleRange Valida un valor long dentro de un rango.

f:validateLength Valida un String dentro de un número mínimo y un número máximo de caracteres.

Los errores de validación se manejan de igual manera que los errores de conversión. Un mensaje se añade al componente que falla la validación, el componente es invalidado, y la página actual es recargada inmediatamente tras completarse la fase “proceso de validaciones”.

Las etiquetas <h:message> y <h:messages>, como en los conversores, se utilizan para mostrar los errores de validación.


En el código siguiente se muestra un ejemplo de utilización de <h:messages>

<h:form> <h:messages errorStyle=”color:red” /> <h:inputTextrequired=”true”label=”nombre”/> <h:inputTextrequired=”true”label=”apellidos”/> <h:inputTextrequired=”true”label=”telefono”/> <h:commandButtonvalue=”Pulsar”/></h:form>


15. InternacionalizaciónComo se ha utilizado en ejemplos anteriores, se ha estado evitando colocar las cadenas de texto en el código de las páginas. Por lo que en el archivo “faces-config.xml” se han estado utilizando recursos <resource-bundle>, que permiten definir el fichero de propiedades donde estarán las cadenas de texto y el .identificador con los que se van a utilizar, como en ejemplo siguiente

Utilizando expresiones EL para referenciar los mensajes a utilizar en las páginas xhtml, como en ejemplo siguiente.

<application> <resource-bundle> <base-name>mensajes</base-name> <var>msg</var> </resource-bundle></application>

<h:outputText value=”#{msg.bienvenida}”/>

#Elficheromessages.propertiesbienvenida=BienvenidoaJSF!!!


En JSF, como también se comprobó en JSLT, se aprovecha la “externalización” de cadenas de texto para implementar la internacionalización de etiquetas.

Hay que tener en cuenta que en las cabeceras de la petición (request) va definido el idioma preferido del navegador, representado por el parámetro LOCALE.

mensajes.properties Paraidiomadel navegadormensajes_en.properties Parainglesmensajes_fr.properties

El “locale” responde a un código estandarizado, formado por letras en minúsculas que corresponden a los diferentes idiomas, como son por ejemplo es, en, fr, de, it, etc. Estos códigos se utilizan para internacionalizar los ficheros de propiedades, poniendo dicho código en el nombre del fichero en la forma “:nn”, como en los ejemplos siguientes.


Las formas que JSF puede cambiar el idioma son las siguientes.

• En “faces-config.xml”, pero prevalece el idioma del navegador, el ejemplo indica cómo establecer el idioma.

<faces-config> <application> <locale-config> <default-locale>es</default-locale> <supported-locale>en</supported-locale> </locale-config> </application></faces-config>

• En la etiqueta f:view, estableciéndolo como parámetro, tal como se indica en el ejemplo:

Tiene la ventaja, de poder establecerlo dinámicamente, utilizando expresión EL.

• Con el objeto UIViewRoot, como se indica en el ejemplo.

<f:view locale=”en”>

<f:view locale=”#{usuario.locale}”/>

UIViewRootviewRoot= FacesContext.getCurrentInstance().getViewRoot();viewRoot.setLocale(new Locale(“en”));


16. Flujo de navegaciónA partir de la versión 2.2 de JSF se puede utilizar el flujo de navegación llamado Faces Flow, que encapsula un conjunto de pasos o etapas que guían al usuario en la ejecución de una determinada tarea de la lógica del negocio.

Para comprender en que consiste se va a tratar un ejemplo de registro de usuario, en el que la parte de persistencia va a ser simulada, simplemente por un visualización en consola de los datos de usuario registrado.

En la imagen se muestra cual es el flujo de navegación que se va a tratar.

registrar-flow.xml

registrar confirmar finalizar

index

paginaInicio

confirmar aceptar

atras

confirmar

accionInicio

Ejemplo de flujo de navegación


Los pasos a seguir son:

• Crear una carpeta con el nombre del flujo en el directorio “web-app”, en este caso la carpeta tiene el nombre de “registro”.

• En esta carpeta del flujo estará almacenado el archivo xml con la configuración del flujo, su nombre será el de dicho flujo, seguido de “-flow”, en este caso será el archivo “registro-flow.xml”.

• En la carpeta también estarán almacenados los ficheros xhtml que constituyen el flujo, en este caso registrar.xml, confirmar.xhml y finalizar.xhtml.

En la imagen siguiente se muestra la estructura del proyecto en Eclipse con esta carpeta y ficheros, así como el contenido del archivo “registro-flow.xml”.

Archivos xhtml del flujo y archivo de configuración del flujo


En el archivo de configuración del flujo “registrar-flow.xml”:

• El atributo “id” de <flow-definition>, define el nombre del flujo, en este caso “registrar”.

• El atributo “id” de <flow-return> identifica el nombre del elemento de retorno, cuando finaliza el flujo y viene determinado por valor de <from-outcome>.

• El valor devuelto por la función “registroBean.accionInicio()”, devuelve el nombre de la página xhtml, en este caso “index”, a la que se navegara cuando en “action” de un <command-button>, el valor sea “paginaInicio”.

Faces Flow, define un nuevo ámbito relativo al flujo definido, en el que se almacenan atributos con valores de los controles de las páginas que forman parte del flujo, que transportan los datos de unas páginas a otras.

El nombre del ámbito es “flowScope”, y en este ejemplo los atributos que forman parte del flujo son:

• flowScope.nombre

• flowScope.apellidos

• flowScope.email


Todas las funcionalidades relativas a la navegación entre las diferentes páginas que forman parte del flujo tienen que estar implementadas en una clase, en este caso RegistroBean, anotada con:

• @FlowScoped(“nombre_del_flujo”), en este caso la clase llamada RegistroBean esta anotada con @FlowScoped(“registro”). Esta anotación es de javax.faces.flow.

• @Named, anotación de javax.inject, que permite que la clase o dato que anote pueda ser usada en expresiones EL, como por ejemplo:

En este ejemplo la clase RegistroBean:

• Recoge los valores de los atributos de “FlowScoped” y se encarga de crear un objeto de clase BeanUsuario con sus atributos.

• Invoca una función de la clase BeanDao con parámetro el BeanUsuario, para simular la funcionalidad de la persistencia.

• Para trabajar con inyección de dependencia se anotan con @Inject de javax.inject, tanto la referencia a BeanDao, como la referencia a BeanUsuario.

#{registroBean.licenciaAceptada}#{registroBean.aceptar}#{registroBean.atras}

@InjectBeanUsuario usuario;@InjectUsuarioDAOusuarioDAO;


• Para que el objeto instanciado de UsuarioDao tenga un ámbito mayor que el del flujo esta anotada con @ApplicationScoped de java.faces.bean

• La clase del bean UsuarioBean esta anotada con @Dependent de javax.enterprise.context, para enlazar su tiempo de vida con el del bean que lo utiliza, en este caso el bean RegistroBean.

@Named@ApplicationScopedpublicclassUsuarioDAOimplementsSerializable

@Named@Dependentpublic class BeanUsuario implements Serializable{


Con estas consideraciones, la relación entres estas clases se muestra en la imagen siguiente.

ApplicationFlowScope

nombreapellidosemail

Map

<<FlowScoped>>RegistroBean

-entradas: Map<Object, Object>-licenciaAceptada: boolean-usuario: BeanUsuario-usuarioDAO: UsuarioDAO//Funciones get y set de licenciaAceptada +getAccionInicio(): String //accionInici o+aceptar():void+atrás():void

<<ApplicationScoped>>UsuarioDAO

-usuario: BeanUsuario

+addUsuario(BeanUsuario):void

<<Dependent>>BeanUsuario

-nombre:String-apellidos: String-email: String

//funciones set y get

usa

BBDD

Relación entre las clases RegsitroBean, UsuarioDao y BeanUsuario


La función aceptar() y atrás() de la clase RegistroBean están invocadas en xhtml dentro del atributo “action” de etiquetas de la librería html, como se muestra a continuación.

El código de la función aceptar() es el siguiente.

<h:commandButtonid=”siguiente”value=”#{msg.boton_siguiente}” action=”#{registroBean.aceptar}” /><h:commandButtonid=”atras”value=”#{msg.boton_atras}” action=”#{registroBean.atras}” />

public String aceptar() { FacesContextfc=FacesContext.getCurrentInstance(); if(this.licenciaAceptada){ entradas = fc.getApplication().getFlowHandler(). getCurrentFlowScope(); usuario.setNombre((String)entradas.get(“nombre”)); usuario.setApellidos((String)entradas.get(“apellidos”)); usuario.setEmail((String)entradas.get(“email”)); usuarioDAO.addUsuario(usuario); return“finalizar”; } else { fc.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, “Tienesqueleeryaceptarlalicencia!”, “Tienesqueleeryaceptarlalicencia!”)); return null; }}


El propósito general de esta función es devolver la cadena con el nombre de la siguiente página xhtml del flujo de navegación, que es en este caso “confirmar”.

Si se verifico la casilla de verificación de aceptación de la licencia:

• Obtiene los valores de los atributos “nombre”, “apellidos” y “email” del Map del FlowScope, accediendo a FacesContext, y por medio de este obteniendo la Application, que ya contiene el FlowScope.

• Cada valor de las entradas de este Map, se define como valor de las propiedades del bean UsuarioBean, para terminar pasando este bean a UsuarioDao y simule la persistencia.

.

El código de la función atras() es el siguiente.

El propósito general de esta función es volver a la página anterior “registrar”, pero antes vacía las entradas del mapa con los atributos de FlowScope.

public String atras(){ FacesContextfc=FacesContext.getCurrentInstance(); Map<Object,Object>entradas= fc.getApplication().getFlowHandler().getCurrentFlowScope(); entradas.clear(); return “registrar”; }


17. ComposiciónJSF promueve la reusabilidad de partes de la interfaz de usuario, utilizando plantillas y componentes compuestos (composite component).

Un componente compuesto es una “pieza” de código que puede ser reutilizado en diferentes partes de una aplicación.

El proceso para generar un componente compuesto consiste en:

• Crear un fichero xhtml en una carpeta dentro del directorio “resources” creado en el directorio raíz de la aplicación.

• El fichero tendrá dos partes importantes:

− <cc:interface>, el interface: Se definen los elementos que se van a utilizar del componente compuesto, constituye el contrato de utilización. Estarán definidos los atributos, listener de eventos, conversores y validadores.

− <cc:implementation>, la implementación: Define como los elementos del interface son usados para formar el componente compuesto.

• En el fichero xhtml que utilice el componente compuesto, habrá que especificar el “namespace” y prefijo a utilizar para el componente compuesto. Por ejemplo como se indica a continuación.


<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:miscomponentes= “http://java.sun.com/jsf/composite/miscomponentes”>

Normalmente se pone como nombre de la carpeta donde virtualmente está definido el espacio de nombres, el mismo que la carpeta en la que esta la definición del componente compuesto, en este caso “miscomponentes”.

En este ejemplo también se ha puesto como prefijo el mismo nombre “miscomponentes”, pero podría ser cualquier otro, como por ejemplo “mc”.




http://java.sun.com/jsf/composite/

En la imagen se muestra el contenido del fichero “componente.xhtml”, dentro de la carpeta “miscomponentes” del directorio “resources”.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:composite="http://java.sun.com/jsf/composite" >

<composite:interface> <composite:attribute name="nombreLabel" /> <composite:attribute name="nombreValor" /> <composite:attribute name="emailLabel" /> <composite:attribute name="emailValor" /> <composite:attribute name="registrarBotonTexto" /> <composite:attribute name="registrarBotonAccion" method-signature="java.lang.String action()" /> </composite:interface>

Cinco atributos y un método

<composite:implementation><h:form> <h:panelGrid columns="2" id="panel" captionClass="contenidos">

<h:outputLabel value="#{cc.attrs.nombreLabel} :" for="name"/><h:inputText id="nombre" value="#{cc.attrs.nombreValor}"

styleClass="contenidos" /><h:outputLabel value="#{cc.attrs.emailLabel} :" for="email"/> <h:inputText id="email" value="#{cc.attrs.emailValor}"

styleClass="contenidos"/> </h:panelGrid> <h:commandButton action="#{cc.attrs.registrarBotonAccion}"

value="#{cc.attrs.registrarBotonTexto}" /> </h:form></composite:implementation>

Fichero que define interface e implementación de un componente compuesto





http://java.sun.com/jsf/composite

En el fichero se definen cinco atributos, que en su implementación se corresponden con:

• Dos <inputText>, con estilo definido styleClass=”contenidos”

• Dos <outputLabel>

• Un <commandButton>

• La “firma “java.lang.String action()”, que debe tener el método que se ejecute cuando se pulsa sobre el <commandButton>, tal como define su atributo “action”.

.

Este componente se utiliza en una página xhtml cuyo código es el siguiente.

<h:head> <title><h:outputText value=”#{msg.titulo}” /></title> <link href=”estilos/estilos.css” rel=”stylesheet” type=”text/css” /></h:head><h:body> <h1> <h:outputText value=”#{msg.titulo}” /> </h1> <miscomponentes:componente nombreLabel=”#{msg.etiqueta_nombre}” nombreValor=”#{usuario.nombre}” emailLabel=”#{msg.etiqueta_email}” emailValor=”#{usuario.email}” registrarBotonTexto=”#{msg.etiqueta_boton}” registrarBotonAccion=”#{usuario.registrarAccion}”/></h:body>


En la cabecera del fichero se ha definido que las etiquetas “miscomponentes” utilizan el prefijo “componente”, nombre del fichero en el que se define el “composite component”.

El fichero “ccs” de estilos esta definido en este archivo de utilización del componente,

El resultado de ejecutar la aplicación que utiliza este archivo xhtml es la que muestra la imagen.

xmlns:miscomponentes= “http://java.sun.com/jsf/composite/miscomponentes”>

Resultado de la aplicación que utiliza el componente compuesto


http://java.sun.com/jsf/composite/miscomponentes

La estructura del proyecto en Eclipse es la que muestra la imagen.

Estructura del proyecto en Eclipse


18. PlantillasLas plantillas son junto a los componentes compuestos, el otro elemento que en JSF promueve la reusabilidad de partes.

Una plantilla consta esencialmente de dos partes:

• La “template” (la plantilla), es la página base, creada con etiquetas de la librería “facelets”. Es la página que define la estructura, incluyen unos marcadores de posición (placeholders) para el contenido que será implementado por las páginas que usan esta plantilla.

Consta de tres zonas: “header”, “footer” y “content”.

• El “template client” (el cliente de la plantilla), es la página que usa la plantilla y proporciona normalmente el contenido en la zona “content”, prevista en la plantilla.

Un escenario habitual es tener una “template” definiendo el contenido de “header” y “footer” y un “content” que será definido por varias “template client”.

Template

Header

Templateclient

Footer

Estructura de utilización de plantillas


Un ejemplo del código de una plantilla es el que se muestra en el código siguiente.

. El ejemplo utiliza estas dos etiquetas de “facelets”:

• <ui:include>, incluye una página xhtml, en otra. En el ejemplo se utiliza tanto para “cabecera.xhtml”, como para “pie.xhtml”, por tanto en todas las páginas que utilicen esta plantilla estará presente el contenido de las páginas incluidas “cabecera.xhtml” y “pie.xhtml”.

• <ui:insert>, define el marcador de posición en el que se añadirá el contenido de las diferentes páginas xhtml que utilicen esta plantilla.

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:c=”http://java.sun.com/jsp/jstl/core”> <h:head> <h:outputStylesheet library=”estilos” name=”estilos.css” /> </h:head><h:body> <div class=”pagina”> <div class=”cabecera”> <ui:include src=”cabecera.xhtml” /> </div> <div class=”contenido”> <ui:insert name=”content”>Elcontenido </ui:insert> </div> <div class=”pie”> <ui:include src=”pie.xhtml” /> </div> </div> </h:body></html>






http://java.sun.com/jsp/jstl/core

En el código siguiente se muestra el uso de esta plantilla, en la página que utiliza el componente compuesto.

El ejemplo utiliza estas dos etiquetas de “facelets”:

• <ui:composition>, carga la plantilla definida en su atributo “template” y define un grupo de elementos que puede contener, definidos en esta plantilla, es un contenedor de elementos de clientes de plantilla. En este caso sólo uno, con nombre “content”

• <ui:define>, define el elemento de cliente de la plantilla que se va a colocar en esa posición, en este caso el componente compuesto, podría ser cualquier conjunto de etiquetas de JSF, JSP o XHTML.

<ui:composition template=”/templates/template.xhtml”> <ui:definename=”content”> <miscomponentes:componente nombreLabel=”#{msg.etiqueta_nombre}” nombreValor=”#{usuario.nombre}” emailLabel=”#{msg.etiqueta_email}” emailValor=”#{usuario.email}” registrarBotonTexto=”#{msg.etiqueta_boton}” registrarBotonAccion=”#{usuario.registrarAccion}”/> </ui:define> </ui:composition>


En el código siguiente se muestra el uso de esta plantilla, en la página “bienvenido-xhtml” del ejemplo.

En la plantilla “template.xhtml” se utiliza la etiqueta de la librería “html” <h:outputStylesheet>, tal y como muestra este código.

Esta etiqueta “renderiza” a:

Pero con la diferencia que el fichero “estilos.css”, tiene que estar en una carpeta “estilos” de un directorio “resources”, obligatorio a partir de JSF 2, para la utilización del recurso llamado “library”. En realidad “library”. es una carpeta dentro del directorio “resources”. Dicha carpeta estará en el directorio raíz de la aplicación.

<ui:composition template=”/templates/template.xhtml”> <ui:definename=”content”> <h1><h:outputTextvalue=”#{msg.texto_bienvenida}”/></h1> <h:panelGrid columns=”1”><h:outputText id=”nombre” value=”#{usuario.nombre}” styleClass=”enfasis”/> <h:panelGroup></h:panelGroup <h:outputText id=”email” value=”#{usuario.email}” styleClass=”enfasis”/> </h:panelGrid> </ui:define></ui:composition>

<h:outputStylesheet library=”estilos” name=”estilos.css” />

<link href=”estilos/estilos.css” rel=”stylesheet” type=”/estilos/estilos.css” />


Definida esta etiqueta en el archivo “template.xhtml”, sus estilos “css” podrán ser usados en todas las partes que componen la plantilla, son estilos definidos de forma global para cabeceras, pies y contenidos.

En el ejemplo tanto “index.xhtml”, como “bienvenida.xhtml”, como contenidos cliente de la plantilla, así como “cabecera.xhtml”, como “pie.xhtml” utilizan estos estilos.

La estructura del proyecto en Eclipse, con todos estos elementos, es el que muestra la imagen siguiente.

Estructura del proyecto en Eclipse


El resultado de la ejecución de este ejemplo es el que se muestra en la imagen siguiente.

Resultado de la ejecución del ejemplo con plantilla


19. Integración con AjaxJSF 2 proporciona una fácil integración con AJAX a través de la etiqueta de la librería “core” <f:ajax>.

Tiene cuatro atributos:

• render: Son los elementos que se actualizarán en la página.

• execute: El elemento que desde el cliente, se envía al servidor para su proceso.

• event: Evento en el cliente que provoca la petición AJAX.

• onevent: Función JavaScript que se ejecutará en cliente cuando el evento se produzca.

Se pueden utilizar las anotaciones siguientes en el atributo “execute” y “render”:

• @this. Hace referencia al elemento donde se incluye la etiqueta f:ajax. Es el valor por defecto. En “execute” es valor por omisión.

• @form. El formulario donde se incluye la etiqueta <f:ajax>.

• @none. No se envía ningún dato al servidor. En “render” es valor por omisión.

• @all. Hace referencia a todos los componentes de la página.


execute

render

Ejemplo de utilización de <f:ajax>

En la imagen se muestra un formulario que al pulsar sobre el botón, se realiza una petición a través de AJAX, para que desde el servidor sólo se envíe como respuesta el texto introducido en la caja de texto y se visualice en una zona determinada.


<h:form> <h:panelGrid columns=”2”> <h:outputLabelvalue=”#{msg.etiqueta_nombre}” for=”inputNombre” /> <h:inputText id=”inputNombre” value=”#{usuario.nombre}”/> <h:commandButtonvalue=”#{msg.etiqueta_boton}”> <f:ajax execute=”inputNombre” render=”outputMensaje” /> </h:commandButton> </h:panelGrid> <h2><h:outputText id=”outputMensaje” value=”#{usuario.mensajeBienvenida}”/></h2></h:form>

El código de la página xhtml que utiliza la etiqueta <f:ajax> es el siguiente


javaserver faces - conectaempleo … · componentes de jsf construyen la interfaz de usuario en el...

Documents