Download lab3

1
CS 122 – Lab 3 – January 24, 2012 – Introduction to GUI’s
In today’s lab you will begin practicing with graphical user interfaces (GUIs). This lab is designed
to be a gentle introduction – most of the GUI-specific code will already be written for you, and
you will be spending more of your time manipulating geometrical figures in an applet and within a
JPanel. In a nutshell, you will be modifying a couple programs called: PolygonApplet and
RectanglePanel.
Please download the Java files from the local server
\\Csserver03\Spring2012\CSC122-01\OutFall2006/CS12a/Out/lab3 or from the Web
http://cs.furman.edu/~chealy/cs122/lab03 and copy them to the appropriate folders on your
account or hard disk. You should wind up with a lab03 folder, with subfolders for each program.
Your PolygonApplet program will contain these files –
 PolygonApplet.java (You’ll be modifying)
 Point.java
 an HTML file that calls your applet (You’ll create this file)
The RectanglePanel program will contain these files –
 RectanglePanel.java (You’ll be modifying)
 Driver.java
We will use the Eclipse IDE on the PCs instead of the Linux text interface in this lab. Here is how
to start a new Project in Eclipse:
1. Launch Eclipse. When the Window appears, go to the File menu, and choose New 
Project.
2. We will create an ordinary Java program. Make sure “Java Project” is selected and click
the Next button.
3. Type in the project’s name in the text field labeled Project name. This can be the same
name as the folder containing the program.
4. Next, we specify the version of Java we want. Make sure your default version is at least
1.5. Then you can use the “default JRE” radio button. Otherwise, choose the highest
numbered JRE from the list beside the option “Use a project specific JRE”.
5. To specify where our source code is, click the radio button for “Create project from existing
source” and then browse to the location of the appropriate folder on your computer.
6. Click the Finish button.
Enhancing the PolygonApplet
Create a project for the PolygonApplet program. This program is currently designed to allow the
user to create a polygon by typing in the coordinates of each point and clicking a button. But this
is tedious and slow. The applet would be more user-friendly if the user could simply click on the
desired points within the applet’s window.
1. Change this applet so that we no longer have the user type in coordinates and click the
button. This means you’ll be deleting or commenting out some code. And you’ll be using a
mouse listener instead of a button listener.
2. Modify the paint() function so that it also displays all of the diagonals of the polygon.
3. I think you’ll find the program a lot faster and more fun to run, now that you’ve made these
changes. But once we enter a lot of points, the whole picture of the polygon with its diagonals
2
gets too dense. So let’s say we want to limit the number of vertices to 20 (or some other value).
Change the way you add points to the polygon so that when we draw the polygon, if we’ve
entered more than 20 vertices, only the 20 most recent points will count. In other words, the
oldest vertices will no longer exist. Think about this idea before you code! It turns out there is a
very efficient way to handle this situation.
4. Finally, create a little HTML file that calls your applet (so that it’s possible to run your applet in
a browser).
Enhancing the RectanglePanel
The existing version of the RectanglePanel application will draw a new rectangle each time the
user clicks at a different point in the panel. (This means you should expect to find a mouse
listener somewhere, and there is.) Run the program first so you see what it can do. Let’s modify
it so that instead of showing just 1 rectangle, it will show all rectangles created thus far.
1. To keep track of and display all the rectangles, you will need to store Rectangle objects in an
ArrayList<Rectangle>. You will need to declare an ArrayList attribute, and change the code inside
mousePressed() so that a Rectangle object can be added.
2. In paintComponent(), you need to change the code to make sure we display all the Rectangle
objects in the ArrayList. This is not hard to do. But let’s make it interesting. Let’s fill in all the
rectangles purple. The Color class does not have a pre-defined purple, so we’ll need to make our
own Color object by calling its initial-value constructor, and specifying the appropriate RGB
values, red = 0.3, green = 0.0, blue = 0.4. (If you feel adventurous, you can make the
rectangles have different colors, in some sort of cycle, so that for instance every fifth rectangle is
purple, every fifth one is yellow, etc.)
3. Now at this point your program allows the user to fill up the panel with rectangles… But of
course at some point the display is going to get somewhat full. Let’s stop adding rectangles once
the program detects that 2 rectangles overlap. We’ll call this situation a collision or “crash”.
This means that each time you add a Rectangle object to the ArrayList, you need to check to see
if any 2 rectangles overlap. And if so, display some sort of spectacular crash message or symbol.
Again, you need to stop and think – is it really necessary to compare all possible pairs of
rectangles to find 2 that overlap? Try to make your solution efficient and/or elegant.
Hint: to see if 2 rectangles overlap, it suffices to see if the 4 corners of one are contained in the
other rectangle. Fortunately, the Rectangle class already has a contains() method. I recommend
you have a private boolean attribute called crash that is set to true/false inside the mouse
listener, and then checked inside the paintComponent() to see if the crash message needs to be
shown.