Categories, Hierarchies and the GUI that is the browser....

I've been working on web interfaces all day and it's made me think a lot about the work that people do in interface design.  There's a lot of details to making a useable interface. Microsoft and others spend a great deal of time and effort on UI design issues.  So it's not a wonder that that part of an application always takes me the longest.  Personally I think web browsers are both the greatest thing to happen to computers and the worst thing possible.  The greatest in that it provides some consistency.  The worst in that it is very limiting. 

Here's the problem I've been faced with (and the solution I came up with).  I've been working on a hierarchal categorization system for our content management software.  I needed a way to present the hierarchy to the user from within the document editing UI and allow them to interact and select a set of categories. 

Somebody, somewhere created a standard GUI for presenting hierarchal elements.  I'm not sure who to credit for it but it's really quite simple and once you've used one in an application...quite obvious as well. I'd hate to credit Microsoft with it but as far back as I can remember the point at which it's use became more pervasive was after the release of Windows 95. Someone once told me that Microsoft spent 10 million dollars just on researching the user interface for 95 and if you'd seen the previous incarnation of Windows you could almost believe that.

So how to use a tree to present the category hiearchy to the user.  Well if you're a Java Geek you instantly think Applet and since I AM a self-described Java Geek that's the first thing I tried too.  Alas poor Yorick for it was not meant to be.  I had 3 problems with this approach:

1. Our database is only accessible on the internal LAN so external clients couldn't hit it.  This meant loading all of the categories into the page to initialize the applet.
2. Since it's quite possible that we'll end up with quite a large category hieararchy this quickly turned into quite a major speed bottleneck.
3. Microsoft browsers where just not playing nice with the Java Applets (Yep, gotta support em)

As you can see it became quite obvious that this approach wasn't going to work for me.  I started looking around for alternatives and thought that a simple servlet might do the trick.  Since I only needed to display the hierarchy to the level that was expanded it should be relatively quick.  The drawback here was that every time the user would click on a branch of the tree the page had to be reloaded.  Since this was the document editing interface I didn't want to run across the potential for the users to lose their edits. This meant that I couldn't reload the page.  So how do you use a servlet to display this information without reloading the page......

I decided to give JavaScript a whirl.  Now this was a big step for me as I tend to shy away from JavaScript like it was laden with the plague.  Every time I've had to write anything in JavaScript I've encountered a morass of browser specific details that where enough to make an insane man go sane. (Trust me, it explains a lot!!).  I wasn't holding out a lot of hope but needed something quickly (deadlines...don't you just love them??) and was getting quite desperate (Oh what desperation can drive us to do).  Once I started playing with the idea though it became apparent that I could write a very simple script to open up a small popup that would receive the servlet output.

<script language="JavaScript"><!--
var msgWindow;
function newWindow(file,window) {
   msgWindow=open(file,window,'statusbar=yes,resizable=no,scrollbars=yes,width=300,height=400');
   if (msgWindow.opener == null) 
      msgWindow.opener = self;
   msgWindow.focus();
}
--></SCRIPT>

This allows the page reloading that the servlet required without the possibility of losing the user edits. From that point it became quite simple to write another small JavaScript to send the results back to the document editing interface

<script language="JavaScript"><!--
function doSelect( theValue ) {
   top.opener.document.formName.fieldName=theValue;
   window.close();
}
--></script>

Now that that's complete it's off to the next phase of categorization.  I'm going to have to find a way to assign categories to the existing content in some logical manner....insert a collective and thoughtful "hmmmmm" here....