Stepping through a site navigator applet

Enhance your Web site with a convenient, hierarchial interface

By Michael Shoffner, JavaWorld.com, 01/01/97

Navigation tools can be used to improve the accessibility of a Web site by providing a clean, simple interface through which visitors can locate the deepest, darkest recesses of the site, without having to negotiate a maze of links, or having to wait for a search engine to imagine the most improbable page that happens to have a particular search string in it.

This article includes the following sections:

Overview of the problem
Using navigator
Applet parameters
Site map file
Overview of navigator classes
Class Sextant
Class Navigator
Class Page
Class Element
Conclusion

Overview of the problem

The navigator applet operates by opening a window displaying a list of the Web site contents. Users can easily navigate this list and select pages; the navigator displays further information about each selected page, and offers the user an option of opening up the selected page in a browser window.

Design-wise, the navigator applet should be

Accessible -- a user should be able to launch the navigator with a minimum of effort.
Non-intrusive -- the navigator's presence in a Web site should not affect visitors who don't want to use it.
Easy to use -- a novice should be able to use the navigator.
Efficient -- code size should be kept to a minimum to reduce download time.
Customizable -- the navigator should be easy to configure for different Web sites.

In the rest of this article, we will first describe the solution that we create, and then explain the workings of classes that comprise this solution.

Using navigator

The navigator is fairly easy to use. Clicking on the navigator applet brings up the navigator window, which displays a hierarchical view of its Web site.

Elements of the navigator tree are either folders or documents. Clicking on a closed folder will open the folder, revealing the contents of the folder (more documents and folders). Clicking on an open folder will close the folder.

When you click on any element of the tree, a brief description is displayed at the bottom of the navigator window. If you wish to view the selected page, simply click "Go!" (or double-click on the item). Folders and documents can both correspond to pages on the Web site.

Applet parameters

There are two aspects to configuring the navigator applet: the applet parameters and the site map file. Here's a rundown of the supported applet parameters:

bgcolor -- the applet background color, e.g. "#ffffff"; default gray
image -- the applet background image, e.g. "mySextant.gif"; default "images/sextant.gif"
target -- the target frame name, e.g. "aSubFrame"; default "_new". Used to drive frames; otherwise use the default for a new browser window
title -- the navigator window title, e.g. "My Site"; default "Sextant Navigator"
map -- the site map file, e.g. "myMap.txt"; default "siteMap.txt" (don't call it "site.map" or Apache Web servers will attempt to parse it as an image map file)
doc -- the document image, e.g. "myDoc.gif"; default "images/doc.gif"
dir -- the closed folder image, e.g. "myDir.gif"; default "images/dir.gif"
open -- the open folder image, e.g. "myOpenDir.gif"; default "images/openDir.gif"

For example, the parameters for the sample applet at the top of this page are:

<applet width=73 height=61 code="Sextant">
<param name="bgcolor" value="#ffffff">
<param name="image"   value="images/jwNav.gif">
<param name="title"   value="JavaWorld Site Map">
<param name="map"     value="/javaworld/jw-12-site-map.txt">
<param name="doc"     value="images/doc.gif">
<param name="dir"     value="images/dir.gif">
<param name="open"    value="images/openDir.gif">
</applet>

Site map file

Rather than choosing an elegant, rich, and parenthesized format for the site map file, we use an ugly, simple, but convenient format. While the former may be more aesthetically pleasing, the latter has the advantage of being easy to create and easy to parse.

Each entry in the map file must be on a separate line; each line consists of three parts separated by pipes (|). The first part is the URL for the navigator entry, the second part is the name that will appear in the navigator tree, and the third part is a description that will be displayed at the bottom of the navigator window. The tree structure is specified by preceding each line by a number of hyphens (-) that indicate the tree depth of the entry in the tree.

{-} <URL> | <name> | <description>

All entries in the site map file with no preceding hyphens will thus appear at root of the navigator tree. If you want an entry to be contained within a folder, simply place it following the parent and add one more hyphen. The site map for the adjacent navigator tree follows:

http://prominence.com/ | Prominence Dot Com | Prominence Dot Com Inc.
-http://prominence.com/java/ | Java Applets | ...
--http://prominence.com/java/poetry | Electromagnetic Poetry | ...
--http://prominence.com/java/doctor | Therapy | ...
-http://prominence.com/course/ | Intensive Java | ...
--http://prominence.com/course/outline.html | Outline | ...
http://www.att.com/ | AT&T | ...
http://www.dorchester.com/ | Dorchester | ...
-http://www.doorknob.com/ | Goonyards | ...

Overview of navigator classes

The navigator applet that we develop consists of four separate classes. The first, Sextant, is the actual navigator applet. This applet is embedded in a Web page, and displays an image that the user can click on to bring up the navigator.

The next class, Navigator, is the navigator window; this is a standalone Frame that displays a list of the Web site contents.

Instead of using the built-in List class for displaying a list of the Web site contents, we use our own custom widget. Two classes perform this task: Page

a simple Canvas, displays a hierarchical view of the site contents using a helper class, Element which represents the entries in the site list.

The details of these classes are given in the following sections. If you wish to skip this, simply follow this link.

Class Sextant

Class Sextant

The Sextant class is an applet that displays a background image, and brings up a navigator window when the user clicks on it. We used a similar technique described in an earlier JavaWorld article, using the Class.forName().newInstance() method to delay the loading of the extra navigator classes until the user actually clicks on the applet.