.
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
|
|
|