Building Graphical User Interfaces

Concepts with SWT

To explain the concepts of GUI design we design a toy GUI library called Simple Windows Toolkit (SWT).

SWT is based on the  Model-View-Controller pattern. It assumes application data and methods are stored in a component called the model, that is independent of the views and controllers.

SWT Components and Structure

A typical SWT GUI has a tree-like structure. The parent nodes are windows and the leaf nodes are user input controls such as buttons, text boxes, sliders, menu items.

The root of an SWT GUI tree is the desktop window.

SWT windows contain controls and sub-windows (such as control panels, menus, dialog boxes, tool bars, etc.).

In the context of the Composite Design Pattern, user input controls are the simple components and windows are the composite components.

The exact position of components in a window is determined by the layout strategy used by the window. This is an example of the Strategy Pattern.

SWT Windows

Views are windows that display data. Examples might include text boxes, graphs, dials, diagrams, shapes, even virtual worlds.

Views need to be automatically updated each time the model data changes. We can use Publisher-Subscriber for this:

Typically, a button click or other user input event causes a controller to update the model. Model updates notify subscribers, which are typically windows:

SWT Graphics

Every SWT GUI component, including a view, has a draw method which takes as input a canvas:

abstract class GUIComponent {
  abstract public void draw(Canvas canvas);
  // etc.
}

An SWT canvas has a palette (brush, pen, current color, etc.) and contains a bunch of shapes such as polygons, labels, ellipses, and composites (multiple shapes grouped together as a single shape).

An SWT programmer can draw on the canvas using the palette's pen (in the current color), fill shapes using the palette's brush (in the current color), and change the current color. (I'm leaving out bitmaps for now).

An SWT programmer can also create shapes, place them on the canvas, move them around, resize them, and group them into composite shapes.

The draw method of a canvas calls the draw methods of each shape on it. The draw method of a composite shape calls the draw method of each component shape.

 

Listening for User Input

SWT user input controls are publishers. When activated they fire a user input event such as a button click, menu item selection, or key press.

Subscribers are user input controllers. (Don't confuse control and controller.)

When notified of a user input action from its associated control, the controller executes some series of actions specified by the programmer.

For example, clicking the "Withdraw Funds" button on an ATM might trigger a sequence such as:

request amount
request source account
validate transaction
withdraw funds
dispense funds
record transaction

Controllers often implement use cases.

SWT Design

Here's the complete design (more or less):

SWT Platform Independence

SWT GUI components are virtual! By that I mean that the actual buttons, menus, and windows seen on the computer screen are not SWT GUI components, but platform-dependent GUI components provided by the underlying platform (operating system and computer).

Before Java GUI's needed to be re-implemented for each platform the program ran on. Too bad since the GUI code can be more than half of the program.

Every SWT GUI component is associated with a peer component in the underlying platform-dependent GUI component. For example, on a Mac and SWT Button's peer would be a Mac button, on a Windows machine it would be a Windows button.

But how do we specify the type of a peer in advance? We do this by introducing an PeerGUIComponent interface. We demand that all Mac and Windows GUI components implement our interface!

After being told to get lost by Apple and Microsoft we decide to use the Adapter Pattern to adapt Mac and Windows components to our interface.

The Abstract Factory Pattern allows us to construct SWT GUIs before we know what peers to construct.