\n
Click To Tweet<\/a><\/p>\n Le applicazioni web \"moderne\" sono sempre pi\u00f9 vicine alle comuni applicazioni desktop, framework sempre pi\u00f9 completi, complessi e di semplice utilizzo, rendono\u00a0l'implementazione relativamente semplice, inoltre con l'avvento di HTML 5<\/a> la distanza con le applicazioni desktop\u00a0diventa ancora pi\u00f9 breve. In quest'articolo vedremo come sia semplice realizzare una combo completa di funzione\u00a0auto complete<\/em>, i cui dati presentati non sono \"statici\", bens\u00ec, provenienti da una base dati. Sfrutteremo Ajax per il reperimento dei dati da mostrare all'interno della combo. Ovviamente realizzeremo il tutto all'interno di una portlet. In Figura 1 \u00e8 illustrato il risultato finale del lavoro.\u00a0Quanto realizzato nel corso dell'articolo \u00e8 disponibile come progetto\u00a0Maven Liferay Portlet<\/em>\u00a0sul mio repository GitHub all'indirizzo\u00a0liferay-aui-autocomplete-ajax-example<\/a><\/p>\n Figura 1. Alloy UI Autocomplete Ajax Example<\/p><\/div>\n Per seguire con profitto il corso dell'articolo, \u00e8 richiesta una conoscenza minima degli standard e tecnologie che ruotano nell'intorno delle Portlet, oltre che un minimo di dimestichezza con Liferay e il suo ambiente di sviluppo. Gli strumenti a supporto dovrebbero essere i seguenti:<\/p>\n L'esempio completo della portlet che troverete sul repository\u00a0GitHub<\/em>, \u00e8 stato realizzato tramite Maven e l'archetype\u00a0liferay-portlet-archetype<\/em> versione 6.1.1 Community Edition.<\/p>\n Nella prima versione delle specifiche Java Portlet Specification 1.0 (JSR 168)<\/a>, non era possibile servire risorse<\/em> generate dinamicamente direttamente dalla portlet, era necessario un ulteriore servlet che serviva le risorse. Questa limitazione ha alcuni svantaggi:<\/p>\n Un vantaggio di servire risorse attraverso una servlet \u00e8 il meno overhead<\/em>, dovuto al fatto che la richiesta non deve passare attraverso l'intera struttura del portale, per esempio, quando \u00e8 necessario servire grandi flussi multimediali.<\/p>\n La seconda versione delle specifiche\u00a0Java Portlet Specification 2.0 (JSR 286)<\/a>\u00a0introduce un nuovo tipo di URL, la resource URL<\/em><\/strong>.<\/em>\u00a0La resource URL consente di attivare il metodo serveResource<\/em>, sull'interfaccia ResourceServingPortlet<\/em> che \u00e8 possibile sfruttare per creare risorse dinamiche direttamente nel portlet.<\/p>\n Noi sfrutteremo questo nuova caratteristica per fornire alla view\u00a0<\/em>i dati da mostrare all'interno della combo.<\/p>\n Partendo dal presupposto che abbiate creato una portlet MVC, vediamo come implementare il metodo\u00a0serverResource()<\/em>. Prima di procedere con il come<\/em>, affrontiamo il cosa<\/em>, ovvero, che tipo di risorsa e quali dati il metodo deve restituire alla view<\/em>?. Ipotizziamo che i dati da voler mostrare sulla combo siano l'insieme di ruoli definiti su Liferay e il formato dei dati da restituire deve essere in formato JSON<\/a><\/em>; detto questo, in breve occorre:<\/p>\n La\u00a0Dynamic Query\u00a0<\/em>consente di recuperare la lista dei ruoli il cui nome fa \"scopa\" con quanto digitato dall'utente all'interno della combo, per esempio, se l'utente digitasse Site*\u00a0<\/em>allora sarebbe recuperata la lista di ruoli dove ogni item ha l'attributo name<\/em> che inizia con\u00a0Site<\/em>. Cercando di rispettare l'ordine delle\u00a0cose\u00a0<\/em>da fare (visto in precedenza), cercher\u00f2 di mostrare brevemente i pezzi di codice del come<\/em>.<\/p>\n Source 1 - Inizializzazione oggetti JSON.<\/p>\n Il codice illustrato sopra \u00e8 una semplice inizializzazione degli oggetti\u00a0JSON\u00a0<\/em>(Object e Array)\u00a0utilizzati in seguito come contenitori di dati. Invece, a seguire, al Source 2<\/i> \u00e8 mostrata la definizione e creazione della\u00a0Dynamic Query\u00a0<\/em>secondo le regole descritte in precedenza.<\/p>\n Source 2 - Definzione e creazione della Dynamic Query.<\/p>\n Al\u00a0Source 3<\/em>, sono invece mostrati il recupero della lista di ruoli e la successiva preparazione dei dati appena restituiti dal Role Local Service\u00a0<\/em>\u00a0in formato\u00a0JSON<\/em>.<\/p>\n Source 3 - Recupero lista dei ruoli e preparazione dati in JSON.<\/p>\n Source 4.a - Invio dei dati in formato JSON alla view.<\/p>\n Le ultime righe di codice del\u00a0Source 4.a<\/em>\u00a0inviano la lista di ruoli che soddisfano la ricerca verso la\u00a0view<\/em> in formato JSON. La prima riga informa il\u00a0client<\/em> che riceve i dati circa il formato degli stessi. Al\u00a0Source 5<\/em> \u00e8 possibile vedere un esempio di dati inviati alla\u00a0view<\/em>. L'esempio completo della classe\u00a0ViewAUIAutocompleteAjax<\/strong><\/em> che implementa l'MVCPortlet<\/strong><\/em>\u00a0<\/strong>\u00e8 disponibile all'indirizzo\u00a0ViewAUIAutocompleteAjax.java<\/a>. In realt\u00e0 \u00e8 possibile approfittare del metodo\u00a0writeJSON()<\/em> della classe com.liferay.portal.kernel.portlet.LiferayPortlet<\/em> per ottenere lo stesso risultato del codice precedente (vedi Source 4.b<\/em>).<\/p>\n Source 4.b - Invio dei dati in formato JSON alla view.<\/p>\n Source 5 - Dati in formato JSON.<\/p>\n La view<\/em>\u00a0(che dovrebbe poi essere la jsp view.jsp<\/em>) fondamentalmente si compone di uno script AUI che utilizza i seguenti componenti:<\/p>\n Il primo elemento \u00e8 responsabile della visualizzazione e selezione dell'insieme di dati resi disponibili dal secondo componente di\u00a0datasource<\/em>, quest'ultimo \u00e8 invece responsabile del recupero dei dati inviando la richiesta alla\u00a0resourceURL<\/em> della portlet. Al Source 6<\/i>, \u00e8 mostrato lo script AUI che crea la combo vista precedentemente in Figura 1<\/em>.<\/p>\n Source 6 - AUI Script per l'AutoComplete Ajax.<\/p>\n Nel codice sorgente mostrato al\u00a0Source 6<\/em>, ho voluto evidenziare le righe che ritengo pi\u00f9 rilevanti:<\/p>\n Source 7 - Creazione resourceURL della portlet.<\/p>\n Ovviamente \u00e8 possibile sfruttare il metodo\u00a0serverResource()<\/em> per eseguire diverse azioni distinte per la stessa portlet, per questo motivo sulla resourceURL\u00a0<\/em>creata (vedi Source 7<\/em>),\u00a0\u00e8 stato impostato un parametro che esplicita l'azione da eseguire. L'esempio completo della\u00a0view<\/em> \u00e8 disponibile all'indirizzo view.jsp<\/a><\/p>\n Ancora una volta abbiamo visto come il riutilizzo dei componenti software e il progredire delle tecnologie favoriscono la creazione di qualunque manufatto soprattutto in termini di tempo, quest'ultimo prezioso visto il diminuire del Time to Market<\/em>.<\/p>\n \n Click To Tweet<\/a><\/p>\n Il progetto AUI \u00e8 un percorso quasi obbligato per tutti coloro che intraprendono la strada di Liferay e in particolare modo per coloro che sviluppano o avranno intenzione di sviluppare applicazioni che richiedono un livello spinto d'interazione\u00a0uomo-macchina<\/em>. Purtroppo la documentazione a corredo del progetto \u00e8 molto povera e gli esempi presentati non soddisfano mai gli usi reali.<\/p>\n <\/p>","protected":false},"excerpt":{"rendered":" 1. Cos’\u00e8 AlloyUI? AlloyUI (abbreviato in AUI) \u00e8 un\u00a0meta framework\u00a0Open Source realizzato da Liferay che ingloba una serie di librerie javascript fornendo un set di API per la creazione di applicazioni web robuste e...<\/p>\n","protected":false},"author":3,"featured_media":3267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[571,15,22],"tags":[72,90,190,210,637,314,395,439],"class_list":["post-1843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-management-system-cms","category-liferay","category-programming","tag-alloy-ui","tag-aui","tag-java","tag-json","tag-liferay","tag-portlet","tag-user-interface","tag-yui"],"yoast_head":"\n2. Obiettivo<\/h1>\n
![\"Alloy](\"http:\/\/www.dontesta.it\/wp-content\/uploads\/2015\/03\/screen-shot-2012-12-15-at-22-30-28.png\" "\\"Alloy")
3. Requisiti<\/h1>\n
\n
\u00a04.\u00a0Serving resources<\/h1>\n
\n
package javax.portlet;\r\n\r\n\/**\r\n* The ResourceServingPortlet interface allows\r\n* serving resources through the portlet.\r\n*\r\n* The portlet container must call this method for links created by\r\n* the RenderResponse.createResourceURL() call.\r\n* If the portlet creates resource URLs with RenderResponse.createResourceURL()\r\n* it must implement this lifecycle method.\r\n*\r\n* @since 2.0\r\n*\/\r\npublic interface ResourceServingPortlet {\r\n\r\n\/**\r\n * Called by the portlet container to allow the portlet to generate\r\n * the resource content based on its current state.\r\n * The portal \/ portlet container must not render any output in addition\r\n * to the content returned by the portlet. The portal \/ portlet container\r\n * should expect that the portlet may return binary content for a\r\n * renderResource<\/code> call. * * @param request * the resource request * @param response * the resource response * * @exception PortletException * if the portlet has problems fulfilling the * rendering request * @exception UnavailableException * if the portlet is unavailable to perform render at this time * @exception PortletSecurityException * if the portlet cannot fullfill this request because of security reasons * @exception java.io.IOException * if the streaming causes an I\/O problem *\/ public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, java.io.IOException; }<\/pre>\n5. Implementazione del serverResource<\/h1>\n
\n
JSONObject json = JSONFactoryUtil.createJSONObject();\r\nJSONArray results = JSONFactoryUtil.createJSONArray();\r\njson.put(\"response\", results);<\/pre>\n
DynamicQuery dynamicQuery = DynamicQueryFactoryUtil.forClass(Role.class).\r\nadd(PropertyFactoryUtil.forName(\"name\").like(searchPattern));<\/pre>\n
List roles = RoleLocalServiceUtil.dynamicQuery(dynamicQuery);\r\nfor (Role role : roles) {\r\nJSONObject listEntry = JSONFactoryUtil.createJSONObject();\r\nlistEntry.put(\"key\", role.getRoleId());\r\nlistEntry.put(\"name\", role.getName());\r\nlistEntry.put(\"description\", role.getDescription());\r\nlistEntry.put(\"type\", role.getType());\r\nresults.put(listEntry);\r\n}<\/pre>\nresourceResponse.setContentType(ContentTypes.APPLICATION_JSON);\r\nPrintWriter writer = resourceResponse.getWriter();\r\nwriter.println(json.toString());<\/pre>\n
writeJSON(resourceRequest, resourceResponse, json);<\/pre>\n
{\r\n \"response\": [\r\n {\r\n \"description\": \"Site Administrators are super users of their site but cannot make other users into Site Administrators.\",\r\n \"name\": \"Site Administrator\",\r\n \"type\": 2,\r\n \"key\": 10153\r\n },\r\n {\r\n \"description\": \"All users who belong to a site have this role within that site.\",\r\n \"name\": \"Site Member\",\r\n \"type\": 2,\r\n \"key\": 10154\r\n },\r\n {\r\n \"description\": \"Site Owners are super users of their site and can assign site roles to users.\",\r\n \"name\": \"Site Owner\",\r\n \"type\": 2,\r\n \"key\": 10155\r\n }\r\n ]\r\n}<\/pre>\n6. Implementazione della view<\/h1>\n
\n
var dataSource = new A.DataSource.IO(\r\n {\r\n source: '<%=ajaxResourceURL %>'\r\n }\r\n);\r\n\r\nvar autocomplete = new A.AutoComplete(\r\n {\r\n dataSource: dataSource,\r\n delimChar: '',\r\n contentBox: '#myAutoComplete',\r\n matchKey: 'name',\r\n schema: {\r\n resultListLocator: 'response',\r\n resultFields: ['key','name','description', 'type']\r\n },\r\n uniqueName:'keyword',\r\n schemaType:'json',\r\n typeAhead: true,\r\n cssClass: 'ac_input'\r\n});\r\n\r\nautocomplete.generateRequest = function(query) {\r\n return {\r\n request: '&<%=DisplayTerms.KEYWORDS %>=' + query\r\n };\r\n}\r\n\r\nautocomplete.render();<\/pre>\n\n
<portlet:resourceURL var=\"ajaxResourceURL\">\r\n <portlet:param name=\"<%=Constants.CMD %>\" value=\"<%=ActionKeys.GET_LIFERAY_ROLES %>\"\/>\r\n<\/portlet:resourceURL><\/pre>\n
7. Conclusioni<\/h1>\n
Related articles<\/h6>\n
\n