|
| conditions of use |
|---|
|
TabNav must be licensed for use on commercial sites. Please refer to CelticEdge
web site at www.celticedge.com
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 |
|---|
|
|
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 2kAll 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
</applet>
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
</applet>
...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...
|
|
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...
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 TABs, MENUs and ITEMs are similar in that each can include information on...
{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}
{TAB another tab,5,6 | * | hint text}
// more menus and items here
{/TAB}
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... 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... 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 www.somewhere.com,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" ..... >...Hints... 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.
Examples <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}
{/MENU}
{/MENU}
{ITEM caption that also displays as hint,5,6 | * | =}
{/TAB}
">
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... <BODY ... LEFTMARGIN=8 TOPMARGIN=0>...or if the document is in a frame set the FRAME MARGINHEIGHT and/or MARGINWIDTH instead (don't set document BODY values)... <FRAME ... MARGINWIDTH=8 MARGINHEIGHT=0>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 italicMenu 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 textNote: Spectroscope, an excellent FREE utility program for selecting safe colors (Windows 95/NT), is available from http://www.headoffice.co.uk. |
|
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="tabnoise.au">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... |
| delimiters | "{}" | a pair of characters used to enclose (delimit) lines of configuration data. More info... |
| 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... |
| backgraphic | none | Optional [path/]name of GIF/JPG graphic file to use for tab and hint backgrounds. More info... |
| icongraphic | none | Optional [path/]name of transparent background GIF image file containing icon images. More info... |
| iconcount | 0 | If icons are used this param value must be set to the number of icons in the icon graphic file. More info... |
|
audiotab audiomenu audioitem | none | [path/]names of optional audio (.au) files. More info... |
|
tabfont menufont hintfont | "Helvetica,0,12" | Fonts to use for tab captions, menu/item captions and hints. More info... |
| scrollbars | 0 | For a horzontal menu scrollbar set value=1, for vertical set value=2, for both set value=3. |
| scrollsize | 15 | Width/height of vertical/horizontal scrollbars in pixels. Permitted range 8 to 24. More info... |
|
topmargin leftmargin |
0 0 | 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... |
| 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... |
| 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... |
| 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... |
| hintborder | 0 | Set to value greater than zero to display a single line border around the applet hint section. |
| defhint | none | A text string hint to display when the mouse cursor is not over an active section of the applet. |
| tabbackground hintbackground |
0 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... |
|
backcolor bordercolor scrollcolor tabcolor tabtextcolor menubackcolor menutextcolor hintbackcolor hinttextcolor |
#FFFFFF #000000 #CCCCCC #CCCCCC #000000 #FFFFFF #000000 #FFFFFF #000000 |
Notes: #FFFFFF = white #CCCCCC = light gray #000000 = black More info... |
| miscellaneous topics |
|---|
|
Tech support Please refer to web site www.celticedge.com for information on what to include in support requests and bug reports. E-mail address for tech support is support@celticedge.com.
|
|
back to top |