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
- Load AUI library in JSP page
- Create server Resource URL
- Implement Serve Resource Method to serve Dynamic content
- Use AUI Ajax method with serve resource URL
- 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
- <aui:script/> Tag
- 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-requestmodule 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
0 comments:
Post a Comment