« Atrás

Manejando imágenes con Liferay (2): Image Gallery

Se pasa a describir a continuación el proceso para visualizar imágenes que se encuentran en una galería de imágenes de Liferay.
El proceso es muy simple y muy similar al descrito en el post Manejando imágenes con Liferay (1): User Portrait:

  • Se trabaja con la etiqueta HTML img.
  • Necesitamos construir una url algo especial.

Introducción

El manejo de imágenes de la galería de imágenes de Liferay nos obliga a trabajar con dos clases Utility que proporciona el core de Liferay (liferay-service) y que nos ofrecen servicios para manejar las imágenes y las carpetas de la galería (estos servicios se ofrecen en forma de métodos estáticos):

  • La clase IGImageLocalServiceUtil: nos permite manejar imágenes de la galería de imágenes.
  • La clase IGFolderLocalServiceUtil: nos permite manejar carpetas de la galería de imágenes.
  • Ambas se encuentran en el paquete com.liferay.portlet.imagegallery.service.

Los conceptos relacionados con imágenes y carpetas serán modelados mediante dos interfaces:

  • IGFolder: una referencia de este tipo representa a cualquier carpeta de una galería de imágenes.
  • IGImage: una referencia de este tipo representa a cualquier imagen que se encuentra en una galería de imágenes.
  • Ambas interfaces se encuentran en el paquete com.liferay.portlet.imagegallery.model.

De tal forma que si necesitamos programáticamente recuperar información de las imágenes que se encuentran en una determinada galería deberemos hacer algo de este estilo:

// Importante: debemos conocer el id de la comunidad u
// organización sobre la que se está trabajando.

// Paso 1: Este servicio, mediante su método getFolders
// recupera las carpetas que se encuentran en la galería
// asociada a un determinado idGroup
List<IGFolder> carpetas = IGFolderLocalServiceUtil.getFolders(idGroup);

// Paso 2: Se itera sobre la lista de carpetas y
// se recuperan las imágenes asociadas.
for(int i=0;i<carpetas.size();i++){

    // c representa a cada carpeta.
    IGFolder c = carpetas.get(i);
    // El método getImages recupera en forma de lista
    // todas las imágenes que se encuentran en una 
    // determinada carpeta.
    List<IGImage> imagenes = IGImageLocalServiceUtil.getImages(idGroup,c.getFolderId());
    for(int j=0;j<imagenes.size();j++){
	IGImage imagen = imagenes.get(j);
        ...
    }
    ...
}

Mostrando imágenes de la galería en la vista

Para llevar a cabo esta operación trabajaremos con elementos HTML estándares:

<img src="" width="..." .../>

 

La clave consiste en construir adecuadamente la url que debemos pasar como parámetro en el atributo src de la etiqueta. Esta url se forma de la siguiente:

themeDisplay.getPathImage()

+

/image_gallery parametrizada mediante método get. Los parámetros habitualmente son dos:

  • Identificador de la imagen.
  • Token asociado a la imagen.

Para una página jsp convencional, el código sería algo tal que así:

<h2><%=imagen.getName() %></h2>
<img src="
    <%=themeDisplay.getPathImage()%>/image_gallery?
    img_id=<%= imagen.getLargeImageId() %>
    &t=<%=ImageServletTokenUtil.getToken(imagen.getLargeImageId()) %>
    "
    width="200" />
</div>
 

Lógicamente, hemos tenido que recuperar previamente en la referencia imagen de la galería de imágenes adecuada.

Código ejemplo

Vamos a incluir todo el código en una página jsp simple, de esa forma se muestra la funcionalidad de una manera rápida y compacta (esta forma de codificación es una mala práctica y no se recomienda su uso en proyectos reales):

<%@page import="com.liferay.portal.kernel.servlet.ImageServletTokenUtil"%>
<%@page import="com.liferay.portlet.imagegallery.model.IGImage"%>
<%@page import="com.liferay.portlet.imagegallery.service.IGImageLocalServiceUtil"%>
<%@page import="com.liferay.portlet.imagegallery.model.IGFolder"%>
<%@page import="java.util.List"%>
<%@page import="com.liferay.portal.model.Group"%>
<%@page import="com.liferay.portlet.imagegallery.model.IGFolderConstants"%>
<%@page import="com.liferay.portlet.imagegallery.service.IGFolderLocalServiceUtil"%>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="theme"%>

<portlet:defineObjects />
<theme:defineObjects />

<%
    Group grupo = themeDisplay.getScopeGroup();
    long idGroup = themeDisplay.getScopeGroupId();
    String nombre = themeDisplay.getScopeGroupName();
%>

<h1>Nombre de la comunidad u organizacion: <%=nombre %></h1>

<%   
    // Paso 1: Se recupera la lista de carpetas de la galería de imágenes
    // asociada a la comunidad u organización donde se encuentra
    // desplegado el portlet.
    List<IGFolder>carpetas = IGFolderLocalServiceUtil.getFolders(idGroup);
    for(int i=0;i<carpetas.size();i++){
        // Paso 2: Se recupera cada carpeta y se hace referencia mediante c
        IGFolder c = carpetas.get(i);
        // Paso 3: Para cada carpeta se recuperan todas las imágenes asociadas.
        List<IGImage> imagenes = IGImageLocalServiceUtil.getImages(idGroup,c.getFolderId());
        for(int j=0;j<imagenes.size();j++){
            // Paso 4: La referencia imagen identifica a cada imagen dentro de una determinada
            //         carpeta.
            IGImage imagen = imagenes.get(j);
            %>
            <div>
            <h2><%=imagen.getName() %></h2>
            <img src="<%=themeDisplay.getPathImage()%>/image_gallery?
                 img_id=<%= imagen.getLargeImageId() %>
                 &t=<%=ImageServletTokenUtil.getToken(imagen.getLargeImageId()) %>"
                 width="200" />
            </div>
            <%
        }   
    }
%>

Conclusión

La infraestructura de servicios proporcionada por Liferay nos permite manejar y aprovechar gran cantidad de elementos importantes ofrecidos por la plataforma, como por ejemplo, la galería de imágenes. Debemos aprender a manejarlos y a sacarle el máximo rendimiento en nuestros desarrollos.

Un saludo y espero que sea de vuestro interés.

Comentarios
URL de Trackback:

comments powered by Disqus