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.