CS 124, Fall 2009
Lab 13: Keyboard and Mouse

In this week shortened by Thanksgiving break, we have a short lab during our regular Monday class period. No work will be turned in for this lab. You will complete it during the lab period and show me what you have at the end of the lab. You will get almost full credit for showing up and for working on the lab throughout the period. For full credit, you should complete the exercises described below.

Remember that Lab 12 is still due on the Thursday after Thanksgiving.

In the lab, you will work on a program named EventDemo, which is meant to illustrate various event-handling tasks. It uses buttons, animation, keyboard, and mouse. Here is an applet version of the complete program:

The applet shows an animated pulsing "sun" in a drawing area, with three control buttons below. The "Center" button moves the sun to the center of the drawing area. The "Animate" and "Stop Animation" buttons start and stop the animation. Note that the "Animate" button is disabled if the animation is already playing, and the "Stop Animation" button is disabled if the animation is already stopped.

If you click the drawing panel, then that panel gets the input focus, meaning that it can respond to keyboard events. The arrow keys can be used to move the sue left, right, up, and down. The R, G, and Y keys set the color of the sun to red, green, and yellow, respectively. To give the user a visual indication of the focus, the color of the border changes to cyan when it has the input focus. The color will change back to gray when the panel loses the input focus (when you click one of the buttons).

You can also drag the sun with the mouse. You have to click near enough to the sun (within 80 pixels of the center) in order to grab it.

To start the lab, create a folder or project named lab13. You will need the two files Pulsar.java and EventDemo.java, which you can find in /classes/f09/cs124/files_for_lab_13. You will only be working on EventDemo.java.

Much of the EventDemo program has already been written for you. It already implements keyboard focus and responds to the right-arrow and G keys. The "Center" button works. Dragging and animation do not work, but the "Animate" and "Stop Animation" buttons are enabled and disabled at the right times. You can run EventDemo to see what it does.

You will complete the program in a series of short exercises.

Exercise 1: Animation

In Java, animations are often driven by timers. The timer generates action events. Some object listens for these everts. Every time one occurs, the listener changes the state of the object that is being animated and repaints it to show it in its new state.

EventDemo has a Timer instance variable named animationTimer, but no timer object is ever created or used. You can create the appropriate Timer object with the expression

new Timer(100, actionHandler)

This creates a timer that fires an event every 100 milliseconds and sends those events to actionHandler (which is an ActionListener object). In the EventDemo constructor, create the timer and assign it to animationTimer..

The timer has to be started by calling animationtionTimer.start(). After that, it can be stopped and restarted on demand, by calling animationtionTimer.start() and animationtionTimer.stop(). Start the timer for the first time in the EventDemo constructor, and start and stop it in response to ActionEvents from the "Animate" and "Stop Animation" buttons.

The animation should now be running when you run the program, and the buttons should be functional.

Exercise 2: More Keyboard Control

When the user presses any key on the keyboard, a keyPressed event is generated. The event data includes a "keycode" that tells you which key was pressed. The value of the code will be a constant such as KeyEvent.VK_G (representing the G key) or KeyEvent.VK_LEFT (for the left-arrow key). The KeyHandler class already defines responsed to these two keys. Extend it to respond to (at least) the right-arrow key, the up-arrow key, the down-arrow key, and the Y key. The arrow keys should move the sun by 10 pixels in the appropriate directions. the Y key should set the color of the sun to Color.YELLOW. If you have time later in the class, you might want to implement other keyboard actions. (The key code constants are defined in the KeyEvent class.)

Exercise 3: Dragging

When the user clicks-and-drags the mouse, a series of events is generated. When the user first presses the mouse button, a mousePressed event is generated. As the user moves the mouse while holding down the button, mouseDragged events are generated. (You don't get a mouseDragged event for every pixel that the mouse passes over -- they are generated more or less as quickly as you handle them, but the mouse might move several pixels between events.) Finally, when the user releases the mouse button, a mouseReleased event is generated. This means that in order to respond effectively to a user's drag action, you have to implement three methods, and these methods have to work together, usually by sharing instance variables.

Things are also complicated a bit by the fact that handling dragging requires two listener interfaces. A MouseListener listens for mousePressed and mouseReleased events (as well as three other event types), while a MouseMotionListener listens or mouseDragged events (as well as one other event type).

The nested class MouseHandler in EventDemo is a general outline for a mouse handling class that can handle drag actions. It has instance variables to keep track of the information that commonly needs to be remembered between sequential calls to the event-handling methods. Note that this class implements both MouseListener and MouseMotionListener. (Read the comments on this class!)

Currently, the MouseHandler class does nothing related to the particular program that you are working on. Make it work.

EventDemo already creates an object named mouseHandler for responding to mouse events, but it does "wire" the display (the event-generating object) to the event-handler object. So, first, you need to set up listening for mouse events. In the constructor of the EventDemo class, register the mouseHandler with the display both as a MouseListener and as a MouseMotionListener.

Next, you have to implement dragging. Add code to the event-handling methods in MouseHandler to enable the user to drag the mouse. For dragging to occur, you will need to set dragging = true in the mousePressed() method. Then, you have several choices (and you might want to try them all in succession):

Exercise 4: Final Fun

Just for fun make the background color of the display panel change when the mouse enters the display, and change it back to white when the mouse exits the display. Alternatively, just change the background color when the mouse moves close enough to the sun that the user can start dragging it. (The feature is not implemented in the above applet.)


After completing the lab, you should go back and make sure that you understand almost every single line of code that it contains. The few lines that you might not understand now, you should understand after reading the rest of Chapter 6.