I cookie ci aiutano a fornire i nostri servizi.

Utilizzando tali servizi, accetti l'utilizzo dei cookie da parte nostra. Per saperne di piu'

Approvo

La nuova versione 6.2 di Liferay ha portato molte modifiche, una queste riguarda alcuni moduli di Alloy che sono cambiati o semplicemente deprecati.

Vediamo quindi come gestire l'autocomplete con Liferay 6.2, recuperando i dati via Ajax.

Per questo esempio, utilizzeremo i dati contenuti all'interno della tabella classname, semplicemente perchè contiene un numero sufficiente di dati di test.

La prima, e più importante, cosa da preparare è la JSP che conterrà il widget e lo script; iniziamo quindi con la definizione di 2 campi di input: il primo per visualizzare il widget ed il secondo per memorizzare il valore da utilizzare nella portlet per l'eventuale salvataggio:

<aui:input name="className" />
<aui:input name="valueToBeSaved" type="hidden" />

Dopodichè andremo a definire la URL ed il datasource che serviranno per il recupero via Ajax dei valori da mostrare nel widget; trattandosi di una chiamata Ajax che restituisce un frammeto JSON, la URL sarà ovviamente di tipo resource:

<liferay-portlet:resourceURL id="autocomplete" var="autocompleteURL" />

<aui:script use="autocomplete-list,datasource-io">
var datasource = new A.DataSource.IO({
	source: '<%=autocompleteURL%>'
});

...

L'ultima parte di script è quella più importante che si occupa di istanziare il widget e renderlo funzionante:

var autoComplete = new A.AutoCompleteList({
	allowBrowserAutocomplete: false,
	activateFirstItem: true,
	inputNode: '#<portlet:namespace />className',
	maxResults: 10,
	on: {
		select: function(event) {
			var result = event.result.raw;
			A.one('#<portlet:namespace/>valueToBeSaved').val(result.classNameId);
} }, render: true, source: datasource, requestTemplate: '&<portlet:namespace />keywords={query}', resultListLocator: function (response) { var responseData = A.JSON.parse(response[0].responseText); return responseData.response; }, resultTextLocator: function (result) { return result.value; }, width: 400 }); </aui:script>

Per maggiori dettagli sui vari parametri disponibili si consulti la documentazione ufficiale di AlloyUI; vediamo tuttavia quelli principali:

allowBrowserAutocomplete
Disabilita l'autocomplete del browser
inputNode
Rappresenta il campo di input in cui scrivere
on.select
Rappresenta il codice da eseguire alla selezione di un valore; event.result.raw rappresenta l'oggetto JSON selezionato
source
Rappresenta il datasource della chiamava Ajax che recupera i dati da visualizzare
requestTemplate
Rappresenta i parametri inviati al server per la ricerca, tra cui il placeholder {query} che contiene il testo digitato dall'utente
resultListLocator
Rappresenta il codice che estrae la lista di valori dalla risposta JSON del server
resultTextLocator
Rappresenta il codice per estrarre il valore ma mostrare nella lista

L'ultima parte consiste nel codice Java che deve gestire la chiamata Ajax per la ricerca e la restituzione dei valori, nulla è cambiato rispetto alla vecchia versione di Liferay:

public void serveResource(ResourceRequest resourceRequest,
		ResourceResponse resourceResponse) throws IOException,
		PortletException {
	String resourceID = resourceRequest.getResourceID();

	if ("autocomplete".equals(resourceID)) {
		String keywords = ParamUtil.getString(resourceRequest, "keywords");

		JSONObject json = JSONFactoryUtil.createJSONObject();
		JSONArray results = JSONFactoryUtil.createJSONArray();
		json.put("response", results);

		try {
			DynamicQuery query = DynamicQueryFactoryUtil
					.forClass(ClassName.class);
			query.add(PropertyFactoryUtil.forName("value").like(
					StringPool.PERCENT + keywords + StringPool.PERCENT));
			List<ClassName> classNames = ClassNameLocalServiceUtil
					.dynamicQuery(query);

			for (ClassName className : classNames) {
				JSONObject object = JSONFactoryUtil.createJSONObject();
				object.put("classNameId", className.getClassNameId());
				object.put("value", className.getValue());
				results.put(object);
			}
		} catch (SystemException e) {
			e.printStackTrace();
		}

		writeJSON(resourceRequest, resourceResponse, json);
	} else {
		super.serveResource(resourceRequest, resourceResponse);
	}
}