Vistas de página en total

miércoles, 11 de febrero de 2015

Mostrar las imagenes que almacenamos en la DB con un dataGrid de Primefaces

Primero que nada deberan haber revisado el post de subir imagenes al servidor con primefaces almacenando la ruta en la BD para poder mostrarla, primero que nada me costo trabajo hacer que se muestren las imagenes ya que no las tengo en el proyecto almacenadas sino en el disco duro necesitamos crear el archivo en este caso la imagen con una clase que extienda de HttpServlet para pasarle un parametro que contrenda la ruta de la imagen que queremos mostrar y con esa ruta que cree la imagen para su visualizacion.

En una variable String almacenamos la ruta del archivo mediente un parametro:

String file = request.getParameter("file");

Mediante un BufferedInputStream que crea una matriz indefinida a medida que lee los bytes de flujo de la imagen que se mostrara y mediante el FileInputStream que se encarga de crear el objeto o la imagen en este caso, retomamos lo que trate de decir haremos que se cree la imagen y despues que se obtengan los bytes para luego mostrarlo en el dataGrid que se encarga de cargarlo mediente los byte, recordemos que el file que recibe es del string que obtiene la ruta completa de la imagen y la linea quedaria asi:

 BufferedInputStream in = new BufferedInputStream(new FileInputStream(file));

Esto solo fue para obtener la imagen de la ruta ahora vamos a contener el contenido en este caso el tamaño que se lee en bytes que esta almacenada en la variable "in" de BufferedInputStream, crearemos un arreglo de bytes y le pasamos los bytes de la imagen seleccionada al arreglo mediente el metodo available que devuelve una estimación del número de bytes que se pueden leer de este flujo de entrada sin bloquear por la siguiente invocación de un método para el flujo de entrada. Despues leemos los bytes y cerramos el codigo seria de esta forma:

byte[] bytes = new byte[in.available()];
 in.read(bytes);
 in.close();

Por ultimo escribimos en el Response de HttpServlet para escribirlo o en este caso mostrar la imagen:

 response.getOutputStream().write(bytes);

  El codigo de la clase la muestro a continuacion:

public class DynamicImageServlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        try {


            // Obtenemos la imagen
            String file = request.getParameter("file");
            System.out.println("Ruta-->" + file);
            BufferedInputStream in = new BufferedInputStream(new FileInputStream(file));
            

            // Obtenemos el contenido de la imagen
            byte[] bytes = new byte[in.available()];
            in.read(bytes);
            in.close();
            

            // Escribimos el contenido de la imagen
            response.getOutputStream().write(bytes);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}


Y en nuestro xhtml donde vayamos a mostrar las imagenes pondriamos en nuestro dataGrid el valor de donde obtendra la imagen en mi caso es una lista ya que puede haber mas de una imagen en mi BD el metodo para obtener todos las rutas de las imagenes la debemos tener en el ManagedBean declaramos la variable de tipo List del mismo tipo de la Clase donde estan las imagenes almacenadas en la BD:

private List<Imagen> listResource;

y agregamos los getters y setters:

public List<Imagen> getListResource() {
        return listResource;
    }

    public void setListResource(List<Imagen> listResource) {
        this.listResource = listResource;
    }


Y nuestra lista se manda como valor en el DataGrid, en la parte de p:graphicImage se manda el valor de la imagen "images/dynamic/?file" en donde file es el parametro donde creamos la clase que puse anteriormente

<p:dataGrid var="mag" value="#{managedBeanViewResources.listResource}" columns="6" rows="12" paginator="true" id="dataResource" paginatorTemplate="{CurrentPageReport}  {FirstPageLink}{PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  rowsPerPageTemplate="12,16,20" lazy="true" emptyMessage="Ninguna Imagen encontrada" >
                        <f:facet name="header">
                            Banco de imagenes
                        </f:facet>
                            <h:panelGrid columns="1" style="padding: 5px;">
                                <p:commandLink update=":formListAll:resourceDetail" oncomplete="PF('resourceDialog').show()" title="Imagen">
                                    <p:graphicImage id="listImagen" value="images/dynamic/?file=#{mag.ruta}" rendered="#{mag.ocultar == 'No'}" style="height: 150px; width: 205px"/>
                                    <f:setPropertyActionListener value="#{mag}" target="#{managedBeanViewResources.resource}" />
                                </p:commandLink>
                            </h:panelGrid>
                    </p:dataGrid>


1 comentario:

  1. Amigo es muy buena tu ayda pero seria bueno que hicieras videos sobre esta magnifica explicacion

    ResponderEliminar