JSF: Manejo de imágenes con PrimeFaces

En este pequeño tutorial, trataremos el manejo de imágenes no sólo desde el punto de vista de JSF, sino tambien almacenando y recuperando la imagen desde la Base de datos utilizando para ellos JPA ( EclipseLink).

En primer lugar explicaré que la implementación de referencia de JSF ( Mojarra ) viene con 4 librerías:

h: HTML

f : Core

ui: Facelets

composite: Librería de componentes compuestos.

Pese a todo ello, la implementación de referencia no me permite trabajar con imágenes que no sean archivos en disco o en las "library" dentro del proyecto.

Entonces, tenía que buscar una extensión ( implementación ) que me permita manipular imagenes como arreglos de bytes en memoria ( que es lo que hace JPA cuando saca la imagen de la Base de Datos ). La librería escogida fue "PrimeFaces" debido a que es ligera y no requiere dependencias de otras librerías.

He ejecutado algunos cambios en la base de datos para que las relaciones entre  las tablas y las entidades sean correctas, Aquí está el nuevo modelo de Base de datos.

PARTE 1 : Grabar una imagen

Como vimos en el ejemplo del Banco, queremos registrar a un nuevo cliente, su dirección y su foto que posteriormente serán mostradas.

Para ellos vamos a cambiar alguna partes de la página registroCliente.xhtml para que se visualice así:

Nota que se capturan los datos del cliente ( corresponden a la entidad "Customer" ).

Luego se capturan los datos de la dirección ( corresponden a la entidad "Custadddress" ).

Finalmente se pide la foto que corresponde a la entidad "Customerinfo".

La página debe sufrir las siguiente modificaciones:

 Notar que se declara una librería "p" para primefaces.

Cuando se trabaja con archivo, el formulario debe incluir el encoding type:

Finalmente, el archivo se maneja con esta linea de código y en donde se observa el campo está asociado a una managed bean llamado UPLOADController ( archivo FileUploadManagedBean.java ).

Cuando se ejecuta el POST, el managed Bean "UsuarioManagedBean" activa el método "registrar". En este método se convierte lo que captura primefaces en un arreglo de bytes para JPA y se ejecuta el insert de 3 tablas en una sola operación gracias a las relaciones de las entidades:

PARTE 2 : Mostrar una imagen

Una vez registrado el usuario, al momento de ingresar al sistema, se debe mostrar lo siguiente:

Para mostrar esto, el managedBean llamado "LOGIN" ( clase java LoginManagedBean.java) debe convertir el arreglo de bytes de JPA a una clase particular de PrimeFaces 

De tal forma que al lanzar la página, se utilice el tag "p" de la forma siguiente:

¿ que te pareció ? ... Bastante fácil con la ayuda de PrimeFaces.

¡¡ Hasta la próxima !!

PD: Si quieres descargar la aplicación completa, da click aquí (pesa como 11 MB)  y por favor no te olvides de dejar un comentario.