Using the Outline applet in a web page

 

The files

There are five files that you need to use the applet: the three class files, a default icons file and a data file containing the folder information.

 

The class files

You would usually put these in the same directory as your web page, however if you want to put them into a sub-directory called, say, "java", you will need to set the "codebase" attribute in the <applet…> tag, e.g.

<applet code="Outline" codebase="java" width=… height=…>

The class files need to be transferred to your web server as "binaries". If when you try to view the applet on the web server, the browser complains that the Outline.class file either doesn't exist or is corrupt, then chances are you have transferred it as an ASCII file. The "binary/ASCII" transfer options should be available inside your file upload program. If not, contact your ISP for more help.

Also, it is very important that your class files keep their exact names. If they lose the ".class" extension, or if case of the letters change, the applet won't work.

 

The default icons file

The default icons file contains the icons used for those folders that don't specify their own. The name of the icons file is passed to the applet as a parameter, e.g.

<applet code="Outline" width=200 height=500>

<param name=icons value=icons.gif>

…

</applet>

The image needs to be 64 pixels high and the icons need to be listed vertically in the following order: the open folder, the closed folder, the simple node (a folder with no sub-folders – basically a leaf at the end of a branch) and the root folder. Each icon needs to be exactly 16 pixels high.

The image can be as wide as you like. If the icons are more than about 16 pixels across then they will not push the folder text sideways. Instead they slip behind it allowing you to create very different effects.

Two examples of icons file are included in the workshop files. "icons.gif" creates a look that is very similar to the standard Windows File Explorer. "icons2.gif" is far more colourful, giving the outline more of a "cyberpunk" look.

 

The data file

The name of this file is passed to the applet as a parameter, e.g.:

<applet code="Outline" width=200 height=500>

<param name=icons value=icons.gif>

<param name=datafile value=data.xml>

…

</applet>

The file should be in XML format (see the file data.xml in the workshop files as an example) which is similar to HTML.

Each folder is specified between <FOLDER> and </FOLDER> tags. The folder's attributes (such as the text) are set up in a similar way between the tags, e.g.

<FOLDER>

<TEXT>I am a folder</TEXT>

</FOLDER>

In this way you can also specify a hyperlink as well as icons that should be used instead of the default ones given in your icons file. The following is an example of a folder that uses all of the attributes:

<FOLDER>

<TEXT>I am a folder</TEXT>

<HREF>http://www.javasoft.com</HREF>

<ICON>images/closed.gif</ICON>

<ICONOPEN>images/open.gif</ICONOPEN>

</FOLDER>

Because of the hierarchical nature of the folders, you can also embed sub-folders within the tag:

<FOLDER>

<TEXT>I am a folder</TEXT>

…

<FOLDER>

<TEXT>I am a sub-folder</TEXT>

…

</FOLDER>

</FOLDER>

Finally, because all of the folders must lead back to a single root, you must remember to wrap all of your folders into a single large folder set:

<FOLDER>

<TEXT>I am the root folder</TEXT>

[all the other folder data is listed here]

</FOLDER>

 

Colours

The applet let's you amend virtually every colour within it. Each one is passed as a parameter, using the same "#RRGGBB" format as HTML.

When deciding what names the parameters should have I decided to stick reasonably close to the HTML conventions. This should make them more memorable, but unfortunately it means misspelling the word "colour"….

Parameter

Function

BGCOLOR

The background colour. By default this is white.

FORECOLOR

The foreground colour. This is used to colour the dotted-line connectors. By default this is grey. Make sure that this colour contrasts well with the background.

TEXTCOLOR

The colour of the text when it is not a hyperlink and the folder is not selected. By default the text is black.

LINKCOLOR

The colour of the text when it is a hyperlink. It is best to choose the same colour as the other hyperlinks on your page. By default this is set to dark blue.

SELECTCOLOR

This is the colour of the select box that surrounds the text of a folder after it has been selected.

The following is an example of a very vivid colour scheme:

<param name=bgcolor value=#000000>

<param name=textcolor value=#ff00ff>

<param name=linkcolor value=#ff00C0>

<param name=forecolor value=#00ff00>

<param name=selectcolor value=#ff0000>

 

Frames

The applet supports hyperlinks populating other frames by the use of the "TARGET" parameter. By default this is set to "_self" meaning that new pages will be directed to the frame that the applet is in.

 

Possible improvements

As I said in the main article, I had a number of ideas that I didn't include in this version of the applet. It's always difficult to tell which things are genuinely useful and which bits are just interesting from a programmer's point of view. I think the following features are worth adding:

 

Scrollbars

It would be useful if these appeared whenever the tree expanded beyond the bounds of the applet. Currently you have to make sure the applet's rectangle is large enough to accommodate a fully expanded tree.

More XML attributes

Such as individual target frames for folders.

Adjustable fonts

It may be best to restrict this to simply adjusting the font size because most Java machines can only deal with a couple of fonts.

Adjustable height icons

To allow people to use much larger pictures as icons.

Animated icons

Probably a little trivial this one, but it might be nice to have the icons animate whenever the mouse is passed over them.

No doubt there many other features that could be added. If you can think of any, please let me know.