Liferay versión 6.1Trabajando con imágenes

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Índice de contenidos

‣ Introducción.

‣ Manejando la fotografía del usuario.

‣ Manejando imágenes de la galería de imágenes.

‣ Manejando imágenes del portlet.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Introducción

‣ Se describe a continuación el proceso para manejar imágenes de diferentes ámbitos dentro de Liferay.

‣ La visualización de dichas imágenes se realiza mediante la etiqueta HTML img.

‣ Se pasa a describir cómo parametrizar su atributo src para que Liferay muestre la imagen adecuada en las situaciones más habituales.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando la fotografía del usuario

‣ El manejo de la fotografía asociada a un usuario se lleva a cabo construyendo una url algo especial:

‣ Esta url se construye de la siguiente forma:

<img ... src="<%= rutaEspecial %>" />

String rutaEspecial = themeDisplay.getPathImage()+ "/user_portrait?screenName="+usuario.getScreenName()+ "&amp;companyId="+usuario.getCompanyId();

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando la fotografía del usuario

‣ La url se contruye mediante:

‣ Ruta de las imágenes: themeDisplay.getPathImage().

‣ Ruta para hacer peticiones de imágenes /user_portrait pasando como parámetro el nombre en pantalla del usuario y el companyId.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando la fotografía del usuario

‣ Ejemplo:

<%Map<String, String> info = (Map<String, String>) renderRequest.getAttribute(PortletRequest.USER_INFO);!long userId = Long.parseLong(info.get("liferay.user.id") .toString());

User usuario = UserLocalServiceUtil.getUser(userId);

...

long idFoto = usuario.getPortraitId();int tam = i.getSize();!String ruta = themeDisplay.getPathImage()+"/user_portrait?screenName="+usuario.getScreenName()+"&amp;companyId="+usuario.getCompanyId();!%>

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando la fotografía del usuario

‣ Ejemplo (cont.):

<div><img src="<%=ruta%>"></img></div><div> <h1> <label>Identificador de usuario:</label> <%= userId %> </h1></div><div><h2><label>Nombre: </label><%=nombre%></h2></div><div><h2><label>Titulo: </label><%=titulo%></h2></div>

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Ejercicio

‣ Diseñar un portlet llamado DatosUsuario-portlet que muestre la información del usuario que está accediendo al portal, algo tal que así:

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Ejercicio

‣ Si es otro usuario el que accede al portlet la renderización, lógicamente, se ve modificada:

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ Se pasa a describir a continuación el proceso para visualizar imágenes que se encuentran en la galería de imágenes.

‣ El proceso es muy simple y muy similar al anteriormente descrito:

‣ Se trabaja con la etiqueta HTML img.

‣ Necesitamos construir una url algo especial.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ 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.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ 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.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ 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 idGroupList<IGFolder> carpetas = IGFolderLocalServiceUtil.getFolders(idGroup);

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ (cont.)

// 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); ... } ...}

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ Ejemplo:

<%List<IGFolder> carpetas = IGFolderLocalServiceUtil.getFolders(idGroup);

for(int i=0;i<carpetas.size();i++){

! IGFolder c = carpetas.get(i);! List<IGImage> imagenes = IGImageLocalServiceUtil. getImages(idGroup,c.getFolderId());! for(int j=0;j<imagenes.size();j++){! ! IGImage imagen = imagenes.get(j); ... }

...

}

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ Ejemplo (cont.):

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

</div>...

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes de la galería de imágenes.

‣ El atributo src se contruye mediante:

‣ themeDisplay.getPathImage(): ruta de la imágenes.

‣ La url /image_gallery parametrizada mediante img_id y t.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Ejercicio

‣ Diseñar un portlet que sea capaz de mostrar todas las imágenes que se encuentran en la galería de imágenes de la comunidad u organización donde se despliega.

Trabajando con imágenes

Preparado por Jesús Salinas Revelles

Manejando imágenes del portlet

‣ Analizamos una última alternativa, el manejo de imágenes que se encuentran dentro del proyecto web del portlet.

‣ Para hacer referencia a la ruta del contexto de un proyecto específico, se debe utilizar el método getContextPath() asociado a la petición, por ejemplo:

‣ Nota: la imagen download.png se encuentra dentro de la carpeta imagenes.

...<a href="<%=peticionFichero %>"> <img alt="Descarga" src= "<%=renderRequest.getContextPath()%>/imagenes/download.png"></a>...