Liferay mette a disposizione degli sviluppatori numerosi ed utili taglib da poter utilizzare nelle proprio JSP.

Una di queste è liferay-ui:input-move-boxes che consente di selezionare valori da un elenco; vediamo come funziona.

Chiunque si sia mai trovato a configurare Liferay, avrà avuto la necessità di configurare le lingue del portale.

Tale configurazione avviene mediante 2 caselle combinate (a selezione multipla) affiancate: la casella di sinistra contiene l'elenco delle voci selezionate, mentre la casella di destra contiene l'elenco delle voci disponibili. Tra le 2 caselle sono presenti dei pulsanti che consentono di spostare gli elementi da una casella ad un'altra.

Questo componente, ed il suo funzionamento, è la taglib liferay-ui:input-move-boxes; il 90% del codice da scrivere risiede all'interno della JSP e riguarda la valorizzazione delle 2 caselle combinate.

Pertanto, come prima cosa, iniziamo a definire 2 liste di oggetti che rappresenteranno il contenuto delle 2 caselle combinate; ricordiamo che per convenzione la casella di sinistra rappresenta i valori selezionati mentre la casella di destra rappresenta i valori disponibili. Queste 2 liste dovranno contenere oggetti di tipo KeyValuePair che non è altro di una coppia chiave/valore appunto.

<%
List<KeyValuePair> leftList = new ArrayList<KeyValuePair>();
leftList.add(new KeyValuePair("1", "One"));
leftList.add(new KeyValuePair("2", "Two"));
leftList.add(new KeyValuePair("3", "Three"));
leftList.add(new KeyValuePair("4", "Four"));
leftList.add(new KeyValuePair("5", "Five"));
leftList.add(new KeyValuePair("6", "Six"));

List<KeyValuePair> rightList = new ArrayList<KeyValuePair>();
rightList.add(new KeyValuePair("7", "Seven"));
rightList.add(new KeyValuePair("8", "Eight"));
rightList.add(new KeyValuePair("9", "Nine"));
%>

Dopodichè andremo ad inserire la taglib vera e propria, posizionandola all'interno di un form HTML; oltre alla taglib andremo anche ad inserire un campo nascosto che ci servirà dopo.

<liferay-portlet:actionURL name="save" var="saveURL" />
<aui:form action="<%=saveURL %>" method="post" name="fm">
    <aui:input name="values" type="hidden" />
    <liferay-ui:input-move-boxes
        leftBoxName="selectedValues"
        leftList="<%=leftList %>"
        leftReorder="true"
        leftTitle="selected"
        rightBoxName="availableValues"
        rightList="<%=rightList %>"
        rightTitle="available"
    />

    <aui:button-row>
        <aui:button type="submit" value="save" />
    </aui:button-row>
</aui:form>

I parametri della taglib sono speculari e relativi alle 2 caselle combinate.

leftBoxName

Nome della casella combinata

leftList

Lista dei valori delle caselle creati in precedenza

leftReorder

Visualizza i pulsanti per ordinare gli elementi della casella

leftTitle

Etichetta della casella combinata

Per quanto riguarda la JSP manca solamente una cosa: al submit del form occorre valorizzare il campo nascosto con i valori selezionati nella casella combinata di sinistra (o destra); questo passaggio è obbligatorio perchè la taglib serve solamente a spostare valori da una casella all'altra, ma questi valori non sono selezionati e quindi non vengono passati nella request. Ma con un pò di Javascript siamo in grado di leggere tutti i valori presenti in una casella, trasformarli in una stringa e valorizzare il campo nascosto.

<aui:script use="liferay-util-list-fields">
A.one('#<portlet:namespace/>fm').on('submit', function(event) {
    var selectedValues = Liferay.Util.listSelect('#<portlet:namespace/>selectedValues');
    A.one('#<portlet:namespace/>values').val(selectedValues);
    submitForm('#<portlet:namespace/>fm');
});
</aui:script>

La JSP è pronta, ora manca solo una cosa: leggere i valori nella processAction per poterli gestire come serve.

String[] values = ParamUtil.getParameterValues(actionRequest, "values", new String[0]);