Hierarchial menu trees have been around for some time now. Do the names X-Tree, File Manager, and Windows Explorer ring bells? Well, if you've used one of these programs (and almost all of us have at sometime), you have used a hierarchial menu tree.

In fact, those of you familiar with Windows 95 use HMT's on virtually an everyday basis. OmenTree is based on the Windows Explorer interface, so it will be instantly recognisable and usable by regular Explorers.

I believe this is why such complex information structures (such as file systems) are stored and presented in a hierarchial format - otherwise they would be infinitely difficult to grasp and manage. Imagine having all of the files on your hard drive in the root directory - what a nightmare!

OmenTree is like a file structure for the web, except the files themselves are replaced by hyperlinks to local files, remote servers, and even newsgroups and e-mail addresses. Anything that can be pointed to by a URL (Universal Resource Locator) can be represented by a node in the OmenTree structure, and these nodes can in turn be categorised and organised logically.

Thus, by using OmenTree, you are giving the users of your web site a helping hand - especially if the site is large and difficult to navigate using conventional in-line hypertext links. Even if your site is relatively small, OmenTree can be used to create a fancy and nifty menu that you can show off to your friends! Make sure you tell them about it!

• a general site menu/index - the most common use for OmenTree is a general purpose site menu/index. What this means is that visitors to your web site use OmenTree to navigate and access the various sections of your site. Set up OmenTree to present the content of your site logically (categorised into well-organised sections) with folders and sub-folders.
• a site map - perhaps the second most popular use for OmenTree is a site map. This is very similar to the above (actually I've never really been certain of the exact definition of a 'site map'), except I belive that site maps are not generally used as primary menus for the site in question, rather as a secondary area a user can access if they so desire. Also, site maps usually reflect the actual structure of the site (more like a file system) rather than the logical presentation.
• a document navigation assistant - much like the default presentation of OmenTree combined with this help document. OmenTree can provide a convienient location to place links to key anchors in documents, much like this one. Users can see at a glance the topics of the document, and rather than scrolling through the document scanning for the desired information, they can simply click on the desired section in the OmenTree menu.
• a link catalogue - much like the Bookmarks (Netscape) and Favorites (IE) features of commonly used Web browsers, you can create a custom OmenTree that contains a well-organised, categorised list of links. Have you got a lot of links to show to your users? You know what to use!
• a web-based application component - yes, because of the dynamic nature of URLs, you can even use OmenTree as a web-based application component, e.g. on your corporate Intranet. You can even set up menu nodes that access true Java-applets, CGI scripts and forms, or even JavaScript-commands - as far as your imagination will take you!

1. you modify the original script a little by providing your own OmenTree structure definitions - these are pretty easy to understand and create, more on that later;
2. you add your own custom settings by modifying some other variables in the script - these change things like the background color, text colors, default target frames and icons etc. Again, these will be covered later.
3. you slot the script into your index.html file, or better yet, just copy the pre-existing omentree.html file over as your index.

Even if you have never heard of JavaScript before, you can still create an OmenTree menu - I'll guide you step by step through the exact process - so take it easy! You'll create your own funky little menu in no time, and, you'll learn along the way!

Basically, once your index loads, and all of the pages in the frames have loaded, OmenTree starts up. It looks at your structure definitions, works out what the tree looks like and what goes where, and then draws the first branch of the tree - the root, and it's immediate children.

Through JavaScript commands, the tree then becomes dynamic - allowing the users of your site to click on folders so that they expand, and show hidden branches and nodes. Although it may sound complex, I can assure you, it really is quite easy, as you'll see.

Ok, let's start by making backups of all the original OmenTree files, just incase something goes wrong. Then, open up your favourite text editor (e.g. Notepad) and load up the omentree.html file - it's probably best to maximise the window, as well.

Now, the first thing you'll see is a lot of yucky code. Don't worry, this is the code responsible for drawing the tree, you won't even have to touch it - in fact, it's best left alone because if something goes wrong in there, OmenTree mightn't seem so funky after all!

For those who are interested, I've put some comment headers in front of all of the functions, so you can tell at a glance what they are there for. You might notice the drawBranch() function as you scroll down - huge, eh? This is the heart of OmenTree - a recursive function (meaning it calls itself from the inside) that is responsible for working out the hierarchy and writing the necessary HTML.

Keep going down until you get to a function called loadData(). This is where you will be concentrating 99% of your efforts. Again, especially with the default menu structure, it's a huge function - and probably a little overwhelming to start with - again, don't panic!

You'll notice that the loadData() function is divided into three distinct sections:

• tree structure definitions,
• user defined variables, and,
• additional HTML sources.

This is where the Additional HTML Sources section comes in. You'll notice two variables:

• prefixHTML; and
• suffixHTML

You'll notice that the suffixHTML variable already has some HTML stored there. This is for the default OmenTree menu, and if you do not want anything displayed after your menu, you can just clear the HTML - but make sure you leave the empty quote marks, like this: "".

prefixHTML is great for inserting a logo image or something similar for your site in the top-left corner, and suffixHTML is mostly used for brief comments or 'last modified' dates.

Let's go through each variable individually:

• structureStyle - for a little variable, structureStyle has a big impact on the appearance of the tree. Some of you may run a site with a very dark appearance (where a white menu would look out of place), and others may run a site with a light appearance (where a black menu would look out of place). Being the nice guy that I am, I decided not force you to use a certain style - so you get a democracy - a choice! Use a value of 0 if your menu is to have a lightish appearance, and a value of 1 if it is to have a darkish appearance. Basically, it just tells OmenTree to load a different set of images, customised to look better for each style. Look in the images folder to see what I mean.
• backgroundColor - pretty straight forward - sets the background color of the menu document. Use a hexadecimal RGB triplet, or a recognised browser color name.
• textColor - same as above, except sets the color of the text used in the menu.
• linkColor - sets the color of text links in the menu - since there are none in the main structure, this will usually only affect custom links in the prefixHTML and suffixHTML sections.
• aLinkColor - sets the color of active links.
• vLinkColor - sets the color of visited links.
• backgroundImage - specifies a gif or jpeg image to be used as a background to the menu. If you do not want to use one, just leave the variable blank or null (""). NOTE: background images do not exist in the same folder as the menu images, you must specify the complete path or URL to the image.
• defaultTargetFrame - this is a very important variable. It specifies the name of the frame (defined at the bottom of the index.html file) that all links will target to by default. It saves you from typing the target frame over and over again in the menu definitions. More on that later.
• defaultImageURL - another important variable. This one specifies where OmenTree should look for all of the images used for the menu structure. It can be a complete URL, or just the local path to the folder. Make sure you include a forward slash on the end, otherwise it will not work. e.g. 'images/', 'http://www.mysite.com/images/omentree/'.
• defaultLinkIcon - a time saver again, this variable specifies the default gif image to use (in the default images directory) for links. More on that later as well.
• omenTreeFont - the face name of the font to be used by the menu. Alternatives can be specified separated by commas as well, in case the user's machine does not have the first font.
• omenTreeFontSize - usually set to 1 or 2, but no higher or the menu structure will break apart and look unusual.

Basically, all of your menu tree definitions are stored in a big array - or in this instance, a Collection (a term borrowed from Smalltalk programming - a Collection is like an Array, but it does not have a fixed size, and you do not specify indexes when placing data inside).

Each line in the definitions section of the source code is adding a new node to the tree. Each tree has only one root node, and must only have one. Imagine a tree with two trunks!!

The rest of the definitions consist of link nodes, and link nodes sub-branched into folder nodes.

The Root Node

Your menu definitions MUST have only one root node, and this root node MUST be the first node in the Collection - i.e. it is added first. No questions asked, no democracy here - this is how it must be! Don't put in more than one, or you'll have trouble.

Root Node Syntax:

treeData.add(new RootNode('<ID>','<NAME>','<URL>','<TARGET>','<ALT ICON>'));

where:

• <ID> = a unique code to identify the root node (I recommend 'root'),

• <NAME> = the name to be displayed for the root (e.g. 'My Site'),

• <URL> = the location of the document that the root node will link to when clicked,

• <TARGET> = the target frame of the root link (if left blank, it will use the name set by the defaultTargetFrame variable). Setting the target to '_top' causes the link to fill the entire window.

• <ALT ICON> = the name of a 16x16 gif image in the images directory to be used as an icon (if blank, it will use the default image of 'img-globe-0.gif' or 'img-globe-1.gif' depending on the structureStyle).

Folder nodes, however, do not link to anything - they are simply containers for other folder and link nodes.

Folder Node Syntax:

treeData.add(new FolderNode('<ID>','<PARENT ID>','<NAME>','<ALT ICON CLOSED>','<ALT ICON OPEN>'));

where:

• <ID> = a unique code to identify this folder - make sure that no other folders have the same id, or OmenTree will get confused.
• <PARENT ID> = the id of the folder's parent node - make sure this is valid, or the node will become 'lost'.
• <NAME> = the name to be displayed for the folder.
• <ALT ICON CLOSED> = the filename of a 16x16 gif in the images directory to represent when the folder is closed (unexpanded). If left blank, the default for the style of structure will be used.
• <ALT ICON OPEN> = a 16x16 gif that represents when the folder is open (expanded). If left blank, the default is used.

Link Node Syntax:

treeData.add(new LinkNode('<PARENT ID>','<NAME>','<URL>','<TARGET>','<ALT ICON>'));

where:

• <PARENT ID> = the parent node of the link (either the root, or a folder),

• <NAME> = the name to be displayed for the link,

• <URL> = the location of the document that the link node will link to when clicked,

• <TARGET> = the target frame of the link (if left blank, it will use the name set by the defaultTargetFrame variable). Setting the target to '_top' causes the link to fill the entire window.

• <ALT ICON> = the name of a 16x16 gif image in the images directory to be used as an icon (if blank, it will use the default image specified by defaultLinkIcon).

1. It doesn't really matter what order you put your nodes into the Collection (except the root of course, it HAS to be first!) - OmenTree will work out which node goes where from the id values of each node, but...
2. It DOES matter if you want a particular order for each node in a branch. It's difficult to explain, but basically when you open an OmenTree folder, it goes off and finds all the children of that folder node (by looking for all nodes that have a parent which is the folder), but it scans the Collection from start to finish, in order. So nodes which are higher up in the Collection appear before nodes that are after them - does this make sense?
3. To help you when you edit your definitions, it is best to keep the definitions approximately in an order that you can understand - i.e. don't have nodes 'willy-nilly' everywhere.
4. Use the tab key! When writing your definitions, use good programming practise and 'tab' in the hierarchy of the definitions, to help you tell what the structure looks like. This also helps when you go to edit the definitions later on.
5. Think of the end-user when creating your tree. Make sure it's categorised well, set-up correctly, and looks nice!
6. When creating your own custom icons, make sure they are 16 pixels wide by 16 pixels high, and watch the transparency of GIFs (especially if you use background images) - this is why if you look at some of my original images in a paint program, they have funky green backgrounds - this is the transparent color!
7. Remember to set the <TITLE> of your index file (up the top), otherwise you'll end up with your site having a title of OmenTree.
8. Above all, have fun - trust me, it's worth all the effort - you'll be very pleased when you've completed your very own OmenTree!

Frame definitions

One thing I haven't mentioned so far is that little extra teensy bit on the bottom of your index.html (or the omentree.html) file - the frame definitions. Here's some more tyranny:

• you must have at least two frames to use OmenTree - IT WILL NOT WORK WITH A SINGLE FRAME SITE! EVER!
• one of these frames MUST be called 'treeFrame' - although it would not take too much effort to modify the script if you really had to.
• inside your <FRAMESET> tag, you MUST have onLoad="start()", otherwise OmenTree will never get off the ground.
• for your pageFrame, you would generally set it's SRC to equal the very first page you want visitors to see once they arrive at your OmenTree'ed site. NOTE: OmenTree will NOT draw itself until this, and all other additional frames have fully loaded - including images.
• for your treeFrame, you would usually set the SRC to a blank html file, which is required by some browsers before OmenTree can draw. Alternatively, you could set the initial SRC of the treeFrame to a preload HTML file. This is a tricky technique - inside your preload file, you would put <IMG> tags that load all of the images required by the menu, so that they are loaded and cached before the actual menu is drawn.

• [email protected]