The newest version of easyXDM (v1.5.3) now includes two new classes, the easyXDM.WidgetManager, and easyXDM.Widget.

These make it extremely easy to make mashups based on the subscribe/publish architecture.

To read more about easyXDM check out this blog post.

The widget demo can be found at http://consumer.easyxdm.net/current/example/widgets.html,  and if you want to, just copy the code for the widget found here, modify the src for the scripts and save it to your own domain – you should now be able to add it from the WidgetManager!

The WidgetManager

To set up a page to contain widgets we need an instance of the WidgetManager:

var _widgetManager = new easyXDM.WidgetManager({
    local: "../hash.html",
    container: document.getElementById("widgets")
 });

And with the widgetmanager set up we continue by adding widgets by their url

_widgetManager.addWidget("http://provider.easyxdm.net/example/widget.html",{});

And thats it 🙂

The widgets

Creating a widget isn’t much more work

The following is a skeleton widget

var widget = new easyXDM.Widget({
    subscriptions: ["testtopic"],
    initialize: function(widget, widgetManager){
        // Set up the widget

        // Render the UI

        // Register the handler for incoming messages
        widget.registerMessageHandler(function(url, topic, data){
            // Do something
        });
    },
    initialized: function(widget, widgetManager){
        //This is called after the widget has been initialized by the widgetmanager
    }
});

To create a custom widget you only need to select the topics to subscribe to, build the UI, and handle the incoming messages the way you see fit.

To publish your own messages you simply use widget.publish  like this

widget.publish("position", {
    latitude: "60.378776",
    longitude: "5.337811"
});

and all subscribers will get this.

It’s that easy!