6.030 Fall 1999
Introduction to Interactive Programming

Laboratory 5: GUI

Overview

This week's laboratory project introduces you to AWT programming. The application that you will build is a line-drawing scribbler program.

This week, we will not be providing you with a Main class. Instead, we will supply you with some of the basic component types that you will need to make your program work. We will also give you a smart repository that knows how to keep track of and draw lines -- but not (yet) which lines to manage.

Your job is to glue these pieces together to provide a working Scribble application. This assignment emphasizes the following topics :

You should read through this entire assignment and complete the Lab preparation section before lab on your assigned day.

This assignment is due at the beginning of class on Friday, 29 October.

Contents

Pre-Lab

A writeup of the finger exercises should always be turned in along with your completed laboratory.

A. Finger exercises

Using the Java AWT Quick Reference appendix or Sun's online Java Applications Programmer Interface (API) documentation, answer the following questions. For each question, give both the answer to the question and the way that you found this answer.

[CHECK-IN] [TURN-IN]

  1. Define a class that implements java.awt.event.MouseListener and extends the mouseClicked(MouseEvent) method by printing the coordinates of the point on which the mouse had clicked. You may also want to make use of the class java.awt.event.MouseAdapter. (Bonus: also print the components of the previous mouse click.)
  2. Now define a class that extends java.awt.Canvas and sends its mouse events to your MouseListener.
  3. Define a class that implements java.awt.event.WindowListener and extends the windowClosing()method by printing "Nah, nah, you can't kill me!" (Alternately, you can do the potentially more useful thing and (1) call the object's dispose() method and (2) call System.exit(0).) What class do you think would be useful when implementing WindowListener?
  4. What methods does a Graphics have that allow you to make things appear on it? (One such method is drawOval).
  5. Define a class that extends java.awt.Canvas and looks like a (black and white) Japanese flag, i.e., it has a circle at (100,100).
  6. (Optional Bonus) Make the circle red.
  7. (Optional Extra Bonus) Make the circle change color when the mouse is over your Canvas. (Hint: mouse enter, mouse leave.)

B. Lab Preparation

This week's finger exercises are designed to help you with the lab assignment, and you have to do them before you begin your lab. You need to write them up explicitly for check-in. (You do not need to do the bonus exercises (at all), though.)

If you want to take a look at what the Scribble will look like and what your basic functionality should be like, take a look at a working demo we have set up for you: you can see it on Athena by typing java Scribble.Main

Your job in lab will be to implement (and possibly extend) that behaviour.

We have provided you with several support classes:

You should familiarize yourself with all three of these classes. Be especially certain that you understand the division of labor among instances of these classes!

Note that these links point to documentation for the classes, not to their code. You should not need to look at the code itself. However, you should be familiar with the interfaces provided by each of these three classes and how they interrelate. For example:

[CHECK-IN]

Building Runnable Code

Your first task in lab will be to define a standalone Java program. In order to do this, you will need to create a class with a public static void main( String[] args ) method. (The main method is the method called by default when the virtual java machine starts running your code.) Figure out how to do this. Think about a simple way to test this functionality.

[CHECK-IN]

Next, you'll need to connect your main method to this assignment by having it create a Whiteboard. Your next pre-lab task is therefore to figure out how to write this class. Bring your design with you to lab. If you want to test it, how would you do it? What do you expect to see at this stage??

Handling Events

After the previous steps, you will have designed code that should run and create something that looks like a Scribbler. The definition so far, though, doesn't do much in the way of drawing. The most important problem here is in the SmartCanvas: it doesn't handle any Events. You will need to to fix this. Your next pre-lab task is to figure out what events to handle and how to handle them.

[CHECK-IN]

Design this code and bring it with you to lab. You may wish to have several stages here, too. (Some suggestions are included in the lab section, below.)

To run this code, how will you need to change your startup code?

Additional (Bonus) Functionality

You don't need to go beyond building a working line-drawing Scribbler. However, there are lots of bells and whistles that you can explore if you are so inclined. These include more sophisticated event handling, connecting the Choice and Button components, or even adding additional widgets of your own. One caveat: we recommend that you stay away from modifying ScribbleData. (We do, however, strongly recommend that you use ScribbleData.)

A useful method that you might want to use if you reach this stage in your program is:

Development Plan

[CHECK-IN] [TURN-IN]

The final thing that you should bring to lab is a plan of the stages in which you will write and test your code. Be very wary of a design plan in which you write more than a few lines of code without testing them. You should never build too much without seeing it run. This design plan should include an explicit (written) list of steps in which you will build and test your code. You may want to read through the additional suggestions in the In the Lab section, below.

Laboratory

What to Bring to Lab

When you arrive at lab, you should have answers to the questions in the lab preparation, your finger exercises, a copy of your code design and your development plan ready so that we can check you into lab.

In the Lab

In lab, you should write and test the code that you designed.

As always, you should implement your code in simple, testable stages, building on your code only as each stage works robustly. In this case, it should be as simple as following your development plan.

A few notes:

When you write the initial test class, you will find that it doesn't really exercise the drawing area. You may want to try overriding the drawing area by extending SmartCanvas and overriding its paint method. For example, you could make it draw your Japanese flag (from the finger exercises).

When you are writing your event handler(s) for SmartCanvas, you may wish to begin by drawing dots wherever the mouse is clicked. You can also try drawing straight lines (from where you press the mouse to where you release it) as a simpler case before handling full-blown scribbling.

If you have completed a Scribbler that responds to (some) mouse events, you have accomplished the basic (target) desired functionality. You can make your Scribbler as complex as you want, though. For example, you can have it handle the choice or button components. How would you do this?

Before you leave

Before you leave lab, you will need to have your work checked off by a course staff member.

At a minimum, you should expect to demonstrate your code handling mouse events in the drawing panel, ideally by drawing the appropriate lines. If your code does not behave as expected, you should be prepared to explain why or to describe what you have done to try to figure out why.

If your code does more than draw lines, you should be able to describe and demonstrate what it does as well as how you were able to achieve this behavior.

It is always more important that you write clean, modular, well-documented and easy-to-understand code than that you go on to advanced features.

Post-Lab, AKA What To Turn In

Your completed assignment should include:

Lab assignments are due on Fridays at the beginning of class. They may, of course, be turned in earlier.


This course is a part of Lynn Andrea Stein's Rethinking CS101 project at the MIT AI Lab and the Department of Electrical Engineering and Computer Science at the Massachusetts Institute of Technology.

 

Questions or comments: