bloggers bloggers

Vi è mai capitato di dover gestire l'avatar dell'utente da una portlet custom? Se lo avete fatto e non ci siete saltati fuori ecco come fare con poco sforzo.

Innazitutto diciamo che esiste una comodissima taglib di portale che fa già tutto (o quasi) quello che serve: liferay-ui:logo-selector. L'unica difficoltà è capire come configurarla correttamente.

Tutto il codice da scrivere andrà inserito unicamente all'interno della JSP; supponiamo quindi che:

• user sia l'utente corrente (tipicamente ottenibile mediante themeDisplay.getUser());
• selUser sia l'utente di cui gestire l'avatar.

<c:choose>
   <c:when test='<%=UsersAdminUtil.hasUpdateFieldPermission(permissionChecker, user, selUser, "portrait") %>'>
      <liferay-portlet:renderURL
         plid="<%=PortalUtil.getControlPanelPlid(renderRequest) %>"
         portletName="<%=PortletKeys.MY_ACCOUNT %>"
         refererPlid="<%=themeDisplay.getPlid() %>"
         var="editUserPortraitURL"
         windowState="<%=LiferayWindowState.POP_UP.toString() %>"
      >
         <liferay-portlet:param name="struts_action" value="/my_account/edit_user_portrait" />
         <liferay-portlet:param name="redirect" value="<%=PortalUtil.getCurrentURL(request) %>" />
         <liferay-portlet:param name="p_u_i_d" value="<%=String.valueOf(selUser.getUserId()) %>" />
         <liferay-portlet:param name="portrait_id" value="<%=String.valueOf(selUser.getPortraitId()) %>" />
      </liferay-portlet:renderURL>

      <liferay-ui:logo-selector
         currentLogoURL="<%=selUser.getPortraitURL(themeDisplay) %>"
         defaultLogoURL="<%=UserConstants.getPortraitURL(themeDisplay.getPathImage(), selUser.isMale(), 0) %>"
         editLogoURL="<%=editUserPortraitURL %>"
         imageId="<%=selUser.getPortraitId() %>"
         logoDisplaySelector=".user-logo"
      />

      <script type="text/javascript">
      function _<%= PortletKeys.MY_ACCOUNT %>_changeLogo(url) {
         <portlet:namespace />changeLogo(url);
      }
      </script>
   </c:when>
   <c:otherwise>
      <img alt='<liferay-ui:message key="portrait" />' src="<%=selUser.getPortraitURL(themeDisplay) %>" />   </c:otherwise>
</c:choose>

Innanzitutto verifichiamo che l'utente corrente (user) abbia il permesso di modificare il campo portrait dell'utente selUser; senza il permesso visualizziamo solamente l'immagine dell'utente.

Dopodichè definiamo la URL che punta alla pagina di selezione, crop e modifica dell'immagine dell'utente; questa pagina è di portale e contiene tutto il codice necessario (Java e Javascript) allo scopo. Dobbiamo solamente crearla nel modo corretto, ossia facendola puntare principalmente alla portlet MY_ACCOUNT come indicato; tutti gli altri parametri sono necessari e sono stati ricavati analizzando i sorgenti di portale.

Quindi abbiamo inserito la taglib che innesca il procedimento di modifica dell'avatar; i parametri sono abbastanza ovvi e rappresentano i dati dell'avatar corrente dell'utente e della URL di modifica vista sopra.

Alla fine di tutto abbiamo semplicemente ridefinito la funzione Javascript changeLogo; questo si rende necessario perchè la pagina di modifica dell'avatar opera nel contesto della portlet MY_ACCOUNT e quindi cerca di eseguire la funzione con il proprio namespace, ossia _2_changeLogo. Ma la taglib renderizza in pagina la medesima funzione ma con il namespace della nostra portlet custom; di conseguenza a runtime la funzione _2_changeLogo non esiste. Quindi tutto quello che dobbiamo fare è definire la funzione con il nome invocato dalla portlet MY_ACCOUNT che non fa altro che invocare la funzione con il namespace della portlet custom; funzione che, ricordo, esiste già in pagina in quanto creata dalla taglib.

Buon avatar a tutti!