Tales from the Evil Empire

OpenAjax InteropFest 1.0: Microsoft's entry

Yesterday I got to write our entry in OpenAjax's InteropFest. The goal of this event is to demonstrate how different Ajax libraries can be parts of the OpenAjax ecosystem and interact with each other through the OpenAjax hub. The currently central feature of the hub is to expose a publish/subscribe message bus so that both producers and consumers of events can speak through a third party that is neutral to specific Ajax implementations.

The OpenAjax Alliance provides a template for demo applications that shows a live data source feeding fake stock quotes through the hub to a visual component that then renders them.

I've chosen to modify the live data source to be a Microsoft Ajax-style component. The visual component would not have been as interesting because it's really the application that is a consumer of events. The visual component itself doesn't strictly speaking communicate with the hub, the application does (through a trivial API call) and then transmits the results to the component for rendering. In other words, the data source is a lot more interesting because it exposes the event, and if it is a Microsoft Ajax component, it will use the Microsoft Ajax event pattern, which is quite different from the OpenAjax event pattern.

I did refactor the consuming part of the application quite heavily, but that was more to understand it than anything and it's not the essential part of our entry.

To achieve the mapping from Microsoft Ajax events to OpenAjax messages, I've written the following simple helper:

Type.registerNamespace("Sys.OpenAjax");

Sys.OpenAjax._Helper = function() {
}
Sys.OpenAjax._Helper.prototype = {
    mapEventToMessage:
        function(owner, eventName, messageName, publisherDataMapper) {
            var handler = function(sender, args) {
                OpenAjax.hub.publish(
                    messageName,
                    publisherDataMapper ?
                        publisherDataMapper(sender, args) : null);
            }
            owner["add_" + eventName](handler);
            return handler;
        },
    unmapEvent:
        function(owner, eventName, map) {
            owner["remove_" + eventName](map);
        }
}
Sys.OpenAjax._Helper.registerClass("Sys.OpenAjax._Helper");

Sys.OpenAjax.Helper = new Sys.OpenAjax._Helper();

The application code can use that new API to map the events of any Microsoft Ajax component to become publishers of OpenAjax messages without any necessity for the component to contain any code specific to OpenAjax, let alone know about it. In other words, the component implementation remains completely decoupled from OpenAjax and it's the application that makes the connection.

The application maps the quoteChanged event to the org.openajax.interopfest10.datagen.stockpriceupdate OpenAjax message like this:

Sys.OpenAjax.Helper.mapEventToMessage(
    corpList, "quoteChanged",
    "org.openajax.interopfest10.datagen.stockpriceupdate",
    function (sender, args) {
        var quote = args.get_quote();
        return {
            tickerName: quote.symbol,
            corpName: quote.name,
            price: quote.price
        };
    }
);

From this moment on, all quoteChanged events will be published on the hub. An interesting thing to note is the use of an optional function that maps the Microsoft Ajax event argument to the expected OpenAjax data payload.

Brad Abrams kindly hosts the demo on his personal website for the moment:
http://brad_abrams.members.winisp.net/Projects/OpenAjax/index.html

The source code can be downloaded by clicking here.