The Anatomy of a GUI-Based Program

This page and the ones that follow pick apart a simple Java program that has a graphical UI, explaining:

The classes the program uses
The program's hierarchy of Components
How Components draw themselves
How events propagate through the hierarchy

The program converts distance measurements between metric and U.S. units. Here, for the curious, is its source code. We do not expect you to fully understand the source code without reading the rest of this lesson and the relevant pages in the Using Components, the GUI Building Blocks and Laying Out Components within a Container lessons. Below is the program, running as an applet.

Your browser doesn't understand the <APPLET> tag. Here's a picture of the program, running as an application.

Classes in the Example Program

The example program defines three classes and creates instances of several classes that the AWT provides. It defines an Applet subclass so that it can run as an applet. It creates Components to provide basic controls so that the user can interact with it. Using Containers and LayoutManagers, it groups the Components.

The Component Hierarchy

The Components in the example program are arranged in a hierarchy, with Containers defining the structure of the hierarchy.

Drawing

Components are drawn from the top of the hierarchy -- the program's window -- down to the non-Container Components.

Event Handling

User actions result in events. In 1.0, events are passed up the Component hierarchy until an object responds to the event. In 1.1, events are delivered to objects that are registered as event listeners.

Overview of the Java UI