Introducción a RichFaces

Introduccion a RichFaces

El 5 de marzo de 2007, Red Hat y Exadel anunciaron una asociación estratégica para desarrollar open-source y publicar Exadel's Ajax4jsf, RichFaces, y Studio Pro products de JBoss as JBoss Ajax4jsf, JBoss RichFaces, and JBoss Developer Studio.

RichFaces es una biblioteca de componentes para JSF y un avanzado framework para la integración de AJAX con facilidad en la capacidad de desarrollo de aplicaciones de negocio. RichFaces componentes vienen listos para su uso out-of-the-box, por lo que los desarrolladores pueden ahorrar tiempo de inmediato para aprovechar las características de los componentes para crear aplicaciones Web que proporcionan mejoras en gran medida la experiencia del usuario más fiable y más rápidamente. RichFaces también incluye un fuerte apoyo para la skinnability de aplicaciones JSF. RichFaces también aprovecha al máximo los beneficios de JSF framework incluyendo, la validación y conversión de instalaciones, junto con la gestión de estática y dinámica 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 dotándolas con tecnología Ajax de forma limpia y sin añadir código Javascript. Mediante este framework podemos variar el ciclo de vida de una petición JSF, recargar determinados componentes de la página sin necesidad de recargarla por completo, realizar peticiones al servidor automáticas, control de cualquier evento de usuario, etc. En definitiva Ajax4jsf y richfaces permite dotar a nuestra aplicación JSF de contenido mucho más 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 envían peticiones al contenedor Ajax. Estos eventos se pueden ejecutar por pulsar un botón, un enlace, una región específica de la pantalla, un cambio de estado de un componente, etc. Esto significa que no nos preocuparemos de crear el código Javascript y el objeto XMLHttpRequest para que envíe la petición al servidor ya que el framework lo hará por nosotros.

Etiqueta.
Ajax4jsf

< aj4:support > : Etiqueta que se puede añadir a cualquier otra etiqueta JSF para dotarla de funcionalidad Ajax. Permite al componente generar peticiones asíncronas mediante eventos (onclick, onblur, onchange,...) y actualizar campos de un formulario de forma independiente, sin recargar toda la página.

< aj4:poll > : Realiza cada cierto tiempo una petición al servidor.

< aj4:commandButton > : Botón de envío de formulario similar a de JSF. La principal diferencia es que se puede indicar que únicamente actualice ciertos componentes evitando la recarga de todo el formulario.

< aj4:commandLink > : Comportamiento similar a < aj4:commandButton > pero en un link.

< aj4:htmlCommandLink > : Muy parecida a la etiqueta anterior con pequeñas diferencias en la generación de links y cuando se utilizan etiquetas < f:param >.

< aj4:region > : Determina un área a decodificar en el servidor después de la petición Ajax.

< aj4:status > : Muestra el estado de la petición Ajax. Hay 2 estados posibles: procesando petición y petición terminada. Por ejemplo mientras dure el proceso de la llamada al servidor y la evaluación de la petición se puede mostrar el texto "procesando..." y cuando termine la petición y se devuelva la respuesta a la página se cambia el texto por "petición finalizada".

< aj4:form > : Similar al < h:form > con la diferencia de que se puede enviar previamente el contenido al contenedor Ajax.

< aj4:actionparam > : Etiqueta que combina la funcionalidad de la etiqueta < f:param > y < f:actionListener >.

< aj4:outputPanel > : Se utiliza para agrupar componentes para aplicarles similares propiedades, por ejemplo a la hora de actualizar sus valores tras la petición Ajax.

< aj4:ajaxListener > : Similar a la propiedad actionListener o valueChangeListener pero con la diferencia de que la petición se hace al contenedor Ajax.

< aj4:jsFunction > : Se utiliza para pasarle un valor automáticamente a una función Javascript tras recibirlo del servidor.

< aj4:loadScript > : Inserta en la página las funciones Javascript contenidas en un archivo *.js

< aj4:loadStyle > : Igual que la etiqueta anterior pero para una hoja de estilos *.css

< aj4:loadBundle > : Similar al < f:loadBundle > de JSF.

< aj4:log > : Carga en la página una consola que muestra las trazas de los logs que devuelve el contenedor Ajax.

< aj4:include > : Se utiliza para incluir en la página el contenido de otra de acuerdo a la definición que se haga en las reglas de navegación del faces-config. Es decir la siguiente página a cargar de acuerdo a la navegación especificada se cargaría en la vista actual.

< aj4:repeat > : Etiqueta para iterar sobre una colección y mostrar todos sus campos.

< aj4:keepAlive > : Permite mantener un bean en un estado determinado durante peticiciones.

< aj4:mediaOutput > : Componente que permite mostrar contenido multimedia como imágenes, vídeos, archivos sonoros, etc.

Para conocer mucho más sobre el Ajax4jsf documentación oficial.


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 después de los acontecimientos. Demo

< rich:contextMenu > : Este componente se utiliza para la creación de "multileveled context menus" que se activan después de que un usuario define un evento (onmouseover, onclick, etc) sobre cualquier elemento de la página. Demo

< rich:dataFilterSlider > : Un control basado en la acción, Este componente se utiliza para crear un filtrar de los datos de una tabla. Demo

< rich:datascroller > : El componente diseñado para proporcionar la funcionalidad de los cuadros de desplazamiento utilizando Ajax solicitudes. Demo

< rich:columns > : Es un componente, que le permite crear una columnas dinámica. 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 prestación 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 inserción de subtables

< rich:dndParam > : Este componente se utiliza para pasar parámetros 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 múltiples menús 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 definición de un único punto dentro de una lista emergente. Demo

< rich:menuSeparator > : Este componente se utiliza para la definición 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 información. 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 específico. Demo

Para conocer mucho más sobre:
RichFavesdocumentación oficial.
Ejemplos

paginas de referencia..
http://www.jboss.org/jbossajax4jsf/docs/devguide/en/html/index.html
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf


Un Excelente Manual de RichFaces.

http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/index.html

No hay comentarios: