Controles RichFaces incluidos en el UI

A continuación, se detallan aspectos importantes en la funcionalidad y estética de los controles de interfaz de usuario de RichFaces, utilizados en la aplicación UI generada por el arquetipo madeja-arquetipo-richfaces.

Layout

Las principales áreas de la pantalla del usuario que son controladas mediante el componente rich:layoutPanel son:

• Cabecera
• Contenido
• Pie de Página

El layout ha sido diseñado con la intención de la reutilización de las partes generales de toda la aplicación, para así evitar el retrabajo, copiar/pegar código y estilos CSS dispersos por todas las páginas.

El layout está basado en los controles rich:layout y rich:layoutPanel de RichFaces y en las funcionalidades de composición e inclusión de Facelets.

Con las etiquetas de Facelets ui:insert y ui:define se tiene una plantilla conformada por varias páginas xhtml para facilitar su mantenimiento.

Cabecera

Está conformada por la imagen de la dirección que corresponda y por la imagen del proyecto. Incluye también el menú de navegación horizontal, con los iconos genéricos y muestra la ruta de la página actual.

Contenido

El contenido está dividido principalmente en dos áreas, el contenido superior e inferior.

Estas dos áreas serán las áreas de trabajo, es decir, donde el usuario tiene la mayor interactividad con la aplicación.

La plantilla también contempla las áreas izquierda y derecha de cada contenido, aunque son menos utilizadas, es conveniente considerarlas para mostrar al usuario por ejemplo, información adicional.

Pie de Página

En el pie de página solo se muestra texto informativo.

Partes del layout

En resumen, la plantilla de RichFaces está dividida en las partes que muestra la siguiente imagen:

La mayor ventaja de diseñar plantillas con facelets y con componentes de RichFaces rich:layout y rich:layoutPanel, es que la distribución del contenido puede ser distinta, según las necesidades de la aplicación, por ejemplo, como se muestra en la siguiente imagen:

Menú

El control rich:toolBar es una barra horizontal que permite incluir elementos de tipo menú con varias opciones desplegables y elementos de tipo botón con icono. La linea vertical que separa cada elemento es el atributo "itemSeparator="line".

Los diferentes elementos que pueden estar contenidos en esta barra horizontal son de tres tipos:

• rich:dropDownMenu

Este control se utiliza cuando se desea que se desplieguen hacia abajo más opciones de menú.

• rich:menuItem

Este control se utiliza cuando se desea que el elemento sea un botón de navegación, es decir, cuando el usuario haga click en el elemento navegará a otra página de la aplicación. Los elementos de tipo rich:menuItem pueden ser agrupados en categorias mediante el control rich:menuGroup.

• rich:toolBarGroup

Este control agrupa botones con imagen, tal es el caso de los botones generales de Inicio, Contacta, Ayuda y Cerrar.

Lista

El control rich:dataTable muestra una lista de elementos en forma de tabla, si a este control se le asigna un paginador rich:datascroller, la tabla se mostrará paginada. El número de registros mostrados por página es customizable mediante el atributo rows del control rich:dataTable.

El listado incluye los controles de interfaz que comúnmente deberá tener un listado:

Ordenamiento por columnas

Las columnas del control rich:dataTable son de tipo rich:column, cada columna tiene un facet de tipo header donde se indica el contenido del encabezado de la columna, generalmente texto, pero puede ser cualquier elemento JSF.

El ordenamiento que proporciona RichFaces out-of-the-box es alfabético o numérico ascendente y descendente. Simplemente indicando en la propiedad sortBy la expresión EL (expression language) del valor por el que será ordenada esa columna.

En caso de requerir un ordenamiento complejo, será necesario indicar el atributo selfSorted="false" y en el atributo sortOrder la expresión EL del método del bean que realizará el ordenamiento de los elementos.

Edición de elemento

La edición del valor de los elementos puede ser de dos tipos, en la misma tabla o en el formulario. El control rich:inplaceInput nos permite obtener el efecto de que un texto de salida, se convierta en un campo de entrada y que se muestre una pequeña marca de que el valor ha sido cambiado.

La edición tradicional mediante campos de formulario es con el icono de consulta/edición.

Eliminación de elemento

El control a4j:commandLink permite realizar una llamada ajax al método del bean encargado de eliminar el elemento de la lista. El atributo reRender indica el nombre del control que deberá ser refrescado, en este caso es la tabla completa, sin notar el refresco completo de la pantalla sino únicamente de la lista.

Vista rápida de elemento

El control rich:toolTip permite mostrar mayor información del elemento sobre el que está el puntero del ratón.

Árbol

El control rich:tree muestra un árbol de opciones, es un componente que muestra datos jerárquicos como un grafo ordenado, consistente en ramas y nodos. Permite la construcción dinámica y estática de hojas para el árbol, también proporciona información sobre la ruta del nodo seleccionado.

El modo de switching puede ser server, ajax y client. Es recomendable que sea ajax ya que guarda el estado de los nodos abiertos y evita que el usuario vea un refresco total de la pantalla.

Los iconos son customizables ya que el control rich:treeNode tiene los atributos iconLeaf e icon que son las imágenes a mostrar por cada nodo.

También se puede customizar el icono a mostrar cuando la rama está cerrada o abierta, esto es con los atributos iconExpanded e iconCollapsed.

El árbol está inmerso en un rich:panel con la intención de que en cuanto se abran varias ramas y se desborde en tamaño, de manera automática aparezcan las barras de desplazamiento (scrollbar) ya sea la vertical, la horizontal o ambas.

Es una propiedad CSS estandar overflow:auto que se le indica al atributo bodyClass del control rich:panel.

Formulario

Los controles del formulario, son elementos JSF estándar: h:form, h:outputText y h:inputText. Los elementos RichFaces que ofrecen mayores funcionalidades que los estándar son rich:calendar para las fechas con el Locale y el formato que se desee y rich:inplaceInput para que un texto de salida se convierta en un campo de entrada al hacer click sobre el texto. El estilo de las etiquetas se indica mediante el atributo styleClass.

Pestañas

Mediante el control rich:tabPanel de RichFaces, es posible la creación de pestañas. Es posible crear pestañas dinámicamente asignándole un objeto del tipo org.richfaces.component.html.HtmlTabPanel al atributo "binding" del control rich:tabPanel.

Tiene 3 modos de switching entre pestañas: servidor, ajax y cliente.

La utilización de pestañas (tabs) en las aplicaciones es importante, ya que al usuario se le muestra de una manera categorizada o agrupada en capas solapadas una extensa cantidad de datos de entrada o de salida, por lo que la página no se mostrará sobrecargada de información.

Ventana Modal

El contro rich:modalPanel permite asignar acciones a distintos eventos JavaScript: onbeforeshow, onhide, onmove, onresize, onmaskmouseout. Se le puede especificar el ancho y alto mínimos en pixeles y puede guardar el estado del contenido de la ventana modal después de hacer submit. También mediante una función de javaScript es posible controlar la visibilidad de la ventana.

El componente cambia de apariencia visual según los atributos style y styleClass. Por defecto coge la combinación de colores del parámetro del bean que gestiona el skin de la aplicación.

El usuario tiene que aceptar, cancelar o cerrar la ventana emergente que flota encima de la ventana principal ya que no se le permitirá interactuar con la ventana padre.