Dojomino

There are 3 dojo core elements that we'll talk about here. The first is dojo.body(). Getting the body element from an HTML page should be a pretty simple task, and these days with modern browsers, document.body will pretty much do the trick. However, that wasn't always the case and dojo provides a little shortcut here to get the body element.

We know we need to fetch the first table in the document (the container of the action bar), so we can use dojo.query() to do so. It would be nice if we could use dojo.byId() or document.getElementById(), but since Domino (to date) doesn't do a very good job of putting the ID tag on any of its generated elements, we'll go the dojo.query() route. Some good information on dojo.query can be found here and here.

Now that we have a table, we can set an id on it by a simple actionTable.id = 'FormActionTable' statement. And here's where we can use dojo.query's capabilities in a little more interesting way. All the action "buttons" are actually just a href elements in table cells. So let's get those elements into an array that we can work with.

This reads as, "find the table element with the id of FormActionTable and within its cells give me all the a elements as an array". Cool! What an easy way to navigate the DOM! It sure beats the heck out of dealing with the vagaries of how IE and FF handle child nodes manipulation. We'll leave the topic of working with that array, assume that we've gotten what we needed and created a new "replacement" action bar. Now we need to replace the original table with our new action bar. Removing the original table is pretty easy. We can do something like this:

But how are we going to insert the new action bar as the first element in the body? With DOM, we can easily append a new element with body.appendChild(newBar), but that puts it after all the existing elements in body. We could also use DOM's insertBefore, but that requires that we know what element we want to go in front of. All of this is doable of course, but it's a pain. Enter dojo.place(). Dojo.place() allows us to specify the index of where we want to put our DOM node within another element. For example:

That lets us put the newBar node inside the body as the first element. Simple.