TreeNav  applet documentation
version 1.1 release (28 February 1999)
Copyright © the Java Hermit 1998/9

Contents

conditions of use & commercial licenses
TreeNav may be used unlicensed FOR NON-COMMERCIAL PURPOSES ONLY. Commercial users require a license. Use is considered to be commercial if TreeNav is used for more than 14 days on any Internet site that offers/advertises goods and/or services for sale. Use on a private Intranet run by a commercial organisation also requires a license.

At the time of writing the commercial license fee is US$ 24.95 (1 off). Please visit the site licenses page on the Java hermit web site for up to date information on conditions of use, current fees and licence purchase options.

TreeNav must not be sold or offered for download without the author's consent. The author retains copyright and accepts no responsibility for any loss, damage or other consequence alleged to be a result of it's use.

If you use TreeNav on a free (unlicensed) basis please acknowledge by arranging a link from your web pages to the Hermit's site, HTML code examples...

  <A HREF="http://www.celticedge.com/hermit/index.html">
  TreeNav applet by the Hermit</A>
or use the TREENAV.GIF file included in the download zip...

  <A HREF="http://www.celticedge.com/hermit/index.html">
  <IMG SRC="treenav.gif" WIDTH=88 HEIGHT=31></A>

back to top

version history
  • Version 0.90 beta 01 June 1998
  • Version 0.91 beta 31 July 1998
  • Version 1.0 release 23 August 1998
    • all class filenames now lowercase
    • custom scrollbars included
  • Version 1.0 release rebuild 14 November 1998
    • scrollbars code improved
  • Version 1.1 release 26 February 1999
    • Icons change on mouse click without delay
    • MENU entries can now include URL links
  • Version 1.1 release rebuild 28 February 1999
    • Correct bug connected with autoclose applet param

back to top

applet description
TreeNav is a menuing applet designed to make the navigation of a web site simple. In order to be permanently visible to a visitor TreeNav is usually deployed in a frame, typically at left of a browser window. The applet display consists of menu branches with associated menu items.

TreeNav has been developed from the GTreeMenu applet. Users of GTreeMenu who are upgrading to TreeNav should refer to the notes in Upgrading from GTreeMenu.

Menus content is set up via a configuration script which can be contained in an ASCII text file to be read by the applet on startup or script data can be placed directly in the applet parameters. Direct insertion means the applet has to make one less server connection, making startup slightly faster.

Menu branches and items can have associated icons as well as text captions. Branch entries can display different icons for open/closed states: Menu items can display icons that change after being selected to show where in a site a visitor has already been. Icons are contained in a single graphic file.

For more info see design overview.

back to top

design overview
FONT WARNING: Use of "Dialog" font appears unreliable in Netscape 4.xx. Avoid it.

This section offers a quick review of the major points concerned with setting up TreeNav the way you want it, but there is no substitiute for carefully reading through the parameters information and the HTML code examples.

Since TreeNav won't do anything without configuration data the first thing is to produce a configuration script. Config script data can be contained in an ascii text file or inserted directly in the applet parameters. See tnmenu.txt for a config file example you can use as a template for your own menu. See the APPLETDATA parameter for a complete description of how config data is structured.

TreeNav can be set to operate in two different ways via the AUTOCLOSE parameter. When autoclose is off (set to zero) all menu branches can be viewed open. When on (set to 1) only one main branch can be open - when a new branch is opened any previously open branch is closed automatically.

The use of icons is optional. When designing an icon file (ICONGRAPHIC) remember all icons in the file have to be the same size. Icon files should be 16 or 256 color GIFs saved with the background color set to be transparent. Note - if menu item icons are overlaid over a background graphic (BACKGRAPHIC) the color that shows through the transparent areas is that set by the BACKCOLOR parameter - Java can't easily overlay a transparent graphic on top of another graphic. Select a background color that matches the graphic as closely as possible.

Icon height affects menu entry spacing - if icons are taller than the font used the icon height will be used for spacing. Note that some versions of Netscape produce line spacing that is 1 or 2 pixels higher than the equivalent font in Internet Explorer. This is particularly important when setting the applet height - if a vertical scrollbar is not used allow an extra few pixels height to compensate for browser differences.

Both vertical and horizontal scrollbars can be specified (SCROLLBARS). Scollbars size and background color can be customized (SCROLLSIZE, SCROLLCOLOR).

It pays to experiment with layout options - you can make the applet look completely different by leaving out borders and using the same background color or graphic that is used in the HTML document to paint or tile the menu background (see BACKGRAPHIC parameter).

back to top

class files
TreeNav uses 6 class files, total size approx 22k...
  treenav11.class (4.4k)
  treenav11a.class (6.5k)
  treenav11b.class (5.3k)
  treenav11c.class (2.0k)
  treenav11d.class (0.7k)
  treenav11e.class (3.5k)

treenav11.class is the main class file that must be specified in the APPLET tag.

back to top

the APPLET tag
In your HTML code the applet tag should look like this...
  <APPLET CODE="treenav11.class" WIDTH=xxx HEIGHT=xxx>
    (PARAM tags go here)
  </APPLET>
where WIDTH= and HEIGHT= specify the required applet size in screen pixels. Remember class file names are Case Sensitive. The above example assumes all class files are located in the same directory as the HTML file. For more detailed information on <APPLET...> tag construction see the Applet Users Tutorial, available for download on the Java Hermit web site.

back to top

applet parameters
Parameters specify how an applet behaves. They are inserted in the HTML code at the point (PARAM tags go here) in the APPLET tag example above.

Parameters consist of two parts - NAME and VALUE. Note that PARAM NAMEs are not case sensistive but VALUEs may be and, where quotation marks are shown in the examples below, they should be included (usually string, path or filename info).

Most PARAMs have a preset default VALUE. If an applet instance can use the default the related parameter can be omitted from the HTML code.
 

parameters quick reference
parameters marked * are optional. Parameters are described in detail following this table.

content...
APPLETDATA - configuration script text file [path/]name or embedded data. No default.
*DELIMITERS - character pair for configuration tags. Default "<>".
menu branches behaviour...
*AUTOCLOSE - Allow all main branches open (0) or only 1 branch open (1). Default 0.
graphics...
*BACKGRAPHIC - [path]name of menu background graphic file. No Default.
*ICONGRAPHIC - [path]name of icons graphic file. No Default.
*ICONCOUNT - Number of icons in ICONGRAPHIC file. Default 4.
applet border & color...
*BORDERWIDTH - Border thickness in pixels 0..8. Default 0 (no border).
*BORDERSTYLE - Solid, 3DRaised, 3DSunk, 3DSolid (1,2,3,4). Default 1.
*BORDERCOLOR - Border color. Default #CCCCCC (silver gray).
scrollbars...
*SCROLLBARS - Scrollbar visibility 0 - 3. Default 0 (scrollbars off)
*SCROLLSIZE - Scrollbar thickness in pixels 8 - 24. Default 15.
*SCROLLCOLOR - Scrollbar background color. Default #CCCCCC (silver gray).
menu...
*BACKCOLOR - menu background color. Default #FFFFFF (white).
*TEXTCOLOR - menu items text color. Default #000000 (black).
*LEFTINDENT - pixels to indent menu items from left edge. Default 4.
*TEXTFONT - menu items font "facename,style,size". Default "Helvetica,0,12".
audio files...
*AUDIO1 - Audio (.au) file [path/]name to play on menu branch select. Default none.
*AUDIO2 - Audio (.au) file [path/]name to play on menu item select. Default none.
links default target...
*DEFTARGET - default target frame/window for links. "_self" if not specified.
(individual targets can be specified in configuration script data)

back to top
 
 APPLETDATA parameter
Example:  <PARAM NAME=APPLETDATA VALUE="xxx">
Default value: None   this parameter must be included

The APPLETDATA parameter is used to supply details of main menu (branch) entries, (sub)menu items, icons, hints and links. It can be used in two different ways...

  1) "xxx" refers to the [path/]name of an ASCII text
     file that contains configuration data.
  2) "xxx" refers to configuration data
     that is directly specified.
Where path information is included it should be relative to the Document Base folder (directory) - that which contains the HTML file. For examples of both techniques see HTML code examples.

In both cases configuration data is structured in exactly the same way, using HTML-like tags. The <MENU>...</MENU> tag pair is used to enclose the data required to specify a main menu entry, and associated menu items (if any) are specified using the <ITEM> tag. Here is the formal declaration of these tags (square brackets denote optional)...

  
  <MENU [~]Caption[,icon[,icon]] | Link[,Target] | [Hint]> 
    <ITEM  Caption[,icon[,icon]] | Link[,Target] | [Hint]>
    <ITEM...>
    <ITEM...>
  </MENU>
  

  Caption refers to the text caption that appears in the menu.
  In the case of MENU captions a leading tilde '~' character specifies
  that menu branch should be displayed open on applet startup.

  icon refers to up to two optional icon numbers, separated
  from the caption by comma delimiters. The first number refers to the
  icon displayed when a main MENU is closed (or ITEM that has not yet been
  selected). The second number refers to the icon displayed when a main
  MENU branch is open (or when an ITEM has been selected).
    The numbers themselves represent the position of an icon in
  the icon graphic file (see ICONGRAPHIC parameter).

  Link refers to the URL to invoke when the menu entry is clicked.
  A Link can include a comma delimited trailing Target (a destination
  window or frame name). For more info on targets see the DEFTARGET
  parameter.

  Hint refers to a text string to display in the browser status
  bar. If the hint is set to a single equals character '=' the Link URL
  will be displayed as a hint. If the hint is set to a double equals
  character '==' the Caption will be displayed as a hint.

NOTE 1:
If information between | | token separators is left unspecified ensure at least one blank space is inserted. Alternatively an asterisk |*| character can be used to denote an empty section.

NOTE 2:
< and > characters are used as tag delimiters by default. This character pair can be changed, see DELIMITERS parameter.

NOTE 3:
For a configuration script example you can use as a template see HTML code examples.

back to top

 DELIMITERS parameter
Example:  <PARAM NAME=DELIMITERS VALUE="xx">
Data type: String
Default value: "<>"

Where xx is a 2-character string denoting the characters to be used as configuration data MENU and ITEM tag delimiters, for example "[]", "{}".

You may want to change the default delimiters if you are using Frontpage or other HTML editor that likes to automatically reformat unrecognised HTML tags (only a potential problem if menu config data is specified directly in the APPLETDATA parameter).

back to top

  AUTOCLOSE parameter
Example:  <PARAM NAME=AUTOCLOSE VALUE=x>
Default value: 0 (all menu branches can be open at once)

Where x is either 0 or 1. When zero, all menu branches can be opened or closed at will by the menu user. When 1, only one branch can be open at any one time - as branches are selected open the previously open branch will be automatically closed. Only applies to toplevel menu branches.

NOTE 1:
In the menu configuration script data a tilde '~' character can be inserted to specify a menu branch should appear open on applet startup. When AUTOCLOSE is set to 1 only the first such branch will be displayed open.

back to top

 BACKGRAPHIC parameter
Example:  <PARAM NAME=BACKGRAPHIC VALUE="xxx">
Default value: None

Where "xxx" is the [path/]name of a GIF/JPG image file. If the size of the image is smaller than the applet the menu background will be tiled with multiple copies of the image, if the image is larger it will be clipped. If path information is included it should be relative to the document base (the directory containing the HTML file in which the applet is used).

If this parameter is left unspecified the menu background will be painted in the color specified in the BACKCOLOR parameter.

back to top

 ICONGRAPHIC parameter
Example:  <PARAM NAME=ICONGRAPHIC VALUE="xxx">
Default value: None

Where "xxx" is the [path/]name of a GIF image file containing icon images. If path information is included it should be relative to the document base (the directory containing the HTML file in which the applet is used).

Icon images file structure
Inside the file icon images must be arranged horizontally (for an example see the included menu icons file tnicons.gif). Each icon section must be equal in size. tnicons.gif is the icon file used by the Java Hermit TreeNav applet demo. It contains 4 images - 2 for MENU closed/open, 2 for ITEM unvisited/visited.

The leftmost icon is number 1, next is number 2, and so on...

You can add more icons to the file, extending the range of icons available. See APPLETDATA parameter for info on how to specify optional icon numbers in your menu structure. If you use a file containing less or more than 4 icons (the default number) set the ICONCOUNT parameter to tell the applet how many icons are in the file - necessary for correct display.

Tranparent vs. non-transparent icon images
If icons have a transparent background then the background color displayed will be that set in the BACKCOLOR parameter. This is the preferred method (if a background graphic is used it will not show through icon transparent areas - it's necessary to set a BACKCOLOR that matches the graphic). Alternatively icons can be non-transparent, in which case icons will display with their own predefined background color.

back to top

 ICONCOUNT parameter
Example:  <PARAM NAME=ICONCOUNT VALUE=x>
Data type: Integer
Default value: 4

Where x is a decimal number representing the number of icons present in the icon graphic file (see ICONGRAPHIC parameter). If your icon file contains the standard 4 icons (or icons are not used) there is no need to include this parameter.

back to top

  BORDERWIDTH parameter
Example:  <PARAM NAME=BORDERWIDTH VALUE=x>
Default value: 1

Where x is a decimal number between 0 and 8, represesenting the pixel thickness of the applet border. Set to zero for no border.

back to top

 BORDERSTYLE parameter
Example:  <PARAM NAME=BORDERSTYLE VALUE=x>
Default value: 1 (solid)

Where x is a decimal number between 1 and 4:
1 = solid, 2 = 3D raised, 3 = 3D sunk, 4 = 3D frame.

NOTE 1:
3D borders only work correctly with certain colors, try to use 'browser safe' medium bright colors. Colors are futher discussed in the parameter color values section.

back to top

 BORDERCOLOR parameter
Example:  <PARAM NAME=BORDERCOLOR VALUE=x>
Default value: #000000 (black)

Where x is the required color of the applet border. May be a decimal or hexadecimal color number.

back to top

  SCROLLBARS parameter
Example:  <PARAM NAME=SCROLLBARS VALUE=x>
Default value: 0 (no scrollbars)

Where x is either 0 for no scrollbars, 1 for vertical scrollbar, 2 for horizontal scrollbar or 3 for both horizontal and vertical scrollbars.

back to top

  SCROLLSIZE parameter
Example:  <PARAM NAME=SCROLLSIZE VALUE=x>
Default value: 15

Where x is the width of vertical scrollbar and height of horizontal scrollber in screen pixels. Available range 8 - 24.

back to top

  SCROLLCOLOR parameter
Example:  <PARAM NAME=SCROLLCOLOR VALUE=x>
Default value: #CCCCCC (silver gray)

Where x is the required color of the scrollbar. May be a decimal or hexadecimal color number.

NOTE 1:
Scrollbars use 3D effects to paint slider thumbs. For the best visual effect use a medium brightness color.

back to top

  BACKCOLOR parameter
Example:  <PARAM NAME=BACKCOLOR VALUE=x>
Default value: #FFFFFF (white)

Where x is the required color of the menu background. May be a decimal or hexadecimal color number.

NOTE 1:
The BACKCOLOR is that which will show through icon transparent areas. When a background graphic is used this color must be selected to blend with the graphic.

back to top

  TEXTCOLOR parameter
Example:  <PARAM NAME=TEXTCOLOR VALUE=x>
Default value: #000000 (black)

Where x is the required color of the menu entries text. May be a decimal or hexadecimal color number.

back to top

  LEFTINDENT parameter
Example:  <PARAM NAME=LEFTINDENT VALUE=x>
Default value: 4

Where x is the number of screen pixels by which to indent menu entries from the applet left edge.

back to top

  TEXTFONT parameter
Example:  <PARAM NAME=TEXTFONT VALUE="xxx,y,z">
Default value: "Helvetica,0,12"

Where xxx is the menu entries text font facename, y is the font style, z is the font size in points. Comma delimiters (without leading or trailing spaces) separate facename, style and size.

Available styles are 0 = plain, 1 = bold, 2 = italic, 3 = bold italic.

back to top

  AUDIO1, AUDIO2 parameters
Example:  <PARAM NAME=AUDIO1 VALUE="xxx">
Default value: None

Where "xxx" is the [path/]name of an .au audio file. AUDIO1 refers to a sound played when a menu branch is opened or closed, AUDIO2 refers to a sound played when a menu item entry is selected.

If path information is included it should be relative to the document base (the directory containing the HTML file in which the applet is used).

NOTE 1:
Audio files should be as small as possible to avoid degrading applet performance.

back to top

 DEFTARGET parameter
Example:  <PARAM NAME=DEFTARGET VALUE="xxx">
Default value: "_self" (the frame/window containing the applet)

Where "xxx" is the name of a frame or window in which to display linked documents, or one of the reserved window names _self, _top, _blank or _parent. Use to specify a destination frame/window for links in the applet configuration data that do not have an individually specified target.

NOTE 1:
Typically all TreeNav linked documents will be required to display in the same destination frame/window. In such cases it is only necessary to set DEFTARGET to the name of the frame or window, no targets need to be specified in the applet configuration links data.

back to top

parameter color values
Color values can be decimal or hexadecimal. Decimal values require no prefix, hex values can be prefixed with '0x' or '#'. You can't use color string constants such as "Red".

To ensure colors display as accurately as possible always use colors from the 'safe browser palette'. In hexadecimal notation safe colors are built from combinations of 00, 33, 66, 99, CC and FF. For example, #3366CC is a 'safe' color but #3366DD is not.

hexadecimal colors are arranged #RRGGBB. For example in color #3366CC value 33 is the RED component, 66 is the GREEN component and CC is the BLUE component.

  • Spectroscope, an excellent FREE utility program for selecting safe colors (Windows 95/NT), is available from http://www.headoffice.co.uk.

    back to top

  • upgrading from GTreeMenu
    The use of icon-identifying numbers has been changed. In GTreeMenu icon numbers were specified at the end of MENU and ITEM configuration script entries. In TreeNav icon numbers are attached to captions - see APPLETDATA parameter. Also in GTreeMenu icon numbers 1 and 2 were reserved for MENU entries. TreeNav contains no restrictions on which icon numbers are associated with MENU and ITEM entries.

    In TreeNav there is no option for auto scrollbars (that appear and disappear as required). Where scrollbars are specified they are always visible.

    Parameter changes...

        GTreeMenu                          TreeNav
        ---------                          -------
    
        BOXCOLOR                           no equivalent
        SCROLLBAR                          SCROLLBARS
        SCROLLWIDTH                        SCROLLSIZE
        FONTFACE, FONTSTYLE, FONTSIZE      TEXTFONT
        no equivalent                      AUTOCLOSE
        no equivalent                      AUDIO1
        no equivalent                      AUDIO2
    

    back to top

    HTML code examples
    TreeNav applet tag code examples are presented in htn_code.txt. The configuration script file used to drive the Java Hermit site TreeNav applet demo is included in the download, see tnmenu.txt.

    NOTE 1:
    The version of tnmenu.txt included as an example has had the Java Hermit site specific links removed and replaced with the phrase link_url_goes_here.

    back to top

    if you have problems...
    Local testing of applets in earlier browsers may prove difficult. MSIE 3 may report spurious errors that go away when online. Netscape 3.x can take some time (minutes) to initialise it's Java virtual machine when displaying local pages that contain applets. Most HTML WYSIWYG editors won't run Java applets in their internal browsers.

    If things are not working try the following...

    • Ensure Java is enabled in your browser.
    • Offline testing an applet-containing HTML file by automatically starting a browser from an HTML editor (or by using a clickable shortcut) can cause spurious errors. Try invoking the test page from a browser bookmark.
    • Check carefully for spelling and case errors in APPLET tag and PARAM values.
    • If your HTML code, class files, config script file etc are split between more than one folder try putting them all in the same folder.
    • FTP class and graphic files in binary mode.
    • FTP config script and HTML files in ascii (text) mode.

    It's always essential to final test over a live Internet connection (use a test page nobody else can view before you release it on the general public).

    Please read this documentation carefully before contacting the hermit for technical assistance. If requesting help include as much information as possible (description of problem, browser and OS details, testing online or offline?). Include a copy of your HTML and configuration script (please do not mail graphics files) and, if available, a URL to the page on which the problem occurs.

    back to top

     

    ©The Java Hermit 1998/9
    E-mail:
    [email protected]
    Homepage: http://www.celticedge.com/hermit/

    Hosted by www.Geocities.ws

    1