CSC 551: Web Programming
Spring 2002

HW5: Java Applets

This assignment involoves writing a Web page that simulates an Etch-A-Sketch. If you are not familiar with Etch-A-Sketch, it is a children's toy that allows you to draw simple pictures on a screen by turning knobs that control the horizontal and vertical movement of a drawing pen. The actual drawing of the pen will occur within an applet in the page, while the controls (buttons for moving up, down, left, and right, and also a button for clearing the screen) will be implemented as HTML elements.

Etch-A-Sketch

Part 1

To make this project manageable, you are being given the source code for the Etch-A-Sketch applet. Assuming that you will be using Visual J++ to compile this applet, you will need to follow these steps:

  1. Select Microsoft Visual J++ from the Programs Menu.
  2. A window titled "New Project" will appear. Select "Applet on HTML" under the "Web Pages" option in order to create a new applet project, and enter the name Histogram in the project name box. Also, enter the desired folder for storing the applet project, then hit the "Open" button.
  3. This will create a project with default files "Applet1.java" and "Page1.html". The first thing you must do is change the names of these files. Click on the + that appears in the Project Explorer window at the upper right. Then right click on each of the files and select rename to change the names to "Etch.java" and "Etch.html".
  4. You can then cut-and-paste the code for the Etch class into your Etch.java file.
  5. To compile the applet, select "Build" under the Build menu.


Part 2

Now that the applet has been compiled into Etch.class, you will need to edit the Etch.html document so that it presents a front-end to the applet. Your page should include the applet and four buttons for moving up, down, left, and right (as shown in the screen shot above). Note that the Etch applet is expecting a parameter specifying the step size for each move of the pen. You will need to provide this parameter in a PARAM tag within the APPLET element.

Note: you may use the Visual J++ editor to modify Etch.html, although I would recommend sticking with the Notepad. Before you begin writing the contents of Etch.html, you will need to delete the sample text placed in the file by Visual J++.


Part 3

Make the following additions/modifications to your Etch-A-Sketch page:
  1. Modify the applet and the HTML document so that it is possible to clear the applet by clicking a button. When the button is clicked, a new method in the Etch class should be called to reset the position of the pen (back to the middle of the applet screen) and clear the screen. To accomplish part of this task, the method will need to call the clearRect method of the Graphics class, which clears a rectangle (the arguments to this function are similar to the arguments for drawRect and fillRect).

  2. As it is currently written, it is possible for the drawing pen to extend off the edges of the applet. Modify the applet code so that the pen stops when it reaches any edge. For example, repeatedly clicking on the "up" button would eventually cause the pen to reach the top of the applet, where subsequent "up" clicks would have no effect. It would still be possible to click other buttons and return to the middle of the applet screen, however.