CSC148H lab -- week 6


Here are the instructions for the week 6 CSC148H lab. To earn your lab mark, you must actively participate in the lab. As always, you will work as a pair, taking turns being the driver and the navigator. The driver types, and the navigator watches for mistakes, thinking ahead. At the end of each exercise, show your TA what you've done, and then switch roles.

This week's exercises are on the topic of object-oriented design and API and Specifications use.

Getting started

The first driver should begin by making a new folder "lab6". We suspect that you may be better off just staying in the first driver's account, since a good deal of the work here involves modifying what you've just finished doing.

In the new folder, "lab6", save the file that we've provided for you: Driver.java, Shape148.java, and ShapeCanvas.java.

Read over Driver.java and ShapeCanvas.java. ShapeCanvas extends the Java class JPanel, which is often used to draw 2D graphics. In this case, Driver creates a JFrame, which is an empty window, and fills it with a ShapeCanvas. ShapeCanvas also implements the Java interface MouseListener, which allows it to receive input from the mouse, such as clicks. This is used later in the lab.

For many parts in this lab, you will be dealing with built-in Java classes that may unfamiliar to you. You should look them up in the Java API, particularly if you are expected to use them:

Exercise 1: Shape classes

Read Shape148.java, which defines an interface Shape148 (if it was called simply "Shape", we would have conflicts with the built-in Java Shape class, unless we're careful). This interface defines some general methods that would be useful for any shape that we could draw. In particular, note that to draw a Shape148 the draw method is used, which takes a Graphics object as a parameter. This allows a class like ShapeCanvas to tell shape objects to "draw themselves", without ShapeCanvas "knowing" how to draw them itself.

Create a class Rectangle, in Rectangle.java, which implements the Shape148 interface. You'll need to add a new constructor:

Rectangle.java will need to begin with "import java.awt.*", so that the Graphics and Color classes are imported. You should check the Java API pages for information on these classes - Graphics in particular, since your Rectangle needs to draw itself in the draw method, given a Graphics object. Which method in Graphics is appropriate?

For the contains method, you'll need to figure out to detect if a point is within the rectangle. What are the ranges of x and y values which are within the boundaries of the rectangle?

When you are finished, you should test your Shape class by running the main method of the Driver class. You can do this by either right-clicking on the file in DrJava and selecting "Run Document's Main Method", or by selecting the file and pressing the F2 key. Make sure that you understand how Driver is adding a new shape, and how ShapeCanvas is remembering and drawing that shape.

Exercise 2: Interactive Shape Creation

ShapeCanvas contains a variety of methods which come from the MouseListener interface - look it up in the Java API, if you haven't already done so. We'll add some code to one of the methods to allow shapes to be created interactively.

We'll add some code to the MouseClicked method. This method is called by Java whenever the mouse is clicked on the ShapeCanvas. Since this method takes a MouseEvent as a parameter, you should read about that class in the API if you haven't done so.

Add code to MouseClicked to add a new blue Rectangle 40 units high and 40 units wide, centered around the point of the mouse click. Note that since Rectangles aren't defined in terms of where they are centered, you will have to adjust the parameters of the Rectangle constructor accordingly.

When you're finished, test out your modified program by clicking and drawing rectangles.

Exercise 3: Changing Colors

Now we'll add some code to interact with rectangles that have already been drawn. Add to your MouseClicked method so that if the click is inside a pre-existing shape, it changes its color - if the shape was blue, change it to red (use Color.red), and vice-versa. You'll need to use the contains method of every shape in the ShapeCanvas - see the paintComponent for a loop that goes through every Shape148 object.

Exercise 4: Multiple Mouse Buttons

We're going to add the MouseClicked method again, but now we'll distinguish between mouse clicks. Read the API about MouseEvent.getButton - in particular, what does the value it returns represent?

Change MouseClicked so that a right-click (i.e., mouse button #3) which is inside a pre-existing shape will swap its color, as before. A left-click (mouse button #1) should create new rectangle in the same way as earlier.