dijit.byNode and firebug fun

Here's a little tip if you're working with dojo widgets. In firebug you can select an element in the HTML view. Back in the firebug console, your selected node is available as $1 So, $1.tagName shows you the element name, etc. If you've got dojo on your page you can use anything dojo has provided in the console, and if you're using dijit, you also have that stuff too. So, in the HTML view click on the element that represents your widget. It'll have a widgetId attribute. Now, in the console, try:

dijit.byNode($1)

this is a pattern I repeat so often I actually printed and read the firebug manual to get around there with keyboard shortcuts. I recommend you do the same. Now you can quickly and intuitively explore the state of your widget:

dijit.byNode($1)._started
console.dir(dijit.byNode($1).getChildren())
dojo.getObject(dijit.byNode($1).declaredClass).prototype

And/or, you can go back and forth between console/HTML:

dojo.query("[region]", $1).filter(function(n) { return dijit.byNode(n).declaredClass.indexOf("ContentPane") > -1; });

.. gets you call the ContentPane domNodes that are descendants of your selected BorderContainer node. Click on one, and:

dijit.byNode($1).setContent("boo!"); 

its your page, have fun!

dijit.Declaration and its mixins

I love the dijit.Declaration widget introduced into the dojo toolkit around version 0.9+. It lets you declare a new widget class inline in your html - which can be very useful, especially when you want the widget templateString to be dynamic output from the server. Just a little tip - I had been getting a m._findMixin is not a function error when instantiating widgets from my Declaration. If you've ever tried to step through widget instantiation you have an idea how sigh-worthy this particular error was. After a little debugging and poking through Declaration.js I noticed that the mixins property was typed as an array. When using dojo.declare directly, the parent class is the 2nd argument. And if you need mixins (like dijit._Templated) you make that 2nd argument an array and list them out in order as its content. So, it can be either a string or an array and dojo.declare will do the right thing. It turns out that with dijit.Declaration, the mixins property must be an array, even if you only have one value to put in there:

<div
 dojoType="dijit.Declaration"
 widgetClass="myns.widget.WidgetClassName"
 mixins="[dijit._Widget]"
 ...
>...</div<

Which put me back in action, and I hope steers you around this particular hole in the road.