On this page ...

On this page I'll discuss apPopupMenu and apPopupGen for website navigation as I use it currently on my website. Download apPopupmenu from the Apycom website, download apPopupGen here. There are others out there, but unfortunally WAY to expensive for a private website. As soon as I get the popup menu of them sponsored, I will consider writing about it ... Note: Current version (date: 4/23/2002) is 0.9.99.39 and allows you to save the menustructure (optimized) for use with the "menuItemsFile" parameter. Also fixed some minor bugs.

Note: In the meanwhile, Apycom released version 2 which comes with 2 new parameters. The first one is REQUIRED:

<param name="Copyright" value="Apycom Software - www.apycom.com">

The second one is optional and allows you to use an external file for the menuitems.

<param name="menuItemsFile" value="menuitems.txt">

Also: if you are about to use 100% width, please read the 100%-problem fix for details.

Like with my previous menu I faced the problem that generating a menu is very time consuming - specially when you have a bi-langual website. So once more I started to write a program (a bit nicer this time) to generate and maintain the menu of my website.

I will soon write a small introduction in using the program, showing you how to start with this program. Keep in mind that this program was written for my own personal use, therefor the program might not meet all of your wishes. Comments and suggestions are welcome, but do not mean that I will implement them.

Overview

The program has some help files, which you can find in this index:

(The items in this list represent the tabsheets seen in the program)

1. Generic Settings

2. Additional Settings

3. Menu Structure

4. Presetting

5. Code Generation

6. Preview Menu and troubleshooting

Preferences & About

apPopupGen Index - 1. Generic Settings

purpose:

On this tab (number 1) you can set some of the basic settings of the menu you would to generate.

options:

Menu Dimensions

Each menu (and for that matter: each Java applet) has a predefined width and height. This can be expressed in actual pixels (most common) or a percentage of the width or height of the webpage displayed.

Check the "Use percentage" option to use percentages instead of pixels.

Tip: you can mix the use of pixels and percentages, for example if you wish to have a full width menu, but the menu should not be higher than 20 pixels: width=100% height="20"

ButtonType

You can select the type of button here. These only reflect the buttons instantly visable on a webpage, so menuitems are not affected by this !

6 types are currently supported by apPopupMenu:

Menu Orientation

A menu is either horizontal (as seen in regular Windows menus - where menus reside next to each other) or vertical (where the menu buttons reside underneath eachother).

For example horizontal:

and vertical:

Text Alignment

This reflect the alignment of text within the menu button. This does not reflect alignment of menu-items. Available alignments are: left, center and right.

Menu Arrows

Menu buttons can have arrows besides the button-text to indicate a menu below this particular button.

This can arrow-feature can be activated by checking the "Show Arrows" option.
Note that an arrow can be either 3D or Solid.

Sound

The apPopupMenu supports sound for both clicking the button and when moving over a button (called "Mouseover").

Here you can select the files to be used for this purpose. You can use the "Browse" button to navigate to the sound file. Don't forget to check the "Sound enabled".

Warning: If you would like to use the preview feature of apPopupGen then keep in mind that the applet resides in the application directory of apPopGen. This means that the sound file should not include the absolute path, instead copy the sound file to the application directory so the applet knows where to find it. Not only sound files but also images are affected by this !

apPopupGen Index - 2. Additional Settings

purpose:

On this tab (number 2) you can set some text and color features used for the menu.

options:

Menu Colors

Here one can set colors for:

• Button background - Normal state

• Button background - Mouseover state

• Button Text - Normal state

• Button Text - Mouseover state

Colors are represented in hexadecimal values, of the format RRGGBB. The first two byte (RR) represent the red value. The same goes for GG (green) and BB (blue).

I found it cumbersome to calculate and figure out these values so, next to these values you will find a button to select colors form a colorselection-dialog.

Menu headertext preview

Will give you an idea what color combinations you have choosen. Click on this button to see the mouseover effect.

Font

Here you can select your favorite font to be used in the menubuttons. You can set font name, size and style (regular, bold, italic and bold-italic).

When Checking the "Use systemfonts for menuitems", apPopupMenu will use the default menu-font as used by your system. If this is not checked, it will try to display the font you selected.

Tip: Do not use weird fonts, stick to common fonts like Helvetica, Arial, Veranda and Courier. Exotic fonts are not supported on some systems!

Statusbar-string

When a user moves over a button, this text will be displayed in the statusbar of the navigator.
You can also set here if, when moving over menu-items, the text (as seen in the menu) or the link should be displayed in the statusbar.

apPopupGen Index - 3. Menu Structure

purpose:

Here we finally define the structure of your menu.
Note: the menu is vertically orientated even if your menu should be horizontally.

options:

Menu Tree window

This is the big white box when no tree has been entered yet.
Once items are added, you can fold/unfold menu's that contain sub menuitems.
You can also drag and drop menu-items from one position to another.
Items are added and removed by using the buttons as described below.

Label language 1 and 2

As you might have noticed, my webpage is bi-langual, meaning that I support both dutch and english readers.

Since I created apPopupGen for the purpose of creating menu's for my own website, I included support for 2 languages.

Enter the label text for language 1 on the left and for language 2 on the right.
If you do not wish to use language 2, then simply leave it blank.

Note: the structure of my website is that I have a directory for each language, containg all HTML files for that particular language. These files have the same file name for each language. Therefor support for multiple languages is made easy. To give you impression on how I did this, I will show you an example of the website filetree:

\index.htm
\dutch\index.htm
\dutch\about.htm
\dutch\foo.htm
....
\english\index.htm
\english\about.htm
\english\foo.htm
....

The content for example of foo.htm is identical in both directories, except with the difference that one is written in dutch and the otherone is written in english.

Note: Not only regular characters and numbers, but also most common signs are supported like: / \ & ' : etc. Please avoid using comma's and square brackets ([ and ]).

Here you can also create menu-dividers, simply enter a minus sign ('-') in both label boxes.

Link/Script

It would not make sense if one would not be able to hook a hyperlink (either relative or absolute) to a menubutton or menuitem. Here you can enter either link or script.

Tip: in order to enable apPopupMenu to script, one must activate the MAYSCRIPT option described on the Presettings tabsheet!

Target

As with common <A HREF=...> links one can define a target. This can be a default target like "_self" where the current webcontent will be replaced, "_blank" where a new browser window will be opened or even a frame target, for example "text", as defined in your frameset.

Note: you MUST enter a target!

Image

apPopupMenu supports images (ie. little icons) in the menubuttons. Images should only be GIF formatted !

Warning: If you would like to use the preview feature of apPopupGen then keep in mind that the applet resides in the application directory of apPopGen. This means that the image file should not include the absolute path, instead copy the sound file to the application directory so the applet knows where to find it. Not only image files but also sound are affected by this !

New Item

Click this button when you want to add a new item on the same level as the selected menu-item.

After clicking the button you can use the previously mentioned fields to edit the settings for this item.

New SubItem

Click this button when you want to add a new item on the next level as the selected menu-item.
After clicking the button you can use the previously mentioned fields to edit the settings for this item.

Unfold All

All menu's that contain submenu's will be made visible, thus showing the entire menutree.

Fold All

All submenu items will be hidden, only the menubuttons will remain visible.

Load Tree

Menutrees are saved in plain ASCII, although using a specific format slightly different from that defined by ApyCom (to support treeviews and a second language). Use this to Load your project.

Save Tree

Menutrees are saved in plain ASCII, although using a specific format slightly different from that defined by ApyCom (to support treeviews and a second language). Use this to Save your project.

Delete Item

Will delete the currently selected menutree item.

Note: If this is a menu holding submenu's, then these submenu's will also be deleted!

Note: there is no such thing as "undo" implemented!

Delete All

The entire menutree will be deleted.

Note: there is no such thing as "undo" implemented!

apPopupGen Index - 4. Presettings

purpose:

Let you visit my website and do some application specific settings/actions.

options:

HTML Basics

Pre/Post-applet lines
This offers you the feature to generate full HTML pages by entering the pre- and post-applet code. In the left corner of the textboxes you will find a button which allows you to load data from other HTML/TXT files.

Tip: when using a cool tool like Dreamweaver I can only advise you to use templates !

Note: these basic HTML lines are used for the preview window as well !
If you don't plan to generate full pages the at least leave the minimum here:

Pre-applet HTML minimum:

Post-applet HTML minimum:

Image file basics

As usually is the case, an imagefile is not located on your website as located on your harddisk (at least in my situation).
This would implicate that each path of each imagefile I would have to adjust manually.
Here we can let the computer do the work. 3 options are available:

• Use filename only
  The imagefile is then located (on your website or locally) in the same directory as the final HTML file.

• Use full path/filename
  The imagefile location on your harddisk is identical (ie. you are working on the server for example).

• Use this default path
  The imagefile are stored on a fixed location. Preferably use relative paths to indicate the position (ie: ../sounds)

Tip: when using multiple languages, or when you have a more complex website, I can only urge you to use a seperate directory to store imagefile. This way the imagefile can be used for both languages, your website will be better organized and when using relative paths, local testing will be easier.

Sound file basics

As usually is the case, an soundfile is not located on your website as located on your harddisk (at least in my situation). This would implicate that each path of each soundfile I would have to adjust manually.
Here we can let the computer do the work. 3 options are available:

• Use filename only
  The soundfile is then located (on your website or locally) in the same directory as the final HTML file.

• Use full path/filename
  The soundfile location on your harddisk is identical (ie. you are working on the server for example).

• Use this default path
  The soundfile are stored on a fixed location. Preferably use relative paths to indicate the position (ie: ../sounds)

Tip: when using multiple languages, or when you have a more complex website, I can only urge you to use a seperate directory to store soundfile. This way the soundfile can be used for both languages, your website will be better organized and when using relative paths, local testing will be easier.

Applet code

In HTML, some additional and/or required parameters must be set before an applet can run properly. Most of these can be set here:

• MAYSCRIPT
  Allow the Java applet to run script if checked.

• Code
  Which applet class should be used. Default value: apPopupMenu

• Archive
  Which applet archive must be opened to find the applet class. Default value: apPopupMenu.jar

• Codebase tag
  Check this to use codebase. Note: the preview window will most likely not work with this feature checked !

• Codebase
  Relative or absolute path of the Java class or Java archive,

• Default Hyperlink Target
  This is an option kind of lost. Here you define the default target for new menuitems or menu subitems. This is usefull for those who work with frames (not yet 100% operational).

apPopupGen Index - 5. Code Generation

purpose:

Generation HTML code and params for the apPopupMenu Applet.

options:

Language 1 Code

Generate code for Language 1.

Language 2 Code

Generate code for Language 2.

Save code button

Save the code for language 1 or 2 to an optimized ASCII file suitable for the use with the external file tag (<param name="menuItemsFile" value="menuitems.txt">).

Include HTML basics

When checked, the code generator will add the pre-applet and post-applet HTML code to the generated code.

Note: The preview window uses this feature too!

apPopupGen Index - 6. Preview Menu

purpose:

Preview the generated menu. This is done by incorporating an HTML browser (Internet Explorer) into the program. As far as I know all versions of Internet Explorer should work just fine.

Note: When activating this tab, code generation will automatically generate code for the preview (PreviewTMP.HTM). You can set the default language (1 or 2) at the preferences & about tabsheet.

Troubleshooting

Window remains white

Woops, I think you might want to check the menu dimensions.

A grey box appears instead of my menu

First of all: try to change tabsheets (for example go to "Preferences" and back to "Preview"), if this does not fix the problem, the take a look at these options :

1. The applet cannot be found
- check codebase settings
- make sure apPopupMenu.jar is in the application directory
- make sure apPopupMenu.jar is set as the archive to be used
- make sure the code option is set to apPopupMenu
- make sure security settings of Internet Explorer allow you to use Java

2. Additional files cannot be found
- imagefiles are cannot be found (ie. copy them to the application dir and eliminate paths)
- soundfiles are cannot be found (ie. copy them to the application dir and eliminate paths)

3. Useless button
One button has no link or not an submenu. Each item/button must either have a link or a submenu!

4. Missing link but defined target
The applet does not appreciate that you define a target (for example "_self") while you did not define a link.
This often happens when creating menu's that will contain submenu's or you simple forgot to enter the link.

5. Invalid width or height
Note that when using percentages, not all browsers pass the right pixel value to the applet, try using pixels instead or try to use "normal" values like 150 an 100.

6. Link without a target
Verify that each link has a target!

Images\Sounds do not appear in my menu

- imagefiles are cannot be found (ie. copy them to the application dir and eliminate paths)
- soundfiles are cannot be found (ie. copy them to the application dir and eliminate paths)

File Not found error

The browser cannot locate the generated file (PreviewTMP.HTM in the application directory).
Make sure there is enough spave on your disk and that you can write to disk.

I get an "The page cannot be displayed" error

Several options here:

1. The applet cannot be found
- check codebase settings
- make sure apPopupMenu.jar is in the application directory
- make sure apPopupMenu.jar is set as the archive to be used
- make sure the code option is set to apPopupMenu
- make sure security settings of Internet Explorer allow you to use Java

2. Additional files cannot be found
- imagefiles are cannot be found (ie. copy them to the application dir and eliminate paths)
- soundfiles are cannot be found (ie. copy them to the application dir and eliminate paths)

The menu remains "loading ..."

You most likely forgot to add a target to at least one link.

apPopupGen Index - Preferences & About

purpose:

Let you visit my website and do some application specific settings/actions.

options:

Auto load at startup

Settings
Here you can tell the program to automatically load settings (color, font, etc) except the menutree. This can be usefull if you want to create several menu's in the same style.
Settings are stored in the Windows registry (HKEY_CURRENTUSER\SOFTWARE\Hansies apPopupMenu Generator - Win2000 handles this a bit different).

Project
Autoload the project you last used, very handy when you always work on the same menu (like I do).

Auto save

Settings
Here you can tell the program to automatically store settings (color, font, etc) except the menutree. This can be usefull if you want to create several menu's in the same style.
Settings are stored in the Windows registry (HKEY_CURRENTUSER\SOFTWARE\Hansies apPopupMenu Generator - Win2000 handles this a bit different).

Project
Autosave the project you you are working on at shutdown, very handy when you always work on the same menu (like I do).

File handling

Here you can manually (re)load/save settings and projects.

Generic

Some generic settings;

Enable Hints
Show those yellow hint ballons next to all the boxes, button, etc. when checked.

Default preview
When activating the Preview tabsheet, this will be the language where code will be generated for.