Anda di halaman 1dari 6

RichFaces es una librera de componentes visuales para JSF, escrita en su origen por Exadel y adquirida por Jboss.

Adems, RichFaces posee un framework avanzado para la integracin de funcionalidades Ajax en dichos componentes visuales, mediante el soporte de la librera Ajax4JSF. Richfaces es una biblioteca de cdigo abierto basada en Java que permite crear aplicaciones web con Ajax. La singularidad del planteamiento que ofrece es que la peticin Ajax provoca una ejecucin en el servidor y finalmente una renderizacin parcial o total de la pgina del navegador. As, el control de lo que sucede est en el servidor. Richfaces est desarrollado y mantenido por JBoss.

Son caractersticas de RichFaces las siguientes: se integra perfectamente en el ciclo de vida de JSF, incluye funcionalidades Ajax, de modo que nunca vemos el JavaScript y tiene un contenedor Ajax propio, contiene un set de componentes visuales, los ms comunes para el desarrollo de una aplicacin web rica (Rich Internet Application), con un nmero bastante amplio que cubren casi todas nuestras necesidades, soporta facelets, soporta css themes o skins, es un proyecto open source, activo y con una comunidad tambin activa.

RichFaces componentes vienen listos para su uso out-of-the-box, por lo que los desarrolladores pueden ahorrar tiempo de inmediato para aprovechar las caractersticas de los componentes para crear aplicaciones Web que proporcionan mejoras en gran medida la experiencia del usuario ms fiable y ms rpidamente. RichFaces tambin incluye un fuerte apoyo para la skinnability de aplicaciones JSF. RichFaces tambin aprovecha al mximo los beneficios de JSF framework incluyendo, la validacin y conversin de instalaciones, junto con la gestin de esttica y dinmica los recursos.

Ajax4jsf y RichFaces son una biblioteca open source que se integra totalmente en la arquitectura de JSF y hereda las funcionalidades de sus etiquetas dotndolas con tecnologa Ajax de forma limpia y sin aadir cdigo Javascript. Mediante este framework podemos variar el ciclo de vida de una peticin JSF, recargar determinados componentes de la pgina sin necesidad de recargarla por completo, realizar peticiones al servidor automticas, control de cualquier evento de usuario, etc. En definitiva Ajax4jsf y richfaces permite dotar a nuestra aplicacin JSF de contenido mucho ms profesionales con muy poco esfuerzo.(Como nos gusta que se vea arto con muy poco..:D) Funcionamiento del framework. El funcionamiento del framework es sencillo. Mediante sus propias etiquetas se generan eventos que envan peticiones al contenedor Ajax. Estos eventos se pueden ejecutar por pulsar un botn, un enlace, una regin especfica de la pantalla, un cambio de estado de un componente, etc. Esto significa que no nos preocuparemos de crear el cdigo Javascript y el objeto XMLHttpRequest para que enve la peticin al servidor ya que el framework lo har por nosotros.

gestin de tablas
El problema de la gestin de tablas se describe en el siguiente esquema:

La renderizacin de tablas que muestran gran cantidad de datos acarrea varios problemas: 1. Acceso a la base de datos. 2. Almacenamiento de los registros como objetos Java en memoria. 3. Renderizacin de todos los registros en la pgina que ver el usuario en el navegador. La biblioteca de componentes JavaServer Faces de JBoss llamada RichFaces proporciona varios componentes para el manejo de tablas avanzado, proporcionando paginacin, ordenacin y filtrado de datos. Estos mecanismos intentan reducir los problemas de renderizacin provocados por la visualizacin de demasiados elementos en una tabla simultaneamente, este concepto ha sido identificado mediante el punto 3. Los componentes RichFaces que vamos a utilizar son: <rich:dataTable> <rich:column> <rich:dataScroller>

Estos componentes nos permitirn gestionar grandes cantidades de informacin de forma eficiente:

Creando tablas
El componente rich:dataTable permite crear tablas en RichFaces. Este componente es muy parecido al componente <h:dataTable> con dos variaciones: Skinnability: se aplican estilos sobre las tablas de una forma cmoda y sencilla. Soporte Ajax: este componente es capaz de manejar y generar peticiones y respuestas Ajax. Tambin existen atributos para la gestin de eventos.
<rich:dataTable ...> ... </rich:dataTable>

Los atributos ms importantes del componente son: value: la coleccin de datos que se va a mostrar. Se hace referencia a sta mediante lenguaje de expresin. var: nombre de la variable sobre la que se itera.
<rich:dataTable value="#{bean1.datos}" var="factura" ...> ... </rich:dataTable>

Las facetas de la tabla


La definicin de ttulo, cabecera y pie de tabla se realiza mediante facetas: header, footer y caption. Como se puede ver en el ejemplo anterior, se definen cabeceras para cada columna:
<rich:dataTable ...> <f:facet name="header"> ... </facet> ... </rich:dataTable>

Ejemplo
Se pasa a renderizar una tabla de facturas. stas se encuentran almacenadas en una lista definida en un mbean de JavaServer Faces (debe estar declarado en el fichero de configuracin de JSF).
...

public class MBean1 { ... // Lista de facturas que muestra la tabla public List<Factura> facturas; ... }

La clase Factura tiene atributos para cada informacin que se quiere manejar de la factura:
... public class Documento{ private String concepto; private String codigo; private double importe; ...

Paginando tablas
El proceso de paginacin se lleva a cabo mediante el componente <rich:datascroller>. Para realizar la paginacin se utilizan peticiones Ajax. Este componente debe incluirse dentro del pie de la tabla padre o relacionarla mediante su atributo for: - Dentro del pie:
<rich:dataTable ...> <rich:column> ... </rich:column> ... <f:facet name="footer"> <rich:datascroller id="ds"></rich:datascroller> </f:facet> </rich:dataTable>

- Mediante el atributo for: almacena el id de la tabla sobre la que se est actuando.


<rich:dataTable id="tablaEjemplo" ...> <rich:column> ... </rich:column> ... </rich:dataTable> <rich:datascroller id="ds" for="tablaEjemplo" ...></rich:datascroller>

En ambos casos se consigue algo de este estilo:

El componente dataScroller genera una barra numerada que permite recorrer todos los elementos de la tabla.

RichFaces.
< rich:calendar > . Este componente se utiliza para crear elementos de calendario. Demo < rich:comboBox > : Este es un componente, que proporciona combo Box editable. Demo < rich:componentControl > : Este permite llamar a funciones API de JavaScript en los componentes definidos despus de los acontecimientos. Demo < rich:contextMenu > : Este componente se utiliza para la creacin de "multileveled context menus" que se activan despus de que un usuario define un evento (onmouseover, onclick, etc) sobre cualquier elemento de la pgina. Demo < rich:dataFilterSlider > : Un control basado en la accin, Este componente se utiliza para crear un filtrar de los datos de una tabla. Demo < rich:datascroller > : El componente diseado para proporcionar la funcionalidad de los cuadros de desplazamiento utilizando Ajax solicitudes. Demo < rich:columns > : Es un componente, que le permite crear una columnas dinmica. Demo < rich:columnGroup > : Este componente nos permite combinar las columnas en una fila para organizar. Demo < rich:dataGrid > : Este componente permite ver los datos como una rejilla que nos deja elegir los datos. Demo < rich:dataList > : El componente dataList permite prestar los datos de un modo lista. http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.jsf?c=dataList < rich:dataOrderedList > : El componente para ordenar las listas de prestacin que permite elegir los datos. Demo < rich:dataDefinitionList > : Muy pareciada a la anterior. Demo < rich:dataTable > : Este componentes nos permite crear tablas de datos. Demo

< rich:subTable > : El componente se utiliza para la insercin de subtables < rich:dndParam > : Este componente se utiliza para pasar parmetros durante arrastrar y soltar las operaciones. < rich:dragIndicator > : Arrastrar y Soltar. este componente nos permite. crear listas de datos que podemos arrastrar y soltar en otro sector u otra tabla. Demo < rich:dragSupport > : Muy parecido al anteriorDemo < rich:dropSupport > : Muy pareceido a las anteriores.Demo < rich:dropDownMenu > : Este componente se utiliza para crear mltiples mens desplegables. Demo < rich:menuGroup > : Este componente se utiliza para definir un ampliable grupo de temas dentro de una lista emergente u otro grupo. Demo < rich:menuItem > . Este componente se utiliza para la definicin de un nico punto dentro de una lista emergente. Demo < rich:menuSeparator > : Este componente se utiliza para la definicin de un separador horizontal que puede ser colocado entre los grupos o los temas del programa.Demo < rich:fileUpload > : Este componente permite sibir un archivo al servidor. Demo < rich:inplaceInput > : Este componente nos permite desplegar y editar informacin. Demo < rich:inplaceSelect > : Muy parecido al anterior. se utiliza para seleccionar algo asi como un dropDown. Demo < rich:listShuttle > : Este componente se utiliza para mover los temas elegidos de una lista a otra con su facultativo reordenamiento. Demo < rich:message > : El componente se utiliza para hacer un solo mensaje a un componente especfico. Demo

Conclusiones
Los componentes para el manejo de tablas de RichFaces, utilizados de forma estndar, nos permiten mejorar las prestaciones de nuestras tablas en cuanto al nmero de elementos renderizados en nuestras pginas simultneamente, pero en ningn caso, nos permite reducir el nmero de objetos almacenados en memoria ni el tipo de consultas que realizo sobre la base de datos. En prximos arttulos se describe este proceso de mejora.