Follow along and implement the real-time streaming AJAX system in Figure 1 using two different AJAX toolkits and the OpenAjax Hub.

Requirements
The requirements for this solution are straightforward. For this application we need a ready-made data grid control that will display changes in prices to stocks when those changes occur. A nice-to-have would be visual indicators in the GUI that show when a cell value in the grid is increasing or decreasing...and, of course, we want to deploy this to just a standard Web browser, so we also must do this without any reliance on plug-ins, applets, or Active-X controls. (Thanks goodness this is an AJAX article!) Figure 1 shows the basic design that could be styled more at a later date. In addition we'll want to add more AJAX controls to this page that can tap the same streaming stock data for other calculations and visuals, such as charts or portfolio totals. For now, we'll keep it simple.

Architectural Design
We don't have to build the above system from scratch, and can instead leverage readily available, reusable AJAX parts to get the job done quickly; the architectural strategy is to use AJAX pieces and parts that can work together. At the core of the system in Figure 2 is the OpenAjax Hub (see the OpenAjax Hub for Interop sidebar). We'll use the OAA Hub as a central publish/subscribe bus to which we can publish the live stock data so that the data grid and the future visual controls and functions can listen for those events and messages.

Resources
Publish/Subscribe Core
For our publish/subscribe core we'll use the OpenAjax Hub, an open source project implementing the evolving OpenAjax Alliance Interoperability Working Group specifications. Start at HYPERLINK "http://www.openajax.org" http://www.openajax.org and follow the links to the sourceforge.net project from there.

Ready-Made GUI Controls
For the GUI controls we'll leverage those from TIBCO General Interface, an open source AJAX project that currently provides ready-made AJAX controls for GUI, data, and communications in addition to visual tools for rapid AJAX application development, unit and functional testing, and AJAX debugging.

Real-Time Communications
For our real-time data, we'll use DWR 2.0, the just-released next version of Direct Web Remoting (DWR), an open source project that enables you to remote Java objects through JavaScript in the browser and now vice versa through its "Reverse AJAX" capabilities for real-time remote control of JavaScript objects in the browser via Java objects on the server across a persistent HTTP connection (a.k.a "Comet").

Project Source Code
You can quickly grab a copy of this project and all its parts from the 2.x release of DWR at http://getahead.org/dwr. Once you've installed DWR, check out the General Interface demo. Those who want to extend the GUI and add more controls should also download TIBCO General Interface from http://developer.tibco.com/gi. Note that the OpenAjax.js file that ships with the project in the DWR download is an older, 46 kb version of the OpenAjax Hub. The latest version of the OpenAjax Hub, which now also implements a savvy topic-based event naming scheme over the basic pub/sub capability, is currently under 2 kb (yes two kilobytes - that's not a typo).

Implementation
The <dwr>/gi/index.html file loads up the OpenAjax.js file, the needed DWR libraries, and some application specific files in the head of the HTML page.

The body of the page includes a div that loads the TIBCO GI library.

<div style="width:100%; height:220px;">
    <script
       type="text/javascript"
       src="JSX/js/JSX30.js"
       jsxapppath="gidemo" jsxlt="true"> </script>
</div>

The jsxapppath="gidemo" loads the GI project in /gidemo and in turn renders the GUI component declaration: gidemo/components/appCanvas.xml. Once these are loaded, GI's project init function is called:

function giLoaded() {
    OpenAjax.subscribe("gidemo", "corporation", objectPublished);
    dwr.engine.setActiveReverseAjax(true);
}

This subscribes to the OpenAjax Hub listening for publications to the 'gidemo' + 'corporation' topic. When a publish happens, the objectPublished function is called. The last line turns DWR's Reverse AJAX on so that the data can flow from the server to the client without polling or waiting for the GI application running at the client to request an update from the server. The objectPublished function looks like this:

function objectPublished(prefix, name, handlerData, corporation) {
    var matrix = giApp.getJSXByName("matrix");
    var inserted = matrix.getRecordNode(corporation.jsxid);
    matrix.insertRecord(corporation, null, inserted == null);
    matrix.repaintData();
}

This simply takes the published data and inserts it into the GI matrix component. Each column of the matrix component is bound to a property of the corporation JavaScript object. The matrix control, its columns and bindings were configured using TIBCO GI's visual tools: TIBCO General Interface Builder.

There are a number of possible repaint strategies, including the simplest of them all: matrix.repaintData(); as shown above. However, to meet our requirements above, in the source below we've implemented a more sophisticated approach that enables both incremental painting of updated rows and cell highlighting.

Instead of matrix.repaintData(); we've used this:

...
// There are many ways to get a table to repaint.
// One easy way is to ask it to repaint:
// matrix.repaintData();

// But we are going for a fancy option that does highlighting
   for (var property in corporation) {
     if (property != "jsxid") {
       var ox = matrix.getContentElement(corporation.jsxid, property);
       if (ox) {
         var current = ox.innerHTML;
         if (current != "" + corporation[property]) {
           ox.style.backgroundColor = "#FDE4EB";
           var callback = function(ele) {
           return function() { ele.style.backgroundColor = "#FFFFFF"; };
         }(ox);
         setTimeout(callback, 1000);
         ox.innerHTML = corporation[property];
       }
     }
   }
}
...