Alloy Ajax in Liferay Portlet

Size: px

Start display at page:

Download "Alloy Ajax in Liferay Portlet"

Darren Woods
5 years ago
Views:

Alloy Ajax in Liferay Portlet Liferay serveresource and alloy aui-io-request module made Ajax easy to implement in Liferay Portlet.

At the end of this article you will be able to know how A.io.request works and what s the role of serveresource method to implement Ajax. New to Ajax?

iii) Using AJAX we can exchange data with server and update a portion of web page without reloading the whole page.

1 Alloy Ajax in Liferay Portlet Liferay serveresource and alloy aui-io-request module made Ajax easy to implement in Liferay Portlet. If you have basic knowledge of Ajax and you want to learn how ajax call happens by Alloy A.io.requestmethod then this article can help you to understand inside out. At the end of this article you will be able to know how A.io.request works and what s the role of serveresource method to implement Ajax. New to Ajax? i) AJAX stands for Asynchronous JavaScript and XML. ii) AJAX is not a new programming language.its new way to use existing standards. iii) Using AJAX we can exchange data with server and update a portion of web page without reloading the whole page. iv) In Portlet Application serveresource is the method which provides data like JSON, XML as response 1.Ajax call with minimum code <%@ taglib uri=" prefix="portlet" %> <%@ taglib uri=" prefix="theme" %> <%@ taglib uri=" prefix="aui" %> <theme:defineobjects/> <portlet:defineobjects /> <portlet:resourceurl var="resourceurl"/> A.io.request('<%=resourceURL.toString()%>'); ); <input type="button" value="click" onclick="callserveresource()">

2 The above code should call the below method of your portlet System.out.println("#############AJAX CALL####################"); Note 1: We are just creating a resource URL by <portlet:resourceurl var= resourceurl /> Note 2: A.io.request is the JavaScript alloy function which needs a URL for AJAX call. Note 3: Print something in your serveresource method to check whether its really calling serveresource method or not. 2.Send some data to serveresource method by Ajax call <portlet:resourceurl var="resourceurl"/> data: { site: ' author: 'Hamidul Islam' ); ); <input type="button" value="click" onclick="callserveresource()"> In the above code we are sending two parameters site and author to serveresource method. You can read these two parameters in your serveresource method as below * Read data sent by AJAX String site = ParamUtil.getString(resourceRequest, "site"); String author = ParamUtil.getString(resourceRequest, "author"); System.out.println("The value of site parameter sent by AJAX "+site); System.out.println("The value of author parameter sent by AJAX "+author); Problem: You might be thinking that you can read the posted data or parameters in your serveresource method without any problem. But serveresource method will ignore any parameters without namespace. Therefore you get nothing in your serveresource method. There are two solutions for it. Solution 1: Append <portlet:namespace /> to the parameter. With this approach your data should look like this data: { <portlet:namespace />site: ' <portlet:namespace />author: 'Hamidul Islam'

3 Solution 2: In the above solution the code does not look so good. To avoid this add the below two lines in your liferayportlet.xml <requires-namespaced-parameters>false</requires-namespaced-parameters> <ajaxable>true</ajaxable> Therefore your liferay-portlet.xml should look like below <portlet> <portlet-name>alloy-ajax-demo</portlet-name> <icon>/icon.png</icon> <requires-namespaced-parameters>false</requires-namespaced-parameters> <ajaxable>true</ajaxable> <header-portlet-css>/css/main.css</header-portlet-css> <footer-portlet-javascript>/js/main.js</footer-portlet-javascript> <css-class-wrapper>alloy-ajax-demo-portlet</css-class-wrapper> </portlet> In this approach you no need to append <portlet:namespace /> to the parameters 3.Submit form data by Ajax You can submit the whole form data by ajax. You just need to mention your form ID that you want to submit. In the below code we are submitting form data by form ID fm taglib uri=" prefix="portlet" %> taglib uri=" prefix="theme" %> taglib uri=" prefix="aui" %> <theme:defineobjects/> <portlet:defineobjects /> <portlet:resourceurl var="resourceurl"/> form: { id: 'fm' ); ); Full Name:<input type="text" name="fullname"/> Age:<input type="text" name="age"/> <input type="button" value="submit Form Data" onclick="callserveresource()"> Read submitted form data as below * Read form data sent by AJAX String fullname = ParamUtil.getString(resourceRequest, "fullname"); String age = ParamUtil.getString(resourceRequest, "age"); System.out.println("The value of fullname "+fullname); System.out.println("The value of age "+age);

4 4.Receive data from server Till now we have seen only how to submit data by AJAX. We can also receive data from server. In the below code we will send id to serveresource method and serveresource will send back the full name of the user matching with the id. form: { id: 'fm', on: { success: function() { alert(this.get('responsedata')); ); ); Full Name:<input type="text" name=" address"/> <input type="button" value="submit Form Data" onclick="callserveresource()"> serveresource: * Read form data sent by AJAX Long companyid = CompanyThreadLocal.getCompanyId(); String address = ParamUtil.getString(resourceRequest, " address"); User user = null; try { user = UserLocalServiceUtil.getUserBy Address(companyId, address); catch (PortalException e) { catch (SystemException e) { resourceresponse.setcontenttype("text/html"); PrintWriter writer = resourceresponse.getwriter(); if(user == null){ writer.print("no matching with the ID"); else{ writer.print("matches id. The full name of the user: "+ user.getfullname()); writer.flush(); writer.close(); 5.Read JSON Data sent by server serveresource method also can generate JSON data. With Alloy you can read JSON data easily. Below is the code datatype: 'json', form: { id: 'fm'

5 , on: { success: function() { alert(this.get('responsedata').fullname); ); ); Full Name:<input type="text" name=" address"/> <input type="button" value="submit Form Data" onclick="callserveresource()"> serveresource: * Read form data sent by AJAX Long companyid = CompanyThreadLocal.getCompanyId(); String address = ParamUtil.getString(resourceRequest, " address"); User user = null; try { user = UserLocalServiceUtil.getUserBy Address(companyId, address); catch (PortalException e) { catch (SystemException e) { resourceresponse.setcontenttype("text/html"); PrintWriter writer = resourceresponse.getwriter(); JSONObject jsonobject = JSONFactoryUtil.createJSONObject(); if(user == null){ jsonobject.put("fullname", "No matching with the ID"); else{ jsonobject.put("fullname", "Matches id. The full name of the user: "+user.getfullname()); writer.print(jsonobject.tostring()); writer.flush(); writer.close(); Call back function: You have seen only success as call back function till now. However this is not only the call back function. Here is the full list 1. start 2. complete 3. success 4.failure 5.end We can assume that these are Life Cycle methods of Alloy Ajax Call. You can mention all the call back function like success. Tips: 1. Reuse of ajax connection

6 You can define an ajax connection once and reuse multiple times. For example var ajaxrequest = A.io.request( <%=resourceurl.tostring()%> ); Later on you can use the connection as bellow ajaxrequest.start(); 2. autoload: false autoload: false is used when you want to define only the ajax connection but not to call it for the first time. Later on you can use this connection var ajaxrequest = A.io.request( <%=resourceurl.tostring()%>, { ); autoload: false, 3. Set property or call methods dynamically for the ajax connection Once you have ajax connection variable you can set different property like ajaxrequest.start(); ajaxrequest.stop(); ajaxrequest.set( uri, some url ); ajaxrequest.set( datatype, xml ); ajaxrequest.set( method, GET ); ajaxrequest.set( cache, false);

Contents. Demos folder: Demos\14-Ajax. 1. Overview of Ajax. 2. Using Ajax directly. 3. jquery and Ajax. 4. Consuming RESTful services

$Contents. Demos folder: Demos\14-Ajax. 1. Overview of Ajax. 2. Using Ajax directly. 3. jquery and Ajax. 4. Consuming RESTful services$ Ajax Contents 1. Overview of Ajax 2. Using Ajax directly 3. jquery and Ajax 4. Consuming RESTful services Demos folder: Demos\14-Ajax 2 1. Overview of Ajax What is Ajax? Traditional Web applications Ajax