CS 3230 - Lab 9

Applet Lab

A requirement of all Java courses is to make an applet. Ask not for whom the bell tolls, your time has come.

Overview

Today you guys will make a little "Slide Show" applet that displays N images and allows the user to pick the one he wants to view.

Not Just a Screenshot

Click below and play with the applet lab you'll do today.

You guys will need to make a Lab9.java file that does this.

HTML page

In addition to the .java file, you'll need to make an HTML page that displays the applet. A quick "View Source" on this page will show you something like this:

<applet code="Lab9.class" width="300" height="100">
<param name="Name0" value="Centipede">
<param name="Image0" value="centipede.png">
<param name="Name1" value="Q*Bert">
<param name="Image1" value="qbert.png">
<param name="Name2" value="Pac-Man">
<param name="Image2" value="pacman.png">
<param name="Name3" value="Dig-Dug">
<param name="Image3" value="digdug.png">
</applet>

Note the PARAM tags. Your applet will use the "NameX" parameters as labels for the radio buttons. Likewise, your applet will use the "ImageX" parameters as images to display when the radio buttons are clicked.

The beauty of this applet is that it will display any images, simply by adjusting the attributes in the PARAM tags.

Specifications

You will need to make two classes: an Applet called Lab9 and a Panel called ImagePanel.

Lab9 class (extends JApplet)

This class needs only one method, called init(). Here's what init() should do.

  1. Make a new instance of the ImagePanel class (details below).
  2. Make a left-hand pane that will hold the radio buttons. (I used a Box with a call like Box leftPane = Box.createVerticalBox().)
  3. Make a ButtonGroup for making the radio buttons mutually exclusive.
  4. Make a loop that will read the applet parameters by repeatedly calling getParameter() on the NameX parameters until the call returns null.
  5. Inside the loop, make a new radio button, add it to the group, add it to the left pane (the Box), and add an ActionListener event handler to the radio button.
  6. The event handler should call getParameter() to get the image associated with the name, then call getImage() to retrieve the image, and lastly call ImagePanel.setImage() to display it. (More on this in the Q & A section below.)
  7. Last thing, add the pane with the radio buttons and the ImagePanel to the applet's content pane. (I used another Box with a call to Box hbox = Box.createHorizontalBox(), added the buttons & ImagePanel to the hbox then added the hbox to the content pane.)

You might want to look at Bookmark.java (or Bookmark.html) for an example of how to make radio buttons.

ImagePanel class (extends JPanel)

This class needs the following things:

If you need a refresher on drawing images in a panel, look back at the Lab6 writeup.

Questions and Answers

So, how many files do I have to turn in?

Two:

Where do I get some images to use?

images.google.com.

And to answer your next question, just put them in the same directory as your .java and .html files.

What packages do I need to import?

Sorry, but I'm not going to spoon-feed you this time; I'm pushing you out of the nest. You can find out which packages you need to import by looking at the "Cannot resolve symbol" error messages, then look up the class in the Java API Documentation on java.sun.com.

So, how many arrays do I have to use?

None. In fact, it will be simpler if you do not use any arrays for either the radio buttons or the images. The ButtonGroup / vertical Box can keep track of the radio buttons and the radio buttons can each be responsible for displaying a unique image.

Why do I have to click twice for an image to display?

The alert student will notice that, after writing this applet, clicking on a radio button once will not display the new image, but it will display on the second click. This happens because the image has not completely downloaded on the first click, so your applet tries to draw a null image. By the second click, the image has downloaded and draws just fine.

To fix this problem, you need to use a MediaTracker object, which will let you know when the image has downloaded completely. The following code could go in your radio button event handler:

String imgName...
...
MediaTracker tracker = new MediaTracker(imgPanel);
Image img = getImage(getCodeBase(), imgName);
tracker.addImage(img, 1);
showStatus("Downloading image " + imgName);
try {
	tracker.waitForAll();
} catch (InterruptedException ex) {
	JOptionPane.showMessageDialog(imgPanel,
			"Interrupted while downloading image");
}
showStatus("Image " + imgName + " downloaded completely");
imgPanel.setImage(img);

Man, I just gave you guys like, half of the assignment there.

I get a compiler error on the line ImagePanel.setImage(img).

Please note that I will sometimes use the ClassName.methodName() convention for describing which class a method belongs to. Typically, the method in question is an instance method and as such, needs to be called with an instance of the class, not just the class name. Thus, the right way to do it is like so:

ImagePanel imgPanel;
...
imgPanel.setImage(img);

This is also illustrated in the code snippet above.

Do you still want my name, course number and lab number at the top of the page?

Always.

Is this relevant to my Application Project?

For those of you who are making an applet, the answer is "yes". For those of you who are making an "Image Viewer" app, the answer is also "yes".