A More Useful Applet

To give you a bit more experience with applets, we will now constuct an applet that implements a simple, active button for a web page.

• Return to the CS 105 folder in the courses file server volume and again copy "LabStarter" into the "www" folder of your CS bull account.
• This time, change the folder's name to "ButtonApplet".
• Double click to open a window showing the contents of the folder.
• Notice that there is a file named "button.gif" in the folder that contains an image resembling the button you produced for the last lab.
• Double click on the "LabStarter" project file to start up MetroWerks.
• Within the "LabStarter" window that MetroWerks opens, double-click on the line for "AppletMethods.java" to open this file so you can make some modifications to this new copy.

Bascially, what we will do first is modify the applet so that it loads the picture of the button and displays it in the applet screen area.

• Delete the instructions initially found in the "mouseDown" and "mouseUp" method bodies (a "pen.drawString" line and a "pen.clearRect").

The first method in the applet is named "begin". It is intended to hold actions you would like performed when an applet first becomes active. When the applet is used in a web page, this happens when the page is first visited. This is when the image should be loaded and displayed. So:

• Enter the following commands in the body of "begin":

  	Image button = getImage("button.gif");
  	pen.drawImage(button,0,0);
  

The first command tells the applet to load the image. Uses of "getImage" are only allowed within the "begin" method.

The second command actually displays the image in the applet screen area.

• Run the applet. It should display the image in the corner of the applet window.

To make things look better, we should shrink the applet window so that the button just fits. To do this,

• Quit the AppletViewer to return to MetroWerks.
• Find the "LabStarter" window and double-click on the line for "DisplayApplet.html"
• Replace the values for "width" and "height" with 72 and 36.
• "Save" the updated file.
• Run the applet again.

Finally, to make the button "active", we will take two steps. We will add some code to make it change appearance when the mouse is moved into the button. We will also add code to load a new web page when the user clicks on the button.

• Quit the applet viewer.
• Bring the "AppletMethods.java" window to the front of the screen.
• Add the line:

  	pen.invertRect();
  

  to the bodies of both the "mouseEnter" and "mouseExit" methods.

• Run the applet. The button should change colors as you move the mouse in and out of the applet window.
• Return to MetroWerks.
• Add the line:

  	loadPage("http://www.cs.williams.edu/~tom/courses/105");
  

  to the body of the "mouseDown" method. This line instructs the applet to load the CS 105 home page when the mouse button is depressed. If you would like, feel free to use another URL.
• Run the Applet.

You will have noticed that clicking the mouse on the button still does not load a new page. That is because the Applet viewer is not smart enough to load a page. To test this behavior of your new applet, you will need to view the applet in a browser. So, add a link from your "cs105labs" page to the "DisplayApplet.html" page in the "ButtonApplet" folder. Use Netscape to display your cs105labs page and follow the new link to test the applet.

For more fun, copy the <APPLET...> and </APPLET> tags found in "DisplayApplet.html" to another of your .html files to add the active button to that page. To make it work, you will also need to place a copy of "AppletClasses.jar" and "button.gif" in the same folder as any .html file to which you add the applet.