trabajando con imagenes en liferay 6.1

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.



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.



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()+ "&companyId="+usuario.getCompanyId();




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




‣ 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()+"&companyId="+usuario.getCompanyId();!%>




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



Ejercicio

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



Ejercicio

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



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.




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




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




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

...

}




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




‣ El atributo src se contruye mediante:

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

‣ La url /image_gallery parametrizada mediante img_id y t.



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.



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

trabajando con imagenes en liferay 6.1

Documents