.

CodeBrain.com
.


Navajo Menu Navigation Applet

CodeBrain.com's navajo.class applet
Version 3.0.1 Final Release
Copyright 1999, 2000 by OEC Corp & CodeBrain.com
Source: http://www.CodeBrain.com

FREE for Private and Non-Profit Users...The FREE version displays a hook notice to www.CodeBrain.com at start-up; otherwise it functions exactly as the purchased version, with all parameters and commands the same.

COMMERCIAL & FOR-PROFIT USERS ARE *REQUIRED* TO USE THE PURCHASED VERSION
of this applet, always quickly available at www.CodeBrain.com.

The PURCHASED version has no start-up or other notices; and it starts and runs 45 seconds faster. We encourage those wishing to buy the applet to use the free version for trials, so you know what you're getting when you purchase.  The free version of the applet functions identically to the purchased version when working from your hard drive, and does not show the notice plate when working locally.

SUPPORT

Professional support is free for the purchased version of the applet only via http://codebrain.com/nova/email.html
You must use the form at that url, and you must include your UserID and the name of the applet with requests.  Support requests by any other means may not reach our support staff!
..

.


Index of Documentation

Though Navajo is a very easy applet to use, the documentation is quite comprehensive, including copious use notes, suggestions, and examples.  Key points are also repeated in various places throughout the documentation (accounting for much of its length), in order to minimize the amount of "hunting" you need to do to find them.

As most of the documentation is devoted to optional customizations and enhancements, we suggest scanning through it to become familiar with the contents; but then immediately working with the demos provided with this kit, referring to the documentation as needed.
.

Parameters
.
Parameters, Sample Code, and Use Notes
An Introduction
.
.
General Notes
.
.
Parameters Section I
General Navajo Applet Parameters & Settings
Applet Size
Notice & KeyCode
Menu Items
Links & Targets
Cursor Mode
Sound Files
Parameters Section II
Controlling Layout and Appearance
Panel Style &Color
VBar (Slider) Style, Color, Position
Separator Color
Arrow/Box Style, Color, Behavior
Header Box Color, Behavior
HotBar Color, Behavior
Parameters Section III
Controlling Item Fonts, Colors, and Positioning
Font Size, Style, Name
Item Positioning, Spacing, Indenting
Item Color Controls
.
Meta Parameters
.
Meta Parameters
An Introduction
.
,
^ Meta Parameters Background
.
Meta Parameters Section I
Metas Used at the Beginning of an ItemX Value
Menu Item Behaviors
.
.
Header ^H
Separator ^-
Spacer ^S
Inactive Item ^X
Indents ^i & ^I
,
Meta Parameters Section II
Metas Used at the End of an ItemX Value
Menu Item Font Size, Style, and Color
.
Font Size, Style: ^size^style
Font Color: .#FFFFFF

.

.
Documentation
CodeBrain's Navajo Applet
.

.

.
Parameters, Sample Code, and Use Notes
An Introduction

.
.

NAVAJO is a sophisticated, powerful menu tool that requires a bare minimum of set-up for basic use.  It's completely self-contained, with no external .gif's. (Two optional au sound files may be used if desired.)  At the same time, design wizards will be delighted with the generous optional parameters and meta parameter features.

NAVAJO is also "packaged" into a single small, easy-to-install class file -- so there are no complex .jar or .cab files or subdirectories or codebase=  hoop-jumps to deal with.  Put the class file in the same place as the html page calling it, and you're ready to go.

Set the Notice and KeyCode parameters we require for security.  Then, essentially, all you need to do to get rolling is set a few menu Items and their Links.

After that, there is a truly excellent variety of control parameters and "meta" parameters you can use to customize the daylights out of NAVAJO if you wish, making it look and act just about any way you could want.  Experiment with these features a little at a time until you get a feel for what they do.

Do not copy and paste code from this page, of course (it's html) -- but do check out the demo html pages included with this kit.  (We suggest using plain old NotePad.)  The code in the demos is purposely kept very clean and clear for ease of understanding.

.
Basic Sample of the Navajo <APPLET> HTML Code Code Sample
.
A basic example of NAVAJO code, with minimum set-ups:
.
<applet code="navajo.class" width="110" height="240">

  <param name="Notice" value="Applet by www.CodeBrain.com">
  <param name="KeyCode" value="FREE">

  <param name="Item1" value="^HFig Choices">
  <param name="Item2" value="^-">
  <param name="Item3" value="Large Figs">
  <param name="Item4" value="Medium Figs">
  <param name="Item5" value="Small Figs">
  <param name="Item6" value="Rabid Figs">
  <param name="Item7" value="Normal Figs">
  <param name="Item8" value="Rancid Figs">

  <param name="Link3" value="http://www.codebrain.com">
  <param name="Link4" value="http://www.braincode.com">
  <param name="Link5" value="http://www.codebrain.com/java">
  <param name="Link6" value="http://www.braincode.com/perl">
  <param name="Link7" value="http://www.codebrain.com/javascript/index.html">
  <param name="Link8" value="http://www.codebrain.com/nova/index.html">

</applet>

.,
.
Parameters Section I
General Navajo Applet Parameters & Settings

....
.
NAVAJO will run with nothing more than the Notice, KeyCode, and a few ItemX and LinkX parameters set.  As you look through the parameters, you'll note only these four parameters are marked *Required*.

The general rule with this applet is, if in doubt, leave it out! -- meaning: if you don't need a parameter, in most cases you can leave that parameter tag and value out of the code entirely.  NAVAJO will go to preset safe defaults if you do.

Start with the basics, and then experiment with additional parameters and "meta" parameters to get the look and feel you want.

In most uses, you'll stick to very basic settings -- so Navajo is great for fast, professional set-ups, as well as for those new to Java;  but Navajo also includes a wealth of flexibility when you need it.
.

Setting the Applet Size - *Required* Applet Size
Everyone looks for this, so we include it under the parameters.  The dimensions of an applet on the page are not set with parameters, but with the width= and height= variables in the main <applet> tag.

For example:

<APPLET CODE="navajo.class" WIDTH=150 HEIGHT=300>  

would cause the applet space to be 150 pixels wide and 300 pixels high.

USE NOTE:
A common set-up error is under-sizing the applet -- and then wondering why you don't see all of the menu items.  When sizing the applet, make sure you make it long enough and wide enough to see everything in the applet space.

 
Notice Parameter - *Required* Notice
<param name="Notice" value="Applet by www.CodeBrain.com">

The Notice parameter must be present, exactly, or the applet will display an error message.  A missing notice will not stop the applet from functioning, however.

.
KeyCode Parameter - *Required* Key
<param name="KeyCode" value="FREE"> or <param name="KeyCode" value="your_keycode_here">

If you have the FREE version... enter FREE in the value. For example:
.....<param name="KeyCode" value="FREE">
If you have the PURCHASED version... enter your key in this value. For example:
.....<param name="KeyCode" value="AQ?/FFG1*PSU9">

For those with the purchased version, keys are automatically made for you dynamically off the CodeBrain.com site. You receive clear, exact, explicit instructions on this at time of purchase, and each time that you make a key.

IMPORTANT NOTE ON APPLET KEYS:

If you have the purchase version of this applet and you are unsure what domain to use  for the key, put DOMAIN as the value in this parameter. For example:

.....<param name="KeyCode" value="DOMAIN">

When loaded to your server and viewed on the Internet, an information box in the applet will tell you exactly the domain name needed when making a key for this applet.

A missing or incorrect KeyCode will not stop the applet!  The notice plate may appear, and an incorrect KeyCode opens an information box, indicating a key is needed for the domain where the applet resides -- but the applet will still run.

.
ItemX Parameters - Setting the Items on the Menu - *Required* Menu Items
<param name="Item1" value="^HCATS">
<param name="Item2" value="Small Cats">
<param name="Item3" value="^-">
<param name="Item4" value="Dancing Cats">
<param name="Item5" value="Singing Cats">
<param name="Item6" value="^S">
<param name="Item7" value="Mellow Cats">
<param name="Item8" value="Bellowing Cats">

The ItemX parameter is used to set the items on the menu.

IMPORTANT:
The ItemX parameters must start with Item1, with no skips in the numbering sequence.

This parameter set is "vector based" -- so, practically speaking, there is no limit to how many menu items you can have.

Header Menu Items:
Notice the value="^HCATS" in Item1 above.  This is how  you make an item into a "header item", which will not react to the mouse.  Intended for titles or category headings, header items can also have recessed boxes around them (see the HeaderBoxShow parameter, below).  Only "CATS" would be displayed, with the ^H interpreted by the applet to identify this as a header item.

Menu Separators:
Notice the value="^-" in Item3 above.  This is how you make a separator (horizontal line) between menu items.

Menu Blank Line Items:
Notice the value="^S" in Item6 above.  This is how you leave a blank space or empty item in the menu -- no text.

Values in the parameters containing the ^character are using optional "meta" parameters.  There are a number of these that give you great control over the appearance and behavior of individual menu items; but the ^- separator, the ^H header, and the ^S spacer are the three most common ones.

You can skip over the "meta" parameters for now, but be certain to see the detailed explanation below for the rest of the meta parameters later.  [N.B.: The ^character is usually over the '6' on the top row of your keyboard.]

.
LinkX Parameters - Setting the Links for the Menu Items - *Required* Links
<param name="Link1" value="http://www.codebrain.com/index.html">
<param name="Link2" value="http://www.braincode.com/index.html">
<param name="Link3" value="NOLINK">
<param name="Link4" value="http://www.codebrain.com/perl/index.html">
<param name="Link5" value="http://www.braincode.com/perl/index.html">
<param name="Link6" value="NOLINK">
<param name="Link7" value="http://www.codebrain.com/javascript/index.html">
<param name="Link8" value="http://www.codebrain.com/java/index.html">

IMPORTANT:
Link addresses must be in absolute http: // format as shown above.  Relative links will not work with this applet (for example, setting just a pagename.html for a link).

The LinkX parameters are, of course, relative to the ItemX menu item parameters.  That is, Link1 is the link for Item1; Link2 is the link for Item2; and so on.

Often, not all items (for example, separators, blank items, header items, and inactive items) will be linked.  If you do not want an item linked, you can just leave out the LinkX parameter and value for that item.  Unlike the ItemX parameters, you can have skips in the LinkX parameters numbering sequence.  If no LinkX is specified for a given item, NAVAJO will just assume it is unlinked.

For clarity in your own code, however, we suggest using the explicit NOLINK value, as shown above.

.
DefaultTarget Parameter - Setting a "Default" Target for the Links Targets
<param name="DefaultTarget" value="_top">

This DefaultTarget is where a Link will open if no other target is specified (see the TargetX parameters below).

In most website designs, all the links are targeted to the same window or frame.  Setting this parameter saves you the effort of individually setting all the targets with the TargetX parameters below.

If you leave the DefaultTarget parameter out completely, the default target is automatically set to _top (same window).

See the next section, on TargetX parameters, for more information about targets.

.
TargetX Parameters - Setting Individual Targets for Individual Links Targets
<param name="Target1" value="_top">
<param name="Target2" value="_new">
<param name="Target5" value="_top">
<param name="Target7" value="_new">
<param name="Target8" value="_new">

In most website designs, you'll just set the DefaultTarget parameter, above, so that all links open in the same window or frame.  However, you can set the targets individually for each LinkX parameter.

For any target that is not set, NAVAJO will use the default target (see DefaultTarget above).

Therefore, set TargetX parameters only in cases where the target for the link is different from the default target.  (You can leave the rest out, as NAVAJO will automatically use the default for those.)

This means you can, of course, have skips in the numbering sequence of the TargetX parameters.

ABOUT TARGETS - Windows and Frames

The TargetX parameters (as well as the DefaultTarget parameter, above)  use the same values as html for opening windows, for example:
.
....._new - opens a new window *
....._blank - also a new window *
....._self - loads in the same frame
....._top - opens in the same window

(Don't forget the _underscore with these!)

The Target parameter can also set the "target frame" in a frameset.  Use the name of the frame (exactly) in the value. Frame names may not begin with _underscores in most cases.

[NB: * Netscape and Microsoft browsers interpret _blank and _new slightly differently; try both.]

.
CursorMode Parameter -  Controlling How the Mouse Cursor Behaves Cursor
<PARAM name="CursorMode" value="0">

CursorMode controls the behavior of the mouse cursor over the menu items.  The default is 0, standard pointer.

.....0 = standard pointer cursor - default
.....1 = show hand cursor over linkable items

Compatibility Note:
If you require compatibility with older browsers (Netscape 3.x and prior, for instance), you should set the CursorMode value to 0.  Some versions of older browsers will not work properly with a CursorMode value of 1.  (CursorMode and ArrowStyle (which see) are the only NAVAJO parameters that in any way affect compatibility.)

.
SoundUp Parameter - Sound on MouseUp
SoundDown Parameter - Sound on MouseDown
Sound
<PARAM NAME="SoundUp" value="soundup.au">
<PARAM NAME="SoundDown" value="sounddown.au">

The SoundUp and SoundDown parameters set the .au sound files to be used, respectively, for the sound made on MouseDown and MouseUp when the mouse button is clicked over a linked menu item.

You may leave either or both of these out entirely if you do not want sound on mouseDown or mouseUp.

Sound files must be in standard .au JAVA format, only.  This kit comes with a number of sounds you may use; or, you can find additional .au JAVA tested sounds at the www.CodeBrain.com main site (see the archive).  Background on creating .au files in the proper format can also be found in the help section at CodeBrain.

The path for this parameter is relative (that is, just the file name).

USE NOTE:
This kit comes with a number of .au sound files.  In many cases, using only the SoundDown parameter is the best choice.  In all cases, keep sound files as short as possible and file sizes as small as possible.

.
.
Parameters Section II
Controlling the Navajo Applet Layout and Appearance

.
.
NAVAJO will default to safe settings and layouts, even if you leave all of the parameters below completely out.

Experiment with the FormStyle parameter first, as this affects the overall layout of the applet.

From there, work with the rest of the parameters to get the look, feel, and behavior you want.
.

FormStyle Parameter - The Main Menu Layout
.....................................- Left-Single, Centered-Double, Right-Single
LAYOUT
<PARAM NAME="FormStyle" value="1">

The FormStyle is a major parameter, affecting the overall layout of NAVAJO.  For maximum flexibility in design, NAVAJO has three different layouts from which you can choose:

.....0 - Align Right, with single vertical slider
.
.....A single slider will appear, normally on the right of the applet unless you
.....change the slider position (see below).  The menu items will be justified
.....toward the right side of the applet space.  Indent is not supported in this style.

.....1 - Align Center, with double vertical slider - default setting if parameter is not specified
.
.....Two sliders will appear, one on the left and one on the right, with the
.....menu items centered in the applet space.  Indent is not supported in this
.....style.

.....2 - Align Left, with single vertical slider - most versatile; only this style supports indents
.
.....A single slider will appear, normally on the left of the applet unless you
.....change the position (see below).  The menu items will be justified toward the
.....left side of the applet space.  In this mode, you can also use a meta parameter
.....feature for indenting sub-items and sub-sub-items on the menu.  See the section
.....below on the meta parameters for more on this.

RELATED PARAMETERS:

Although the FormStyle parameter automatically sets the basic layout, there are many customizing options for adjusting the elements of the layout.  In general, more basic designs will not require these options; but the flexibility is there when you need it. See the individual parameters; but here is a quick list:

SliderFromEdge - allows you to change how far from the edge of the applet the slider(s) will be placed
ItemFromEdge - sets how far from the edge of the applet space the menu items will be placed
ItemVSpacing - adjusts the vertical spacing between the menu items
ArrowStyle - sets the style of the box or "arrow" on the slider
VBarStyle -  sets the style of the vertical bar in the slider
HotBarStyle - controls the hotbars over the links display
Meta Parameters - see the various meta parameters; they can adjust indent, show header boxes, and more.

.
PanelStyle - Flat or Raised (3D) on the Page Panel
<PARAM name="PanelStyle" value="1">

PanelStyle sets the overall appearance of the "panel" -- how the applet looks on the page.  There are two modes, flat and raised, as follows.  Value = 1, Raised (3D), is the default.

.....0 - keep the applet flat to the page, with no apparent border
.....1 - raised panel, with a 3D-like border around the edge.

USE NOTE:
Setting the PanelStyle value to 0, flat, can be an interesting technique for integrating the applet into your page -- making it look like it's literally embedded if you set the PanelColor (below) to the same color as your page background.

.
PanelColor - Color of the Applet Panel Panel
<PARAM NAME="PanelColor" value="#404040">

PanelColor sets the color of the applet background.  The value is in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.

If you do not set this parameter, the default color is a dark gray, at #404040.

.
VBarStyle - Style of the Vertical Slider Bar
...................- Removing the Vertical Slider Bar
Slider(s)
<PARAM name="VBarStyle" value="1">

VBarStyle sets the appearance of the vertical bar part of the slider(s) along the edge(s) of the applet.  Note that this affects only the bar or groove part of the slider -- not the moving box or "arrow", which is set with parameters discussed below.  The default appearance for the slider vertical bar is raised (3D) effect.  It can also be indented or removed, as follows.

     0 = do not show vertical bar component of the slider
     1 = show vertical bar component of slider, raised (3D) - default
     2 = show vertical bar component of slider, indented

.
VBarColor - Color of the Vertical Slider Bar Slider(s)
<PARAM name="VBarColor" value="#404040">

VBarColor sets the color of the vertical bar or groove part of the slider(s) along the edge(s) of the applet.  Note that this affects only the bar or groove part of the slider -- not the moving box or "arrow", which is set with parameters discussed below.

The value is in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.

USE NOTE:
If you do not use this parameter, the default color is "inherited" from the PanelColor -- which will oftentimes save you entering parameters, as well as set-up work getting colors to match well.  Interesting layout effects can be had with this, though, with strongly contrasting design colors.

.
SliderFromEdge - Positioning the Slider(s) Along the Applet Edge(s) Slider(s)
<PARAM name="SliderFromEdge" value="3">

SliderFromEdge sets how far from the edge(s) of the applet the slider(s) will be placed.  The dimension is in pixels; the default value is 3.  SliderFromEdge will move both the vertical slider bar and  the box or "arrow" along with it, so you don't need any extra parameters for that.

In practice, this allows you to put the whole slider component (vertical bar, and the box or "arrow", all together) anywhere along the horizontal plane of the applet.  Thus, if you have everything left-aligned -- as in FromStyle value = 2 -- and you decide you want the slider all the way to the right of the applet, you'd simply include this parameter and use a value slightly smaller than the overall width= of the applet space.

USE NOTE:

This is a very useful control parameter, especially in conjunction with ItemFromEdge (more below; but this positions the menu items, as well).  With the various optional control parameters and a few meta parameters, you can create virtually any overall layout you wish.

CAUTION:
It is possible, of course, to set this parameter so the slider(s) positioning is outside the applet space, and thus no longer visible.

.
Separator Color - Color of ^- Separator Items
............................- About ^- Separator Items
Separators
<PARAM name="SeparatorColor" value="#FF0000">

SeparatorColor sets the color of separator items on the menu (see explanation below).

The value is in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.

ABOUR SEPARATOR ITEMS:
This is covered in more detail in the meta parameters section (below).  In brief,  a separator is a horizontal line used to separate menu items.  In practice, it takes the place of a menu item.  It is created using a
^- meta parameter in the menu item, like this:

<param name="Item7" value ="^-">

Instead of printing text, the applet shows a horizontal separator (a recessed line) instead of a menu item.  Separators are unlinked, and do not respond to the mouse.

USE NOTE:
If you do not use this parameter, the default color is "inherited" from the PanelColor.  Usually, though, you'll want to set this, either to a slightly darker or lighter color than the panel; or to a color that contrasts strongly with PanelColor.

.
ArrowColor - Color of the Slider Box or Arrow Slider Arrow/Box
<PARAM name="ArrowColor" value="#FF0000">

ArrowColor sets the color of the box or arrow that slides along the vertical bar or groove part of the slider(s) along the edge(s) of the applet.  This sets only the arrow or box color; the vertical slider bar color is set (above) with VBarColor.

The value is in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.

USE NOTE:
If you do not use this parameter, the default color is "inherited" from the PanelColor.  Usually, though, you'll want to set this, either to a slightly darker or lighter color than the panel; or to a color that contrasts strongly with PanelColor.

.
ArrowStyle - Style of the Slider Box or Arrow
....................- Removing the Box or Arrow
Slider Arrow/Box
<PARAM name="ArrowStyle" value="1">

ArrowStyle controls the style of the arrow or box that slides along the vertical slider bar.  The default style is a square, raised box; and there are two arrow-shaped styles (filled and open) as well.  Also use this parameter to shut off the arrow or box entirely if you do not wish to have it visible.  The settings are as follows:

.....0 = box - default style
.....1 = triangle, solid (filled)
.....2 = triangle, open (unfilled)
.....3 = do not show arrow or box

Compatibility Note:
If you require compatibility with older browsers (for example, Netscape 3.x and prior), you must use either 0 or 3 in this parameter value.  Some versions of older browsers will not work properly with other modes.  This, and CursorMode (which see), are the only parameters affecting compatibility.

.
ArrowSticky - Behavior of the Slider Box or Arrow Slider Arrow/Box
<PARAM name="ArrowSticky" value="1">

ArrowSticky defines the behavior of the box(es) or arrow(s) on the slider(s) -- in relation to the menu items -- when the mouse is removed from the applet space.

The default (1) is to have the arrow or box basically remember its position, and remain next to the last item that was selected.  The arrow or box can also be made to return to the top of the applet space, or disappear, when the mouse is removed from the applet space.

The behaviors are as follows:

.....0 = return arrow or box to the top of the applet when mouse is out of the applet space
.....1 = remain near the last item selected, when mouse is out of the applet space - default setting
.....2 = disappear when  mouse is out of the applet space

USE NOTE:
Probably the most useful of these is the default, where the box or arrow stays with the item selected.  In league with this, note that you can set the selected item (when the page is loaded) if you wish to do so, using the ItemSelected parameter (below) -- useful in multiple flat page designs with new instances of the applet on each page.

.
HeaderBoxColor - Color of the Box around ^H Header Menu Items HeaderBox
<PARAM name="HeaderBoxColor" value="#404040">

HeaderBoxColor sets the color of a recessed box that optionally appears behind specially marked ^H header items (see below).

The value is in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.

USE NOTE:
If you do not use this parameter, the default color is "inherited" from the PanelColor.  Usually, though, you'll want to set this, either to a slightly darker or lighter color than the panel; or to a color that contrasts strongly with PanelColor.

SEE ALSO:
The Use Note on this in the next parameter, HeaderBoxShow, for a short explanation of what header items are and how they work; as well as the detailed explanation of the meta parameters (below).

.
HeaderBoxShow - Show-Hide Box around ^H Header Items
.............................- About ^H Header Items
HeaderBox
<PARAM name="HeaderBoxShow" value="1">

With HeaderBoxShow enabled (this is the default) a recessed box will be drawn around header items.  Otherwise, no box will be shown around ^H header menu items.  These are the values:

.....0 = do not show a box around ^H header menu items
.....1 = show a box around ^H header menu items - default value

ABOUT HEADER ITEMS:
Header menu items use a
^H meta parameter at the beginning of an item, like this:

<param name="Item1" value="^HThis Item">

Only This Item is displayed as a menu item -- but the applet interprets the leading ^H to identify this item is a header.

This is explained in more detail in the meta parameters section (below).  In brief, only ^H header menu items (intended as titles or category headings) can have a recessed header box drawn around them.  Header menu items are unlinked, and do not react to the mouse.

.
HotBarColor - Color of the HotBar(s) that move with the Mouse HotBars
<PARAM name="LabelBoxStyle" value="3">

HotBarColor sets the color of the horizontal bar(s) that move along with the mouse pointer as it is placed over the menu items.

The value is in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.

USE NOTE:
If you do not use this parameter, the default color is "inherited" from the PanelColor.  Usually, though, you'll want to set this, either to a slightly darker or lighter color than the panel; or to a color that contrasts strongly with PanelColor.

.
HotBarStyle - Style of the HotBars
......................- Removing the HotBars
HotBars
<PARAM name="HotBarStyle" value="2">

HotBarStyle sets how the hotbars that accompany the mouse pointer will appear over the menu items. Either one bar under an item (underscore), two bars -- one over and one under an item, or no hotbars at all may be set.

Hotbars will only appear over linkable items; and will not be shown over separators, inactive menu items, header menu items, etc.

The default is two bars, one over and one under a menu item.  These are the values:

.....0 - do not show any hotbars
.....1 - show a single hotbar under the menu items (underscore)
.....2 - show hotbars both under and over the menu items (double bar) - default value

.
.
Parameters Section III
Controlling Navajo Menu Item Fonts, Colors, and Positioning

.
.
NAVAJO will default to safe settings, even if you leave all of the parameters below out.

Note that the "meta" parameters, in a separate main section below, also give you additional control over many of these elements.
.

FontSize - The Size of Menu Item Fonts Font
<PARAM name="FontSize" value="12">

FontSize sets the font size (in points) of the font used for the menu items.  The default font size is 12.

USE NOTE 1:
In practice, check your layouts in both Microsoft Internet Explorer (IE) and Netscape Navigator (NS), as the browsers interpret fonts slightly differently in both height and width.  Also avoid very small font sizes:  Though NS accepts them, some later version of IE may not.

USE NOTE 2:
For maximum flexibility, the font size of individual menu items can be changed with meta parameters.  See the meta parameters section below for a detailed explanation.

.
FontStyle - The Style of Menu Item Fonts Font
<PARAM name="FontStyle" value="0">

FontStyle sets the style of the font; as plain, bold, italic, or bold italic.  Plain, the cleanest and most readable, is the default.  The values are as follows:

.....0 - plain
.....1 - bold
.....2 - italic
.....3 - bold italic

CAUTION:
Be certain to use the numeric values, not the word names of the styles.

USE NOTE:
For maximum flexibility, the font style of individual menu items can be changed with meta parameters.  See the meta parameters section below for a detailed explanation.

.
FontName - The Font Face of Menu Items Font
<PARAM name="FontName" value="Dialog">

FontName sets the name or "face" of the font used by the menu items.  The acceptable fonts are Dialog, Courier, and Times Roman.  The default font if you do not use this parameter is Dialog, the clearest and most readable of the fonts.  Values are as follows:

     COURIER
     DIALOG
     TIMESROMAN

USE NOTE:
Unlike standard applications, JAVA applets accept only a very limited number of fonts.  If you use font names other than those above, the applet will ignore them and default to the DIALOG font.

.
ItemSelected - Pre-Selecting a Menu Item Item Pre-Select
<PARAM name="ItemSelected" value="0">

ItemSelected allows you to "pre-select" a given menu item, so that it will be highlighted in the ItemSelectedColor (see Item Colors, below) when the page opens.  The value is the number of the item, as in the ItemX parameters.  That is, a value of 1 would pre-select Item1, a value of 2 would pre-select Item2, and so on.

The default value is 0.  Setting the value to 0 will have no items selected; that is, all items will be in ItemNormalColor (see Item Colors, below).

IMPORTANT USE NOTE:
This is especially useful in multi-page designs, where the applet is re-started on each individual page.  By setting ItemSelected in the applet code of each page, the menu item for that page can be highlighted when the page opens.
In effect, this circumvents the lack of "state memory" in JAVA applets when going from one page to another.

.
ItemVSpacing - Vertical Spacing of Menu Items Item
Vertical Spacing
<PARAM name="ItemVSpacing" value="28">

ItemVSpacing can be used to manually set the vertical distance or "spacing" between menu items.  The value is in pixels. If you leave this parameter out, the default is set by NAVAJO automatically based on the font size.

USE NOTE:
In many cases, you'll want to set this manually to tighten or space out the look of the menu.  It may also be necessary to set this parameter manually if you use very large font point sizes, either in the FontSize parameter of in adjustments made with the meta parameters.

.
ItemFromEdge - Horizontal Positioning of Menu Items Item
Horizontal Position
<PARAM name="ItemFromEdge" value="25">

ItemFromEdge sets the horizontal distance (in pixels) from the edge of the applet to the menu items.  If you leave this parameter out, NAVAJO automatically sets the value to 25 pixels in left-aligned and right-aligned layout modes.  ItemFromEdge has no effect on centered layouts.

RELATION TO OTHER PARAMETERS:
ItemFromEdge works only in left-align (value="2") and right-align (value="0") modes in the FormStyle layout parameter.  (It has no influence in the FromStyle centered (value="1") mode, since items are automatically center-positioned in that mode.)  In left-align mode, ItemFromEdge sets the distance from the left edge of the applet to the beginning of the menu item text; in right-align mode, it sets the distance from the right edge of the applet to the end of the menu item text.

USE NOTE:
ItemFromEdge essentially lets you horizontally position the menu items anywhere in the applet space.  In conjunction with ItemVSpacing (directly above) and positioning controls for the slider(s), this allows you great flexibility in overall layout. 

CAUTION:
It is, of course, possible to use ItemFromEdge with values that would force the item position right out of the applet space -- in which case your items would not be visible.

.
ItemIndent - Setting Sub-Item and Sub-Sub-Item Indent Positions
.,..................- About ^I and ^i Meta Parameter Indents
....................- Use Note on Multi-Level Menus
Item
Indent Position
&
Multi-Level
Menus
<PARAM name="ItemIndent" value="10">

ItemIndent is used only in conjunction with the ^I and ^i meta parameters, and only with FormStyle parameter left-align layout mode (value="2").  The value is in pixels, with a default value of 10 pixels if you leave this parameter out.

ABOUT ^I and ^i INDENT META PARAMETERS
Using meta parameters (see detailed explanation below), items can be indented one or two levels when using the FormStyle left-align layout mode.  Note the case difference in the indent meta parameter:  ^I will indent an item by the number of pixels in ItemIndent; ^i will indent the item by two times the number of pixels in ItemIndent.  For example,

<param name="ItemIndent"  value="12">
<param name="Item1"       value="Some Thing">
<param name="Item2"       value="^IThis Thing">
<param name="Item3"       value="^iThat Thing">

Item1 one would show normally, at whatever the current default horizontal position is; Item2 would be indented 12 pixels; and Item3 would be indented 24 pixels.  Very approximately (spacing is not accurate in this text), it would look like this:

Some Thing
......This Thing
............That Thing

IMPORTANT USE NOTE ON MULTI-LEVEL MENUS:
Indenting is specifically designed for use in complex menus with many items.  Using ItemIndent and the
^I and ^i meta parameters, three levels of indentation (main item, sub-item, sub-sub-item) can be achieved.  Since you can also use the meta parameters (see the detailed explanation of meta parameters below) to change the size, color, and font face of individual menu items (including the sub- and sub-sub-items), this provides you with a simple way to make well-defined, multi-level menus -- without the need for dozens of confusing, layered, standard parameters.

 
ITEM COLORS - General Notes ITEM COLORS
1.) Regular menu items in NAVAJO are four-state interactive with the mouse.

Regular menu items (other than separators, inactive items, header items, and space items) have four different colors associated with them, as follows:

.....ItemNormalColor - color of an item that is not selected, and does not have the mouse over it
.....ItemHotColor - color of an item that is not selected, but with the mouse over the item
.....ItemDownColor - color of an item when the mouse is clicked down over that item (on mouseDown)
.....ItemSelectedColor - color of an item after it has been selected by a mouse click (on mouseUp)

2.) Special colors assigned to ^H header and ^X inactive items (see the section on meta parameters below)

.....ItemHeaderColor - sets the color of ^H header items
.....ItemInactiveColor - sets the color of ^X inactive items

All item color parameters are in #RRGGBB format, the same as used in HTML tags.  (Don't forget the # sign.)  For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, etc.  If you leave out color parameters, they will default individually to the default colors listed with their parameters below.

USE NOTE:
Colors -- and changing colors -- are important to a user's sense of interactivity with the NAVAJO menu.  Study the demos with this kit for good examples.  In general, primary colors with clear visual differences are the best choices for most menu applications.

.
ItemNormalColor - Color of Item Normally Item Color
<param name="ItemNormalColor" value="#FFFFFF">

The default color is white, #FFFFFF.

 
ItemSelectedColor - Color of Item when Selected Item Color
<param name="ItemSelectedColor" value="#00FF00">

The default color is bright green, #00FF00.

 
ItemHotColor - Color of Non-Selected Item on MouseOver Item Color
<param name="ItemHotColor" value="#FF8000">

The default color is orange, #FF8000.

 
ItemDownColor - Color of Item on MouseDown Item Color
<param name="ItemDownColor" value="#008000">

The default color is dark green, #008000.

 
ItemInactiveColor - Color of a ^X Inactive Menu Item Item Color
<param name="ItemInactiveColor" value="#808080">

The default color is gray, #808080.

 
ItemHeaderColor - Color of a ^H Header Menu Item Item Color
<param name="ItemHeaderColor" value="#FFFF00">

The default color is yellow, #FFFF00

 
.
.
Meta Parameters
An Introduction

.
.
So-called "meta" parameters may be new to some, but they're easy to use, and give you a great control over appearance and behavior of the individual menu items in this applet.

Meta parameters are entirely optional, and they are used only with the ItemX menu item parameters.

Beginning-of-parameter "meta" parameters control behaviors, setting an individual menu item as a header, separator, spacer, inactive, indented, or separator item.

End-of-parameter "meta" parameters override and reset the current font size, style, and/or color values for individual menu items.
.

What Meta Parameters Are and How They Work

In practice, meta parameters are short strings of characters that go either at the beginning or at the end of a regular ItemX parameter's value.

The meta parameters are explained in detail below; but here's a quick example and explanation, using both beginning and ending meta parameters:

.....<param name="Item1" value="^HCables and Wires#FF0000">

We've color-coded these to make them stand out a little better.

From this example, the only thing that will show as an item on the menu is the red part: Cables and Wires

The blue meta parameter at the beginning, ^H, tells the applet that this is a "header" item, intended as a title or a category heading, so it should not respond to the mouse.

The green part at the end, #FF0000, tells the applet to override whatever the current color for this item might be, and make it red (#FF0000 -- same as in HTML color codes), instead.

There are only two types of meta parameters:  Those that go at the beginning of an item's value, and those that go at the end of it.

Meta parameters at the beginning of an item's value control behavior (Specifying a ^- separator or a ^S spacer item; marking an item as a ^H header or ^X inactive item; marking an item to be ^I or ^i indented.)

Meta parameters at the end of an item's value control the font size, style and color.

.
Why We Use Meta Parameters
The meta parameters eliminate the need for setting very long lists of cumbersome, confusing, standard parameters.  When an item needs to be an exception -- in its behavior, or in its font color, size or style -- all you need to do is apply the meta parameters to that one, single item.

The  meta parameters also accomplish another crucial goal -- keeping the applet class file very small so it will load very quickly.  Much of the code in an applet does nothing but interpret parameters; so, the more regular parameters we can eliminate with meta parametes, the smaller we can make the class file.

.
.
Meta Parameters Section I
Metas Used at the Beginning of an ItemX Value
Menu Item Behaviors

.
.
There are only six beginning-of-item meta parameters.

Beginning-of-item meta parameters are generally used singly -- but they can be used together within certain guidelines.  See the Rules for Combining Beginning-of-Item Meta Parameters at the bottom of this section.

CAUTION: All beginning-of-item meta parameters are case-sensitive.
.

^H Header Meta Parameter..... .......Behavior: Header ^H

Placing ^H at the beginning of an ItemX menu item marks it as a "header" item.  Header items do not respond to the mouse, and they can, with HeaderBoxShow in the regular parameters enabled, show a recessed box behind them for added emphasis.

Example:

<PARAM name="Item1" value="^HThis Is A Header">

.
^- Separator Meta Parameter Behavior: Separator ^-

Placing ^- at the beginning of an ItemX menu item marks it as a separator.  (No other text should be in this item, just the ^- separator meta.)  This causes the applet to show a horizontal line, called a separator, in this item's space on the menu.  Separators do not react to the mouse.  Separator color can be separately set with the regular parameters; see SeparatorColor.

Example:

<PARAM name="Item1" value="^-">

.
^S Spacer (Empty) Item Meta Parameter Behavior: Spacer ^S
Placing ^S at the beginning of an ItemX menu item marks this as a spacer (empty) item.  (No other text should be in this item, just the ^S spacer meta.) This causes the applet to show a blank space for this item.  Spacers do not react to the mouse.

Example:

<PARAM name="Item1" value="^S">

.
^X Inactive Item Meta Parameter Behavior: Inactive Item ^ X
Placing ^X at the beginning of an ItemX will cause this item to be shown in the ItemInactiveColor color, set in the regular parameters.  Inactive Items do not respond to the mouse.

Example:

<PARAM name="Item1" value="^XThis Is Inactive">

.
^I and ^i Indent Meta Parameters Behavior: Indents ^i & ^I
Placing ^I or ^i (note the difference in case) at the beginning of an ItemX will cause the item to be indented.  If ^I is used, the item will be indented by the number of pixels set in the regular parameter, ItemIndent.  If ^i is used, the item will be indented by two times the number of pixels set in the regular parameter, ItemIndent.

Examples:

<PARAM name="Item1" value="^IThis Is Indented">

or:

<PARAM name="Item1" value="^iThis Is Double-Indented">

.
Rules for Combining Beginning-of-Item Meta Parameters Behavior Combining Rules
The following table shows which of the beginning-of-item meta parameters may be combined, and in what order.  Any other combination or order may produce irregular or undesirable results, or be ignored.

Accepted-Use Combinations

Beginning-of-Item
Meta Parameters
Combination
Results Special
Notes
^X^I Inactive Item
Indented
(none)
^X^i Inactive Item
Double-Indented
(none)
^H^I Header Item
Indented
HeaderBoxShow
should be disabled
^H^i Header Item
Double-Indented
HeaderBoxShow
should be disabled

Accepted-Use Examples

For indented Inactive items:
.
<PARAM name="Item1" value="^X^IThis Is Inactive">
.
or double-indented Inactive items:
.
<PARAM name="Item1" value="^X^iThis Is Inactive">
.
 For indented Header items:
.
<PARAM name="HeaderBoxShow" value="0">
<PARAM name="Item1" value="^H^IThis Is A Header">
.
or double-indented Header items:
.
<PARAM name="HeaderBoxShow" value="0">
<PARAM name="Item1" value="^H^iThis Is A Header">
.

 

CAUTION:
Only beginning-of-item meta parameter combinations shown above are accepted.  Others may produce irregular or undesirable results, or may be ignored by the applet.

.
.
Meta Parameters Section II
Metas Used at the End of an ItemX Value
Menu Item Font Size, Style, and Color

.
.
There are only two types of end-of-item meta parameters:  those that control font size and style, and those that control font color.

These two types may be used separately or in combination.  (See the Rules for Combining End-of-Item Parameters at the end of this section.)  If used, the color meta parameter must always be last on the line.
.

Meta Parameter Pair to Control Font Size and Style - Form: ^size^style Font Size & Style
This is a two-part pair of meta parameters that must always be used together.  The pair overrides whatever the current font size and font style for an item may be, and sets them as explained below.

The first number in the pair controls font size.

Negative numbers are not allowed.  This number does not set the font size per se; rather, it is the number of points by which you wish to increase the font size over its current size. Acceptable values are 0 to 9 only.

The second number in this pair controls font style.

The acceptable values for this number are 0 to 3.  These numbers are interpreted as follows:

.....0 - plain style font
.....1 - bold style font
.....2 - italic style font
.....3 - bold italic style font

Examples with explanations:

.....<param name="Item1" value="Cables and Wires#^2^1">
..............................^2 increases the point size 2 points, and ^1 sets the font style bold

.....<param name="Item1" value="Cables and Wires#^0^2">
..............................^0 leaves the font size as is (adds 0 points to the font size), and ^2 sets the font style to italic

.....<param name="Item1" value="Cables and Wires#^4^3">
..............................^4 increases the font size 4 points, and ^3 sets the font style bold italic

USE NOTES:
Use these meta parameters to add emphasis to header items or category items by increasing font size or changing font style, to color separate sections of menu items differently, and so on.  Set the FontSize parameter (above, Parameters Section III) to the smallest font size to be used throughout the applet; then use the meta parameters to increase the size of individual menu items you wish to appear larger on the menu.

CAUTION:
This pair of meta parameters must always be used together, never separately.  Negative numbers are not allowed.

.
Meta Parameter to Control Font Color - Form: #FFFFFF Font Color
This meta parameter overrides whatever color an individual menu item is set to, letting you change it to any color you wish.  If used with the ^size^style pair immediately above, the #FFFFFF color must be last on the line.

Colors are in standard HTML format; that is, #FF0000 is red, #00FF00 is green, #0000FF is blue, and so on.  (Do not forget the # sign!)

Examples with explanations:

.....<param name="Item1" value="Cables and Wires#FF8000">
.....................,.........#FF8000 at the end of the item sets its color to orange

.....<param name="Item1" value="Cables and Wires#808080">
...............................#808080 at the end of the item sets its color to gray

More examples can be found throughout the meta parameters sections.  See the Rules for Combining End-of-Item Meta Parameters immediately below.

.

Rules for Combining End-of-Item Meta Parameters

Font Meta Combining Rules
.
Rule 1.) You can use the font size and style meta parameter pair ( ^size^style) by itself.
...............Both the size and style parts must always be used as a pair -- never separately.

..............This example is right:

.....<param name="Item1" value="Cables and Wires#^2^0">
..............................^2 increases the font size 2 points and ^0 sets font style to plain

..............This is wrong.  Do not use this meta parameter pair without using both parts:
.......<param name="Item1" value="Cables and Wires^1">

.
Rule 2.) You can use the font color #FFFFFF meta parameter by itself. 

.............This is an example:

.....<param name="Item1" value="Cables and Wires#FF8000">
..............................#FF8000 at the end sets the font color for this item to orange

.
Rule 3.) You can use both end-of-item meta parameter types together,
...............but the font color #FFFFFF meta parameter must be at the end.

..............This example is right:

.....<param name="Item1" value="Cables and Wires^2^1#00FF00">
..............................^2^1 increases font size two points and sets the font style bold;
..............................#00FF00 sets the font color to green

..............This is wrong.  Do not use the end-of-item meta parameters in this order:
.......<param name="Item1" value="Cables and Wires#00FF00^2^1">

.
Rule 4.) You can use end-of-item meta parameters and beginning-of-item meta parameters
...............within the same parameter value.

..............This is an example:

.....<param name="Item1" value="^HCables and Wires^2^2#0000FF">
..............................^H marks this as a header item (no mouse response, header box can be used);
..............................^2^2 increases the font size by two points and sets font style to italic;
..............................#0000FF sets the font color to blue

.
.
End of Documentation
.
The CodeBrain navajo.class applet is (c) 1999, 2000 by OEC Corp & CodeBrain.com.  Redistribution or resale of this applet is strictly forbidden.  All responsibility for use of the applet remains with the user.
.