Archive for the ‘Dojo’ Category

Screenshot: Scheduling problem

July 22, 2010

**UPDATE  06/05/2012** Contains old/nonexistent screenshots!

 

I just posted about the scheduling problem and promised a mock-up screenshot. Here it is:

Diagram showing sliders and charts

The sliders on the left will affect the population histograms on the right.

Obviously numbers are off and scale is inaccurate… for now.

Military TimeTextBox inside InlineEditBox

May 3, 2010

After about an hour and a half looking through the tattered remains of the dojo/dijit online documentation, I was finally able to figure out what I was doing wrong trying to put a TimeTextBox inside of an InlineEditBox (with the help of the O’Reilly book and the Pragmatic Programmers book) These books have been invaluable to me not only when the Internet is dead, but when the online docs fail to deliver.

Getting the widgets nested was easy, but I had a hard time figuring out how to get the parameters to the timebox, namely. I was trying desperately to make the time box in military time.

My initial markup was something like:

<span dojoType=”dijit.InlineEditBox”
id=”start_time”
editor=”dijit.form.TimeTextBox”
editorParams=”{timePattern:’HH:mm’}”
name=”time”
onChange=”foo()”>

It turns out I had forgotten the ‘constraints’ aspect of the editorParams. So the correct code for putting a military time timetextbox inside of an inlineeditbox is:

<span dojoType=”dijit.InlineEditBox”
id=”start_time”
editor=”dijit.form.TimeTextBox”
editorParams=”{constraints:{timePattern:’HH:mm’}}”
name=”time”
onChange=”foo()”>

Doh!

Dojox chart2d connectToPlot links and examples

March 23, 2010

I spent some time scouring the godawful dojo documentation this morning looking for help with the Chart2d api. I was looking for a way to create hover effects when mousing over a chart; something like the google finance chart widget (if you have flash).  I kept finding links to this event sample page:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_event2d.html

and this sample script page:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/action2d/

The api reference is here, and, like classic Dojo fashion, the api is completely undocumented.The only hint they give for usage is:

chart.connectToPlot(
plotName, // the unique plot name you specified when creating a plot
object, // both object and method are the same used by dojo.connect()
method // you can supply a function without an object
);

I was able to piece together this example from the comments of this post. The main usage for a chart2d mouse event seems to be:

somechart.connectToPlot("nameOfPlot",function(evt){console.log(evt)});

Here is a more fleshed out example:

[script type="text/javascript"]
dojo.require("dojox.charting.Chart2D");
makeCharts = function(){
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Columns"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: false});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.connectToPlot( "default", function(evt){console.log(evt);}) // you can supply a function without an object
//the next line is optional and may provide further information, but is independent of connectToPlot.
//chart1.surface.connect("onclick", function(evt){console.log(chart1.getCoords());console.log(evt)})
chart1.render();
};
dojo.addOnLoad(makeCharts);
[script]

Don’t forget to turn the script square brackets into script angle brackets.  Here, “default” is the name of the plot to which you will to attach the event and chart1 is the actual chart node. The biggest gotcha I have had so far is that the connecttoplot and surface.connect must come BEFORE the .render() call.

Screenshot: calendar context menu

January 29, 2010

One of the neat things about the dojo toolkit is the support for cool widgets like the right-click context menu. We have a screenshot of how we are using it in our application past the break.

We are using Dojo for our javascript framework. It works very well in most browsers without too much special-case programming. The biggest disadvantage that Dojo has is it’s horrendous documentation. Nearly every official page is marked ‘out of date’ and the automatically-generated API documentation contains virtually no information other than method names.

That said, two books that have been indispensible (especially when the internet is out) are O’Reilly’s Definitive Guide to Dojo and Mastering Dojo. Both provide detailed discussions of design philosophies and go into how dojo leverages the idiosyncrasies of javascript to create easily-maintainable code (not a trivial task in javascript).

I really like Dojo, but most of the other competing frameworks have better documentation. Anyway, on to the screenshot…

(more…)