25th August 1997

Menu Applet

I was just developping my own class, and I has the idea to have, in my left frame, a menu system. I am an OO consultant, my first idea was Reusage: ok; a couple of visits to Gamelan and Jars, and no doubt, there were some applets I could have used. The problem is that the source code was not available, and I would have liked to touch those applets, I wanted to have my own design, and, more important, I had some time.

Finally, I have more problems developping it, but I really like the result, you can see it at the bottom of this page.

It is very simple, but is very easy to modify its look because:

  • It draws the image you pass it as a parameter: just change the image, and you will have a new look.
  • The source code is available. Just a condition: if you modify it and get a better result, please send me your solution.

The source code

The idea for this applet is very simple: having two images for each menu item, and just draw one of them depending on the user selection. Therefore, it is some work on graphics and to get the mouse events, more or less.

But:

  • To speed it up, it is needed to load one image only, and not one for each item in the menu. But to split an image is not directly supported in the awt, and I have had to develop my own SplitImage class.
  • The event model has changed in the JDK 1.1; therefore, my nice 1.1 class didn't work on any of the current browsers, and I have to use the deprecated API. That's the reason because some parts of the code are inside comments: is the JDK 1.1 compliant part.

The SplitImage class allows to split an image in as many parts as the user decides, all of them with the same size. The implementation of this applet could have been much simpler, using the class PixelGrabber, whose purpose is to retrieve an image, or a part of it as a map of bytes, but, I don't know yet the reason, this class was not properly working (??). This class is slightly better described on its own page.

Therefore, this class is an ImageConsumer, that receives the list of pixels, and construct as many ImageProducers as needed (for this, it has properly worked the class MemoryImageSource).

And here is finally the source code:

Applet parameters

  • frame : [optional] the frame to use to lunch the URL
  • items : [mandatory] number of items in the menu
  • image : [mandatory] the image (jpg or gif) that represents the menu. If the applet has a size of (width x height), the image should have, although this is not checked, the size (2*width x height). The left side of the image contains the menu in its normal state, and the right side, in its highlighted state. See the example, for more details. Note:it is much better to use gif images, because the applet uses the RGB color model
  • For each item, it is also mandatory to give a parameter called 'dst%', with the destin URL.

An example

First, it is needed to create the image (just have time enough!)

This image can be used with the following html:

          <APPLET CODE=Menu.class WIDTH=150 HEIGHT=80>

          <param name=image value="img/ownmenu.gif">
          <param name=items value=3>
          <param name=dst1 value="virtualnet/virtualnet.htm">
          <param name=dst2 value="menu/menu.htm">
          <param name=dst3 value="filesplit/filesplit.htm">
          <param name=frame value="main">

          </APPLET>

And here it is the applet in action: