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.
muy bueno..!!! pero tengo problemas en el datatable con paginacion si tueviera algun ejemplo seria util
ResponderEliminarAqui un ejemplo :
ResponderEliminarhttp://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Primefaces_DataTable
/templates/commonLayout.xhtml @13,51 Can't find bundle for base name MyMessages, locale es
ResponderEliminarMe sale este error ni bien lo compilo ,he revisado el face-config lo registre pero nada si pudiese ayudarme a saber en que estoy fallando ... plzz
en el face-config.xml cambiar el default-languaje que dice : es
ResponderEliminarPor es_PE
Saludos
Interesante, profe!!! Cuando hace uno de Prime con Google Maps!!!
ResponderEliminarMuy interesante profe.... pero creo que falta mencionar el jar que se tiene que importar y lo que se agrega en el web.xml...xD
ResponderEliminarBuenas tardes, me sale el siguiente error: /templates/commonLayout.xhtml @13,51 Can't find bundle for base name MyMessages, locale es, muchas gracias.
ResponderEliminaren el face-config.xml cambiar el default-languaje que dice : es por es_PE
ResponderEliminarEl error es por el idioma ...