Tags: ajax | java | liferay | portlets

Following on from the previous entry, this post deals with using Ajax from Liferay Portlets.

(This blog entry was inspired by various posts in the Liferay Community Forums.)

One of the key reasons to use Ajax with Portlets is to preserve the immediacy of the dashboard. When you are dealing with Portlets it is undesirable to have the user refresh the entire Portal page. This is where Ajax comes in. It allows the user to start and complete actions while multi-tasking with other Portlets.

One of the great things about Portlets is that Java already has a Portlet API (javax.portlet). The API can do many things, but one immediate benefit is that it makes AJAX much easier.

We can extend javax.portlet.GenericPortlet and over-ride the methods we wish to use:

package com.sample.jsp.portlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.portlet.GenericPortlet;
import javax.portlet.PortletException;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;
import javax.portlet.ResourceURL;

import com.liferay.portal.kernel.util.ParamUtil;

public class JSPPortlet extends GenericPortlet {

	/**
	 * this fires to create the view
	 */
	public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {

		//include("view.jsp", request, response);
		
		System.out.println("In doView code");
		
		response.setContentType(request.getResponseContentType());

		// file to display...
		String url = "/view.jsp";
		
		// read the above file and output it...
		getPortletContext().getRequestDispatcher(url).include(request, response);
	}
	
	public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, IOException {

		System.out.println("In serveResource code");
		
		response.setContentType("text/html");
		
		String message = request.getParameter("message");

		// this seems to be the page that was calling...?
		String resourceID = request.getResourceID();
		System.out.println("resourceId was : " + resourceID);

		
		System.out.println("message was : " + message);
		PrintWriter writer = response.getWriter();
		 
		writer.print(message);
	}
}

Here we are over-riding both doView (to load the JSP Portlet page) and serveResource (to serve our response back to the JSP). "serveResource" is the method that is called when the JSP performs an AJAX request. If we were doing this for real we would be responding with XML, JSON, or some kind of machine readable message.

We now need to point the Portlet at this class so it knows to use it. So in src/main/webapp/WEB-INF/portlet.xml we need to do the following:

<!-- 		<portlet-class>com.liferay.util.bridges.mvc.MVCPortlet</portlet-class> -->
		<portlet-class>com.sample.jsp.portlet.JSPPortlet</portlet-class>

This points the Portlet to our own Portlet class.

Finally, we need to write a JSP that uses AJAX in some way. Put the following in view.jsp:

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

<portlet:defineObjects />


<portlet:resourceURL var="testURL" id="view.jsp" escapeXml="false" />

<script type="text/javascript">
function <portlet:namespace/>Test(message) {
	    var querystring = 'message=' + message; 
        alert('msg : ' + message);
        alert('querystring : ' + querystring);
    jQuery.ajax({
    type: "POST",
    url: "<%=renderResponse.encodeURL(testURL.toString())%>",
    data: querystring,
    success: function(msg) {
        alert('response= ' + msg);
        var div = document.getElementById("<portlet:namespace/>content");
        div.innerHTML = "";
        div.innerHTML = msg;
        }
    });
}
</script>

<div id="<portlet:namespace/>form">
<form name="testform" id="testform">
<input name="message" id="message" value="">
<input type="button" value = "Press me" onClick="javascript:alert('submit=' + testform.message.value);<portlet:namespace/>Test(testform.message.value);return false;">
</form>
</div>

<div id="<portlet:namespace/>content">
</div>

This is the <b>helloworld portlet</b>. Great things possibly await...

Then deploy this and make sure you are using the most current version. When you click on the "Press Me" button the value of the input box will be sent to the JSPPortlet class, and then echoed straight back to the Portlet. The Portlet will then attach the text received to the "content" div.

You should see the message you just entered embedded in the Portlet. All this should happen without refreshing the Portlet container.

And that's Liferay Portlets with AJAX.

Top Tip: If you want to use JQuery in your Portlet, add the following to src/main/webapp/WEB-INF/liferay-portlet.xml

<header-portlet-javascript>http://code.jquery.com/jquery-1.4.3.min.js</header-portlet-javascript>