FHTW Berlin Fachbereich 4 Bachelorstudiengang Internationale Medieninformatik Info 1: Informatik I Wintersemester 04/05

---

Laboratory 7: GUI

---

The Link Box The cs101 Java AWT Quick Reference appendix Sun's online Java Applications Programmer Interface (API) documentation The wikipedia.de entry on Japan The scribble.jar file SmartCanvas , ScribbleData , Whiteboard , cs101.awt.Line , cs101.util.Coerce class documentation

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 :

• Event driven programming
• System construction
• Java AWT

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

Contents

• Overview
• Pre-Lab
  • Finger exercises
  • Lab Preparation
• Laboratory

  • What to Bring to Lab
  • In the Lab

• Post-Lab, AKA What To Turn In

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.
   (For the bored: 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 by typing java Scribble.Main in the directory where you save the scribble.jar file.

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

We have provided you with several support classes:

• SmartCanvas is the GUI component corresponding to the drawing space. As implemented, it doesn't do anything when you click on it, i.e., it has no facility for handling mouse events.
• When a SmartCanvas is created, it has an associated ScribbleData repository. This object can be used to store the locations of and other information about a set of lines. It has a paint method that knows how to display those lines on a Graphics, provided that it is given an appropriate Graphics (like the one belonging to the SmartCanvas....).
• Whiteboard is an AWT "window" class whose instances are born containing the choice, button, and drawing canvas components. You may want to specialize it if you define a specialized SmartCanvas.
• You may also wish to take a look at the cs101.awt.Line class.

You should familiarize yourself with all of these classes. Be especially certain that you understand the division of labor among instances of these classes! You might try drawing a diagram to help you understand the connection.

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]

• How do you create a Whiteboard? A SmartCanvas? (Hint: there's more than one way to do it.)
• What else (other than creating it) do you have to do to get a Whiteboard to work?
• A ScribbleData can be used to keep track of your lines. How do you use it?
• important Whose job is it to actually make the lines appear on your screen? How does it know that it is time to do so?
• Which of these three classes is a Container (and what does it/do they contain)? What is/are the other classes?

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]

• Conceptually, what do you want the Scribbler to do (and when do what things happen)?
• What should you do when a relevant event occurs?
• Is there any information that you will need to remember between events?
• What kind(s) of events do you need to handle? (There are several possible things that you can do here. Think minimal functionality first!)
• What are the objects involved in handling events? (Hint: Component, Event, Listener, Adapter.) What role does each play? Which ones do you have? Which ones do you need?

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:

• public java.awt.Color cs101.util.Coerce.StringtoColor( String );

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?

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:

• your pre-lab assignment, including the finger exercises.
• your development plan, along with a description of how (if at all) it corresponds to what you actually did in lab.
• your code and a description of its functionality.
• documentation of your code. (This can be inside the code.)
• your observations concerning
  • the coding/debugging process,
  • the behavior and reliability of your code.
• the names and roles of any collaborators in any parts of the project.

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