Chiunque abbia mai sviluppato un'applicazione web, si sarà trovato senz'altro a dover risolvere il classico problema delle combo collegate: ossia selezionando un valore dalla prima combo, vengono filtrati (o caricati) i valori della seconda combo.

Un esempio banale? Nazione e provincia, piuttosto che provincia e comune; o magari la terna nazione, provincia e comune.

Fortunatamente anche lo staff di Liferay si è posto il medesimo problema e lo ha risolto creando e mettendo a disposizione un utile componente Javascript: DynamicSelect.

In questa prima parte vedremo un classico e semplice utilizzo del componente, lasciando alla seconda parte il caso più complesso applicato ad entità custom.

Vediamo subito il codice in azione e cerchiamo di capirlo:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<aui:select label="country" name="countryId" required="true" />
<aui:select label="region" name="regionId" required="true" />

<aui:script use="liferay-dynamic-select">
new Liferay.DynamicSelect([
	{
		select: '<portlet:namespace />countryId',
		selectData: Liferay.Address.getCountries,
		selectDesc: 'nameCurrentValue',
		selectSort: true,
		selectId: 'countryId',
		selectVal: '8'
	},
	{
		select: '<portlet:namespace />regionId',
		selectData: Liferay.Address.getRegions,
		selectDesc: 'name',
		selectSort: true,
		selectId: 'regionId',
		selectVal: '8015'
	}
]);
</aui:script>

Tralasciamo l'inclusione delle taglib perchè è superfluo e vediamo subito le 2 combo, nazione e provincia, rigorosamente vuote; non importa come siano visualizzate a video, l'importante è decidere l'ordine con cui devono essere utilizzate, prima la nazione e poi la provincia.

Dopodichè andiamo a definire il blocco di codice Javascript, istanziando il componente Liferay.DynamicSelect; l'unico argomento necessario è un array di oggetti JSON che rappresentano le varie combo nell'ordine esatto in cui devono essere utilizzate. Ciascuno di questi oggetti deve possedere i seguenti campi:

• select, rappresenta il nome della combo (occhio al namespace);
• selectData, rappresenta la funzione Javascript che viene invocata per popolare la combo;
• selectDesc, rappresenta il nome del campo (riferito all'oggetto singolo restituito da selectData) da usare come label delle voci della combo;
• selectSort, flag booleano per ordinare o meno le varie voci della combo;
• selectId, rappresenta il nome del campo (riferito all'oggetto singolo restituito da selectData) da usare come value delle voci della combo;
• selectVal, rappresenta il valore con cui prevalorizzare eventualmente la combo (nell'esempio, 8 rappresenta l'Italia e 8015 la provincia di Bologna).

Ok, ma che cosa sono esattamente Liferay.Address.getCountries e Liferay.Address.getRegions?

Sono funzioni Javascript di portale che, sfruttando il meccanismo del DWR, effettuano una chiamata Ajax per recuperare tutti i dati che servono; le troviamo definite all'interno del file /html/js/liferay/address.js. Per il momento non entriamo nel dettaglio, ma vi consiglio di darci un'occhiata.

Per ora è tutto! A presto con la seconda parte!