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:
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.
