ShowTable of Contents
Introduction
The motivation behind writing this article is that I haven't been able to find much information on using Asynchronous JavaTMScript + XML (AJAX) with IBM® Mobile Portal Accelerator (MPA) 6.1. Moreover, I've heard from various groups of people (Developers, Product Teams, et al.) that, when using MPA, they prefer to perform server-side operations rather than client-side operations.
However, with the wide availability of new smartphones in the market, it doesn't make sense not to use their rich browser features supporting Web 2.0.
Recently I was involved in a Proof-of-Concept exercise around MPA in which the customer wanted their IBM WebSphere® Portal application to be available in mobile handsets. They were targeting smartphones (iPhone, Android, BlackBerry), so they needed a mobile portal that could provide a Web 2.0-like effect (AJAX call, run JavaScript event, and refresh HTML based on the AJAX response).
This article explains how you can use AJAX with a JSR 286 portlet deployed on Mobile Portal Accelerator 6.1.
Prerequisites
The following development environment is required for this exercise:
- Mobile Portal Accelerator 6.1
- IBM Mobile Portal Toolkit (MPTK) 6.1
- IBM Rational® Application Developer (RAD) 7.5
- JSR 286
- PhoneGap/Android simulator
- XML-based Device Independent Markup Extensions 1 (XDIME1)
Additional requirements
For AJAX to work, your mobile device browser should support JavaScript. To enable JavaScript in MPA, follow the steps below (as outlined in the WebSphere Portal Family wiki article, “
Using javascript in MPA with XDIME1 and XDIME2 tags:"
- For JavaScript to work on mobile devices (within MPA), you must make some changes in the Device Repository (devices.mdpr); specifically, you need to update the policies called "Support Event Handlers" (x-attributes.onevents.support) and "Script Element is supported," setting their values to "full". Both properties must have the “full” value selected, as shown in figure 1.
- By default, the “default” option is selected, but you can override it by clicking the triangle shape --- Override, and set the value to “full.”)
- If you are using MPTK, make sure that the modified device repository is copied.
- If you are using the runtime environment with a Mail and Calendar Services (MCS) database, make the changes and then import the modified device repository to the database using the mcsImport command.
Figure 1. Device Repository changes made
Implementing the code
Now let's consider a JSR286 portlet with MPA support, using XDIME for MPA-related client-side development.
The following JSP scriptlet code generates the URL for the serveResources method of the portlet:
JSP Scriptlet code for making AJAX resource URL
<%
String ajaxURL=renderResponse.createResourceURL().toString();
%>
The code in listing 1 makes the AJAX call, and "<%=ajaxURL%>" is the URL to be called for AJAX.
Listing 1. JavaScript code for making AJAX call
<script type=”text/javascript”>
function loadAjax()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support Ajax HTTP");
return;
}
var url= "<%=ajaxURL%>"; //this url set in the JSP scriptlet code .
xmlhttp.onreadystatechange=getOutput;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getOutput()
{
if(xmlhttp.readyState=="4" && xmlhttp.status=="200") // && is treated as & in XDIME 1 .
{
document.getElementById("ajax_address_div").innerHTML=xmlhttp.responseText;
return true;
}
}
The code in boldface in listing 2 has the <div> that will be refreshed by the AJAX response.
Listing 2. XDMIE code in the JSP
<pane name="postcode_btn_pane">
<div id="postcodebtn_div">
<xfaction type="perform" class="addressbtn" onclick="\{return information('4')\}" entryPane="postcode_btn_pane" />
</div>
</pane>
<pane name="ajax_address_pane">
<div id="ajax_address_div"></div>
</pane>
The code in listing 3 returns the HTML response to the client side.
Listing 3. Portlet code
public void serveResource(ResourceRequest req, ResourceResponse res)
throws PortletException, IOException {
String responsetext ="<div id='chooseAddress01' class='container actionStrip mt10 hidden chooseAddress' >"+
"<h4>Choose your address from the list below</h4><div>"+
"<select id='addressResults01' class='selectAddress' name='address'>"+
"<option value='Item 0'>41 Quilter Street, London E2 7BT</option><option value='Item 1'>43 Quilter Street, London E2 7BT</option>"+
"<option value='Item 2'>44 Quilter Street, London E2 7BT</option><option value='Item 3'>45 Quilter Street, London E2 7BT</option>"+
"<option value='Item 4'>46 Quilter Street, London E2 7BT</option></select></div></div>";
res.setContentType("xdime");
res.setCharacterEncoding("UTF-8");
res.getWriter().println(responsetext);
}
Here are steps of the AJAX call (see figure 2 for a pictorial representation):
- A user enters their postcode into the textbox and clicks “Find address”, as shown in the left-hand panel of figure 2.
- It then calls “ajaxurl”, which ultimately calls the serveResource () method of portlet Java code and responds with HTML response text (see middle panel of figure 2).
- The response text from serveResource() is then refreshed on the mobile browser (see right-hand panel of figure 2).
The user can select the value by clicking the newly generated drop-down list that was refreshed by the AJAZ response.
Figure 2. Steps for the AJAX call
Note that the above-mentioned code is nothing new in terms of AJAX, nor is calling AJAX from JSR 286 portlet.
Here are some of the mobile browsers that support an AJAX xmlHTTP request object:
- Handsets that support WebKit browsers.
- The BlackBerry browser introduced support for the XMLHttpRequest object in BlackBerry Device Software version 4.6 (see “Support for AJAX and the XMLHttpRequest object.”)
- iPhone, all versions.
- Android.
Conclusion
You should now be familiar with how to use AJAX with MPA for smartphones. You can use these steps to integrate JavaScript with Mobile portlets with XDIME1.
Resources
IBM Mobile Portal Accelerator product page:
http://www-01.ibm.com/software/lotus/portal/value/mobileaccelerator/
IBM Accelerators for WebSphere Portal
http://www-01.ibm.com/software/lotus/portal/value/
developerWorks WebSphere Portal zone:
http://www.ibm.com/developerworks/websphere/zones/portal/
About the author
Amit Pareek is a Staff Software Engineer with IBM Lotus Lab Services, India Software Labs, based in Pune, India. He specializes in Enterprise portal and content management solutions, Web 2.0 technology, and Enterprise Collaboration platforms including WebSphere Portal, IBM Web Content Manager, and Lotus Quickr. You can reach him at
ampareek@in.ibm.com.
Acknowledgement
The author thanks Vinoo Varghese (vvarghes@in.ibm.com) and Animesh K Sharma (animshar@in.ibm.com) for helping me learn about the MPA.