PDF de programación - Componentes de presentación

Componentes de presentación

Índice

1 Introducción a JavaServer Faces.................................................................................. 3
1.1 Frameworks RIA basados en el servidor................................................................. 3
1.2 Características de JSF.............................................................................................. 7
1.3 Evolución de JSF..................................................................................................... 8
1.4 El lenguaje de definición de vistas JSF..................................................................13
1.5 Creando un primer proyecto JSF........................................................................... 22
1.6 Una aplicación de ejemplo en detalle.................................................................... 25
2 Ejercicios sesión 1 - Introducción a JSF.................................................................... 30
2.1 Creando nuestro proyecto con Maven (1 punto)....................................................30
2.2 Mini-aplicación de ejemplo (1 punto)....................................................................30
2.3 Pantalla de login (1 punto).....................................................................................30
3 El MVC en JavaServer Faces.....................................................................................33
3.1 Modelo-Vista-Controlador.....................................................................................33
3.2 Expresiones EL...................................................................................................... 49
3.3 Componentes estándar de JSF............................................................................... 51
4 Ejercicios sesión 2 - MVC..........................................................................................68
4.1 Login de usuario (1 punto).....................................................................................68
4.2 Guardando el usuario recién logueado (1 punto)...................................................68
4.3 Logout del usuario................................................................................................. 69
5 El ciclo de vida de JSF .............................................................................................. 70
5.1 La arquitectura JSF................................................................................................ 70
5.2 Ciclo de vida.......................................................................................................... 71
5.3 Un programa de ejemplo........................................................................................73
5.4 Conversión de formatos entre la interfaz y los beans............................................ 81
5.5 Validación.............................................................................................................. 84
5.6 Contexto asociado a la petición............................................................................. 89

Copyright © 2012-2013 Dept. Ciencia de la Computación e IA All rights reserved.

Componentes de presentación

5.7 Árbol de componentes........................................................................................... 92
5.8 Ligando componentes a beans gestionados........................................................... 94
5.9 Gestión de eventos................................................................................................. 96
6 Ejercicios sesión 3 - Funcionamiento y arquitectura de JSF ...................................104
6.1 Conversores y validadores................................................................................... 104
7 Internacionalización. Menajes Flash. RichFaces: una librería de componentes
profesional.....................................................................................................................106
7.1 Mensajes e internacionalización.......................................................................... 106
7.2 Mensajes Flash.....................................................................................................109
7.3 Introducción a RichFaces.....................................................................................109
7.4 Skins.....................................................................................................................111
7.5 Peticiones Ajax y ciclo de vida............................................................................111
7.6 Algunos ejemplos de componentes .....................................................................115
7.7 Referencias...........................................................................................................118
8 Ejercicios sesión 4 - Proyecto en RichFaces............................................................ 119
8.1 Internacionalización de la aplicación (1 punto)................................................... 119
8.2 CRUD de tareas (2 puntos).................................................................................. 120

Copyright © 2012-2013 Dept. Ciencia de la Computación e IA All rights reserved.

2

Componentes de presentación

1. Introducción a JavaServer Faces

1.1. Frameworks RIA basados en el servidor

Frente a las aplicaciones web tradicionales basadas en la navegación entre distintas
páginas, en los últimos años se han popularizado las aplicaciones web de una única
página que intentan simular las aplicaciones de escritorio. Son las denominadas RIA
(Rich Internet Applications).

Google fue uno de los primeros promotores de este tipo de aplicaciones, con ejemplos
como Google Maps. Esta aplicación web utiliza JavaScript de forma intensiva para
interactuar con el mapa o para seleccionar opciones (imprimir, enviar, etc.). Todas estas
acciones se realizan en una única página del navegador.

Un ejemplo de aplicación RIA: Google Maps

En las aplicaciones tradicionales cada petición al servidor hace que éste genere una nueva
página HTML. En la parte izquierda de la siguiente figura se muestra este modelo.

3

Copyright © 2012-2013 Dept. Ciencia de la Computación e IA All rights reserved.

Componentes de presentación

En la parte derecha de la figura vemos el funcionamiento de las aplicaciones RIA. Se
siguen realizando peticiones HTTP al servidor, pero no es el navegador quién lo hace
directamente, sino funciones JavaScript residentes en la página. Estas funciones envían la
petición y los datos al servidor y éste devuelve los datos de respuesta en algún tipo de
formato (texto, XML o JSON). Las funciones JavaScript en la página del navegador
formatean estos datos y los muestran en pantalla actualizando el árbol de componentes
DOM. El servidor no genera una nueva página sino sólo los datos. Este enfoque se ha
denominado Ajax (Asynchronous JavaScript and XML).

Existen frameworks JavaScript muy populares, como jQuery, que facilitan la tarea de
definir la interfaz de usuario de la aplicación. Aun así, el mantenimiento y testeo de este
código se hace complicado. Hay muchos elementos implicados: la comunicación con el
servidor, las páginas HTML en las que está embebido y el propio código JavaScript.
También se hace complicado reutilizar y compartir el código JavaScript entre distintas
páginas y desarrolladores.

Como alternativa a la codificación en JavaScript aparecen los denominados frameworks
RIA basados en el servidor, en los que los desarrolladores no escriben directamente
JavaScript, sino que utilizan componentes de alto nivel (paneles, menús desplegables,

Copyright © 2012-2013 Dept. Ciencia de la Computación e IA All rights reserved.

4

Componentes de presentación

combos, etc.) que el servidor inserta en las páginas resultantes. Este enfoque es el que
utilizan frameworks populares como JSF (JavaServer Faces), GWT (Google Web
Toolkit) o ZK.

En este enfoque el desarrollador compone la interfaz de usuario utilizando un lenguaje de
componentes específico. Esta definición reside en el servidor en forma de página de texto.
Cuando el servidor recibe una petición realiza un procesamiento de esta página de texto y
genera otra que contiene todos los componentes de la interfaz en formato HTML y
JavaScript y que se envía de vuelta al navegador.

En el caso de JSF 2 la definición de la interfaz se realiza en forma de páginas XHTML
con distintos tipos de etiquetas que veremos más adelante. Estas páginas se denominan
páginas JSF. La siguiente figura muestra el funcionamiento de JSF para generar una
página por primera vez.

Generación de una página JSF

El navegador realiza una petición a una determinada URL en la que reside la página JSF
que se quiere mostrar. En el servidor un servlet que llamamos motor de JSF recibe la
petición y construye un árbol de componentes a partir de la página JSF que se solicita.
Este árbol de componentes replica en forma de objetos Java la estructura de la página JSF
original y representa la estructura de la página que se va a devolver al navegador. Por
ejemplo, si en la página JSF se define un componente de tipo menú con la etiqueta

<h:selectOneMenu>

en el árbol de componentes se construirá un objeto Java de la clase

javax.faces.component.html.HtmlSelectOneMenu

5

Copyright © 2012-2013 Dept. Ciencia de la Computación e IA All rights reserved.

Componentes de presentación

Una vez construido el árbol de componentes, se ejecuta código Java en el servidor para
rellenar los elementos del árbol con los datos de la aplicación. Por último, a partir del
árbol de componentes se genera la página HTML que se envía al navegador.

Los componentes deben mostrar y recoger datos que se obtienen y se pasan a la
aplicación. Este proceso se denomina ligado de datos o data binding. En los frameworks
basados en el servidor el ligado de datos es sencillo porque la definición de la interfaz de
usuario y los datos residen en un mismo sitio. En el caso de JSF 2 la forma de ligar datos
con la interfa