Computer Science 105 Lab 8: Applets, Graphics, and Interaction
Due 5:00pm April 11, 2003

The purpose of this lab is to become familiar with the idea of applets and interaction, and then to design a simple user interface in which the user can draw stick figures out of basic shapes like ovals, rectangles, and lines. That is, your program will simulate a very primitive interactive drawing tool like those used by architects, graphic designers, and engineers.

Part 1 -- Exercise a Simple Applet

Part 2 -- Exercise Another Applet

This frame is more interesting than Scribble, since it has four objects; a "Clear" button, a "Choice" menu, a "TextField" where the user can type input to the program, and a scrollable "TextArea" that reports events as the user types and clicks the mouse. The x and y coordinates of a mouse click are reported in the TextArea by the program whenever a mouse click event occurs.

The general form of a Java applet is summarized below (details of the program Skeleton.java can be seen in the complete program listing).

import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Skeleton extends Applet implements MouseListener, ActionListener,
                                                ItemListener  {
// Variables used by the Applet -- this is the global "state" of the interaction
     int last_x = 0;              // x-y coordinates of the first click of a pair
     int last_y = 0;
     int click_number = 0;        // most recent click for the current choice
     String currentChoice = "";   // the current user-selected shape
     String currentMessage = "";  // the current user-typed message
     Button clear_button;
     Choice user_choices;
     TextField user_typing;
     TextArea echo_area;

// Initializing the Frame -- this establishes the objects and their listeners
   public void init() {

     // Add a mouse listener in the frame
     // Add a button and its action listener to the frame
     // Add a choice (menu) and its item listener to the frame
     // Add a textarea, label, textfield, and action listener to the frame
   }

// Event handlers for mousePressed, mouseReleased,... events

// Event handler actionPerformed, for Button and TextField events
   
// Event handler itemStateChanged, for Choice (menu) selection events
}

1. What is the purpose of the statement

echo_area.setText("Mouse Clicked at " + e.getX() + ", " + e.getY() + "\n");

in the mouseClicked event handler? What do the expressions e.getX() and e.getY() represent in this statement?
2. What statements in the program create the choices "Rectangle", "Message", and "Nothing" and place these choices on the applet?
3. What statement activates a listener for these choices so that they can be handled?
4. What method handles a choice selection, and what does it do in response to such a selection?
5. What happens on the screen when you click the mouse in the drawing area, and what statements cause that to happen?
6. What happens when the user types the phrase "Hello World!" in the User input area? What variables in the program are affected by this event?

Part 3 - Design a Simple Drawing Tool Program

Looking carefully at this handsome figure, you can see that the user has created it by combining several simple shapes -- lines, rectangles, and ovals -- along with the text message "Here I am!". For example, the hat is a combination of a line and a rectangle, the mouth is an oval, and so forth.

How can the user select the location and size of a simple shape to be drawn in the frame? One way is to ask for two mouse clicks, which define the upper left and lower right corners of a rectangle, or alternatively the two endpoints of a line, and so forth. The x-y coordinates of each click are captured by the mouseClicked method. The distinction between the first and second click is made by the global variable click_number , which is 0 when the first click has been made and 1 when the second click has been made for a particular shape.

1. Describe a series of user-initiated actions (events) that will allow the user to interact with this interface and draw just the hat.
2. Describe another series of events thtat will allow the user to draw the head.
3. Do the same for drawing the torso and two legs
4. What are all the possible alternative responses that the mouseClicked handler should make in response to a single mouse click?
5. What specific actions should be made in response to a single selection in the user_choices menu?

Optionally, you may wish to add color to the capabilities of this tool. That is, a second Choice menu can be added so that the user can select a new graphics color. Whenever a shape is selected, the user could also select a new color for that shape, so that it will be drawn with the color selected, rather than with a black line.

Part 4 - Run the Program and Interact with It

Part 5 - Optional (extra credit)

Add functionality to your interaction so that the user can erase the most-recently-drawn shape in the stick figure. (A difficult variation would be to allow the user to erase any number of recently-drawn shapes, one-by-one, all the way back to the first one drawn.)

Lab 8 Deliverables:

This program file should be renamed lab8<yourname>.java , where <yourname> is the name of your personal Arctos e-mail account. Submit your program electronically by dragging it to the Drop Box in the CS105 (Tucker) folder server on your desktop.  Hardcopy answers to the questions in Parts 2 and 3 of this lab, along with a hard copy of this program, should be turned in on the due date.