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.