tabnav  applet manual
version 01 (beta) build 002 28 January 1999
contents copyright © celticedge 1998/9
conditions of use
TabNav must be licensed for use on commercial sites. Please refer to CelticEdge web site at for definition of commercial and non-commercial sites, full conditions of use and license pricing and purchase options. Please note that non-commercial unlicensed users are required to display a credit on their site, see web site for details.

TabNav must not be sold or offered for download without consent of CelticEdge. CelticEdge retains copyright and accepts no responsibility for any loss, damage or other consequence alleged to be a result of use.

back to top
version history
  • version 01 build 001 (beta) 22 January 1999
  • version 01 build 002 (beta) 28 January 1999
back to top
general description
TabNav is a menuing applet designed to make navigation of a web site simple. In order to be permanently visible to a visitor TabNav is usually deployed in a frame, typically at left or top of a browser window. The applet display consists of selectable tabs, associated menus and optional hints.

Tabs, menus and hint content is set up via a 'configuration script'. A script can be in a text file to be read by the applet on startup, or placed directly in the applet parameters. Direct placement means the applet has to make one less server connection (a text file must be read from the server), making startup slightly faster. For a full script description see the configuring tabs, menus, URLs and hints and review the script used in the demo.

Tabs, menu folders and menu entries (items) can display icons as well as text captions. Tabs can display different icons for selected/unselected state, folders can display different icons for open/closed states, items can display icons that change on selection to show where in a site a visitor has already been. Icons are contained in a single graphic file, see designing icons for information on how to construct your own icon file.

There can be as many tabs as required. When all tabs are unable to fit within the applet width they become scrollable - a pair of tab scroll buttons automatically appear.

The menu section is also scrollable but menu scrollbars, unlike tabs, are permanently visible if specified (see using scrollbars). Both horizontal and vertical scrollbars are available.

A 'hint' section may be included below the menus (see displaying hints). A different hint can be specified for each tab and menu entry. Unlike tab and menu captions hint text wraps to fit available width so can display over several lines.

back to top
working demo
The demo shows TabNav deployed in a typical frameset (menu left, documents right). Click here to run it. If the applet fails to start set up a browser bookmark to demo.htm and invoke the demo from the bookmark.
back to top
setup guide - applet HTML tags & class files
The tabnav applet consists of 8 class files...

  name             size

  tabnav01.class    5k
  tabnav01a.class   1k
  tabnav01b.class  10k
  tabnav01c.class   6k
  tabnav01d.class   5k
  tabnav01e.class   4k
  tabnav01f.class   3k 
  tabnav01g.class   2k
All the class files must be present for the applet to run. tabnav01.class is the main class file that is specified in the applet tag, for example...

  <applet code="tabnav01.class" width=xxx height=yyy>
    // applet parameters go here
It is usually a good idea to keep the class files in the same folder that contains the HTML file (called the documentbase folder). If you prefer to store all your class files in a separate folder the codebase tag can be used...

  <applet code="tabnav01.class" codebase="../class" width=xxx height=yyy>
    // applet parameters go here
...but be aware that a separate codebase folder can cause difficulties with spurious security exceptions (errors) when testing offline. Remember that class file names are case sensitive and are binary files - when class files are FTP'd to a server they must be sent in binary mode.

Applet class files are built using the official Sun JDK (Java Development Kit) version 1.0.2 compiler and should be compatible with browsers that support this Java version, including Microsoft Internet Explorer and Netscape Navigator/Communicator versions 3 and later.

back to top
setup guide - files, folders & testing
When testing applets offline some browser Java implementations object to applets that try to read local files (such as applet configuration and images). This is due to a set of security rules that, amongst other things, specify limits on where an applet is allowed direct file access. If your test applet refuses to start there are two things to try...
  • Invoke your test document from a browser bookmark.
  • Put all files an applet needs in the same folder/directory.
It's a good idea to initially locate all files in the same folder. When the applet is working try moving selected files, such as images, to optional other locations. File access problems do not usually occur online (i.e. when the applet files are downloaded from a remote server).
back to top
setup guide - configuring tabs, menus, URLs & hints
Data to specify tab, menu, URL and hint information is written using a set of special tags very similar to standard HTML. This 'config data' can be read by the applet in two ways...
  • config data is contained in a file.
  • config data is written directly into applet parameters.
In both cases the appletdata parameter is used to access config data. When a file is used appletdata simply specifies the file name: When no file is used appletdata specifies the config data itself.

Note: What follows is a necessarily complicated formal explanation of a simple technique. Users may discover all they need to know by referring to config.txt (config.txt is the configuration file used to set up tabs and menus in the working demo).

Configuration data structure
Three special tags are used to specify tabs, menu folders and menu items. These are {TAB}...{/TAB}, {MENU}...{/MENU} and {ITEM}. Note that TAB and MENU tags have both opening and closing tags because they can enclose MENUs and ITEMs. ITEMs do not have a closing tag. The {} enclosing characters are called delimiters, set to the curly braces shown by default. An alternative pair of delimiters can be specified, see the delimiters parameter.

TABs, MENUs and ITEMs are similar in that each can include information on...

  • a caption with up to two optional icons.
  • a link URL with optional target.
  • a text hint.
Here is an example...

  {TAB caption,5,6 | * | hint text}
    {MENU ~caption,1,2 | * | hint text}
      {ITEM caption,3,4 | URL | hint text} 
      {ITEM caption,3,4 | URL | hint text} 
      {MENU caption,1,2 | * | hint text}
        {ITEM caption,3,4 | URL | hint text} 
        {ITEM caption,3,4 | URL,_blank | hint text}
    {ITEM caption that also displays as hint,3,4 | * | =} 

  {TAB another tab,5,6 | * | hint text}
    // more menus and items here
In each configuration line (except for closing /TAB and /MENU tags) there can be three sections of information, each isolated from the next by a token delimiter character '|' (on a PC keyboard this character is a shifted backslash).

...Captions and Icons...
In the above example 'caption' represents a text string caption. This is the caption that will be displayed in the applet. Caption text is optionally followed by up to two numbers separated by commas. These numbers refer to icon positions in the icongraphic icons graphic file, if one is used. The first number refers to the icon to display when the corresponding TAB, MENU or ITEM is unselected, unopened or unvisited: The second number refers to the icon to display when the corresponding TAB, MENU or ITEM is selected, open or visited. If only one icon number is specified (i.e. caption,2) that icon will be displayed for both states.

To open a MENU folder on menu startup precede the caption with a '~' character, but note that if autoclose is used only one first level menu can be preset open.

...URLs and Targets...
A URL can be any legal address, such as (an absolute address) or ../mydocs/mypage.htm (a relative address). You can omit http:// prefixes in absolute addresses - the applet will add them automatically to any URL that begins with www or web.

Note: Where URLs are not required (e.g. TAB and MENU entries don't usually include links) the URL entry must be replaced by a single asterisk '*' to denote a dummy URL.

A target is the name of a frame or window where a linked document is to be displayed. In most cases it is not necessary to include individual targets as a global target can be specified via the deftarget parameter. To use an individual target append it to the URL using a separating comma, for example,targetname.

There are 4 predefined target names: _blank means display in new browser window, _top means display in existing top level browser window, _parent means display in next window up the browser window hierarchy, and _self means display in same window (the default). Other target names are usually those set in FRAME tags, for example...

  <frame name="mytarget" ..... >
A hint is a text string, usually used to expand on the information contained in the associated caption. Hints can be displayed in the optional hint section at the base of the applet, in the browser status bar, or in both. If you are content to have the caption text repeated as a hint simply set the hint to a single equals '=' character.

Using a file: The filename and [optional path] are specified in the appletdata parameter...

  <param name=appletdata  value="[path/]filename">
Specifying data directly: The data is written directly in the appletdata parameter...

  <param name=appletdata value="
    {TAB caption,1,2 | * | hint text}
      {MENU ~caption,3,4 | * | hint text}
        {ITEM caption,5,6 | URL | hint text} 
        {ITEM caption,5,6 | URL | hint text} 
        {MENU caption,3,4 | * | hint text}
          {ITEM caption,5,6 | URL | hint text} 
          {ITEM caption,5,6 | URL,_blank | hint text}
    {ITEM caption that also displays as hint,5,6 | * | =} 
Indenting and other formatting is optional as param values extending over multiple lines are read as one long string. For example this is permitted...

<param name=appletdata value=" {TAB caption,5,6|*|hint text}
{MENU ~caption,1,2|*|hint text}{ITEM caption,3,4|URL|hint text}
{ITEM caption,3,4|URL| hint text}{MENU caption,1,2|*|hint text}
{ITEM caption,3,4|URL|hint text}{ITEM caption,3,4|URL,_blank|hint text}
{/MENU}{/MENU}{ITEM caption that also displays
 as hint,3,4|*|=}{/TAB} ">
Note that if a line is broken at a space within a caption or hint it may be necessary to insert a leading space in the following line to obtain correct text formatting.

Why specify config data directly when using a file is more convenient? Some firewalls (software that monitors and controls information allowed to pass between a private Intranet and the public Internet) can block download of a configuration file, preventing the applet starting up. The use of firewalls is growing so, when the applet is used over the public Internet, specifying data directly may be preferable - especially if your target audience consists of personnel in commercial organisations.

back to top
setup guide - designing & using icons
Icons are contained in a GIF image file, saved with the background color set to be transparent. The name of this file is specified in the icongraphic parameter. Here is the icon images file used in the demo (border added for clarity)...
This file is called icons6.gif to indicate there are 6 icons in it. Icon images must be the same width and height and placed next to each other in a single horizontal row with no additional space separating them. In the above examples each icon image is 16 x 16 pixels but larger or smaller images can be used. Best alignment results are obtained by using an even height.

Icon numbering used in config data is simple: Reading from left to right icon number 1 is the leftmost, number 2 is next, and so on. There can be as many icons in an icon file as required, but the applet must be told how many there are via the iconcount parameter. Here is another icons file icons12.gif...

back to top
setup guide - using background graphic
A background graphic can be used to paint the tab and hint backgrounds (but not the menu background which is a solid color). The backgraphic parameter is used to specify the [path/]filename of a GIF or JPG graphic image to use. The tabbackground and hintbackground parameters are used to tell the applet if a graphic or solid color is to be used to paint the tabs and hint backgrounds (the default is to use a graphic if one is available).

Note that some earlier browser Java implementations, particularly that in Netscape 3.x, are not very good at duplicating graphics due to palette limitations and a document background graphic may appear slightly different when displayed within the applet.

back to top
setup guide - positioning the applet
The parameters leftmargin and topmargin can be used to set the pixel distance from the left document edge to the menu and/or from the top document edge to the tabs respectively. This is usually useful only if a background graphic is used and permits accurate registration between a document background graphic (as specified in the document BODY tag) and the representation of the same graphic within the applet.

To use this technique the applet document BODY tag should set the LEFTMARGIN and/or TOPMARGIN to the required pixel values. These examples set a left margin of 8 pixels...

...or if the document is in a frame set the FRAME MARGINHEIGHT and/or MARGINWIDTH instead (don't set document BODY values)...

Finally set the applet params to the same values...

  <param name=leftmargin value=8>
  <param name=topmargin value=0>
back to top
setup guide - specifying fonts
Three fonts may be used for tab captions, menu entries captions and hints via parameters tabfont, menufont and hintfont respectively. Font support is limited in JDK (Java Development Kit) 1.0.2 and use of only Helvetica or TimesRoman font faces is advised for consistent appearance across platforms (if you specify a font that is not available on the client machine Helvetica will be substituted).

Font-related parameter values take the form "Face, style, size". For example...

  <param name=tabfont  value="Helvetica,0,12">
...specifies a Helvetica face, a 'plain' style and a size of 12 points. Possible styles are...

  0    plain
  1    italic
  2    bold
  3    bold italic
Menu entry MENU captions can be made to appear in bold by setting the menusbold parameter value to a non-zero number (as you might expect this only works if the menufont is not already bold).
back to top
setup guide - specifying colors
Color values in applet parameters 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 try to specify 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. There are 216 safe colors - equating to the first 216 colors in the standard 8-bit (256 color) GIF palette.

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.

Here is a colors parameters quick reference...

  parameter name      controls color of

  backcolor           tabs and margins background
  bordercolor         single line borders
  scrollcolor         scrollbars
  tabcolor            unselected tabs
  tabtextcolor        tabs text captions
  menubackcolor       menus background and selected tab
  menutextcolor       menus text captions
  hintbackcolor       hint background
  hinttextcolor       hint text
Note: Spectroscope, an excellent FREE utility program for selecting safe colors (Windows 95/NT), is available from
back to top
setup guide - using menu scrollbars
Tabnav is equipped with purpose-designed scrollbars that are not part of the Java AWT (Abstract Window Toolkit). This makes scrollbar operation and appearance consistent across platforms.

Applet menus can have no scrollbars, a vertical or horizontal scrollbar, or both. Scrollbar visibility is set via the scrollbars parameter and this setting applies to all menus (when a scrollbar is not required it is shown disabled).

Scrollbars color is set via the scrollcolor parameter. Width can vary between 8 and 24 pixels, set via the scrollsize parameter.

back to top
setup guide - displaying hints
To display hints in a reserved space directly under the menus set the hintheight parameter to the required height in pixels. Hints too long to fit into a single line are wrapped. The 'required height' is best established by trial and error, but always add a little extra to cater for possible line height differences across Java implementations (an extra 2 pixels per displayed text line should be enough).

Explanatory hints and URLs are displayed as hints. By default explanatory hints are displayed in the applet hint section and URLs are displayed in the browser status bar. This behaviour can be reversed by setting the hintcontent parameter value to a number greater then zero (but note that URLs displayed in the applet hint section will not line wrap).

Hint section colors are controlled via hintbackcolor and hinttextcolor parameters. However, if a background graphic (backgraphic param) is in use it will be used by default to tile the hint section background. You can force the use of a solid color (the hintbackcolor) by setting the hintbackground parameter value to a number greater then zero.

To include a single line border around the hint section set the hintborder parameter value to a number greater than zero.

back to top
setup guide - using sound effects
Three different sounds can be associated with tab selection, menu folder opening and closing, and menu item selection. The .au sound files for each are specified via the audiotab, audiomenu and audioitem parameter values respectively, for example...

  <param name=audiotab  value="">
Only .au files are supported and these tend to be large for all but the simplest clicks etc. Users should be aware that downloading a sound file can take some time, resulting in a noticeable delay the first time the sound is activated (for reasons unknown Java applets do not download sound files until they are first played).
back to top
parameters table
Applet parameters (params) are used to supply applets with all types of customization information - colors, fonts etc. Each has two parts, a name and a value. For example...

  <param name=appletdata  value="myconfig.txt">
Parameter names are not case sensitive but values might be, especially if they contain path and/or file names. Protect such values from inadvertent changes by enclosing them in quotation marks "xxx".

Most parameters (params) have a default value - one that is used if the parameter is not included in the applet HTML param tags. It is only necessary to include a param if you want to change it's default value.

param name default value comments
appletdata none supplies config data that contains the list of tabs, menus, items, URLs & hints the applet is to display. More info...

configuring tabs, menus, URLs and hints

delimiters "{}" a pair of characters used to enclose (delimit) lines of configuration data. More info...

configuring tabs, menus, URLs and hints

deftarget "_self" When a menu entry is clicked the linked document (if any) is displayed in the window or frame named by the deftarget parameter value. More info...

configuring tabs, menus, URLs and hints

backgraphic none Optional [path/]name of GIF/JPG graphic file to use for tab and hint backgrounds. More info...

using a background graphic

icongraphic none Optional [path/]name of transparent background GIF image file containing icon images. More info...

configuring tabs, menus, URLs and hints
designing icons

iconcount 0 If icons are used this param value must be set to the number of icons in the icon graphic file. More info...

designing icons

none [path/]names of optional audio (.au) files. More info...

using sound effects

"Helvetica,0,12" Fonts to use for tab captions, menu/item captions and hints. More info...

specifying fonts

scrollbars 0 For a horzontal menu scrollbar set value=1, for vertical set value=2, for both set value=3.

using scrollbars

scrollsize 15 Width/height of vertical/horizontal scrollbars in pixels. Permitted range 8 to 24. More info...

using scrollbars

Used for absolute applet postioning, usually where a background graphic is used for the document background and the same graphic is required to register (line up) correctly in the applet tab and/or hint backgrounds. Values in screen pixels. More info...

positioning the applet

menuindent 4 The number of screen pixels by which to indent the leftmost (level one) menu entries from the left edge of the menu.
menusbold 0 Set to a value greater than zero to make menu (folder) captions appear in bold font style. More info...

specifying fonts

menulines 1 Set to zero to turn off dotted lines that connect menu entries.
autoclose 0 When autoclose is off (value = 0) all first level folders in any menu can be open at the same time. When on (value > 0) only one first level folder can be open at one time - when a new folder is opened that previously open is closed automatically. This feature can be useful to limit the physical display height open folders can reach.
hintheight 0 If hints are required set to pixel height of hint section needed to display longest hint text. More info...

displaying hints

hintcontent 0 By default text hints are displayed in the applet hint section, URLs are displayed in the browser status bar. Set to greater than zero to reverse this behaviour. More info...

displaying hints

hintborder 0 Set to value greater than zero to display a single line border around the applet hint section.

displaying hints

defhint none A text string hint to display when the mouse cursor is not over an active section of the applet.
tabbackground hintbackground 0
Set to value greater than zero to force the applet tabs and/or hint background to be painted in a solid color (default is to use background graphic if one is available). More info...

displaying hints

  #FFFFFF = white
  #CCCCCC = light gray
  #000000 = black
More info...

specifying colors


miscellaneous topics
Tech support
Please refer to web site for information on what to include in support requests and bug reports. E-mail address for tech support is

back to top