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-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
Apart from our Translation Memory devices as well as our high-quality administration treatments, your how to translate games to english solution supplier needs to constantly try to make use of the very same translator for every revision/release as well as every job.
ReplyDelete