JSF

JavaServer Faces

Índice

Introducción - La tecnología JavaServer Faces.................................................................1Beneficios de la tecnología JavaServer Faces – Mejoras sobre JSP.................................2Componentes de una aplicación JSF.................................................................................2Ejemplo de creación paso a paso de una aplicación JSF...................................................3

1.- Mapear la instancia del FacesServlet.......................................................................32.-Crear las páginas.......................................................................................................4

2.1. Declarar las bibliotecas de etiquetas...................................................................42.2. Agregar las etiquetas view y form......................................................................52.3. Agregar componentes al formulario...................................................................5

3.-Definir la navegación entre páginas..........................................................................64.-Desarrollar los beans.................................................................................................65.-Añadir las declaraciones de los beans manejados.....................................................7

Versiones de JSF...............................................................................................................7Implementaciones y Extensiones populares de JSF..........................................................8Conclusión.........................................................................................................................8Bibliografía........................................................................................................................9

Trabajo de Programación Distribuida. JavaServer Faces.

Introducción - La tecnología JavaServer Faces

La tecnología JavaServer Faces (JSF) es un Framework de componentes para interfaces de usuario del lado del servidor para aplicaciones web basadas en tecnología Java (JavaEE).

Los principales componentes de la tecnología JSF son:

Una API para representar los componentes de la interfaz de usuario (cajas de texto, listas deplegables, etc), gestionar su estado, manejar eventos, realizar validación del lado del servidor, conversiones de datos, definición de la navegación entre páginas, gestionar la internacionalización y accesibilidad y permitir al usuario ampliar todas estas características.

Dos bibliotecas de etiquetas (tag libraries) de JSP para poder representar los componentes de la interfaz de usuario en una página JSP y para enlazar dichos componentes con objetos del lado del servidor.

El modelo de programación bien definido que establece JSF y las bibliotecas de etiquetas hacen significativamente más sencillo construir y mantener aplicaciones web con interfaces de usuario en el lado del servidor. De esta forma, con poco esfuerzo se puede conseguir:

Añadir controles de usuario a una página simplemente añadiendo la etiqueta correspondiente al componente.

Enlazar los eventos generados por estos componentes con el código de la aplicación en el lado del servidor.

Construir una interfaz de usuario con componentes reusables y ampliables.

Guardar y restaurar el estado de la interfaz de usuario sin las limitaciones del ámbito request de las peticiones al servidor.

La siguiente figura muestra como los interfaces de usuario que se crean con la tecnología JSF (en el ejemplo myUI) se ejecutan en el servidor y se envían al cliente para ser representados en el navegador:

La página JSP del ejemplo (myform.jsp) es también una página JSF, ya que incluye etiquetas JSF, es decir representa los componentes de la interfaz de usuario usando etiquetas personalizadas (custom tags) definidas por la tecnología JSF.

Página 1


El interfaz de usuario para la aplicación web (representado en el ejemplo por myUI) gestiona los objetos que referencia la página, que son los siguientes:

Los objetos de la interfaz de usuario que se corresponden con las etiquetas de la página JSP

Los manejadores de eventos, validadores y conversores referenciados por los componentes.

Los JavaBeans que encapsulan los datos y la funcionalidad especifica de los componentes.

Beneficios de la tecnología JavaServer Faces – Mejoras sobre JSP

Una de las principales ventajas de la tecnología JSF es que ofrece una separación clara entre el comportamiento y la presentación.

Las aplicaciones web construidas con la tecnología JSP consiguen esto solo en parte, ya que una aplicación que solo utilice páginas JSP no puede hacer corresponder peticiones HTTP con manejadores de eventos específicos de los componentes, ni gestionar los elementos de la interfaz de usuario como objetos con estado en el servidor tal como hace una aplicación JSF.

La separación de la lógica y la presentación permite a cada miembro del equipo de desarrollo de una aplicación web centrase en su parte del proceso de desarrollo y proporciona un modelo de programación simple para enlazar las partes.

Por ejemplo, los diseñadores de páginas sin conocimientos de programación pueden usar los componentes del interfaz de usuario que proporciona JSF y enlazarlos con objetos del lado del servidor sin necesidad de escribir código.

Otro objetivo importante de la tecnología JSF es llevar un paso más allá los conceptos de componentes de interfaz de usuario y capa web, sin limitarlos a un lenguaje de scripts ni de marcado determinado.

Componentes de una aplicación JSF

Como la mayoría de las aplicaciones web JavaEE, una aplicación JSF esta formada típicamente por los siguientes componentes:

Un conjunto de páginas JSP Un conjunto de backing beans, que son componentes JavaBeans que definen

propiedades y funciones para los componentes del interfaz de usuario de la página

Un fichero de configuración de recursos de la aplicación, que define las reglas de navegación entre páginas y se utiliza para configurar los beans y otros objetos de la aplicación.

Página 2


Un descriptor de despliegue (fichero web.xml). Las bibliotecas de etiquetas estándar definida por JSF para representar los

componentes de la interfaz de usuario y otros objetos de la página.

Ejemplo de creación paso a paso de una aplicación JSF

Los pasos necesarios para crear una aplicación JSF sencilla son los siguientes:

1. Mapear la instancia del FacesServlet. 2. Crear las páginas3. Definir la navegación entre páginas4. Desarrollar los beans5. Añadir las declaración de los beans manejados

1.- Mapear la instancia del FacesServlet.

Un requisito de cualquier aplicación JSF es que todas las peticiones a la aplicación que impliquen la utilización de componentes JSF deben pasar por el FacesServlet. Una instancia de este servlet gestiona el ciclo de vida de las peticiones a la aplicación web e inicializa los recursos requeridos por la tecnología JSF.

El ciclo de vida de las aplicaciones JSF es más complicado que el de las páginas JSP, ya que está dividido en múltiples fases para soportar el modelo de componentes de la interfaz de usuario, que es más complejo:

Para asegurar que la instancia del FacesServlet se invoca, se debe establecer su mapeo en el fichero descriptor despliegue, como con cualquier otro servlet.

Un ejemplo de mapeo del FacesServlet sería el siguiente:

Página 3


<servlet> <display-name>FacesServlet</display-name> <servlet-name>FacesServlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet </servlet-class> <load-on-startup>1</load-on-startup></servlet><servlet-mapping> <servlet-name>FacesServlet</servlet-name> <url-pattern>/ejemploJSF/*</url-pattern></servlet-mapping>

En este ejemplo se utiliza un prefijo (ejemploJSF) para identificar las páginas JSP que contienen componentes JSF. Por tanto, un ejemplo de URL para una página de la aplicación JSF sería:

http://localhost:8080/aplicacionJSF/ejemploJSF/paginaInicial.jsp

2.-Crear las páginas

Crear las páginas de una aplicación JSF implica incluir los componentes de la interfaz de usuario en las páginas, mapear los componentes a los beans asociados y agregar las etiquetas que registran los conversores, validadotes y manejadores de eventos de los componentes.

Como en cualquier página JSP, se deben añadir las etiquetas HTML y HEAD a la página, por ejemplo:

<HTML xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <HEAD> <title>Ejemplo JSF</title> </HEAD> ...</HTML>

También se debe incluir la directiva de página que especifica el tipo de contenido:

<%@ page contentType="application/xhtml+xml" %>

2.1. Declarar las bibliotecas de etiquetas

Para usar los componentes JSF en las páginas JSP, las páginas deben tener acceso a las dos bibliotecas estándar de etiquetas: la bibliotecas de etiquetas de los componentes HTML y la de los componentes core. Para ello se emplean las siguientes declaraciones taglib:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

La primera declaración declara los componentes HTML con el prefijo “h”. Todas las etiquetas de los componentes HTML tendrán este prefijo. Los componentes de la biblioteca core tendrán el prefijo “f”.

Página 4


2.2. Agregar las etiquetas view y form

Todos los componentes de una página JSF se estructuran como parte de un árbol de componentes, llamado view. La etiqueta view representa la raíz de este árbol, y todas las etiquetas de los componentes JSF de la página deben estar dentro de una etiqueta view.

La etiqueta form representa un formulario de introducción de datos que permite al usuario introducir datos y enviarlos al servidor, normalmente pulsando un botón. Todos los componentes JSF que representan controles de usuario editables (como los campos de texto y los menús) deben estar anidados dentro de la etiqueta form. Se puede especificar el atributo id de la etiqueta form para identificarlo.

La página de ejemplo, tras añadir las etiquetas view y form, quedaría así:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><f:view> <h:form id="formularioEjemploJSf"> </h:form></f:view>

2.3. Agregar componentes al formulario

Una vez que se ha creado esta estructura de página se pueden ir añadiendo los componentes que formarán la interfaz de usuario.

Algunos de los componentes que más se usan al crear una página JSF son los siguientes:

outputText. Se utiliza para mostrar una etiqueta de texto que no puede modificar el usuario. El texto que se muestra se define en el atributo value de la etiqueta y puede ser una constante, o estar asociado a una propiedad de un backing bean, como en el siguiente ejemplo:

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

graphicImage. Permite insertar una imagen localizada en la URL establecida en el atributo url de la etiqueta. A continuación se muestra un ejemplo:

<h:graphicImage id="waveImg" url="/wave.med.gif" />

inputText. Muestra una caja de texto editable. Los atributos más usados son label, para mostrar una etiqueta descriptiva junto a la caja de texto, value para asociar el valor a una propiedad de un backing bean. Dentro de la etiqueta inputText se puede anidar otra para hacer validaciones, como se muestra en el siguiente ejemplo:

<h:inputText id="userNo" label="User Number" value="#{UserNumberBean.userNumber}"> <f:validateLongRange minimum="#{UserNumberBean.minimum}" maximum="#{UserNumberBean.maximum}" /> </h:inputText>

Página 5


commandButton. Muestra un botón con el texto indicado en el atributo value y se produce el resultado definido en el atributo action. Este es un ejemplo:

<h:commandButton action="success" value="Submit" />

3.-Definir la navegación entre páginas

Definir la navegación entre páginas implica definir a qué página ir cuando el usuario pulsa un botón o un hiperenlace. La navegación de la aplicación se define en el fichero de configuración de recursos, usando un sistema basado en reglas.

A continuación se muestra un ejemplo de reglas de navegación:

<navigation-rule> <from-view-id>/paginaInicial.jsp</from-view-id> <navigation-case> <from-outcome>exito</from-outcome> <to-view-id>/respuesta.jsp</to-view-id> </navigation-case></navigation-rule>

Esta regla de navegación establece que desde la página paginaInicial.jsp, si se produce el resultado lógico (outcome) exito la aplicación navegará a la página respuesta.jsp.

Un resultado lógico se produce cuando se pulsa un botón o hiperenlace que tiene establecido dicho resultado en su atributo action. Por ejemplo, la pulsación del siguiente botón definido en la página paginaInicial.jsp, produciría la navegación a respuesta.jsp atendiendo a la regla de navegación del ejemplo:

<h:commandButton id="submit" action="success" value="Enviar" />

4.-Desarrollar los beans

Una aplicación JSF típica asocia un backing bean con cada página de la aplicación. El backing bean define propiedades y métodos que están relacionados con los componentes de la interfaz de usuario usados en la página.

De esta forma, por ejemplo, el desarrollador puede ligar el valor de un componente a la propiedad de un bean usando el atributo value de la etiqueta del componente para referirse a dicha propiedad.

Por ejemplo, si queremos que el componente de texto nombreUsuario esté asociado a la propiedad nombre del bean DatosUsuario, escribiríamos lo siguiente:

<h:inputText id="nombreUsuario" label="Nombre del usuario" value="#{DatosUsuario.nombre}">...</h:inputText>

La definición de la propiedad nombre en el backing bean DatosUsuario sería la siguiente:

Página 6


String nombre = null;...public void setNombre(String nombre) { nombre = nombre; }public Integer getNombre() { return nombre;}

5.-Añadir las declaraciones de los beans manejados

Tras desarrollar los backing beans que se usarán en la aplicación, se necesita configurarlos en el fichero de configuración de recursos de la aplicación para que la implementación de JSF pueda automáticamente crear nuevas instancias de los beans cuando se necesite.

A continuación se muestra una declaración de ejemplo para el bean DatosUsuario:

<managed-bean> <managed-bean-name>DatosUsuario</managed-bean-name> <managed-bean-class> aplicacionJSF.DatosUsuario </managed-bean-class> <managed-bean-scope>session</managed-bean-scope></managed-bean>

Esta declaración indica al entorno JSF que el bean manejado DatosUsuario se crea como una instancia de la clase java aplicacionJSF.DatosUsuario y que tiene el ámbito de sesión.

Esto hace que los desarrolladores puedan hacer referencia a sus propiedades en las páginas, mediante expresiones declarativas del lenguaje EL (Expression Language), como la que vimos anteriormente:

value="#{DatosUsuario.nombre}"

Versiones de JSF

JSF 1.0 (2004-03-11) — Versión inicial de la especificación JSF. JSF 1.1 (2004-05-27) — Solución de bugs sin introducir nueva funcionalidad. JSF 1.2 (2006-05-11)

o Utiliza XML Schema para la definición de los ficheros de configuración, en vez de DTD

o Mejoras para permitir diseños multi-marcos o multi-páginaso Mejoras en la seguridad al guardar el estado del clienteo Corrección de errores

JSF 2.0 (12-08-2009) – Supone un revisión importante de la especificación JSF. Algunas de las nuevas características que incorpora son:

o Desarrollo racionalizado de aplicaciones web. Se permite reemplazar los ficheros XML de configuración por anotaciones y convenciones. Se simplifica la navegación y se facilita el acceso a los recursos.

Página 7


o Plantillas y componentes compuestos. JSF 2 amplía las posibilidades de las plantillas e introduce los componentes compuestos.

o Manejo de eventos, JavaScript y Ajax. Se modifica el modelo de eventos y modifica el ciclo de vida para añadir soporte nativo para Ajax.

o Adopción de la tecnología de Facelets como tecnología de vista. Esto elimina los conflictos de ciclo de vida que existían con JSP. Los facelets también permiten crear etiquetas más fácilmente con lenguaje de marcado, en vez de con código Java.

Implementaciones y Extensiones populares de JSF Apache MyFaces Trinidad. Es una implementación robusta de JSF que

incluye además componentes de la interfaz gráfica adicionales y proporciona las siguientes funcionalidades:

o Partial Page Rendering. Permite no tener que refrescar toda la página cuando se produzca algún evento, y solo refrescar los componentes que se vean afectados.

o Validación del lado del cliente integradao Soporte para trabajar con ventanas de diálogoo Ámbito pageFlowScope, que permite la comunicación entre páginas

Framework Spring. Framework para el desarrollo de aplicaciones JavaEE que no obliga a usar un modelo de programación particular y ofrece libertad a los desarrolladores para usar cualquier tecnología JavaEE, aportando soluciones bien documentadas.

ICEFaces. Framework de código abierto que permite desarrollar aplicaciones JavaEE utilizando JSF y Ajax.

PrettyFaces. Es una extensión de código abierto para JSF 1.2 y JSF 2.0 que permite cambiar las URLs de las aplicaciones web para facilitar la labor de los motores de búsqueda. También permite definir acciones a ejecutar en la carga de las páginas, integración sin fisuras con la navegación y otras funcionalidades.

ExadelFiji. Extiende la tecnología JSF para incluir presentaciones de datos más dinámicas usando gráficos y diagramas.

Conclusión

A partir de mi experiencia profesional usando una implementación de JSF (Oracle ADF Faces) y la documentación consultada para la elaboración de este trabajo, he podido extraer las siguientes conclusiones:

JSF facilita enormemente la creación de interfaz de usuario de las aplicaciones web, ya que se aprovecha de las funcionalidades proporcionadas por JSP y evita al usuario la creación de custom tags, y escribir gran parte del código necesario para validar, cargar, mantener el estado y responder a los eventos de los componentes de la interfaz de usuario.

A pesar de estas mejoras, el desarrollo de aplicaciones JSF sigue resultando complicado para el desarrollador, ya que implica la utilización de numerosas tecnologías: HTML, CSS, XML, JSP, código Java, JavaScript, etc. tiene un ciclo

Página 8


de vida complicado, y sobre todo, porque se pretenden conseguir resultados como los de una aplicación de escritorio desarrollada por ejemplo con Swing o Visual Basic (aspecto uniforme, componentes de la interfaz de usuario complejos, manejadores de eventos, conservación del estado) utilizando navegadores que trasladan toda la complejidad al servidor y que emplean el protocolo sin estado y limitado HTTP.

A pesar de ello, las innegables ventajas de las aplicaciones web (independencia de la plataforma y del navegador, no es necesario realizar instalaciones, gestión centralizada de la aplicación en el servidor) hacen que la industria del desarrollo de software se haya inclinado definitivamente hacia ellas, y por tanto, el desarrollo de tecnologías como JSF se hace imprescindible para simplificar el trabajo del desarrollador. Actualmente existen varias implementaciones robustas de JSF, salen nuevas versiones con frecuencia que resuelven problemas e incorporan las sugerencias de los programadores y es una tecnología que sin duda seguirá desarrollándose en el futuro para atender las necesidades relacionadas con la creación de interfaces de usuario para aplicaciones web.

Bibliografía

1. Web de Sun Microsystems sobre la tecnología JavaServer Faces:

http://java.sun.com/javaee/javaserverfaces/index.jsp

2. Artículo de la Wikipedia (en inglés) sobre JavaServer Faces

http://en.wikipedia.org/wiki/JavaServer_Faces

3. JSRs (Java Specification Request) sobre JSF en la web de Java Community Process

http://jcp.org/en/jsr/overview

4. Web de Apache MyFaces Trinidad

http://myfaces.apache.org/trinidad/index.html

5. Web del Framework Spring

http://www.springsource.org/documentation

6. Web de ICEFaces

http://www.icefaces.org/main/home/

7. Web de PrettyFaces

http://ocpsoft.com/prettyfaces/

Página 9

http://ocpsoft.com/prettyfaces/

http://www.icefaces.org/main/home/

http://www.springsource.org/documentation

http://myfaces.apache.org/trinidad/index.html

http://jcp.org/en/jsr/overview

http://en.wikipedia.org/wiki/JavaServer_Faces

http://java.sun.com/javaee/javaserverfaces/index.jsp

Documents

JSF