FUNDAMENTALS OF
COMPONENT-BASED GUI
DEVELOPMENT
One of the first computers to support GUI-based applications was the
Apple Macintosh computer.
In fact, the popularity of the Apple Macintosh computer in the early
eighties is directly attributable to its GUI.
In those early days of GUI design, the user interface programmer
typically started his interface development from the scratch.
He would starting from simple pixel display routines, write programs to
draw lines, circles, text, etc.
He would then develop his own routines to display menu items, make
menu choices, etc.
The current user interface style has undergone a sea change compared to
The current style of user interface development is component-
based.
It recognizes that every user interface can easily be built from a
handful of predefined components such as menus, dialog boxes,
forms, etc.
Besides the standard components, and the facilities to create
good interfaces from them, one of the basic support available to
the user interface developers is the window system.
The window system lets the application programmer create and
manipulate windows without having to write the basic
windowing functions.
Window System
A window is a rectangular area on the screen.
A window can be considered to be a virtual screen, in the
sense that it provides an interface to the user for carrying out
independent activities,
e.g., one window can be used for editing a program and
another for drawing pictures, etc.
A window can be divided into two parts—
client part
non-client part
The client area makes up the whole of the window, except for the
borders and scroll bars.
The client area is the area available to a client application for
display.
The non-client-part of the window determines the look and feel
of the window.
The look and feel defines a basic behaviour for all windows, such
as creating, moving, resizing, iconifying of the windows.
The window manager is responsible for managing and
maintaining the non-client area of a window
Window management system (WMS)
A graphical user interface typically consists of a large
number of windows.
Therefore, it is necessary to have some systematic way to
manage these windows.
Most graphical user interface development environments do
this through a window management system (WMS).
From a broader perspective, a WMS can be considered as a
user interface management system (UIMS)—which not only
does resource management, but also provides the basic
behaviour to the windows and provides several utility
routines to the application programmer for user interface
development.
A WMS consists of two parts
a window manager
a window system
Window manager and window system:
The window manager is built on the top of the window system in the sense
that it makes use of various services provided by the window system.
The window manager and not the window system determines how the
windows look and behave.
In fact, several kinds of window managers can be developed based on the
same window system.
The window manager can be considered as a special kind of client that
makes use of the services (function calls) supported by the window system.
The figure shows that the end-user can interact either with the application
itself or with the window manager (resize, move, etc.) and both the
application and the window manager invoke services of the window system.
Component-based development
Component-based development (CBD) is a software
development method that uses reusable components to build
applications.
A development style based on widgets is called component-
based (or widget-based) GUI development style.
There are several important advantages of using a widget-
based design style.
One of the most important reasons to use widgets as building
blocks is because they help users learn an interface fast.
In this style of development, the user interfaces for different
applications are built from the same basic components.
Visual programming
Visual programming is the drag and drop style of program
development.
In this style of user interface development, a number of visual
objects (icons) representing the GUI components are provided
by the programming environment.
The application programmer can easily develop the user
interface by dragging the required component types (e.g., menu,
forms, etc.) from the displayed icons and placing them wherever
required .
Examples of popular visual programming languages are Visual
Basic, Visual C++, etc. Visual C++ provides tools for building
programs with window-based user interfaces for Microsoft
Windows environments.
In visual C++ you usually design menu bars, icons, and dialog
boxes, etc. before adding them to your program.
Types of Widgets
Label widget: This is probably one of the simplest widgets. A label
widget does nothing except to display a label, i.e., it does not have any
other interaction capabilities and is not sensitive to mouse clicks.
Container widget: These widgets do not stand by themselves, but
exist merely to contain other widgets. Other widgets are created as
children of the container widget. When the container widget is moved
or resized, its children widget also get moved or resized.
Pop-up menu: These are transient and task specific. A pop-up menu
appears upon pressing the mouse button, irrespective of the mouse
position.
Pull-down menu: These are more permanent and general. You have
to move the cursor to a specific location and pull down this type of
menu.
Dialog boxes: We often need to select multiple elements from a
selection list. A dialog box remains visible until explicitly dismissed by
the user. A dialog box can include areas for entering text as well as
values.
Push button: A push button contains key words or pictures that
describe the action that is triggered when you activate the button.
Usually, the action related to a push button occurs immediately when
you click a push button.
Radio buttons: A set of radio buttons are used when only one option
has to be selected out of many options. A radio button is a hollow circle
followed by text describing the option it stands for. When a radio
button is selected, it appears filled and the previously selected radio
button from the group is unselected.
Combo boxes: A combo box looks like a button until the user
interacts with it. When the user presses or clicks it, the combo box
An Overview of X-Window/MOTIF
X Window System (X):
Acts as the core foundation, providing a basic framework for managing
windows, drawing graphics, and handling input events on a display.
Is device-independent, meaning applications built on X can run on various
hardware configurations without needing significant code changes.
Does not mandate a specific look and feel, leaving it up to the application
developer to define the GUI using toolkits like Motif.
Motif:
A widget toolkit that provides a set of pre-built graphical interface elements
(widgets) with a consistent visual style, allowing developers to rapidly create
user interfaces with a familiar look and feel.
Known for its "3D" appearance with beveled edges and subtle shadows on
buttons and other controls.
Considered a high-level toolkit, meaning it simplifies GUI development by
offering ready-to-use components for common user interface elements.
Here, A is the computer application in which the
application is running. B can be any computer on
the network from where you can interact with the
application.
X Architecture
X server: The X server runs on the hardware to which the display and
the key board are attached. The X server performs low-level graphics,
manages window, and user input functions.
X protocol: The X protocol defines the format of the requests between
client applications and display servers over the network. The X protocol
is designed to be independent of hardware, operating systems, underlying
network protocol, and the programming language used
X library (Xlib): The Xlib provides a set of about 300 utility routines
for applications to call. These routines convert procedure calls into
requests that are transmitted to the server.
X toolkit (Xt): The Xtoolkit consists of two parts: the intrinsics and
the widgets. We have already seen that widgets are predefined user
interface components such as scroll bars, menu bars, push buttons, etc.
for designing GUIs. Intrinsics are a set of about a dozen library routines
that allow a programmer to combine a set of widgets into a user
Size Measurement of a Component-based GUI
Lines of code (LOC) is not an appropriate metric to estimate
and measure the size of a component-based GUI.
This is because, the interface is developed by integrating
several pre- built components.
The different components making up an interface might have
been in written using code of drastically different sizes.
A way to measure the size of a modern user interface is widget
points (wp).
The size of a user interface (in wp units) is simply the total
number of widgets used in the interface.
The size of an interface in wp units is a measure of the
intricacy of the interface and is more or less independent of the
implementation environment.
