Trabajando con imagenes en liferay 6.1
Click here to load reader
-
Upload
ematiz-tecnologia-sl -
Category
Documents
-
view
843 -
download
3
Transcript of Trabajando con imagenes en liferay 6.1
![Page 1: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/1.jpg)
Liferay versión 6.1Trabajando con imágenes
![Page 2: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/2.jpg)
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.
![Page 3: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/3.jpg)
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.
![Page 4: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/4.jpg)
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()+ "&companyId="+usuario.getCompanyId();
![Page 5: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/5.jpg)
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.
![Page 6: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/6.jpg)
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()+"&companyId="+usuario.getCompanyId();!%>
![Page 7: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/7.jpg)
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>
![Page 8: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/8.jpg)
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í:
![Page 9: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/9.jpg)
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:
![Page 10: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/10.jpg)
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.
![Page 11: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/11.jpg)
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.
![Page 12: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/12.jpg)
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.
![Page 13: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/13.jpg)
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);
![Page 14: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/14.jpg)
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); ... } ...}
![Page 15: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/15.jpg)
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); ... }
...
}
![Page 16: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/16.jpg)
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>...
![Page 17: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/17.jpg)
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.
![Page 18: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/18.jpg)
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.
![Page 19: Trabajando con imagenes en liferay 6.1](https://reader038.fdocuments.co/reader038/viewer/2022100506/555e8768d8b42abd468b52ac/html5/thumbnails/19.jpg)
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>...