[jsf] java server faces y ajax – parte 1 (2006)

JavaServer Faces y AJAX – Parte 1

JavaServer Faces y AJAX – Parte 1............................................................................................. 1 Introducción ............................................................................................................................... 2 Sobre JavaServer Faces ........................................................................................................... 2

Objetivos de Diseño de la Especificación JSF....................................................................... 3 Sobre AJAX ............................................................................................................................... 4

¿Qué es AJAX? ..................................................................................................................... 4 Ejemplos de Aplicaciones AJAX ............................................................................................ 5

JavaServer Faces...................................................................................................................... 6 Roles en un proyecto JSF...................................................................................................... 6 Una aplicación JavaServer Faces ......................................................................................... 6 El proceso de desarrollo de una aplicación JSF.................................................................... 7

Una aplicación ejemplo.............................................................................................................. 8 Desarrollo de la aplicación JSF con Sun Studio Creator 2.................................................... 8 Desarrollo de la aplicación en una herramienta que no incluye JSF................................... 13

Resumen.................................................................................................................................. 17

JavaServer Faces y AJAX – Parte 1 - Introducción Página 2 de 17

Introducción JavaServer Faces es un framework de componentes de interfaces de

usuario para el desarrollo de aplicaciones Web basadas en

tecnología Java™. A estos componentes se les puede incorporar la

técnica AJAX a efectos de poder desarrollar aplicaciones e interfaces

más interactivas y veloces.

La tecnología JavaServer Faces surge como una solución a la separación entre la presentación

y el comportamiento en una aplicación Web, de forma tal que las actividades de los autores de

las páginas puedan separarse de las actividades de los desarrolladores de la lógica. Además,

esto posibilita el desarrollo de entornos de desarrollos (IDE) que permitan trabajar en el diseño

con funcionalidades del tipo drag-and-drop. Esta tecnología define un modelo de componentes

UI que permiten definir la estructura del componente, diferentes formas de presentación,

validaciones, la navegación entre las páginas y otros elementos. Por otra parte, la técnica

AJAX para el desarrollo de aplicaciones Web permite crear aplicaciones más interactivas y

eficaces.

En este artículo, el primero de una serie de de artículos sobre la tecnología JSF y la técnica

AJAX para el desarrollo de aplicaciones, se describe brevemente esta tecnología y se

ejemplifica su desarrollo en una herramienta que permite el trabajo con JSF (Sun Studio

Creator2) y en una que no.

Estos artículos se basan en la especificación 1.2 de JavaServer Faces y en Sun Studio Creator

2 & Update 1.

Sobre JavaServer Faces JavaServer Faces es un framework de componentes de interfaces de usuario (UI) para

aplicaciones Web basadas en tecnología Java™. Esto tiene dos implicaciones importantes:

a) Se trata de una tecnología que ejecuta del lado del servidor y no del lado del cliente.

b) La interfaz de usuario es tratada como un conjunto de componentes UI. Este es un

concepto fundamental para la comprensión de la tecnología JSF.

Este tipo de tecnología es particularmente importante en los proyectos de tamaño mediano y

grande, donde la separación de roles entre los integrantes del equipo resulta imprescindible

para lograr un proyecto exitoso y mayor productividad. En este sentido, la separación entre la

presentación y la lógica (o comportamiento) de la aplicación es una de las áreas más

problemáticas. En general, la presentación es realizada por autores de páginas Web que no

conocen la lógica de la aplicación, el lenguaje de programación y otras características, y los

JavaServer Faces y AJAX – Parte 1 - Sobre JavaServer Faces Página 3 de 17

programadores no poseen las competencias necesarias para el diseño de páginas Web.

Además, para una misma aplicación se suele trabajar con múltiples presentaciones (lo que

depende del dispositivo donde se realizará la presentación, el navegador Web que se esté

utilizando, cuestiones de localización de la aplicación, accesibilidad, etc.).

También, resulta importante trabajar, a nivel de la presentación, con componentes que puedan

ser reutilizables o personalizados de acuerdo a la aplicación o usuario.

Estas son algunas de las características que ofrece la tecnología JavaServer Faces y que se

describirá en este artículo.

Objetivos de Diseño de la Especificación JSF

La especificación JSF fue diseñada según los siguientes principios:

i) Amigable. Por ejemplo, que los proveedores proporcionen soluciones mediante las

que los desarrolladores puedan construir aplicaciones Web con drag-and-drop de

componentes.

ii) Independiente del Protocolo y del dispositivo del cliente. Esto implica una

correcta separación entre el modelo de componentes UI y la forma en que estos

componentes se presentan en el dispositivo del cliente y bajo qué protocolo.

iii) Que pueda utilizarse con la tecnología JSP.

iv) Que pueda utilizarse independientemente de la tecnología JSP.

v) Escalable.

vi) Que pueda utilizarse en el contexto de los navegadores Web actuales.

JavaServer Faces y AJAX – Parte 1 - Sobre AJAX Página 4 de 17

Sobre AJAX

¿Qué es AJAX?

AJAX (JavaScript Asincrónico y XML) es una técnica para el desarrollo de aplicaciones Web

que combina varias tecnologías (XML, JavaScript, entre otras). Esta técnica puede incluirse en

los componentes UI de JSF a efectos de obtener las ventajas que AJAX ofrece. La técnica

AJAX permite crear aplicaciones Web más rápidas, interactivas y amigables para el usuario.

Mediante esta técnica, las aplicaciones Web pueden actualizar, de manera sincrónica o

asincrónica, algunos de los datos de las páginas sin necesidad de recargarlas completamente.

La técnica Ajax involucra un conjunto de tecnologías entre las que se destacan:

• JavaScript: Es un lenguaje de script (conjunto de instrucciones) e interpretado

(significa que el script no precisa compilación preliminar). El mismo fue diseñado para

agregar interactividad a las páginas Web y usualmente es embebido directamente en

esta. En la actualidad es soportado por la mayoría de los navegadores Web. Es

frecuentemente utilizado para capturar eventos de la página Web. Estos eventos

pueden ser: finalización de la carga de la página, el usuario presionó un botón, entre

otros. También es usado para validar datos de la página Web y cambiar el contenido

de los elementos HTML de la misma.

• Intercambio de datos con XML y XSLT. XML, eXtensible Markup Language, es un

lenguaje de marcas muy simple y flexible. Se utiliza para representar datos e incluir

descripción de la estructura de los mismos. XSL Transformations (XSLT) es un

lenguaje para realizar la transformación de documentos XML en otros documentos

(particularmente otros documentos XML). Estas transformaciones se escriben en

documentos XML. XSLT posee un vocabulario, que es utilizado para describir las

transformaciones mencionadas.

• XHTML: Es un lenguaje de marcas de la w3c para páginas Web. Combina HTML y

XML en un mismo formato (HTML 4.0 y XML 1.0). Al igual que XML, XHTML puede ser

extendido para agregar etiquetas propietarias y su codificación es más rigurosa que la

de HTML.

• CSS: Cascading Style Sheets. Es un estándar de la W3C para definir la presentación

de los documentos Web. Es un mecanismo simple para agregar estilo (por ejemplo

color, tipo de letra) a documentos Web. Con CSS se puede separar el contenido

(HTML, XHTML) de la presentación (CSS).

• Iteración con la página a través de DOM: Document Object Model (Modelo de Objetos

de Documentos) es una interfaz de programación de aplicaciones (API) para

JavaServer Faces y AJAX – Parte 1 - Sobre AJAX Página 5 de 17

documentos HTML y XML. Define la estructura lógica de los documentos y el modo en

que se accede y manipula un documento.

• Recuperación Asincrónica o Sincrónica de datos con el objeto XMLHttpRequest: permite recuperar datos del servidor Web como una actividad que corre en el

background (detrás de escena). Este objeto se comunica con el servidor de manera

asincrónica o sincrónica, enviando peticiones al mismo.

Ejemplos de Aplicaciones AJAX

Esto permite realizar aplicaciones, tales como:

• Validaciones en tiempo real: Los datos entrados por los usuarios pueden ser validados

en el servidor en tiempo real, sin que el usuario tenga que realizar un envío del

formulario.

• Auto-completado. Los datos pueden ser auto-completados, según el usuario va

entrando la información. Esto puede hacerse de varias maneras, sugiriendo una lista

de valores que comienzan con el texto entrado o una vez que un campo fue

completado obtener los datos de otros campos (por ejemplo el nombre de la ciudad a

partir del código postal).

• Notificaciones del servidor. Una página HTML puede simular envíos de información

desde el servidor. Para ello, puede realizar peticiones periódicas al servidor, de forma

transparente para el usuario y actualizar la página correspondiente.

Estas son algunas de las aplicaciones típicas que permiten hacer las aplicaciones Web más

interactivas, mediante la inclusión de la técnica AJAX.

Esta técnica puede incluirse en los componentes JavaServer Faces, de forma tal que tengan

este tipo de comportamiento. En esta serie de artículos se presentará cómo crear componentes

JSF personalizados que incluyan AJAX y cómo modificar componentes existentes para que

incluyan la técnica AJAX.

JavaServer Faces y AJAX – Parte 1 - JavaServer Faces Página 6 de 17

JavaServer Faces En esta sección se describen los roles que identifica la especificación JSF, los elementos de

una aplicación JSF y el proceso de desarrollo de proyecto JSF.

Roles en un proyecto JSF

En un proyecto JSF participan distintos roles. La especificación distingue entre los siguientes

roles:

• Autor de Páginas: Es el principal responsable de la creación de la interfaz de usuario

de una aplicación Web. Generalmente, construyen la interfaz a partir de componentes

predefinidos proporcionados por los escritores de componentes, los proveedores JSF y

los proveedores de herramientas. Estos componentes se representan como objetos

configurables.

• Escritor de Componentes: Es el responsable de la creación de objetos de interfaz de

usuario reutilizables.

• Desarrollador de aplicaciones: Es el responsable de proveer las funcionalidades en

el servidor que no están directamente relacionadas con la interfaz de usuario.

En lo que respecta a JSF son responsables de exponer la representación de

los datos y de los objetos de la lógica para que puedan ser utilizados por una

aplicación. Un ejemplo es el Sun Java System Application Server.

• Proveedores de Herramientas: Son los responsables de proveer herramientas que

ayuden en el desarrollo de aplicaciones JSF, en lugar de crear estas aplicaciones

directamente. Uno de tales proveedores es Sun Microsystems y una de tales

herramientas es Sun Studio Creator 2.

• Implementadores JSF: Proporcionan ambientes de ejecución que implementan todas

las funcionalidades de la especificación JSF.

Una aplicación JavaServer Faces

Una aplicación JavaServer Faces es una aplicación Web que utiliza tecnología JavaServer

Faces. Típicamente incluye los siguientes elementos:

a) Un conjunto de páginas JSP.

b) Un conjunto de beans. Estos beans definen propiedades y funciones para los

componentes UI de una página.

c) Un archivo de configuración de los recursos de la aplicación.

d) Un descriptor de despliegue.

e) Un conjunto de objetos personalizados, desarrollados por el programador (validadores,

conversores, etc.).

f) Un conjunto de custom tags que permiten trabajar con los objetos personalizados.

JavaServer Faces y AJAX – Parte 1 - JavaServer Faces Página 7 de 17

El proceso de desarrollo de una aplicación JSF

El Tutorial de JavaEE 5 establece los siguientes pasos para el proceso de desarrollo de una

aplicación JSF:

• Preparar el proyecto JSF

• Crear las páginas con los componentes UI y las etiquetas principales.

• Definir la navegación en el archivo de configuración de recursos.

• Implementar los beans necesarios

• Agregar las declaraciones de beans al archivo de configuración de recursos de la

aplicación.

Sin embargo, algunos de estos pasos son realizados automáticamente por algunos IDE que

incorporan el trabajo con JSF. En la sección “El proceso de desarrollo de una aplicación JSF”

se describen estos pasos en un proyecto en una herramienta tradicional de desarrollo y en Sun

Studio Creator2, herramienta visual que incluye facilidades para JSF.

JavaServer Faces y AJAX – Parte 1 - Una aplicación ejemplo Página 8 de 17

Una aplicación ejemplo A continuación se presentan segmentos de un ejemplo de una aplicación JavaServer Faces.

Esta aplicación permite desplegar el valor de una temperatura en distintas unidades. El usuario

entrará un valor que corresponde a una temperatura en grados Celsius y la aplicación

desplegará dicho valor en grados Fahrenheit.

Desarrollo de la aplicación JSF con Sun Studio Creator 2

Una de las características de JSF y de sus principios de diseño es que permite que los IDE

incluyan facilidades para que el autor de página trabaje con componentes en la modalidad

drag-and-drop. Por tal motivo, trabajar con IDE que permitan el trabajo con JSF resulta en una

mayor productividad y mantenibilidad la aplicación. Esto se debe a que el IDE resuelve (o

genera) el código correspondiente a una aplicación JSF, lo que lo hace transparente al autor de

páginas o desarrollador. En esta sección, se describe la resolución de la aplicación

mencionada utilizando un IDE con estas facilidades: Sun Studio Creator 2.

Figura 1: Páginas inicial y resultado para el ejemplo.

Paso 1: Creación de las páginas Creación de la página de entrada de datos

Sun Studio Creator 2 incluye una Paleta con los componentes disponibles. Estos pueden ser

componentes predefinidos, personalizados o creados para un proyecto particular por un

desarrollador de componentes. Para utilizar uno de estos componentes en una página,

simplemente se arrastra el componente a la posición en la página. En el caso de la aplicación

del ejemplo, la página de entrada de datos, se debe agregar tres componentes:


• Una etiqueta de texto, con el valor “Ingrese la temperatura en Fahrenheit”.

• Un campo de entrada de texto.

• Un botón de Enviar.

Figura 2: A la izquierda se muestra la paleta con los componentes disponibles. Estos se arrastran hacia la zona de diseño de la página para incorporarlos. La Paleta incluye los componentes estándar y componentes específico. Creación de la página de resultado

Una nueva página contendrá el resultado de la transformación de grados Celsius a Fahrenheit.

Esta página tendrá dos componentes:

• Dos etiquetas de texto.

Definición de la Navegación de las páginas Sobre la primera de las páginas, se selecciona la opción “Navegación entre páginas” desde el

menú contextual de la página. Esta vista permite definir la navegación entre las páginas. Esta

navegación se establece a partir de caso. Un caso es una acción que, cuando se produce en la

página origen, hace que se navegue hacia la siguiente página1. En el ejemplo, se define un

caso (“success”) que realiza el enlace de las dos páginas, cuyo resultado final se muestra en la

Figura 3.

1 Ver Ciclo de vida de una petición JSF en “JavaServer Faces y Ajax – Parte 2”.


Figura 3: Definición de la navegación entre las páginas a través de un caso "success".


Compartir datos a través del request Sun Studio Creator 2 proporciona una interfaz gráfica para definir y trabajar con datos

compartidos entre las peticiones. En el caso de la aplicación, es necesario que el valor entrado

por el usuario en la primera página sea almacenado en el request, en una propiedad de

nombre “celsius”.

Para agregar esta propiedad en la petición de la página, se selecciona el request

correspondiente y se agrega el campo. Este valor será almacenado en esta propiedad cuando

el usuario presiona el botón “Enviar”.

getRequestBean1().setCelsius(campoEntrada.getValue());

return “success”;

En esta clase, se definen dos propiedades: celsius y fahrenheit. El método

getFahrenheit() de esta clase, se implementa como:

return new Float((this.celsius.floatValue()+32)*9/5);

De esta forma, se asignará el valor

entrado por el usuario en el campo de

entrada a la propiedad celsius del

request y se devolverá el valor

“success” para que se resuelva

correctamente la navegación entre las

páginas.

En la segunda página, al texto estático

se le enlaza con la propiedad

fahrenheit del request.

Nota: En los próximos artículos se describirá cómo resolver esta aplicación utilizando lógica de

negocios, la validación de los datos de entrada y la conversión de los datos de entrada en el

formato correspondiente, entre otras facilidades de JSF.

Como puede observarse en el ejemplo presentado, la tarea del autor de páginas no implica el

trabajo con código y es independiente de la lógica del negocio. Por lo tanto, un cambio en la

presentación no afectará el código desarrollado por el implementador.

success

celsius farheinheit

Pagina1.jsp Resultado.jsp

Valor EntradoPor el Usuario

RequestBean1


Observación: El campo de entrada de esta aplicación corresponde a un número que es la

temperatura en grados Celsius. Este valor es enviado al servidor al presionar el botón Enviar y

allí se realizan los cálculos y se presenta la nueva página. Considere por ejemplo una

aplicación en la que el usuario debe entrar el número de un cliente en un campo de entrada y

luego enviarlo al servidor para obtener los datos personales. Luego de entrados los primeros

caracteres del número de cliente, se puede realizar la consulta al servidor para obtener los

números de clientes que comienzan con dichos caracteres y proponerlos al usuario en una lista

para que seleccione el número correspondiente desde dicha lista. Esta consulta al servidor

podría realizarse en modo asincrónico, utilizando la técnica AJAX. Sun Studio Creator 2 incluye

un conjunto pre-establecido de componentes AJAX que pueden incorporarse en una página

HTML.

Observación: Usted puede ver el código correspondiente a cada una de las páginas en la vista

“JSP”. Sin embargo, este código es transparente para el autor de páginas.


Desarrollo de la aplicación en una herramienta que no incluye JSF

En esta sección, se describen algunos de los pasos necesarios para la construcción de una

aplicación JSF en una herramienta que no incluye facilidades para JSF. En este caso, la

inclusión de los componentes JSF en la página se realiza a través del código. Este código

puede variar dependiendo de la versión de JSF que se utilice.

Paso 1: Preparar proyecto JSF. Todas las aplicaciones JSF deben incluir un mapeo a la instancia FacesServlet en su descriptor

de despliegue.

Por ejemplo:

<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>/temperatura/*</url-pattern>

</servlet-mapping>

Paso 2: Creación de las páginas Esta es una tarea del autor de páginas.

En este paso, se creará una página con las siguientes características:

i) Un texto general con la explicación de lo que realiza la aplicación.

ii) Un campo de entrada de datos que permita entrar el valor correspondiente a la

temperatura en grados Celsius.

iii) Un botón de “Enviar” para obtener la respuesta por parte del servidor.

Paso 2.1: Estructura de la página La página será similar a la siguiente:

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

<HEAD>

<title>Mi primera aplicación JSF</title>

</HEAD>

Acá escribiremos el contenido de la página

</HTML>


Paso 2.2: Directivas – Bibliotecas de etiquetas (tags) Para poder utilizar componentes JavaServer Faces en una página JSP es necesario incluir dos

bibliotecas de etiquetas:

• html y

• core,

como se muestra a continuación:

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

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

Paso 2.3: Agregar las etiquetas de vista y de formulario Todas las páginas JSF se representan como un árbol de componentes UI. A dicho árbol se le

denomina una vista.

La etiqueta view, incluida en la biblioteca core, representa la raíz de dicho árbol. Todas las

etiquetas de los componentes JSF deben estar dentro del alcance de una etiqueta view.

La etiqueta form, incluida en la biblioteca html, representa un componente formulario de

entrada. Todos los componentes que representan componentes editables (como por ejemplos

campos o menús) deben estar dentro del alcance de una etiqueta form.


<HEAD>


</HEAD>



<f:view>

<h:form id="temperaturaFormulario">

</h:form>

</f:view>

</HTML>

Paso 2.3: Agregar un campo de texto En este paso, se agregará al formulario un campo de entrada de datos correspondiente al valor

de la temperatura en grados Celsius. Para ello, se proporcionan distintas etiquetas, como por

ejemplo inputText. Algunos de estos elementos podrían ser agregados por el desarrollador de

la aplicación.

<h:inputText id="temperaturaCelsius"

value="#{TemperaturaBean.celsius}">

</h:inputText>


El resultado parcial sería el siguiente:


<HEAD>


</HEAD>



<f:view>

<h:form id="temperaturaFormulario">

Ingrese la temperatura en grados Celsius:

<h:inputText id="temperaturaCelsius"

value="#{TemperaturaBean.celsius}">

</h:inputText>

<h:commandButton id="submit"

action="success"

value="Enviar" />

</h:form>

</f:view>

</HTML>

Se ha agregado un botón que corresponde a la opción de Enviar el valor entrado.

Paso 3: Definición de la Navegación de las páginas La navegación de las páginas establece a qué página debe irse después que el usuario

seleccionó un botón o un hipervínculo. La navegación se define en el archivo de configuración

(faces-config.xml).

<navigation-rule>

<from-view-id>/temperatura.jsp</from-view-id>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/respuestaTemperatura.jsp</to-view-id>

</navigation-case>

</navigation-rule>

Por lo tanto, desde la página temperatura.jsp, si se produce la acción “success” se va a la

página respuestaTemperatura.jsp.


Paso 4: Desarrollo de los Beans Esta es una tarea que corresponde al desarrollador (programador).

Los backing beans definen las propiedades y métodos que están asociados con los

componentes UI usados en una página.

En el caso del ejemplo, se necesita una propiedad celsius en el backing bean:

float celsius:

public void setCelsius(float c) {

celsius=c;

}

public Float getCelsius() {

return celsius;

}

public String getResponse() {

return (celsius+32)*9/5;

}

Paso 5: Agregar las declaraciones de los backing beans El último paso consiste en configurar los backing beans en el archivo faces-config.xml, de

forma tal que la implementación JavaServer Faces pueda crear las instancias

automáticamente, cuando lo necesite.

<managed-bean>

<managed-bean-name>TemperaturaBean</managed-bean-name>

<managed-bean-class>

temperatura.TemperaturaBean

</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

JavaServer Faces y AJAX – Parte 1 - Resumen Página 17 de 17

Resumen Este artículo presenta, en forma general, las características principales de la tecnología

JavaServer Faces y de la técnica AJAX. Además, describe los principales objetivos del diseño

de JavaServer Faces, los roles involucrados en un proyecto con JSF y la importancia de la

separación entre presentación y comportamiento. Se presentan también los pasos en un

proyecto de desarrollo de una aplicación JSF.

Dados los objetivos de diseño de JSF, los IDE que incorporan esta tecnología permiten un

desarrollo, por parte de los autores de páginas, más ágil, eficiente y mantenible.

El ejemplo presentado ilustra las ventajas del desarrollo de una aplicación en un IDE que

incluye la tecnología JSF, frente a uno que no. Sun Studio Creator 2 es uno de los IDE que

presenta las mayores ventajas en este sentido.

El siguiente artículo describe el modelo de componentes de JavaServer Faces, el ciclo de vida

de los componentes JavaServer Faces, los conceptos de conversores y validadores y ejemplos

que ilustran estos elementos.

[jsf] java server faces y ajax – parte 1 (2006)

Technology