|
Introducción a la Tecnología JavaServer Faces |
Modelo de Componentes de Interface de Usuario
Los componentes UI JavaServer Faces son elementos configurables y reutilizables que componen el interface de usuario de las aplicaciones JavaServer Faces. Un componente puede ser simple, como un botón, o compuesto, como una tabla, que puede estar compuesta por varios componentes.
La tecnología JavaServer Faces proporciona una arquitectura de componentes rica y flexible que incluye:
- Un conjunto de clases UIComponent para especificar el estado y comportamiento de componentes UI.
- Un modelo de renderizado que define cómo renderizar los componentes de diferentes formas.
- Un modelo de eventos y oyentes que define cómo manejar los eventos de los componentes.
- Un modelo de conversión que define cómo conectar conversores de datos a un componente.
- Un modelo de validación que define cómo registrar validadores con un componente.
Las Clases de los Componentes del Interface de Usuario
La tecnología JavaServer Faces proporciona un conjunto de clases de componentes UI, que especifican toda la funcionalidad del componente, cómo mantener su estado, mantener una referencia a objetos del modelo, y dirigir el manejo de eventos y el renderizado para un conjunto de componentes estándar.
Estas clases son completamente extensibles, lo que significa que podemos extenderlas para crear nuestros propios componentes personalizados.
Todas las clases de componentes UI de JavaServer Faces descienden de la clase UIComponentBase, que define el estado y el comportamiento por defecto de un UIComponent. El conjunto de clases de componentes UI incluido en la última versión de JavaServer Faces es:
- UICommand: Representa un control que dispara actions cuando se activa.
- UIForm: Encapsula un grupo de controles que envían datos de la aplicación. Este componente es análogo a la etiqueta form de HTML.
- UIGraphic: Muestra una imagen.
- UIInput: Toma datos de entrada del usuario. Esta clase es una subclase de UIOutput.
- UIOutput: Muestra la salida de datos en un página.
- UIPanel: Muestra una tabla.
- UIParameter: Representa la sustitución de parámetros.
- UISelectItem: Representa un sólo ítem de un conjunto de ítems.
- UISelectItems: Representa un conjunto completo de ítems.
- UISelectBoolean: Permite a un usuario seleccionar un valor booleano en un control, selececcionándolo o deseleccionándolo. Esta clase es una subclase de UIInput.
- UISelectMany: Permite al usuario seleccionar varios ítems de un grupo de ítems. Esta clase es una subclase de UIInput.
- UISelectOne: Permite al usuario seleccionar un ítem de un grupo de ítems. Esta clase es una subclase de UIInput.
La mayoría de los autores de páginas y de los desarrolladores de aplicaciones no tendrán que utilizar estas clases directamente. En su lugar, incluirán los componentes en una página usando la etiqueta correspondiente al componente. La mayoría de estos componentes se pueden renderizar de formas diferentes. Por ejemplo, un UICommand se puede renderizar como un botón o como un hiperenlace.
El Modelo de Renderizado de Componentes
La arquitectura de componentes JavaServer Faces está diseñada para que la funcionalidad de los componentes se defina mediante las clases de componentes, mientras que el renderizado de los componentes se puede definir mediante un renderizador separado. Este diseño tiene varios beneficios:
- Los escritores de componentes pueden definir sólo una vez el comportamiento de un componente, pero pueden crear varios renderizadores, cada uno de los cuales define una forma diferente de dibujar el componente para el mismo cliente o para diferentes clientes.
- Los autores de páginas y los desarrolladores de aplicaciones pueden modificar la apariencia de un componente de la págona seleccionando la etiqueta que representa la combinación componente/renderizador apropiada.
Un kit renderizador define como se mapean las clases de los componentes a las etiquetas de componentes apropiadas para un cliente particular. La implementación JavaServer Faces incluye un RenderKit estándar para renderizar a un cliente HTML.
Por cada componente UI que soporte un RenderKit, éste define un conjunto de objetos Renderer. Cada objeto Renderer define una forma diferente de dibujar el componente particular en la salida definida por el RenderKit. Por ejemplo, un componente UISelectOne tiene tres renderizadores diferentes. Uno de ellos dibuja el componente como un conjunto de botones de radio. Otro dibuja el componente como un ComboBox. Y el tercero dibuja el componente como un ListBox.
Cada etiqueta JSP personalizada en el RenderKit de HTML, está compuesta por la funcionalidad del componetne, definida en la clase UIComponent, y los atributos de renderizado, definidos por el Renderer. Por ejemplo, las dos etiquetas que podemos ver en la siguiente tabla representan un componente UICommand, renderizado de dos formas diferentes:
| Etiqueta | Se renderiza como... |
|---|---|
| command_button |
|
| command_hyperlink |
|
La parte command de las etiquetas corresponde con la clase UICommand, y especifica la funcionalidad, que es disparar un action. Las partes del botón y el hiperenlace de las etiquetas corresponden a un renderizador independiente, que define cómo dibujar el componente.
La implementación de referencia de JavaServer Faces proporciona una librería de etiquetas personalizadas para renderizar componentes en HTML. Soporta todos los componentes listados en la siguiente tabla:
| Etiqueta | Funciones | Se renderiza como... | Apariencia |
|---|---|---|---|
| command_button | Enviar un formulario a la aplicación | Un elemento <input type=type> HTML, donde el valor del tipo puede ser submit, reset, o image. | Un botón |
| command_hyperlink | Enlaza a otra página o localización en otra págona | Un elemento <a href> HTML. | Un Hiperenlace |
| form | Repesenta un formulario de entrada. Las etiquetas internas del formulario reciben los datos que serán enviados con el formulario. | Un elemento <form> HTML. | No tiene apariencia. |
| graphic_image | Muestra una imagen | Un elemento <img> HTML. | Una imagen. |
| input_date | Permite al usuario introducir una fecha | Un elemento <input type=text> HTML. | Un string de texto, formateado con un ejemplar de java.text.DateFormat |
| input_datetime | Permite al usuario introducir una fecha y una hora. | Un elemento <input type=text> HTML. | Un string de texto, formateado con un ejemplar de java.text.SimpleDateFormat |
| input_hidden | Permite introducir una variable oculta en una página. | Un elemento <input type=hidden> HTML. | Sin apariencia |
| input_number | Permite al usuario introducir un número. | Un elemento <input type=text> HTML. | Un string de texto, formateado con un ejemplar de java.text.NumberFormat |
| input_secret | Permite al usuario introducir un string sin que aparezca el string real en el campo. | Un elemento <input type=password> HTML. | Un campo de texto, que muestra una fila de caracteres en vez del texto real introducido. |
| input_text | Permite al usuario introducir un string. | Un elemento <input type=text> HTML. | Un campo de texto. |
| input_textarea | Permite al usuario introducir un texto multi-líneas. | Un elemento <textarea> HTML. | Un campo de texto multi-línea. |
| input_time | Permite al usuario introducir una hora. | Un elemento <input type=text> HTML. | Un string de texto, formateado con un ejemplar de java.text.DateFormat |
| output_date | Muestra una fecha formateada. | Texto normal. | Un string de texto, formateado con un ejemplar de java.text.DateFormat |
| output_datetime | Muestra una fecha y hora formateados. | Texto normal. | Un string de texto, formateado con un ejemplar de java.text.SimpleDateFormat |
| output_errors | Muestra mensajes de error. | Texto normal | Texto normal |
| output_label | Muestra un componente anidado como una etiqueta para un campo de texto especificado. | Un elemento <label> HTML. | Texto normal. |
| output_message | Muestra un mensaje localizado (internacionalizado). | Texto normal. | Texto normal. |
| output_number | Muestra un número formateado. | Texto normal. | Un string de texto, formateado con un ejemplar de java.text.NumberFormat |
| output_text | Muestra una línea de texto. | Texto normal. | Texto normal. |
| output_time | Muestra una hora formateada. | Texto normal. | Un string de texto, formateado con un ejemplar de java.text.DateFormat |
| panel_data | Itera sobre una colección de datos. |
|
Un conjunto de filas en una tabla |
| panel_grid | Muestra una tabla. | Un elemento <label> HTML. con elementos <tr> y %lt;td> | Una tabla. |
| panel_group | Agrupa un conjunto de paneles bajo un padre. |
|
Una fila en una tabla |
| panel_list | Muestra una tabla de datos que vienen de una collection, un array, un iterator, o un map. | Un elemento <table> HTML. con elementos <tr> y %lt;td> | Una tabla. |
| selectboolean_checkbox | Permite al usuario cambiar el valor de una elección booleana. | Un elemento <input type=checkbox> HTML. | Un checkBox. |
| selectitem | Representa un ítem de una lista de ítems en un componente UISelectOne. | Un elemento <option> HTML. | Sin apariencia. |
| selectitems | Representa una lista de ítems en un componente UISelectOne. | Un elemento <option> HTML. | Sin apariencia. |
| selectmany_checkboxlist | Muestra un conjunto de checkbox, en los que el usuario puede seleccionar varios. | Un conjunto de elementos <input> HTML. | Un conjunto de CheckBox. |
| selectmany_listbox | Permite a un usuario seleccionar varios ítems de un conjunto de ítems, todos mostrados a la vez. | Un conjunto de elementos <select> HTML. | Un ListBox |
| selectmany_menu | Permite al usuario selecionar varios ítems de un grupo de ítems. | Un conjunto de elementos <select> HTML. | Un comboBox. |
| selectone_listbox | Permite al usuario seleccionar un ítem de un grupo de ítems. | Un conjunto de elementos <select> HTML. | Un listBox. |
| selectone_menu | Permite al usuario seleccionar un ítem de un grupo de ítems. | Un conjunto de elementos <select> HTML. | Un comboBox. |
| selectone_radio | Permite al usuario seleccionar un ítem de un grupo de ítems. | Un conjunto de elementos <input type=radio> HTML. | Un conjunto de botones de radio. |
Modelo de Conversión
Una aplicación JavaServer Faces opcionalmente puede asociar un componente con datos del objeto del modelo del lado del servidor. Este objeto del modelo es un componente JavaBeans que encapsula los datos de un conjunto de componentes. Una aplicación obtiene y configura los datos del objeto modelo para un componente llamando a las propiedades apropiadas del objeto modelo para ese componente.
Cuando un componente se une a un objeto modelo, la aplicación tiene dos vistas de los datos del componente: la vista modelo y la vista presentación, que representa los datos de un forma que el usuario pueda verlos y modificarlos.
Una aplicación JavaServer Faces debe asegurarse que los datos del componente puedan ser convertidos entre la vista del modelo y la vista de presentación. Esta conversión normalmente la realiza automáticamente el renderizador del componente.
En algunas situaciones, podríamos querer convertir un dato de un componente a un tipo no soportado por el renderizador del componente. Para facilitar esto, la tecnología JavaServer Faces incluye un conjunto de implementaciones estándar de Converter que nos permite crear nuestros conversores personalizados. La implementación de Converter convierte los datos del componente entre las dos vistas.
Modelo de Eventos y Oyentes
Un objetivo de la especificación JavaServer Faces es mejorar los modelos y paradigmas existentes para que los desarrolladores se puedan familiarizar rápidamente con el uso de JavaServer Faces en sus aplicaciones. En este espíritu, el modelo de eventos y oyentes de JavaServer Faces mejora el diseño del modelo de eventos de JavaBeans, que es familiar para los desarrolladores de GUI y de aplicaciones Web.
Al igual que la arquitectura de componentes JavaBeans, la tecnologiaa JavaServer Faces define las clases Listener y Event que una aplicación puede utilizar para manejar eventos generados por componentes UI. Un objeto Event identifica al componente que lo generó y almacena información sobre el propio evento. Para ser notificado de un evento, una aplicación debe proporcionar una implementación de la clase Listener y registrarla con el componente que genera el evento. Cuando el usuario activa un componente, como cuando pulsa un botón, se dispara un evento. Esto hace que la implementación de JavaServer Faces invoque al método oyente que procesa el evento. JavaServer Faces soporta dos tipos de eventos: eventos value-changed y eventos action.
Un evento value-changed ocurre cuando el usuario cambia el valor de un componente. Un ejemplo es seleccionar un checkbox, que resulta en que el valor del componente ha cambiado a true. Los tipos de componentes que generan estos eventos son los componentes UIInput, UISelectOne, UISelectMany, y UISelectBoolean.
Este tipo de eventos sólo se dispara si no se detecta un error de validación.
Un evento action ocurre cuando el usuario pulsa un botón o un hiperenlace. El componente UICommand genera este evento.
Modelo de Validación
La tecnología JavaServer Faces soporta un mecanismo para validar el dato local de un componente durante la fase del Proceso de Validación, antes de actualizar los datos del objeto modelo.
Al igual que el modelo de conversión, el modelo de validación define un conjunto de clases estándar para realizar chequeos de validación comunes. La librería de etiquetas jsf-core también define un conjunto de etiquetas que corresponden con las implementaciones estándar de Validator.
La mayorría de las etiquetas tienen un conjunto de atributos para configurar las propiedades del validador, como los valores máximo y mínimo permitidos para el dato del componente. El autor de la página registra el validador con un componente anidando la etiqueta del validador dentro de la etiqueta del componente.
Al igual que el modelo de conversión, el modelo de validación nos permite crear nuestras propias implementaciones de Validator y la etiqueta correspondiente para realizar validaciones personalizadas.
 |
 |
 |
Publicado por: Ricard Lou Torrijos |
|
|
