Skip to main content

Bridging to Open Ajax

Posted by driscoll on September 3, 2009 at 11:04 AM PDT

The Open Ajax Alliance is a standards organization with the mission of ensuring interoperability within Web based Ajaxified applications. One of their standards relates to intercomponent communication - the ability to subscribe and publish messages which can then be picked up by code written by other authors.

Please note that if you don't have an interest in Open Ajax, this post may not be especially illuminating - I've talked about the addOnEvent function before, even recently.

To write an Open Ajax application, you need to subscribe to events, much like in JSF 2, by registering functions which act as listeners. For instance, suppose we had a field in our page that looked like this:


<textarea id="statusArea" cols="40" rows="10" readonly="readonly" />

And we wanted to use this textarea to write out certain events that we'd like to track. I could then have this code in a JavaScript file:


   1 var statusUpdate = function statusUpdate(name, data) {
   2     var statusArea = document.getElementById("statusArea");
   3     var text = statusArea.value;
   4     text = text + "Name: "+data.source.id;
   5     if (name === "jsf.event") {
   6         text = text +" Event: "+data.status+"\n";
   7     } else if (name === "jsf.error") { 
   8         text = text + " Error: "+data.status+"\n";
   9     }
  10     statusArea.value = text;
  11 };
  12
  13 OpenAjax.hub.subscribe("jsf.event",statusUpdate);
  14 OpenAjax.hub.subscribe("jsf.error",statusUpdate);

In this case, we're subscribing to two channels - jsf.event and jsf.error, and calling the statusUpdate function when a message arrives on those channels.

So, where do those messages come from? Unlike JSF, the OpenAjax hub has a publish function, in addition to a subscribe function. By associating that publish function with a call to jsf.ajax.addOnEvent and jsf.ajax.addOnError, we can bridge between the two event systems - like this:


   1 var openajaxbridge = {};
   2
   3 openajaxbridge.eventUpdate = function eventUpdate(data) {
   4     OpenAjax.hub.publish("jsf.event", data);
   5 };
   6
   7 openajaxbridge.errorUpdate = function errorUpdate(data) {
   8     OpenAjax.hub.publish("jsf.error",data);
   9 };
  10
  11 jsf.ajax.addOnEvent(openajaxbridge.eventUpdate);
  12 jsf.ajax.addOnError(openajaxbridge.errorUpdate);

As I said, this is a somewhat specialized topic, but I thought it worth mentioning. The full code of the demo, including putting it into a component, is in Project Mojarra's source base, under the jsf-demo/OpenAjaxBridge directory.

Related Topics >>