ExploreMenu V1.0

Here you will find all information you need about the usage, configuration and registration of the ExploreMenu applet by Stefan Mateescu. Before mailing the author any problems that you may have experienced, read this info carefully!


Contents


Introduction

Hello and welcome to Storm's ExploreMenu. This information will help you to understand how this applet works and how to configure it for the usage in your own homepage. As I can't explain here everything about HTML scripting and JAVA applets you should know how to edit a html-page (not only drag'n'dropping graphics and text on the screen - I talk about HTML scripting). You don't have to be an expert about this, but some experience would help you a lot.

Back to top...

How this applet works...

The ExploreMenu is a Java applet, what means that the target system, that accesses it must have the Java feature supported. Java is always processed on the target system that means the performance is not equal on every machine - so while this applet is fucking slow on your (old) machine it is a lot faster somewhere else on other (newer) machines and vice-versa.

The applet is loaded by the html-file which you may have edited, and after the page and the class file are loaded the applet is started. The first thing that this applet will try is to load some files like image sources for folders and icons, the tree information and a optional background image. Later more about the external files.

You give the applet information about colors, used graphics and oher stuff via parameters - that means between the <APPLET> and </APPLET> tags you have some parameters which look like this: <PARAM NAME="color" VALUE="#ff0000">. With this params you "communicate" with the applet. The params give you the possibility to change colors, style and other configurable options of the applet. I recommend copying the whole block of params from the demo-html and pasting it into your html file where you change the values to your convenience.

Because you have a lot of stuff to edit and upload within different files I think you should create a special temporary folder on your harddisk where you configure the ExploreMenu first, before inegrating it into the rest of your webspace.

Back to top...

Setup

The best way to use the ExploreMenu is to place it into a own frame on the left side from where it changes the content in the main frame. In order to configure the applet you have following things to do:
Do some fore-work
You should start this project by thinking about a design how you want to use the ExploreMenu. Like mentioned earlier in this text it is recommended to use it in a own frame. Set up your frames and the content files first. The easiest way to do this is using the type of frames shown in figure 1. If you use this style place the applet into frame 1 and the content into frame 2. Ofcourse you can do this like you want, but you should try not to reload the applet after a click on a link. After you have set up your frames, you can go on to configure the ExploreMenu. You do this by first copying the whole applet-block from the demo-html and pasting it into your navigation html-file.
figure 1

Set the size of the applet
The first thing in the configuration you set up is the size of the applet. In the first line of the APPLET tag you should find something like this:
<applet code="ExploreMenu.class" width="200" height="440">
Now you change this values of the width and height, set the width to 5 pixels more than your navigation frame otherwise the verical slider will disappear on netscape browsers! So if your navigation frame is 190 pixels wide, set the applet width to 200. Don't make the height too big - otherwise the internal sliders of the applet will be displayed in a way that the user can not reach every part of the explored tree. The height is best between 450 and 600.
Choose the graphics files
Now you choose the graphics set which you want to use. Graphics sets always contain 2 (TWO!) files - one for the folders and one for the icons. If you want to use own graphics items, read the chapter "Graphics files in detail". If you decide to use one of the sets which is delivered with this package then do following things:
1. see the different demoversions 1 to 4 from this package and decide which one you wanna use
2. see in the html-source of the specific demo-html which images were used for icons and folders
3. copy these TWO files into your work directory
4. change the params imageFolders and imageIcons to the proper filenames
5. see the last number in the filenames (like in set3_icons_40.gif it is 40) and write this number as value in the srcWidth and srcHeight params
...and then the graphics are implemented successfully.
You can also load an optional background image: copy the file into your work directory where the other files are and enter the filename as value of the param imageBackground. If you don't want to use a bg image simply let the param imageBackground empty.
Edit colors
The next step is editing all colors (if you want...) - the colors have to be edited like in html-format #rrggbb, where all values for red green and blue are between 0 and 255 in hexadecimal. Following color parameters are available:
backCol - the background color of the applet
linesCol - color of the lines between the icons of the tree
textCol - standard color of the items in the tree; you can change the colors also for each line in the tree information
hiliteCol - color of the text when the mouse is moved over it
pressedCol - color of the text when clicked on it
borderLiteCol - highlight box color 1 (leftupper border)
borderMidCol - highlight box color 2 (middle field color)
borderDarkCol - highlight box color 3 (rightbottom border)
sliderCol1 - slider color 1 (middle field color)
sliderCol2 - slider color 2 (leftupper border)
sliderCol3 - slider color 3 (rightbottom border)
sliderCol4 - slider color 4 (color of the arrows over the slider buttons)
Edit other parameters
Now you set up the other available params like (this step is optional):
lineStyle - sets the style of the lines between the icons (0:dotted; 1:single-pixel; 2:three-pixel-bold)
iconWidth - display width of the icons
iconHeight - display height of the icons
fontName - sets the font that shall be used
fontSize - font size... you know
fontStyle - font style (normal, bold, italic or bolditalic)
fontXoffset - this is the horizontal distance between the icon and the text
fontYoffset - this is the vertical distance between the top of the icon and the text baseline (see figure 2)
sliderSize - the size of the sliders (will always multiplied by 4 to gain the final size - best between 3 and 5)
linkTarget - the standard target of a link - can be also changed for every line in the tree information
hiliteMode - how to highlite the mouseovers (0: no highlight; 1: highlight text only; 2: highlight box; 3: both, text and box)
statusText - the text in the statusline of the browser when the mouse is over the applet
figure 2

Set up the tree information
OK. The first thing we will look at is how da hell this tree information looks like, and what results it gives us... First, the tree information which could be the whole tree information file:
 
******************************************
* ExploreMenu (C) by Stefan Mateescu
* Example...
******************************************
[0] text="This is da headline" icon="0" color="#ffffff"
   [1] text="Bla Bla!"
   [1] text="More Bla." icon="7"
   [1] text="EVEN MORE BLA!"
*** test folder
   [1] text="This is a folder!" type="folder" icon="3"
      [2] text="this item is in a folder"
*** author folder
   [1] text="Author's Information" type="openfolder" icon="3"
      [2] text="Visit author's homepage" color="#aaaadd" link="http://storm.headlight.de" linkTarget="_blank"
      [2] text="Email to the author" color="#aaaadd" link="mailto:mateescu@headlight.de"
*** avail folder
   [1] text="Available graphic items" type="openfolder"
      [2] text="Folders" type="folder"
         [3] text="Folder #1" icon="1" type="folder"
         [3] text="Folder #2" icon="2" type="folder"
      [2] text="Icons" type="folder"
         [3] text="Icon #00" icon="0"
         [3] text="Icon #01" icon="1"
         [3] text="Icon #02" icon="2"
The figures 3 and 4 show the results of the upper tree information. Figure 3 shows the look directly after the start of the applet, and figure 4 shows it with all folders opened. Some introductionary words about the tree information:
  • Every line in the tree information is a new entry in the ExploreMenu, except it was started with a *.
  • Every line that begins with a star (*) is a remark. you can use them to structure the whole bunch better so you don't lose overview. The star MUST be the first character in the line!!!
  • You also see, in every line is a [x] where the x states the actual level where the item is placed. I have moved every new level 3 spaces further - what you don't have to do, but it helps to see the final look.
  • See also that folders which don't have any items on the next level don't open or close anything.... so nothing worse happens but it is not really smart to use folders without any items in them!
  • A complete explanation of the tree commans you'll find in chapter Tree Information in Detail
figure 3
figure 4


Back to top...

Tree information in detail

This part is in my opinion the most complicated one in this info file. After you have seen the upper example, let's see what was in these lines... A line always contains some things which are neccessary, like level and caption (or displayed text). These 2 Informations must be in the line, otherwise you will experience some strange effects! The other commands are optional - but why? Well, most parameters you can change for every line are already set up in the params list which you have seen in the upper chapters, like color or linkTarget. Such params can be changed for every line, and if not changet the initial value from the applet params will be used! Here you see a list of all commands that can be used:

REQUIRED COMMANDS:
level in tree - see the example and figures 3 and 4; example: [0], [1], [15], ...
text - this is the displayed text next to the icon; example: text="This is the caption"

OPTIONAL COMMANDS:
icon - sets the icon number from the graphics files; if no icon is set up value 1 is taken; example: icon="12", icon="7"
color - the color of the menu item; if no color is specified the initial value from the applet param is taken; example: color="#77a2e3"
link - the link for the item; if no link is set up the item is static; example: link="http://bla.com", link="../test.html"
linkTarget - link target; if no linkTarget is specified the initial value from the applet param is taken; example: linkTarget="_blank", linkTarget="_top" or a defined frame name

OTHER COMMANDS:
type - sets the type of the item (folder or openfolder); if no type is set up the item will be a normal entry; example: type="folder", type="openfolder"; the openfolder is initially open when the applet is started!

Back to top...

Graphics files in detail

The two required graphics files are the folders' and icons' files. Every item is taken from these files and displayed in the applet area. See figure 5 to see how to count in them...

Don't use icons that are not in these files (here icons higher than 26).


If you want to make your own graphics files consider this:
  • you have to make both: the icons and the folders files!
  • the width and height don't have to be the same.. for example icons of 40x30 are possible BUT the icons MUST have the same dimensions like the folders
  • make sure to make the files gif transparent otherwise the lines will look strange
  • always use even numbers - you can use odd numbers for width and height, too but the lines will not be centered properly

Back to top...

Registration

The applet always checks the location of the actual URL where it is running. That's why you will need a regCode that enables the full fuctionallity for the desired URL. The applet will work fine on your harddisk, but if you upload it to the web you will need a regCode!
Registration codes will also work with updated versions of this applet!

How to get a regCode... ? If you need more regCodes then this is the formula: every 5 regCodes you get one FREE!

After you received your regCode, NO REPAY WILL BE POSSIBLE! If you move your homepage to another URL you will need a new one.

By registering this applet you are allowed to use it for commercial homepages. Use it at your own risk! The author does not guarantee compatibility to all Web users. There are lots of browsers and systems out there which cannot run this applet properly! No warranty or support from the author! You will use this applet AS IS!

For german users only:
Wenn Sie in Deutschland wohnen, können Sie die "registration fee" auch per Banküberweisung (DM 20,-) bezahlen. Falls Interesse daran besteht, dann einfach in der email mir der URL darauf verwisen, daß Sie das Geld überweisen möchten, dann sende ich Ihnen meine Bankverbindung (regCodes gibt es aber erst NACH Empfang des Geldes).

Back to top...

Last words...

Use this applet at your own risk! The author does not guarantee the compatibility to all Web users. There are lots of browsers and systems out there which cannot run this applet properly!

Do not remove the copyright params! Without these the applet won't work!

Play around with the params and you will see how everything works!

Don't make it too big - it can get very slow on older machines! The bigger you make it, the slower it gets!

For further questions, bug reports or whatever, mail me: mateescu@headlight.de

Don't forget to give me a credit!

Visit my homepage for more applets: http://storm.headlight.de



History

(C) Stefan Mateescu 1999


Back to top...