Mobile Code and AJAX

Mobile code is an essential programming model for the current connected user paradigm which has been deemed “Web 2.0″. There are many examples of mobile code including Java RMI proxies (Jini/JERI smart proxies), browser downloaded JavaScript, Java applets and ActiveX controls. Sometimes mobile code is overlooked in the design of enterprise applications as a medium to increase application usability, scalability, and awareness. For example, the power of Jini is really it‘s ability to locate services from anywhere on the LAN and communicate using a protocol which is defined by the remote service. In fact, services may include all of the functionality inside the downloaded service proxy and therefore eliminate the need to communicate back to the remote service.

In terms of RIA (Rich Internet Applications), the use of XML and/or JSON communication from downloaded Flash and/or JavaScript allows for asynchronous calls to the server for data updates to the UI. This ability to update data without reloading the page becomes an important function of web application usability by giving better user feedback and lower bandwidth overhead. The use of XML as a message format for this communication also enables standard integration into enterprise and consumer services which are usually contacted with REST or SOAP messages. A term has even been developed to describe this type of communication, “Client/SOA”.

My personal bias for web applications with AJAX recently has been using DWR (Direct Web Remoting) to expose POJO (plain old Java object) as JavaScript objects. The reason that I have adopted this approach to my AJAX development is DWR‘s ease of use and the separation of concerns. This separation is orchestrated by allowing web designers to develop the user interface with less concern for their integration with server side development. Here is an example of this separation with DWR:

<html>
<head>
...
<script language="text/javascript" src="/dwr/engine.js">
<script language="text/javascript" src="/dwr/util.js">
<script language="text/javascript" src="/dwr/MyPojo.js">
<script language="text/javascript">
function getFooFromPojo() {
MyPojo.getFoo('setFooValue'); // send callback function name
}
function setFooValue(value) {
DWRUtil.setValue('myDivForFooValue', value); // find DIV by ID to put value into
}
</script>
...
</head>
<body onload="getFooFromPojo();">
...
<div id="myDivForFooValue'>
</div>
...
</body>
</html>

The HTML and JavaScript is quite simple in this example. We have imported the DWR specific JavaScript sources, engine.js and util.js, along with my exposed POJO in MyPojo.js. The MyPojo.js script is generated using some DWR magic which I will show later. The ‘‘getFooFromPojo()‘‘ function calls on the MyPojo Java class method ‘‘getFoo()‘‘. The JavaScript version of the MyPojo ‘‘getFoo()‘‘ method also takes the callback function for the resulting value to be handled by as the last argument. In this case we sent the ‘‘setFooValue‘‘ function as the callback function with the resulting value as a parameter. Inside the callback function we set the text of a DIV with ID ‘‘myDivForFooValue‘‘ to the resulting value.

Now to show the magic. DWR exposes POJO method ‘‘getFoo()‘‘ through an XML descriptor by default named dwr.xml and placed in your [WAR (web application resource)|http://access1.sun.com/techarticles/simple.WAR.html] under the ‘‘WEB-INF/‘‘ folder. An example of the content within this file looks like this:

<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
<allow>
<create creator="com.acme.example.MyPojo" javascript="MyPojo"/>
</allow>
</dwr>

The basic description of what is contained in this example dwr.xml file is that the class ‘‘com.acme.example.MyPojo‘‘ will be available as a JavaScript object by the name of ‘‘MyPojo‘‘. In this case all of the public functions of MyPojo, besides some of the ‘‘java.lang.Object‘‘ base functions, are available through the JavaScript equivalent object. My class may look something like this:

package com.acme.example;

public class MyPojo {

public String getFoo() {
return FooRepository.firstFoo();
}

}

This simple example may be enhanced to use other JavaScript sources and web services within the same page. This mashup of multiple services (exposed POJOs, web services, JavaScript functions, etc…) will produce an ever expanding realm of user interaction possibilities. An example of this may be an enterprise application which contains data such as customer location. You may create a mashup of this data with Google Maps to display the customer‘s location visually on a page with driving directions.

The examples above are only one of the many examples for mobile code. A large interest of my own is intelligent agents and peer-to-peer systems. There are multiple technologies which fit into this market (Jini, JXTA, SUMO (Suggested Upper Merged Ontology), OAA (Open Agent Architecture), etc…) which are not described in this blog entry. These technologies may enhance the user experience through dynamic service interaction, context awareness, and a suggested language for communication between users and services. It is an exciting time in which innovation is again a part of the technology domain. Mobile code will enable a whole new user experience as we move past web 2.0.

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>