Event Handling in GUI Programs

Most graphical programs you use every day respond to actions: a click on a button, a choice from a menu, a window that pops up to ask a question. This article looks at a complete graphical program called MosaicDraw, introduced in Section 6.7 of the text. In MosaicDraw, the user colors the squares of a mosaic by clicking and dragging the mouse across the panel. Along the way, the program demonstrates two common parts of a graphical interface: menus and a color chooser dialog.

The goal is not to memorize every line of the program. The goal is to learn how to read a graphical program by asking one question about each part: what is this part responsible for? If you can answer that for the menus, the dialog, and the mouse handling, you can find where any feature lives in a program like this one.

The main activity of MosaicDraw is coloring squares by clicking and dragging. Follow a single action from start to finish. The user first presses the mouse on the mosaic panel. That panel is the area of the window where the squares appear, and it is the piece defined by MosaicCanvas.java. So the press happens on an area that MosaicCanvas defines.

Next, the user drags across several squares. Each movement of the mouse during the drag is an event, which is an action the user takes that the program must respond to. The responsibility for handling these events belongs to MosaicDrawController.java. The diagram below shows the order in which the user, the panel, and the controller are involved.

MosaicDraw is built from two supporting files, and each has a different job. A helpful way to hold this split in mind is to ask two separate questions. First, what does the mosaic panel look like, and how is it defined? That question belongs to MosaicCanvas.java, which defines the mosaic panel itself. Second, who builds the window's pieces, and who responds when the user does something? That question belongs to MosaicDrawController.java.

The controller is the part that assembles the window. It creates the mosaic panel and it creates the menu bar. The MosaicCanvas file supplies the definition of the mosaic panel that the controller creates. The controller is also responsible for events, which are the actions the user takes, such as pressing and dragging the mouse or choosing from a menu. The diagram below shows these relationships.

Splitting the responsibilities this way makes the program easier to navigate. If you want to change how the mosaic panel is defined, you look in MosaicCanvas.java. If you want to change how the window is assembled or how a user action is answered, you look in MosaicDrawController.java.

The two features are easy to confuse because both appear as part of the window's interface. The key difference is their role. A menu is a collection of choices organized under the menu bar. A dialog is a separate window whose purpose is to collect a piece of input, such as a color. The diagram compares the two side by side.

Now retrace the same action, this time asking responsibility questions at each step. The point is to practice the habit of asking what each part is responsible for, rather than only remembering the sequence.