Mi è capitato diverse volte, ma immagino che sarà capitato anche a voi, durante lo sviluppo di una portlet di dover selezionare un file o una cartella dalla Document Library di Liferay; una cosa a prima vista semplice concettualmente, visto che le stesse portlet di sistema lo fanno già in diversi punti.
Peccato che replicare lo stesso comportamento all'interno delle proprie portlet non sia subito immediato e richieda diverse ore di analisi dei sorgenti di Liferay per capire dove mettere le mani; chi di voi abbia mai messo le mani nei sorgenti di Liferay e soprattutto di AlloyUI sa bene quanto possa essere frustrante.
Ecco quindi che mi sono messo a pensare come poter risolvere il problema senza dover fare del copia/incolla ogni volta e la soluzione che ho trovato è stata quella di realizzare un apposito modulo di AlloyUI che mettesse a disposizione alcuni oggetti Javascript con cui interfacciarsi alla Document Library; qualcosa che sollevasse lo sviluppatore dai dettagli di funzionamento e che potesse essere riutilizzata nel tempo.
Ho così creato il modulo liferay-dl-util ed impacchettato il tutto all'interno di un hook che ho rilasciato sul Marketplace di Liferay in modo che chiunque possa scaricarla ed utilizzarla immediatamente.
In questo articolo vedremo come utilizzare gli oggetti Javascript messi a disposizione dal modulo per consentire la selezione di un file o di una cartella dalla Document Library di Liferay.
L'estensione è scaricabile dal Marketplace di Liferay: Document Library JS Util
Innanzitutto prepariamo la pagina JSP all'interno della quale andremo ad utilizzare gli oggetti Javascript; per semplicità darò per scontato che il lettore conosca il significato dei tag HTML e delle taglib utilizzate nell'esempio.
<!--
Elemento HTML contenitore, all'interno del quale verrà visualizzato
il pulsante per aprire la dialog di selezione del file
-->
<div id="<portlet:namespace/>fileSelector"></div>
<!--
Questo è il campo (solitamente) nascosto in cui l'oggetto Javascript
Liferay.DLUtil.FileSelector inserirà in automatico lo UUID del documento
una volta selezionato; se questo campo non c'è, nulla viene valorizzato
-->
<aui:input name="uuid" disabled="true" />
<!--
Questo campo serve solamente per questo esempio, per visualizzare
tutte le informazioni messe a disposizione dall'oggetto Javascript
-->
<aui:input name="fileArea" type="textarea" />
Dal momento che il modulo AlloyUI mette a disposizione anche un oggetto per selezionare una cartella, aggiungiamo nella pagina JSP di esempio anche gli elementi per gestire questa seconda casistica.
<!--
Elemento HTML contenitore, all'interno del quale verrà visualizzato
il pulsante per aprire la dialog di selezione della cartella
--> <div id="<portlet:namespace/>folderSelector"></div> <!--
Questo è il campo (solitamente) nascosto in cui l'oggetto Javascript
Liferay.DLUtil.FolderSelector inserirà in automatico il folderId della cartella
una volta selezionata; se questo campo non c'è, nulla viene valorizzato
--> <aui:input name="folderId" disabled="true" /> <!-- Questo campo serve solamente per questo esempio, per visualizzare
tutte le informazioni messe a disposizione dall'oggetto Javascript
--> <aui:input name="folderArea" type="textarea" />
A questo punto andiamo ad inserire in fondo alla pagina JSP il blocco di codice AlloyUI necessario ad inizializzare ed utilizzare il componente di selezione di un file dalla Document Library di Liferay.
<aui:script use="liferay-dl-util">
new Liferay.DLUtil.FileSelector({
/* nome del contenitore HTML impostato sopra */
container: '#<portlet:namespace/>fileSelector',
/* oggetto di configurazione del widget A.Dialog */
dialog: {
centered: true,
modal: true,
title: '<liferay-ui:message key="please-select-file" />'
},
/* selettore CSS che identifica il campo in cui verrà inserito in automatico lo UUID del documento */
hiddenInput: '#<portlet:namespace/>uuid',
/* eventi messi a disposizione dal widget */
on: {
click: function(button, event) {
/*
* Funzione invocata alla pressione del pulsante, prima che venga visualizzata la dialog; inserire
* qui il vostro codice, se serve
*/
},
select: function(contextPath, uuid, title, version) {
/*
* Funzione invocata "dopo" la selezione del file nella dialog; inserire qui il vostro codice nel caso
* in cui sia necessario gestire altre informazioni oltre lo UUID del documento
*/
// questo codice non fa altro che visualizzare nella textarea, definita sopra, tutte le informazioni
// messe a disposizione dal widget
var area = A.one('#<portlet:namespace/>fileArea');
var msg = 'ContextPath: ' + contextPath + '\n' +
'UUID: ' + uuid + '\n' +
'Title: ' + title + '\n' +
'Version: ' + version;
area.val(msg);
}
}
}).render();
</aui:script>
Infine vediamo il blocco di codice da inserire in fondo alla pagina JSP per inizializzare ed utilizzare il componente di selezione di una cartella dalla Document Library di Liferay.
<aui:script use="liferay-dl-util">
new Liferay.DLUtil.FolderSelector({
/* nome del contenitore HTML impostato sopra */
container: '#<portlet:namespace/>folderSelector',
/* selettore CSS che identifica il campo in cui verrà inserito in automatico il folderId della cartella */
hiddenInput: '#<portlet:namespace/>folderId',
/* eventi messi a disposizione dal widget */
on: {
click: function(button, event) {
/*
* Funzione invocata alla pressione del pulsante, prima che venga visualizzata la dialog; inserire
* qui il vostro codice, se serve
*/
},
select: function(folderId, folderName, isSupportMetaData, isSupportSocial) {
/*
* Funzione invocata "dopo" la selezione della cartella nella dialog; inserire qui il vostro codice nel caso
* in cui sia necessario gestire altre informazioni oltre il folderId della cartella
*/
// questo codice non fa altro che visualizzare nella textarea, definita sopra, tutte le informazioni
// messe a disposizione dal widget
var area = A.one('#<portlet:namespace/>folderArea');
var msg = 'FolderId: ' + folderId + '\n' +
'FolderName: ' + folderName + '\n' +
'IsSupportMetaData: ' + isSupportMetaData + '\n' +
'IsSupportSocial: ' + isSupportSocial;
area.val(msg);
}
}
}).render();
</aui:script>