Search

What the Quote?

"I don't want to shoot the Pope in the eye for a Klondike bar, but anything anything else would be uncivilized."

Steven Rodgers

"I think the Pope resembles a jack-o-lantern. He's just got the kind of face you wanna carve into a pumpkin."

Pete Oberlin

"I'm trying to find a word for poop that rhymes with fail."

Nathan T Freeman

« Auld Lang Syne | Main| Aptana »

Using the YUI to create an Open Database tree view

Category show-n-tell thursday
Based on feedback received regarding release 0.2 of XIDED, I've updated the Open Database dialog to list the server's databases as a YUI TreeView instead of as a flat table; in addition to being more usable, this also avoids Domino's field size limit, since this now loads the data via AJAX instead of via a WebQueryOpen agent on a form loaded in an iframe. In case anyone else has a use for this, here's a sample database demonstrating this technique. The code involved is very lightweight and fast.

This contains two elements (plus supporting Javascript, stylesheets, and images): a page to serve up the HTML and Javascript, and an agent to send the database list formatted as JSON. The agent is probably self-explanatory, but I'll call out some oddities I encountered in the Javascript:
  • Because each folder can potentially contain subfolders (and subfolders of those subfolders, and so on), a recursive function is used. Javascript tends to be a bit flaky when it comes to recursion, so this took a bit of experimentation. In the end, I opted to use the arguments.callee syntax instead of just calling the function internally by name. This also saves hassle in the event I ever want to rename the function; I won't have to remember to update the internal recursion call, because arguments.callee automatically refers to the parent function, regardless of its name.
  • To loop through a folder's databases and subfolders, I'm using a typical for loop, but within the loop, I'm using .shift() to return and remove the first element each time instead of Array[x], because the latter also got screwy within the recursive function. This worked just fine for the databases, but for some reason always came up one short on the folders, so there's a check for null or undefined just to be sure.
  • For the folders, I'm adding MenuNodes instead of TextNodes. This just means that expanding one folder collapses any that is already open. I opted for this because that's what we're used to in the Notes client (although in a TreeView you don't have to navigate back up to the parent folder to explore a different subfolder). Using TextNodes instead would allow multiple folders to be expanded simultaneously.
  • For the database nodes, I'm overriding the onLabelClick method. In this example, that's sort of silly, because the overridden method is just navigating to the database's URL, which could also be accomplished by just setting the node's href property in the constructor. But in XIDED, clicking a database node actually fires a different function, so I preferred to override onLabelClick instead, and stuck with that approach in the sample database to demonstrate how that's done.


Contact Me

Elsewhere

Assorted Linkage


Locations of visitors to this page