0
Liferay versión 6.1
Trabajando con imágenes
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Índice de contenidos
‣ Introducción.
‣ Manejando la fotografí...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Introducción
‣ Se describe a continuación el proceso para man...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ El manejo de la fotogra...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ La url se contruye medi...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ Ejemplo:
<%
Map<String,...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ Ejemplo (cont.):
<div><...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Ejercicio
‣ Diseñar un portlet llamado DatosUsuario-portlet q...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Ejercicio
‣ Si es otro usuario el que accede al portlet la re...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Se pasa a des...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ El manejo de ...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Los conceptos...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ De tal forma ...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ (cont.)
// Pa...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Ejemplo:
<%
L...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Ejemplo (cont...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ El atributo s...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Ejercicio
‣ Diseñar un portlet que sea capaz de mostrar todas...
Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes del portlet
‣ Analizamos una última altern...
Upcoming SlideShare
Loading in...5
×

Trabajando con imagenes en liferay 6.1

899

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Trabajando con imagenes en liferay 6.1"

  1. 1. Liferay versión 6.1 Trabajando con imágenes
  2. 2. 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.
  3. 3. 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.
  4. 4. 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();
  5. 5. 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.
  6. 6. 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();! %>
  7. 7. 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>
  8. 8. 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í:
  9. 9. 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:
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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 idGroup List<IGFolder> carpetas = IGFolderLocalServiceUtil.getFolders(idGroup);
  14. 14. 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); ... } ... }
  15. 15. 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); ... } ... }
  16. 16. 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> ...
  17. 17. 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.
  18. 18. 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.
  19. 19. 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> ...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×