Working with GUI APIs - Essentials of Interactive Computer Graphics - page 34

2.3 Building a GUI Application

We can perceive a GUI application as being a collection of GUI elements, where
through these GUI elements a user can trigger events to cause changes to an ap-
plication state in accomplishing desired tasks. The event-driven programming
model taught us the back end of a GUI application: how to react to events and
cause changes to an application state. The GUI API provides the mechanism for
building the front end of a GUI application: how to put together the collection of
GUI elements to support the generation of appropriate events.

2.3.1 Front End: Layout of GUI Elements

The first step in building a GUI application is to design the layout of the user
interface system. This is referred to as the front end because the results are the
front of our application that the user can see and interact with. In this step, the
application developer must determine the location and appearance of every GUI
element. Modern GUI APIs typically support this process with a GUI builder
program. A GUI builder is an interactive graphical editor that allows its user
to interactively place and manipulate the appearances of all GUI elements. This
layout process typically involves a developer placing icons representing GUI ele-
ments into a rectangular area representing the application window. The developer
then adjusts each GUI element's appearance (e.g., color, size). The result of GUI
element layout is usually stored in some data files. The developer includes these
data files with the rest of the development source code. When compiled and linked
appropriately, the resulting program displays the designed GUI layout.
The goal of this first step is to arrange and manipulate the GUI elements to
present an aesthetically pleasing, logically meaningful, and intuitively easy-to-
use user interface. These are the topics of user interface design, an entire field in
computer science. In this topic, we will only describe the basic process involved
in building a GUI. Our GUI front ends are sufficient, but they may not be the best,
or even very good.

2.3.2 Back End: Establish Semantic Correspondence

As we have already seen, the semantic meanings of GUI elements are defined
by the corresponding event service routines. For example, a mouse click over a
button has no real meaning. It is the event service routine that quits the application
that defines the semantic meaning of the button. We refer to this as the back