Friday, January 10, 2014

Content Auto Update Using AUI Ajax in Liferay Plugin Portlet

Objective:

Update the content in portlet for particular intervals using AUI Ajax mechanism.

Environment:

Liferay 6.2 +Tomcat 7.x+MySQL 5.1
Note:

The code will work for portal 6.2 version you can try for 6.1 too.

Download Content Auto Update Portlet from following location

You can find source and war file


Portlet Screen:



Procedure for deploy portlet:

You can use war file and directly place in your portal deploy folder and test or you can also use source to deploy portlet.

Once portlet is deployed successfully you can see the portlet in sample category name as Content Auto Update.

Introduction:

Some time we may get requirement to update content in portlet for every particular intervals from server. To do this job we will use Ajax call to update content on portlet

What is Set Interval method?

Native java script has set interval method from this we can execute some task for each particular interval.

What is Ajax call?

Ajax is way of calling server content without page refresh in the browser. This will help us to avoid whole page loading for a little content update.

Ajax will help us to update particular part of web page with server side content or dynamic content.

This Ajax mechanism is implemented in client side java script. We have rich Ajax implemented java script libraries in market

The following are popular


AUI, YUI, DOJO, Prototype  and ExtJS


Note:

 Liferay have inbuilt support for AUI script.

What is Serve Resource Method?

Server Resource method is meant for serving some resource or content from server in portlet technology. This method helps us to serve images, files, JSON data and XML data from server.
This method especially we will use with Ajax call to get content from server.

Implementation

Assume we want update users data in page for every particular interval. We will use Ajax and set interval methods to complete this job.

We will use AUI library to implement Ajax in liferay. AUI is very popular java script library for liferay.

The following are the steps to implement
  1. Load AUI library in JSP page
  2. Create server Resource URL
  3. Implement Serve Resource Method to serve Dynamic content
  4. Use AUI Ajax method with serve resource URL
  5. Use Set Interval method to call Ajax

Load AUI library in JSP page

We are using AUI script in JSP page  so we need to load AUI script.AUI is on demand java script library so that whenever we need we can load that java script module this will avoid load all unnecessary java script in the page.

On demand java script load required java script when page is loaded.

We have two ways to load AUI script in page
  1. <aui:script/> Tag
  2. AUI Use Method

<aui:script/> Tag:

This script tag load required core AUI script in the page. If we want more modules then we will specify use attribute for tag.

<aui:script use="aui-node,aui-base">
    // script here
</aui:script>

Note:

When we want use AUI tags in jsp page we need to include aui tag library in jsp page as follows


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


AUI Use Method:

AUI use method also loads required AUI java script when page loaded. This can do same thing like <aui:script/> tag.

The fowling syntax for AUI use method

AUI().use('aui-base','aui-io-request', function(A){
//write aui script here
});

Note:

In liferay some of core java script already loaded when liferay portal is ready. That is why we able to sue AUI syntax directly in page. In addition to that if we required other java script module then we will use above mechanism to load on demand java script.

Create server Resource URL

Server Resource URL is meant for call the server resource method from Portlet Action class. We will use this URL in Ajax call. This we will call it as destination URL for Ajax

We will use portlet URL tag to create serve resource URL

The following is serve resource URL

<portlet:resourceURL var="updaContentURL">
</portlet:resourceURL>

Note:

If we want use portlet tags we have to include following tag in JSP page.


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


Implement Serve Resource Method to serve Dynamic content

Now we have to override serve Resource method in portlet action class this method will serve the dynamic content as response.

When we is server Resource URL call it will execute serve Resource in portlet action class.
This is the place our business logic should be present.

The following is example

@Override
public void serveResource(ResourceRequest resourceRequest,ResourceResponse resourceResponse)throws  IOException, PortletException {
try {
System.out.println("====serveResource========");
JSONObject jsonUser=null;
JSONArray usersJsonArray=JSONFactoryUtil.createJSONArray();
List<User> userList=UserLocalServiceUtil.getUsers(1, UserLocalServiceUtil.getUsersCount());
for(User userObj:userList){
jsonUser=JSONFactoryUtil.createJSONObject();
jsonUser.put("firstName",userObj.getFirstName());
jsonUser.put("lastName",userObj.getLastName());
jsonUser.put("email",userObj.getEmailAddress());
jsonUser.put("screeName",userObj.getScreenName());
usersJsonArray.put(jsonUser);
}
PrintWriter out=resourceResponse.getWriter();
System.out.println(usersJsonArray.toString());
out.print(usersJsonArray.toString());
}
catch (Exception e) {
e.printStackTrace();
}
}

Note:

Here we need JSON as response data so we will use JSON objects to server JSON data as response.

Use jQuery Ajax method with serve resource URL

Now we will use AUI Ajax to get content from server and we will update in page.

AUI implemented Ajax in aui-io-request module. This module has method called io.request from which we can use Ajax. We also need to mention what kind of data we required as response and here we will JSON as response data.

The following is AUI Ajax call syntax

AUI().use('aui-base','aui-io-request', function(A){
//aui ajax call to get updated content
A.io.request('<%=updaContentURL%>',{
                        dataType: 'json',
                        method: 'GET',
                        data: { paranName: 'ParamValue' },
                        on: {
                                    success: function() {
                                    // response data will be received here     
                                    }
                        }
            });
});

Note:

We have to load aui-io-request module to use Ajax call.

Use Set Interval method to call Ajax

We will use java script native set interval method this will execute the task for each particular intervals

The following is syntax

<script>
//this is set interval method which call the update method for every 30 secends means 3000 milli seconds
setInterval(updateDiv,3000);
//update method to get content from server using resource url
function updateDiv(){
            //Ajax call here
 }
</script>

The following is complete code

Write following code in JSP page

<%@ include file="init.jsp"%>
<style>
#usersTable td{
width:150px;
font-size: 12px;
font-weight: bold;
}
</style>
<portlet:resourceURL var="updaContentURL">
</portlet:resourceURL>
<h1>Content Auto Update From Server using AUI Ajax call with SetInterval Method</h1>
<br/>
<br/>
<div id="userContent">
<table id="usersTable" border="1">
</table>
</div>
<div id="wait" style="display:none; width: 69px; height: 89px; border: 1px solid black; position: absolute; top: 50%; left: 50%; padding: 2px;">
<img src='http://www.w3schools.com/jquery/demo_wait.gif' width="64" height="64" /><br>Loading..</div>
<script>
//this is set interval method which call the update method for every 30 secends means 3000 milli seconds
setInterval(updateDiv,3000);
//update method to get content from server using resource url
function updateDiv(){
AUI().use('aui-base','aui-io-request', function(A){
A.one('#wait').setStyle('display', 'block');
var allRows="";
//aui ajax call to get updated content
A.io.request('<%=updaContentURL%>',{
dataType: 'json',
method: 'GET',
data: { paranName: 'ParamValue' },
on: {
success: function() {
var data=this.get('responseData');
A.Array.each(data, function(obj, idx){
var tableRow='<tr><td>'+obj.screeName+'</td><td>'+obj.firstName+
'</td><td>'+obj.lastName+'</td><td>'+obj.email+'</td></tr>';
allRows=allRows.trim()+tableRow.trim();
A.one('#usersTable').empty();
A.one('#usersTable').setHTML(allRows.trim());
A.one('#wait').setStyle('display','none');
});
}
}
});
});
}
</script>


The following is Serve Resource method in portlet action class

package com.meera.contentautoupdate;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.portlet.PortletException;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;
import com.liferay.portal.kernel.json.JSONArray;
import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
import com.liferay.portal.model.User;
import com.liferay.portal.service.UserLocalServiceUtil;
import com.liferay.util.bridges.mvc.MVCPortlet;
public class ContentAutoUpdateAction extends MVCPortlet {
@Override
public void serveResource(ResourceRequest resourceRequest,ResourceResponse resourceResponse)throws  IOException, PortletException {
try {
System.out.println("====serveResource========");
JSONObject jsonUser=null;
JSONArray usersJsonArray=JSONFactoryUtil.createJSONArray();
List<User> userList=UserLocalServiceUtil.getUsers(1, UserLocalServiceUtil.getUsersCount());
for(User userObj:userList){
jsonUser=JSONFactoryUtil.createJSONObject();
jsonUser.put("firstName",userObj.getFirstName());
jsonUser.put("lastName",userObj.getLastName());
jsonUser.put("email",userObj.getEmailAddress());
jsonUser.put("screeName",userObj.getScreenName());
usersJsonArray.put(jsonUser);
}
PrintWriter out=resourceResponse.getWriter();
System.out.println(usersJsonArray.toString());
out.print(usersJsonArray.toString());
}
catch (Exception e) {
e.printStackTrace();
}
}
}

Important Points
  • Ajax is way of calling server side content without whole page refresh and it will used to update part of web content.
  • Server Resource method will server images, files and particular format data from server.
  • Set Interval is method in native java script which will call task for each interval.

Related Articles:


Reference Links



Author
Meera Prince

Popular Posts

Recent Posts

Recent Posts Widget