Graphical User Interface
PGUI: Graphical User Interface

Here we give an explanation on the concept of graphical user interface (GUI) from the programmers' point of view. The elements of programming GUI include

Device independent graphics

Device independent graphics (DIG) system makes it possible to produce graphical output on different display devices with exactly the same functions and methods. The display devices can include screens, printers, ...

Device independence has been accomplished by using a common interface between the application and the display devices. This interface has been implemented with a special object called Graphics in Java (java.awt.graphics), device context (DC) in windows, and also Graphics in .NET.

DIG usually makes it possible to produce graphics with

  • pixel model,
  • stroke model, and
  • region model.

DIG interface includes methods for each of these image models.

The coordinate system provided by DIG maps logical coordinates to physical coordinates on the display device.

The other objects used for DIG include colors, brushes, pens, fonts, ...

Windowing system

The windowing system makes it possible to run interactive applications simultaneously or even concurrently. The applications can share the same display screen with the help of (usually) rectangular windows. The alternative approach gives the whole screen to one single application.

The windowing system has several different types of windows:

  • each screen has one root window,
  • an application can have one or many top level windows, and
  • top level windows can include child windows.

The UI usually consists of a hierarchy of user interface components in the form of top level windows and child windows (controls).

The windowing system implements an infrastucture for managing the contents of the windows. An update event is sent to a window when it's contents need to be redrawn. The application is responsible of drawing the actual contents.

Event-driven programming

The input devices, the windowing system, and a GUI application itself create events. A large part of the application logic is processing these events. For example, events include "mouse button pressed", "mouse button released", and "mouse moved".

The user-application interaction causes the events to happen. The application responds to the user actions by processing events.

The events are

  • queued in an event queue,
  • translated to other events ("mouse clicked", ...), and
  • dispatched to target windows.

A GUI application includes a "message pump" processing one message at the time. Depending on the target environment the "pump" is more or less hidden from the application programmer.

Input devices

The target environment provides device independent handling of input devices with a set of input events.

Mouse events are usually dispatched to the window under the mouse coordinates. In special cases (e.g. dragging) the events can be captured to a specified window. The "window captures the mouse".

The keyboard event are dispatched to a window having input focus. Input focus can be changed by clicking the mouse or "tabbing".

Widgets, controls, components

Widgets are (usually) rectangular regions of the screen that display information and/or respond to user actions.

Widgets are (usually) implemented with child windows. Alternative way to implement a widget (gadget) is to reserve a region from a parent window. Java Swing uses the latter method for the UI components.

The graphical target enviroment includes a set of pre-defined widgets (e.g. the standard Windows Controls). The class libraries add may more widgets to this collection.

A widget can be a component and/or a container. A container is also a component but is able to include other components. Containers can thus be used for implementing a hierarchical UI structure (the composite design pattern).

Examples of widgets include panels, labels, buttons, text fields, lists, ...

Desing patterns and MVC

Desing patterns can be used for implementing simple and complex GUI components and complete applications. Some of the most useful design patterns are listed below.

Observer
for implementing event handlers and model-view notification.
Composite
for implementing hierarchical components and managing hierarchies of graphical information (drawings).
Strategy
for making a feature of a component changeable (input handling).
Decorator
for attaching additional functionality to GUI components (scrolling).

Model-view-controller architecture uses several design patterns for separating the data (model, document) of an application from the different representations of the data (views). The controller is responsible for processing the user input.

The Java Swing -library is completely based on a modified MVC where the controller is merged with the view.

See also:

J2SE 1.4.2 documentation
The Java Tutorial

Overview of the Windows API
Windows API reference

MFC library

.NET development
.NET Framework class library