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 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 ms
enriquecidas, tales como editores de texto enriquecidos, reproductores de
multimedia, entre otros.
jQuery4jsf. Contiene diversos componentes sobre la base de uno de los ms
populares framework javascript jQuery.
PrimeFaces. Es una librera muy liviana, todas las decisiones hechas son basadas PrimeFaces. Es una librera muy liviana, todas las decisiones hechas son basadas
en mantener a PrimeFaces lo ms liviano posible. PrimeFaces es una librera muy
simple que no necesita dependencias y configuraciones.
OpenFaces. Librera open source que contiene diferentes componentes JSF, un
Framework Ajax y un Framework de validacin 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 aos, 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 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 rpido, requiere de una librera
principal mas una librera UI mas 3 dependencias obligatorias.
ICEfaces
Existe una gua de inicio rpido, se requiere de una librera y
algunas dependencias (commons)
PrimeFaces
Todo lo que se tiene que haces es la librera primefacesXXX.jar
Diferencias entre los mas populares
Documentacin
RichFaces
Ofrece una guia de usuario, lamentablemente no hay muchos
tutoriales sobre la creacin de aplicaciones con RichFaces
ICEfaces
Documentacion bastante extensa, para tener acceso a cualquier
cosa es necesario registrarse
PrimeFaces
Ofrece un enfoque mas pragmtico, una gua de usuario mas
completa que se convierte en un e-book
PrimeFaces
Para el curso aprenderemos a usar la implementacin
PrimeFaces
Configuracin 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/jsf-
impl
primefaces-X.X.jar
Crear un proyecto Web y agregarle las libreras descargadas.
Configuracin de PrimeFaces
Configurar el web.xml
Hola Mundo con PrimeFaces
Crear un proyecto Web, agregarle las libreras y crear una
pagina JSF con el siguiente cdigo:
Hola Mundo con PrimeFaces
Salida:
Panel tipo Acorden
Este tipo de componente consiste en tener uno o mas tabs,
cada tab puede agrupar cualquier tipo de contenido.
Panel tipo Acorden
Panel tipo Acorden (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 Acorden (Tabs dinmicos)
Podemos crear un panel tipo acorden que contenga tabs
dinmicos, para esto se utiliza una iteracin.
Tabview
Para crear un componente de tipo Tabview, se hace lo siguiente:
Tabview
Salida:
Es identico al componente de tipo acorden, solo cambia la
orientacin 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 fade, slide, blind, clip, drop, explode, fold, puff, scale
Ejercicios
Probar los ejemplos anteriores.
Probar los efectos distintos.
Crear un panel de tipo acorden dinmico
Crear un ManagedBean 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 peticin 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 mtodo 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 peticin Ajax y
permanecer as hasta que sea completada.
Una vez que la respuesta es recibida, el facet start se ocultar y el 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 comn usado en los sistemas:
Recomendaciones
Evitar actualizar ajaxStatus para prevenir facets duplicados
Proporcionar una anchura/altura fija a ajaxStatus para evitar
el cambio de orientacin de la pgina.
Los componentes como commandButton tiene un atributo Los componentes como commandButton tiene un atributo
(global) para el control de activacin de ajaxStatus
AjaxStatus tambin 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. 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. 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 cdigo?
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. 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:
<p:commandButton value="Submit" update="panel" actionListener="#
{bean.guardarDatos}" />