• Author / Uploaded
• David Riveroy

Citation preview

JavaServer Faces

Implementaciones de JSF • Actualmente existen muchas librerias de etiquetas JSF que complementan la implementacion de la especificacion oficial. • Algunas implementaciones son: – – – – – – – – – – – – –

MyFaces ICEFaces RichFaces OracleADF PrimeFaces Sandbox Trinidad Tomahawk OpenFaces Jenia4Faces Simplica BackBase Tobago

Extensiones de JSF Principales extensiones de JSF son: • •

• •

•

RichFaces. Agrega componentes visuales y soporte para AJAX. ICEFaces. Contiene diversos componentes para interfaces de usuarios más enriquecidas, tales como editores de texto enriquecidos, reproductores de multimedia, entre otros. jQuery4jsf. Contiene diversos componentes sobre la base de uno de los más populares framework javascript jQuery. PrimeFaces. Es una librería muy liviana, todas las decisiones hechas son basadas en mantener a PrimeFaces lo más liviano posible. PrimeFaces es una librería muy simple que no necesita dependencias y configuraciones. OpenFaces. Librería open source que contiene diferentes componentes JSF, un Framework Ajax y un Framework de validación por parte del cliente.

Diferencias entre los mas populares • 1. Disponibilidad de Componentes: • RichFaces – Contiene cerca de 39 componentes, este numero no ha crecido mucho en los ultimos años, cuenta con un subproyecto que nos permite crear facilmente componentes Rich con soporte para Ajax.

• ICEfaces – Contiene cerca de 70 componentes, estos componentes utilizan una combinacion de tecnicas de renderizado del lado del cliente y servidor

• PrimeFaces – Cuenta con 117 componentes, mas HtmlEditors, Charts, date, exportacion a PDF, Excel, etc. – Utiliza JQuery, contiene mas temas que los otros dos (alrededor de 25)

Diferencias entre los mas populares • Facilidad para implementar • RichFaces – No contiene un tutorial de inicio rápido, requiere de una librería principal mas una librería UI mas 3 dependencias obligatorias.

• ICEfaces – Existe una guía de inicio rápido, se requiere de una librería y algunas dependencias (commons)

• PrimeFaces – Todo lo que se tiene que haces es la librería primefacesXXX.jar

Diferencias entre los mas populares • Documentación • RichFaces – Ofrece una guia de usuario, lamentablemente no hay muchos tutoriales sobre la creación de aplicaciones con RichFaces

• ICEfaces – Documentacion bastante extensa, para tener acceso a cualquier cosa es necesario registrarse

• PrimeFaces – Ofrece un enfoque mas pragmático, una guía de usuario mas completa que se convierte en un e-book

PrimeFaces • Para el curso aprenderemos a usar la implementación PrimeFaces

Configuración de PrimeFaces • Descargar las siguientes librerias: – jsf-api.jar: http://mvnrepository.com/artifact/javax.faces/jsf-api – jsf-impl.jar: http://mvnrepository.com/artifact/com.sun.faces/jsfimpl – primefaces-X.X.jar

• Crear un proyecto Web y agregarle las librerías descargadas.

Configuración de PrimeFaces • Configurar el web.xml

Hola Mundo con PrimeFaces • Crear un proyecto Web, agregarle las librerías y crear una pagina JSF con el siguiente código:

Hola Mundo con PrimeFaces • Salida:

Panel tipo Acordeón • Este tipo de componente consiste en tener uno o mas tabs, cada tab puede agrupar cualquier tipo de contenido.

Panel tipo Acordeón

Panel tipo Acordeón (Ajax) • PrimeFaces tiene soporte para Ajax, para usar esta funcionalidad hay que usar el evento “tabChange”

– El objeto TabChangeEvent contiene una referencia del tab activo.

Panel tipo Acordeón (Tabs dinámicos) • Podemos crear un panel tipo acordeón que contenga tabs dinámicos, para esto se utiliza una iteración.

Tabview • Para crear un componente de tipo Tabview, se hace lo siguiente:

Tabview • Salida:

• Es identico al componente de tipo acordeón, solo cambia la orientación y este componente cuenta con mas funciones.

Tabview con efectos • Este componente al igual que otros mas, cuenta con efectos. • Estos efectos se ejecutan al cambiar de Tab, algunos efectos son: – fade, slide, blind, clip, drop, explode, fold, puff, scale

Ejercicios • Probar los ejemplos anteriores. • Probar los efectos distintos. • Crear un panel de tipo acordeón dinámico – Crear un ManagedBean

Componente AjaxBehavior • Este componente es una extension de la etiqueta estandar f:ajax

– En este ejemplo, cada vez que haya un cambio en el campo de texto, una petición Ajax es enviada al server. Cuando la respuesta es recibida el tag outputText con el id muestraTexto será actualizado con el valor tecleado.

Componente AjaxBehavior •

Atributos:

Componente AjaxBehavior • En caso de que queramos mandar a llamar un método que se encuentra en un MBean, tenemos que definir un listener

Componente AjaxBehavior • PrimeFaces soporta eventos causados del lado del cliente.

Componente AjaxStatus • Este componente es un notificador global para peticiones ajax.

• AjaxStatus usa facets que representan los estatus de la peticion

Componente AjaxStatus • Los facets mas usados son start y complete • El facet start será visible una vez que inicie la petición Ajax y permanecerá así hasta que sea completada. • Una vez que la respuesta es recibida, el facet start se ocultará y el facet complete se mostrará.

Componente AjaxStatus • El nombre de los eventos soportados son:

Componente AjaxStatus

Componente AjaxStatus • Eventos personalizados. – Podemos implementar casos avanzados sobre las llamadas on* de los eventos.

Componente AjaxStatus • Ejemplo común usado en los sistemas:

Recomendaciones • Evitar actualizar ajaxStatus para prevenir facets duplicados • Proporcionar una anchura/altura fija a ajaxStatus para evitar el cambio de orientación de la página. • Los componentes como commandButton tiene un atributo (global) para el control de activación de ajaxStatus • AjaxStatus también soporta peticiones ajax de JSF.

Ejercicios • Probar los ejemplos anteriores. • Realizar un formulario y al hacer submit deberá aparecer una imagen tipo “loading”, al regresar la respuesta debera de ocultarse automaticamente.

Autocompletar • El componente autoComplete nos ofrece sugerencias en tiempo real mientras se esta escribiendo • Las sugerencias son cargadas con una llamada a un metodo de nuestro Mbean, la cual toma un unico String como parametro.

Autocompletar

Autocompletar

Mensajes • Mensajes tipo Growl – Tiene la capacidad de mostrar mensajes de tipo FacesMessage – Este componente simplemente reemplaza el componente h:message de JSF

• Mensajes tipo Message. – Este tipo de componentes son altamente personalizables. – Cuentan con cuatro tipo de mensajes: • De tipo INFO, WARNING, ERROR, FATAL

Mensajes • Tipo Growl

Mensajes • Salida tipo Growl

Mensajes • Tipo Message

Mensajes

Mensajes

Mensajes en formularios • ¿Qué hace el siguiente código?

Mensajes en formularios

Ejercicios • Probar los ejercicios anteriores. • Realizar un formulario con un boton de Submit – Al pulsar el boton, mientras viajan los datos, mostrar un componente de tipo loading – Al regresar la peticion, desaparecer el componente anterior.

• Validar el formulario anterior con componentes de tipo Growl y Message. – TIP: crear el boton de la siguiente forma: •