Comet Daily » Blog Archive » Real-time Widgets with the Dojo Toolkit

Real-time Widgets with the Dojo Toolkit

by Dylan SchiemannMarch 4th, 2008

In Martin Tyler’s recent post on the Integration of Ajax and Comet Libraries, he comments that the widget systems in YUI and the Dojo Toolkit are not yet particularly suited for real-time updates.

In Dojo, any of our widgets that use dojo.data can and should be able to handle real-time updates if they already support notification. The general Dojo approach is to use Comet to update the data store backing a Dijit, and then let the widgets update via notification. Simply update the model, and the view automatically reflects the changes.

This isn’t counter to what Martin suggests should happen so much as counter to his suggestion the currently libraries don’t do this. Perhaps when trying out Dojo he tried a model that does not support notifications?

We’re not stopping our efforts to make this even easier. For Dojo 1.2, we’re working here at SitePen on an HTTP Channels-JsonRestStore bridge to allow dojo.data driven UIs to be “instantly Comet-ized”. Kris Zyp of SitePen is working on a Comet transport implementation that can plug-in as a RPR/REST implementation and drive the upcoming JsonRestStore, so you can have completely automated Comet-powered live dojo.data sets, which automatically update attached widgets.

Sometimes it’s so easy that using dojo.data isn’t necessary. For example, looking at the real-time survey demo created by Peter Higgins of SitePen, we see the following initialization:

dojo.addOnLoad(function(){
// populate available choices with currently known choices from datafile
	dojo.xhrGet({
		url:"results.php",
		handleAs:"json",
		load:function(data,ioargs){
			for(var t in data.data){
				addChoice(t);
			}
		}
	});
 
	dojox.cometd.init("http://cometd.sitepen.com:9190/cometd");
	dojox.cometd.subscribe("/demo/survey/newoption",function(o){
		// just double check this isn't ours or a duplicate someone
		// has sent already
		var opt = o.data.option;
		var lc = opt.toLowerCase();
		if(!dojo.byId(lc)){
			addChoice(opt);
		}
	});
	dojo.connect(dojo.byId("survey"),"onsubmit",handleForm);
	dojo.connect(dojo.byId("addChoice"),"onclick",addChoice);
});

In the chart handling code of this demo, we see:

var updateChart = function(args){
	var data = makeChartData(args);
	c = masterChart;
	c.updateSeries("Toolkits",data.usage,
		{ stroke: {color: "green"}, fill: "lightgreen" });
	c.render();
};

where makeChartData is a simple function for parsing data. In essence, it’s a quick and dirty data store:

var makeChartData = function(/* Object */args){
	// summary: parse an object and create Arrays 
	// of labels and percentages
	// returns: object with toolkits[] and data[] params
	var i = 0;	
	//
	var toolkits = [{value:0,text:""}];
	var seriesData = [];
 
	// the data comes like data:{ "dojo":42,"jquery":30 }	
	for(var toolkit in args.data){
		// the value is a percentage of people polled
		seriesData.push((args.data[toolkit]/args.total)*100);
		// push the label along with the data
		toolkits.push({ value: ++i, text: toolkit });
	}
	toolkits.push({ value:++i, text:""});
 
	// send back our two arrays
	return {
		toolkits: toolkits,
		usage: seriesData
	};
}

Currently, it’s not that difficult to create real-time widgets, and with the changes we’re making in Dojo 1.2, it will work out of the box.

5 Responses to “Real-time Widgets with the Dojo Toolkit”

Dustin Machi Says:
March 4th, 2008 at 12:35 pm
To add on to what Dylan has to say…

In the case of Comet, it is likely that an app will have an in memory data store (such as ItemFileWriteStore or JsonPathStore). Basically the comet call back simply needs to update this store as appropriate. Something like this:

myStore = new dojox.data.JsonPathStore({});

dojox.cometd.subscribe(”/new/user”, function(user){
myStore.newItem(user);
});

dojox.cometd.subscribe(”/delete/user”, function(user){
myStore.deleteItem(user);
});

…and so on.

Any widget that is subscribed for notifications to myStore will be notified when these actions occur. For more info about the dojo.data side of this, check out http://www.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/dojo-data-design-and-apis/notif

Of course in the future stores could (will?) also be written that use comet directly in certain circumstances.

Dustin
Martin Tyler Says:
March 4th, 2008 at 12:55 pm
Sounds like you are moving in the right direction. Does the grid use this store and notification api? It’s the grid i specifically looked at before.
Steven Roussey Says:
March 4th, 2008 at 6:26 pm
I believe Ext2’s grid does..
Kris Zyp Says:
March 4th, 2008 at 7:37 pm
Martin, the Dojo grid can indeed connect to the dojo.data store (through a model adapter), with full bi-directional notifications, as long as the dojo.data store implements notification support. I have tested it myself, and dojo.data stores that are connected to a grid will automatically update the grid when data is changed in the store. Dojo widgets are definitely real-time capable.
Martin Tyler Says:
March 5th, 2008 at 2:58 am
That’s good, so the widgets are prepared for it, the next step, as Dustin suggests, is for some comet dojo.data stores for some simple default behaviour

Real-time Widgets with the Dojo Toolkit

5 Responses to “Real-time Widgets with the Dojo Toolkit”

Leave a Reply

Recent Articles

Recent Musings

Search