UNIT 4 : GRAPHICAL USER INTERFACE

Structure

Introduction
Objectives
What is Graphical User Interface?
Evolution of Human and Machine Interaction
Common Graphical User Interface Terms
Functionality of Graphical User Interface
A Look at Some Graphical User Interfaces
4.6.1 Microsoft Windows
4.6.2 Machmh Todbox
4.6.3 X-windows
4.6.4 NeXT
Summary
Model Answers
Further Readings

4.0 INTRODUCTION

The Graphical Usei Interface (GUI) is one of the most revolutionary changes to occur in
the evolution of modem computing system. In less than 10 years, the expectation of what the
interaction between human and computer would be like was changed from a tense, character-
oriented system to the now more graphics-oriented system. This revolution has increased
the accessibility and usability of computer systems to the general public..

The previous two units of this block dealt with assemblers and translators. In this unit we
will look at another type of software which help users to interact with the system easily and
to perform a complex task with little knowledge of operating system or memorized com-
mands. The software providing such features supports Modern User Interface concept such
as desktop metaphor which makes computers available to the majority of people who are
either novice or non-programmers. The personal computer was invented for these users.

In this unit, we will look at several aspects of GUI, starting from common GUI terms, major
components of GUI, its history and finally some popular package supporting GUI such as
MS-Windows, X-windows. Macintosh and NeXT User Interfaces.

4.1 OBJECTIVES

After going though this unit, you will be able to:

define what is GUI and how it i s different from character oriented system,
define all the terms related with GUI, and
identify important features of several GUIs.

4.2 WHAT IS GRAPHICAL USER INTERFACE?

The term "user interface" originated in the engineering environment in the late 1970s. Vir-
tually every one who interacted directly with computers had been engineers and prograrn-
mers, but a new kind of users were emerging: the non- programming user. These users often
%reactedmore negatively to difficulties in dealing with a machine. New forms of interaction
was needed new interfaces, were required attention flowed to "the user interface":
 Craphlal Userhtedaa
Withthe introduction of the Macintosh in 1984, Apple Computer popularised the user inter-
face as it is known today. Apple's use interface is now commonly referred to as a Graphical
User Interface or GUI. The GUI has become associated with a common feature set available
in a number of product offerings. Common features include:
secondary user-input devices. Usually a pointing device and typically a mouse.
point and shoot functionality with screen menus that appear or disappear under
pointing-device-control.
windows that graphically display what the computer is doing.
icons that represent files, directories and other application and system entities.
dialog boxes, button, sliders, check boxes and many other graphical metaphors
that let the programmer and user tell the computer what to do and how to do it.

Today's GUIs have expanded basic func.tionalitiesto support not only graphics but also
d;mensions, color, height, video and highly dynamic interaction. Modem user interfaces can
simulate a very realistic view of a real, three dimensional world.

43 EVOLUTION OF THE HUMAN ANDMACHINE INTERACTION

The primary means of communication with computers until recently has been through com-
mand-based interfaces. In command interfaces, users have to learn a large set of commands
to get their job(s) done. In early computer systems paper tapes, cards and batch jobs were the
primary means of communicating these commands to the computers. Later, time-sharing sys-
tems allowed the use of CRT terminals to interact/communicatewith the computer. These
early systems were heavily burdened by users trying to share precious computer resources
such as CPU and peripherals.

The batch systems and time sharing led to command-driven user interfaces. Users had to
memorise commands and options or consult a large set of user manuals. The early mainframe
and minicomputer systems required a large set of instruction manuals on how to use the sys-
tem. In some systems, meaningful terms were used for command names to help the end-user.
But in other systems the end-user had to memorise several sequences of keysmkes to ac-
complish certain tasks.

Early users of computes were engineers and what we now call expert users; users that had a
lot of interest in knowing more about the computer systems and the technology. Command
l i e interfaces were acceptable by the majority of these users. In the 1970s. computers were
introduced to a new class of users: secretaries, managers and non-technical people. These
new users were less interested in learning computer technology and more interested in get-
ting their jobs done through themachine. The command based interfaces caused many of
these new users to develop computer phobia. Imagine the thought of memorising commands
made up of "Control-Alt-Del" to boot the system.

To make life easier for the end-user, a large collection of devices have been invented to con-
trol, monitor and display information. The early (and still widely used) peripherals are the
keyboard and the video terminal. But, it was not until the late 70s. research projects at some
universities led to the invention of pointing deices and windowing systems. The mouse and
joystick were among some of the few pointing devices that were invented in this period.
Also, research pioneers invented the notion of splitting the screen to allow multiple windows
and direct manipulation of objects.

In the 70s. researchers designed powerful new workstations anned with gmphical user-inter-
faces. The basic assumption of these new workstations was that one user could have a power-
ful desktop computer totally dedicated to that user's task Thus, the computer is not only
used to perform the task, but can also provide a much mole intuitive and easy-to-use environ-
ment.

Instead of memorising commands to each stage, the user selects a command kom a menu
bar displaying a list of available commands. For example, figure 2 displays the menu bar.
This menu bar displays a list of commands available such as File, Edit and Search. When the
mouse is clicked on any one of these menu commands the appropriate action is taken.
 Flle Edlt Search Display Font Paragraph
11
1.T :::

Fig. 1 : Menu Bar

Pull-down and pop-up menus display option commands available for each selection. Figure
2 shows the pulldown menu displayed when the Character menu item is selected. The user
can then select from different character styles.

Figure 2: ~ulldownMenu

Dialog boxes allow more complex interaction between the user and the computer. Dialog
boxes employ alarge collection of control objects such as dials buttons, scroll bars and
editable boxes. For example, in figure 3, a dialog box is used to open a file. This dialog box
is composed of two buttons called Open and Close and edit box that allows a file name to be
entered and a scroll region that allows navigation through the list of files and directories
available on the disk. Clicking on the Open button causes the file to be viewed.

In graphical user-interfaces, textual data is not the only form of interaction. Icons represent
concepts such as file folders, waste baskets, and printers. Icons symbolise words and'con-
cepts commonly applied in different situations. Figure 4 shows the paint utility with its
palette composed of icons. Each one of these icons represents a certain type of painting be-
haviour. Once the pencil icon is clicked, for example, the cursor can behave as a pencil to
draw lines. Application of icons to the user-interface design are still being explored in new
computer systems and software such as the NeXT computer user interface.
 Crnphical User Interlace

$ 1I Edlt Search Dlsplay Font Paragraph 1.1

Qen File Name :

Files in C:UGNOU

Fig. 3 : Dialog Box

Search Font Style Slze Pick Mlsc

TEXT
B
,

Fig.' 4 : Paint Palette

The idea of meta'phors has brought the computer closer to the natural environment of the end-
user. The concept of physical metaphor paradigm developed by Alan Kay, initiated most of
the research for graphic user interfaces based on new programming approach called object-
oriented programming. Discussion on this subject is beyong 'this unit. This will be covered
in detail in C++ and object oriented programming course, offered in the 3rd year of the
MCA programme. The physical metaphor is a way of saying that the visual displays of a
computer system should present Ihe images of real physical objects.

'For example, the wastepaper basket icon can be used to discard objects from the system by
simply dragging thc unwanted objects into the wastepapers basket, as in real life. The
desktop metaphor probably has been the most famous paradigm. Because of the large set of
potential office users, this metaphor can have the most dramatic effect. In this paradigm, the
computer presents information and objects as they would appear and behave in an office,
using; icons for folders, in-baskets, out-baskets and calendars.
~ a m m l n Concepts
g and
SdhsrrcTodr 4.4 COMMON GRAPHICAL USER INTERFACE TERMS

This section presents a list of terms used commonly with the graphical user interface (GUT).

1. Pointing devices
Pointing devices allow users to point at different parts of the screen. Pointing devices
can be used to invoke a command from a list of commands presented in a menu. They
can also be used to manipulate objects on the screen by:
selecting objects on the screen
moving objects around the screen, or
merging several objects into another object.

Since 1960s. a diverse set of tools have been used as pointing devices include the light
pen, joystick, touch sensitive screen and the popularity of the mouse is due to optimal
coordination of hand and easier tracking of the cursor on the screen.

2 Bit-mapped displays
As memory chips get denser and cheaper, bit displays are ~eplacingchmter-based dis-
play screens. Bit-mapped display made up of tiny dots (pixels) that are independently ad-
dressable and much finer resolution than character displays. Bit-mapped displays have
advantages over character displays. One of the major advantages include graphic
manipulation capabilities for vector and raster graphics, which present information in
the final form on paper (also called WYSIWYG: What You See Is What You Get).

3. Windows
When a screen is split into several independent regions, each one is called a window.
Several applications can display results simultaneously in different windows. Figure 5
presents a screen with two windows.

Fig. 5 : Screen with two windowe

The end-user can switch from one application to another or share data between applications.
Windowing systems have capabilitia to display windows either tiled or over-lapped, figures 6
and 7. Users can organise the screen by re~izingthe window or moving related windows closer.
- - - -
- - - --
 Craphlal User Interlace

. ;,2.2!,.*.:x,. ....,.,.,..-......z.y<:
....,t,y,., .....<,. .:.,.. ., *x,......
v,.....,+2:.,.:.:.:.:.:??.:.:.:.:.:.:...;.>:;x<.:$:
<..w:,:,..
.::.:.:.:.:.>:.:
y.......... .:*,,*;. ,;..,msw:*m I

Fig. 7 : Overlapped
-. Wmdows

1 4. Menus
A menu displays a list of commands available within an application (figure 1). From this
menu, the end-user can select operations such as File, Edit or Search. Instead of remem-
bering commands at each stage, a menu can be used to provide a list of items. Each
menu item can be either a word or an icon representing a command or a function. Menu
item can be invoked by moving the cursor on the menu item and selecting the item by
clicking the mouse.
When a menu item is invoked it could cause other menus, called pull-down menus, to
appear. Pull-down menus (figure 2) are used to present a group of related commands or
options for a menu item. Figure 2 presents the Fie pulldown menu.

5. Dialog boxes
Dialog boxes are used to collect information from the user or to present information to
the user. For example, when printing a file, (figure 8) a dialog box is displayed to get ad-

! ... Flle EdIt Search Dlsplay Font Paragra~h

Copies :
raft Quality
[Ezzi
Page Range :
@ All
O ~ r o m: 0. T o : 0

Figure 8: Dialog Box.

I

Some of the infarmation obtained are the number of copies and page numbers to be printed
Dialog boxes are also used'to indicate error messages in the farm of alert boxes. Dialog
boxes use a wide ranae of screen control elements to communicate with the user.
 represented by a specific type of icon. In some GUIs, documents representing folders are
represented by a folder icon (figure 9) A folder icon contains a group of files or other
folder icons. ~ o u b l clicking
e on the folder icon causes a window to be opened display-
ing a list of icons and folder icons representing the folder's contents.

75.430K in disk 12.034K available

n

Figure 9: Icons

7. Desktop metaphor
In the desktop metaphor, users are not aware of applications. Users deal with files,
folder, drawers, a clipboard and an out-box. Instead of starting the word processor and
loading file, users merely open the report document, which implicitly invokes the word
processor. Clicking the mouse on ah icon representing the report cause word processof
to get started and to load the report ble implicitly. Today. several computing environ-
ments provide this capability.

8. Graphic User Interfaces

GUIs are systems that allow creation and manipulation of user interfaces employing win-
dows, menus,.icons, dialog boxes, mouse and keyboard. Macintosh toolbox, Microsoft
windows and X- windows are some examples of GUIs.

4.5 FUNCTIONALITY OF GRAPHICAL USER INTERFACES

The development environment for most GUIs consists of four major components:

A windowing system,
An imaging model,
An application program interface (API). and
A set of tools and frameworks for creating interfaces and developing integrated ap-
plications.

Widowing systems allow programs to display multiple applications at the same time. Win-
dowing systems include programming tools for building movable and resizable windows,
menus. dialog boxes, and other items on the display. Some GUIs contain proprietary window-
ing systems, such as Macintosh. Others use common windowing systems such as, X Window
I
or simple X.

An imaging model defines how fonts and graphics are created on the screen. Imaging
models handle, for example, typeface and size in a word processor or curves and lines in a
 Graphical User Interface
drawing program. This component of the system environment has taken on increasing sophis-
tication as applications incorporate complex curves, colour, shading and dimension. Some
GUIs support more than one imaging model.

The API is a set of programming language functions that allow the programmer to specify
how the actual application will control the menus, scroll bars and icons that appear on the
screen. Like windowing models, APIs align with particular GUIs.

Finally, CUI development environments can include m l k i t s and frameworks. Most of

these toolkits are based on object- oriented approach.

Although the structure of the basic development for most GUIs is similar, there are major dif-
ferences in how the GUI is integrated with the operating system. Some, like the Macintosh
and NeXT GUIs, are closely integrated with the operating system. Others, like X Window or
Microsoft's Windows, can be set up as options to be selected by the user when the computer
boots up.

Programming of software for GUIs across t h w components is fairly complex and challeng-
ing. Commercial developers who want to support multiple environments find their task fur-
ther complicated by the absence of standards across heterogeneous computing platforms.
The higher-level toolkit component is intended to mitigate much of this difficulty.

Although the graphical user interface has become a standard component of most systems, no
standards in windowing systems, imaging models, APIs, or high-level toolkits have emerged.
However, three major camps of GUIs dominate. The first camp is IBM's System Application
Architecture (SAA), which includes primarily Microsoft's Windows and PM (Presentation
Manager). The second camp is UNIX systems, usually build around X Window. The third
camp is the Macintosh. In the next section we will describe the object-oriented functionality
of representative GUIs in these camps, including Windows, X (upon which most of the
UNIX camp is based), NeXT and Macintosh.

- -

4.6 A LOOK AT SOME GRAPHICAL USER INTERFACES

This section presents Graphical User Interfaces. Some popular G U S will be covered to pro-
vide a broad picture of the subject There are a great many popular GUIs around including X
Windows, Microsoft Windows. NeXT's NeXTStep and others.

4.6.1 Microsoft Windows (MS-WINDOWS)

MS-Windows is the most popular GUI for IBM personal computers. IBM and Microsoft an-
nounced O S P as a new operating system for 80286 and 80386 personal computers. The
O S P Standard Edition 1.1 adds Presentation Manager (PM)for its graphical user interface.
The user interfaces of Windows and PM are very similar but their APIs are different
Microsoft's strategy is to use Windows as a springboard for PM.

65
ProgrammingC@nceptrmnd
Feature Overview
S o n ~ t Tuob
x

Windows provides an environment that enhances DOS in many ways. The major benefits of
Windows are:

1. Common Look and Feel:- All Windows applications have the same basic look and feel.
'

Once you know one or two Windows applications, it is easy-to learn another one.

2. Device 1ndependence:- Windows presents a device-independent interface to applica-

tions. Unlike most of today's DOS applications,a Windows application is not bound to
the underlying hardware such as mouse, keyboard or display. Windows shields the a p
plication from this responsibility. The application deals with the Windows API to
manipulate any underlying devices.

3. Multitasking:- Windows provides non-preemptive multitasking support. Users can have

several applications in progress at the same time. Each application can be active in a
separate window.

4. Memory Management:- Windows also provides memory management to break the

640K limitation of MS-DOS. An application has h e ability to use the extended memory,
share dab segments with other applications and unwanted segments to disk.

5. Support for existing DOS applications:- Windows allows most standard DOS applica-
tions to run under it directly. Any applicaticn that does not control the PC's hardware,
use the PC BIOS or MS-DOS software interrupts, can run in ils own window.

6. Data Sharing:- Windows allows a data transfer between application Clipboard. Any
type of data can be transferred from one window with the Clipboard. The Dynamic Data
Exchange (DDE) protocol, defines, how two applications can share information. Infor-
mation such as bitmap, metafile, character strings and other data formats can be shared.

Support for Object Orientation

In order to create screen objects such as windows, the application devc!opcr defines a class
(similar to record) specifying ihc necessary properties. Ins~nccsof class can then be created.
Several applications can share [he same windows simultaneously. To communicate with in-
stances of a window class, mcssages x c scnt and received by a special function cal!ed the
window function. The windows handles dl mcssages such as re- drawing the screen, display-
ing icons or pop-up menus and changing the contenls of the client area.

Creation and Manipulation of a Window

MS Windows presents a pre-defined style for user-defined windows. It presents the structure
of a widdow, followed by a discussion of windows manipulation.

1. Structure of a window:- Figure 10 displays possible elements for window. The caption
bar (or title bar) displays the name of application within the window. The system menu
box contains names of commands available in all applications, such as minimise, maxi-
mise, resise and close. The minimize box clicked once reduces the window to an icon.
The maximize box cnl;s-ges !hc window to the full screen. The menu bar contains a list
of commands in the applicaiion. Thc clicn; area is ihe xea inside the wicdow which is
under thc application coi?ri.~!.

2. Creating windows:- Ezch wii,dcw cr:a;;.c2 on i k s c i x n is a rnembc: of so%c iiszi-

dcfincd window class. Wirldow clases sre crealcd by applicedon programs. Severd uin-
dow classes can be activc simultanmusly. Each window class in turn can have several
instances active at the same time. There are no pre-defined generic window classes that
come with MS windows.

To create a wbdow the following steps must be taken:

a. Setup a window class structure: which defines the attributes of the window class. At-
tributes that can be defined include:
(i) the H~i~~ilow
function, which handles all messages for this class..
 Craphlal User Interface
(ii) the icon and the cursor used for this class of windows
(iii) the background color of the client area
(iv) the window class menu
(v) the re-drawing function used when resizinghorizontally or vertically.
Capton Bar

Menu Bar

.Scroll Bar

Figure 10: MS-WINDOWS screen elements

3. Manipulating windows: An application can choose to display the window, resize the
window, display additional information in the client area, and so on.

Pop-Up and Child Windows

Pop-Up and child windows are special types of windows, and are used to communicate infor-
mation between the application and the end-user. They remain on the screen for a short
period of time. In this example, the pop-up displays information about a given file such as
date and time of creation and the size. Dialog boxes as discussed earlier. are more sophisti-
cated form of pop-up windows.

MS Windows provides a collection of predefined child windows. These are the most com-
mon usage of child windows. These predefined classes are buttons, scroll bars, listbox, edit
and static class. A developcr can also define child windows that can bc controlled by any
uscr-defined operation.

Resources

Resources are used to manage windows and user-defined objects. MS-WINDOW provides
nine kinds of resources to application developers. These resources arc : icons, cursors.
mcnus, dialog boxes, fonls, bitmaps, char strings, user-defined resources, and keyboard ac-
- celerators.
1. ' Icons and cursors: Windows defines a few types of icons and cursors. An icon or a cur-
sor is essentially a bit-mapped region that is used to represent and symbolize a window
or cursor. A dcvclopcr can also define an original icon or cursor using the ICONEDIT
utility.
~ m l n l c o a o c p b ~ 2. Menus: Each window can have its own menu bar. A menu item can be a character saing
sahmre T d
or a bitmap. Each item of a menu bar in turn can have a pop-up menu presenting a list of
options. Currently, Windows does not support nesting of popup menus within other pop
up menus. (Windows 3.0 provides this functionality). But a popup menu can invoke a
dialog box. When a menu is selected. W~ndowssends one or more messages to the Win-
dow function of the window containing the menu bar. These messages can be interpreted
to perform the function c o m n d i n g to the menu item.

3. Dialog boxes: These provide another mechanism besides popup menu and menu bar to
obtain information from the end-user. Dialog boxes are much more flexible than menu
bars or pop up menus. Dialog boxes usually contain a group of child windows such as
buttons, scroll bars, and editable fields. Just like windows, dialog boxes have a function
that is used to process messages received from the user upon selection of options.
Generally, dialog boxes appear as popup windows. The user selects the option needed
from the dialog box and then the dialog box disappears. Figure 11 depicts an example of
a dialog contains an edit box. a list box. and open and cancel buttons. The end-user can
specify the name of a file either by selecting from the list box or by typing the name of
the file in the edit box. By clicking on the open button, the application will open the
selected file.

4. Fonts: Widows provides a few families of fonts with different sizes and shapes:
modem, roman, swiss, helvetica, and script. Application processors and desktop publish-
ing can define additional fonts as needed

5. Bitmaps: They are used to represent icons, cursors. or draw picture on the screen. Both
mono and color bitmaps can be defined.

BI
..... File Edit Search character Paragraph Document

Figure 11: Dialog box (MS-Window) with an edit box, a list box, and push buttons

6. Character strings: Character strings are handled as resources mainly to provide a

manageable solution to intenrationalisation of a window application. Instead of includ-
ing a character string as part of the code, it can be placed in a resource file and handled
as a resource. Once in a resource file, different versions of the same character string
resource file can exist for different languages. This separation of the character strings
from the code makes internationalizing the application much easier, and also makes
maintaining the application much simpler.

7. User-Defmed Resources: These can be used for any purpose and support any user-
defined data type. Any arbitrary data can be managed as a user-defined resource.

Resources are defined in a text file called a resource script. They are compiled through a
 Graphical User I n M a e
utility called the Resource Compiler and linked with the Windows application. Resources are
read-only data. Once a resource script is compiled, it can be shared with other window ap-
plications.

Graphics Device Interface

Graphics in Windows are handled by the Graphics Device Interface (GDI). Both vector and
raster color graphics are supported by GDI. GDI supports only two-dimensional graphics.
Vcctor graphics are supported by a set of vector drawing functions such as drawing a line,
point. polygon etc. or pie chart.

Raster graphics are supported by pixel manipulation. Raster graphics can be stored or
manipulated either as a bitmap or as a metafde. A bit-mapped representation of the graph can
be manipulated using utilities such as BitBlt. PatBlt and StretchBlt. A metafile provides bi-
nary encoding of GDI functions such as to draw vectors and to fill.a region with a bimap.
Metafile take up less disk space than a bit-mapped representation since they do not represent
each pixel directly on disk. When metafiles are played. they execute the function encoding
and perform the necessary graphics operations to display the graphics output.

Check Your Progress 2

1. What are the four major components of GUI? Explain the functioning of any one com-
ponent.

2. How does MS-Window enhance DQS environment?

3. How are graphics supported in MS-Windows?

4.6.2 Macintosh Toolbox

The tremendous success of the Macintosh computer popularized the window-style menu-
driven user interface. Macintosh got its early start from Apple's Lisa.

The Macintosh GUl is called the Toolbox. The Toolbox consists of a collection of utilities to
manipulate Macintosh's resources. In this section we present an overview of Toolbox func-
tionally, examine the object-oriented features of the Toolbox and discuss major components
of the Toolbox's user interface features.

Functional Overview

The Toolbox provides a collection of utilities to access and manipulate Macintosh hardware
and software resources. It provides a set of utilities to manipulate interface components such
as windows. menu bar, and dialog boxes. These are discussed in the following sections.
Some of the other utilities provided are:

1. Fonts manager - allows manipulation ofsystem and user- defined fonts.

2. Event manager - provides monitoring of eventsgenerated by keyboard and keypad.

3. Desk manager - provides access to desk utilities such as the calculation.

4. Text edit - provides simple text editing capabilities such as cut and paste.
5. Memory manager - provides a set of routines to manipulate dynamic memory.

6. File manager - provides a set of routines to manipulate fdes and transfer &la between
files and applications.

7. Silver driver - provides access to sound and music capabilities.

8. Toolbox utilities - provides a set of general routines to manipulate icons, patterns.

strings, fmed-point arithmetic, and so forth.
Plloprmmlq Coleoptr and The Toolbox can be manipulated either from the assembly language or Macintosh
Software Toob
Programmer's Workshop (MPW) lmguage (Pascal, C, C++). Toolbox can be accessed from
non-MPW languages including Think C. One of the major features of the Toolbox is that
most of the Toolbox utilities reside in ROM. This provides a very responsive user interface.

From this point on, we will concentrate on the user components of the Macintosh Toolbox
such as the Widow Manager, the Manager, the Menu Manager, the Dialog Manager, the
. Scrap Manager, the Draw. and the Resource Manager.

Object-Oriented Features of Toolbox

Just like Microsoft Windows, the Macintosh Toolbox design is based on object-oriented. For
example, the application developer defines a new type of window by the template for a new
class of windows. Messages are sent between Toolbox application to change the behaviour of
screen objects such as windows and cursors. mor each class of windows defined by the sys-
tem or the user, there exists a function called the window definition function. When a wint
dow needs to be drawn or resized, a message is sent to the window definition function to
perform the appropriate action.

The Window Manager

The Window Manager allows the application developer to manipulate windows on the
screen. It deals with issues such as overlapping windows, resizing windows. moving win-
dows around the screen, or changing a window from a foreground to a background window.
Developers can create and manipulate predefined Toolbox windows with any desired shape
and form. For example, the user can create a circular or a hexagonal window.

Toolbox comes with a series of pre-defined windows. The most popular of these windows is
the document window. The document window, depicted in Figure 12, has the following
regions: Title bar. Close Box, Scroll bar($. Size Box and Content region. The Title bar con-
tains the title of the window. By clicking and holding the mouse within this region, the win-
dow can be dragged to a different part of the screen. The Close Box is used to shut the
window. Clicking inside this box will cause the window to disappear. The Size box is used to
resize the window. The horizon& or vertical ScroH bars can be used to scroll the contents of
the window. The Content region is the area that is controlled by the application

U O S ~ BOX Tide ~ a r

untitled I?

Content Region 1
Size Box.

Figure 12: Macintosh Toolbox document window

When creating a document window any one of the components described above can be Graphlal User InWac
omitted. For example, any one of the Scroll bars can be absent from the document window.

New types of wlndows can be created through either the Window Manager or the Resource
Manager. The Resource Editor can be used to create a window template. A window template
essentially defines a class of windows that can be instantiated by an application. For each
class of windows, defined by the system or the exists a function called the window defini-
tion function. This function is used to handle the behaviour and appearance of the window.
When a window needs to be drawn or resized, a message is sent to the window definition
function to perform the action for that type of window.

The Window Manager provides a large collection of routines to create, display, hide and ac-
tivatddeactivate windows on the screen.

The Resource Manager

The Resource Manager provides access to various resources such as the windows, fonts,
icons and menus. A user-defined resource such as a window is defined as resource Editor.
The template of the window and the window definition function is stored in a file called the
resource file. A unique resource identifier is used access a pre-defined resource. resource
identifier can 'be used to recognize the type of resource and the actual resource file to be read.

The Menu Manager

The Menu Manager provides a set of routines to create and manipulate menus. A menu bar,
depicted in Figure 14, can contain a list of one or more menu items. Each menu item high-
lights itself when clicked with the mouse; this item is selected. The developer can define a
menu using the standard bar. Menus can be stored as a resource and managed by the
Resource Manager. Once given to Manager, a unique identifier is used to reference the menu.

File Edit W~ndows Font FontSlze Style

Figure 13: Macintosh Menu Bar

A menu item can even invoke a pull-down menu which can be used to or choose additional
selections, see Figure 14. A menu item in a pull-down menu can then invoke a dialog or an
alert box. Amenu item can be a textual icon. Unlike MS Windows, menus in Toolbox cannot
be a part of a window Menus and only used to define the menu bar which is associated with
one Macintosh screen.

The Control Manager

The Control Manager provides a set of routines to define and objects like buttons, check
boxes and scroll bars. Controls are usually, a window. For example, the scroll bars can be
defined as part of a document. Most often controls are defined as part of a dialog or an alert
box.
Rogrammlmg Concepts and
Sdhsare Took

Figure 14: Macintosh Pull-down Menu

The Dialog Manager

The Dialog Manager provides a set of routines and data structures to manipulate dialogs and
alert boxes. Diaiog boxes are used to get additional information 6om the end-user of an ap-
plication. An alert box is used to provide information such as a warning or a cautionary mes-
qge. Figure 16 displays an example of Macintosh dialog box.

The Scrap Manager

The Scrap Manager allow the user to move data from one application to another. A portion of
one window can be cut and placed in the scrap manager and then pasted into another win-
dow. Once a portion of a window is cut, it is placed in the Clipboard. The user can paste the
contents of the Clipboard into another window.

4.63 X Window

The name X, as well as part of the initial design, was derived from an earlier window system
called W developed at Standford University. Currently the X Windows system is supported
by an X Consortium of primarily UNIX-based hardware and software vendors as a standard
base. for user interfaces across most UNIX product lines. Figure 15 illustrates the com-
ponents of UNIX GUIs based on X Windows.

The X Window system does not define any particular style of interface but rather provides a
mechanism for supporting many styles. X is also network-based. In contrast with PM, the X
architecture is based on the premise that an application can run on one computer, while the
graphical presentation of the application's output and responses from the user can occur on
another computer. As such, X provides a flexible set of primitive window operations but care-
fully avoids dictating the look and feel of any particular application. X's device- independent
functionally allows it to serve as a base for variety of interface styles. X does not provide
user interface comwnents such as buttons, menus. or dialog boxes.
DEC- Open Nextstep
CXI Motif Windows Look
HP
API X Widgets XUI

Wiadowing X Widow
System
xllXIIwg Display
Laaging
Model Proprietary as of lock postscript Postscript
I

Operating UNM
Syrtem

Figure 15: Components of major UNIX-based GUIs

 Graphical User Interface
All interfaces supporting X can theoretically use any X Window display. The application pro-
gram sends calls to the X Window Library, which packages the display requests as X packets
and sends them along to the X Window server. The server decodes the X packets and dis-
plays them on the screen. Exaclly how the packets will be displayed (i.e.. will look) on a
workstation depends on the set of predesigned window elements called widgets hat are uni-
que to the particular workstation in the system environment. The ultimate look on one
workstation may differ subslantially from that on another. but the response to a user's action
on these different-looking interfaces will be the same. Several hybrids of X exist.

The appiication programming model for X, like PM and Windows, is event-driven, and the
categories of events are similar. Like PM, X programs rest in wait loops until the underlying
window-management system generates an event. Window hierarchy management is also
common to the architecture of both systems. L i e PM's window, windows in X are organized
as parents and children, so attributes can be inherited and eflects of the events applied to re-
lated members.

Since X does not support any particular interface style, most programmes build applications
with libraries that provide an interface to the base window system. One standard program-
ming interface to X is the C language library known as X Library or Xlib. This library
defines functions for access and conuol over the display, windows and input devices. Al-
though commonly used, the library can be difficult and tedious to work with and often results
in hundreds of lines of code for a GUI. A better solulion is a higher-level toolkit, such as the
X Toolkit (Xt), upon which many other X Window toolkits are based.

X Toolkit is the foundation upon which most of the commercial toolkits are based and is a
good example for describing object-oriented functionally. The X Toolkit consists of two
parts: a layer known as Xt Intrinsics and a set of widgets. Xt Inuinsics supports many of the
available widget sets. The widget set implements user interface components including scroll
bars, menus and buttons. Xt inuinsics provides a framework that allows the programmer to
combine the components. Both parts are integrated with Xlib, allowing programmers access
to higher-level libraries. A typical X programming environment is illustrated in Figure 16.

Application

I Widget Set

Xt Intrinsics

Xlib C Language Interface

d Network Connection

X Server

Figure 16: Typical X Window Development Environment

The common distinction in objecta-iented programming between an application program-

mer (consumer) and a class library programmer (producer) fits well to the X environment.
I
I The X application programmer is likely to use a combination of a higher-level toolkit (e.g.,
I the X Toolkit's Xt Intrinsic). Xlib, and a widget set. The class library programmer, whose job
is to create new widgets, is likely to use the capabilities from within one of the higher-level
I
toolkits.
1 Depending on the toolkit, the widget programmer may be able to take advantage of object-
oriented capabilities. Xt Intrinsic, for example, uses an object-oriented approach and or-
ganizes widgets into classes. Xt Intrinsic defines the basic architecture of a widget. This

i
allows widgets to work together smoothly when built by diflerent programmers or potential-
ly when selected from diflerent widget sets.

A typical widget consists of two basic parts: a class record and an instance record. Each of
these components is implemented as a C structure containing data and pointers to methods.
Intrinsics defines the organisation of each structure. All widgets belonging to a class share a
copy o common data and methods for that class. Each individual widget has its own copy of
instancespecificdata. A widget's class record is usually allocated and initialized statically at
compile time, a unique copy of the instance record is created at run time for each individual
widget

Since all widgets belonging to the same class share the same class record, the class record
must contain only static data that do not relate directly to the state of an individual widget.
For example, every widget's class record includes a field containing the widget's class name.
The class record also contains methods that define the appearance and behaviour of all
widgets in the class. Although most of these methods operate on the data in the widget's in-
stance records, the methods themselves are shared by all widgets in a class.

Many objectaiented languages provide inheritance as a language construct. The Xt Inuin-

sics is written in the C language, which does not directly support object-oriented program-
ming. Xt itself supports inheritance with a subclassing mechanism. To use Xt's subclassing
capabilities, the programmer first finds an existing widget with similar functions (a common
step in object-oriented design), writes a subclass that can inherit existing data and methods,
and them adds new data and methods as needed.

If a similar widget cannot be found, then a foundation class called Core is subclassed. All
widget classes are subclasses of the Core widget class. Like the class Window in PM. Core
contains the basic methods for initializing, displaying, and destroying widgets, and reacting
the external resizing. Core also stores basic properties (e.g. the geomeby) of widgets and the
data for handling events.

New widget classes inherit the methods (called resources) defined by their superclass by
specifically including the definition of the superclass structure in the definition of the new
class. Xt Intrinsics provides two mechanisms for inheriting the methods defined by a super-
class. The first mechanism is referred to as chaining. When a method is chained, Xt Intrin-
sics invokes the method defmed by a widget's superclass first and then invokes the widget's
method. This allows a widget to inherit part of a method from its superclass.

Xt Inrrinsics also provides a mechanism for inheriting methods that are not chained. This is
done by using special symbols to specify methods in the widget's class record. Each symbol
is defined by the superclass that added the method to the widget's class record. These sym-
bols can be used by an subclass of the widget class Core and do not have to be redefined by
each widget class. Only classes that contribute new methods to the class record need to
define new symbols. When a widget class specifies one of these symbols in the class record,
Inrrinsics copies the corresponding method used by the widget's superclass into the widget's
class structure at class initialization time. Figure 17 illustrates this architecture and shows the
relationship between the class record and instance records of several widgets belonging to
widget class Core.

Core : Claaa Record

Core Claas Part

superclass

CoreClassPart

Basic: Insuncc Record

Figure 17: Inheriting from Widget Class Core

The Xt Inuinsics uses a dataabstraction technique to hide the implementation of a widget

from applications that use the widget. Applications that use a widget see only the incomplete
definition of the widget and therefore cannot directly access fields in the widget structure.
 . Graphlal User I n l a - l a u

I
I
Applications declare all widgets as type Widget, which is known as opaque type. This means
the application has a pointer to the widget structure but does not have access to the real
definition of the data that it represents. The application cannot access the contents of the data
; structure.

Another object-oriented technique promoted in X Windows is to extract some general

functionality from two or more new widget classes and create a melaclass. A metaclass is an

I
absuact class that is not intended to be instantiated directly but serves as a superclass for
other similar widgets. When creating a complete new widget set, it is frequently useful to cre-
ate a hierarchy or metaclasses. With this approach, the top metaclass in the hierarchy &fines
elements that all widget classes in the set have in common, and each subclass becomes more
and more specialized. Such an organization allows the widget programmer to create new
widget classes with the least amount of effort, although there is some extra initial effort re-
quired to design and create metaclasses. For example, this approach is used by the X Widget
set from HP,where most basic widgets inherit from the Primitive metaclass and most com-
posite widgets inherit from the Manager widget class.

Chcck Your I'rogress 3

I. What iypcs of utilities arc providd in Toolbox? Explain thcir fcaturcs.

1. ExpI:~inttlc funciioning of P\esourcc Managcr and Menu Managcr of Toolbox.

3. What is thc basic philosophy of X-windows? How is it diffcrcnt from the rest of GUIs?

4.6.4 NeXT

The NeXT ccmputer. with its three-dimensional user interface, was introduced in 1988. It
has grabbed the attention of the computer industry. The machine has been hailed as the.most
innovative computer invented in recent times. The computer was initially intended for the
educational market. But the NeXT Corporation decided to widen the market for its machine
to the commercial arena.

We provide a brief overview of the NeXT software tools and capabilities, followed by a dis-
cussion ol the capabilities of the user-interface design.

Overview of NeXT Software

The NeXT computer is designed to reach a wide range of users from non-technical to power
users. The non-technical users can deal with the graphic user interface to perform tasks by
manipulating menus, icons, and dialog boxes. The power user can directly interact with its
Mach operating system.

The NeXT system software is comprised of three major pieces: the Mach operating system,
applications and the NeXT user interface. The Mach operating system, developed at Car-
negie Mellon University is a redesigned UNIX. Mach redesigns the UNIX kernel to reduce
the size.

NeXT also comes with a set of bundled applications. Currenlly. there are new applications,
being developed that take advantage of NeXT hardware and software capabilities. Some of
the applications supported on NeXT are NeXT SQL Database Server, Mathematica (sym-
bolic mathematics package, WYSIWYG editors and word processors, and more.

NeXT User Interface

The third and last component, the NeXT user interface, is the most impressive piece of
NeXT technology. The NeXT user interface draws heavily on direct manipulation and
modem graphic user interfaces. The NeXT user interface is composed of four components.
Workspace Manager, Interface Builder, Application Kit, and NeXT Window Server.

The Workspace Manager allows the user to manage files and directories and to execute
programs. When a user logs into a NeXT machine, the Workspace Manager is started, Figure
18. The Directory Browser window is used to navigate through the files on disk.
 Figure 18 :NeXT Workspace Manager Directory.Browser

The Interface Builder lets the user create interfaces on the screen wilhout writing a single
line of code. Users simply select h e menu. control and screen objects from a paletter. then
move the controls to the desired location. It is also possible to resize the controls to the
desired dimension.

The Application Kit is a library of user-interface objects. It is used in conjunction with the Inter-
face Builder to design user interfaces. The Application Kit is discussed in the next section.

The Window Server handles all screen activities,such as drawing windows and handling
events such as mouse clicks. The window Server itself does not perform the drawing and
screen UO commands. Display PostScript. designed by Adobe and NeXT, handles all such ac-
tivities. Up to now, PostScript has been used only as a language for printer engines. With the
advent of the PostScript, both screen and printer share the same protocol. Therefore one
drawing method is used to display objects on the screen and the printer.

Save Panel
I

Print Pmal

I
Panel
I
Wtndow
Choow
Printer

. Box Text
Scroll
View

I I

Figure 19: Application Kit

 Graphical User 1n.Lerlace
, Application Kit
I
The Application Kit provides an extensive library of predefined classes. The hierarchy of
classes is shown in Figure 19. These classes provide functionality to define user interfaces
composed of menus, windows, buttons, slide bars, and sound. Each classwithin the hierar-
chy defines the behaviour of its objects. For example. a menu knows how to handle mouse
) events, when clicking on a menu item. Window objects know how to resize the window.

I The Application Kit can be extended by adding new subclasses to the hierarchy. To add a
new subclasses, the class definition is written using the Objective C language. Each NeXT
machine comes with a copy of Objective C. Objective C is an object- oriented extension of
C. The language is a superset of C incorporating object orientation features from Smalltalk.
Just like Smalltalk, it comes with a large collection of predefined classes to simplify the
software development task. The language supports abstract data types, inheritance, and
operator overloading. Unlike C++, Objective C does not extend the definition of any existing
C language constructs. It relies totally on the introduction of new constructs and operators to
perform tasks such as class definition or message passing.

To develop us& interfaces, designers can use Application Kit from Objective C directly.
This would be very much like developing an application using MacApp. They can creak in-
stances of objects fkom the Application Kit hierarchy and modify the attributes by calling the
methods attached to the class definition. But the other method of defining user interface,
using the Interface Builder. is much easier than coding it entirely in Objective C.

Designing User Interfaces with Interface Builder

The Interface Builder provides an easy to use utility to ilesign a user interface using the muse
and the screen. The Interface Builder is similar to an icon editor or screen painter. Designers
can define the screen layout by selecting the screen objects from the Interface Builder palet-
tes. The Interface Builder also helps to define the user-defined class and make connections
between objects. Not aC of the coding is automatic; the Application Kit and the Objective C
language are also needed.

Defining a user interface using the Interface Builder requires the following steps:

1. Define layout of screen: The interface designer defines a user interface by simply select-
ing screen objects from the the Interface Builder palettes, see Figure 20. After picking an
object from a palette using the mouse. the object can be dragged into the destination win-
dow and resized as desired.
The Interface Builder palettes include objects such as windows, menus, buttons, fields
radio buttons and more. At the top of the palettes window, three buttons allow the inter-
face developer to select a wide array of user-interface objects.

2. Define the userdefined classes: The developer defines a new class definition using the
Classes Window. The Classes Window allows the developer to extend the Application
Kit class hierarchy. The developer navigates through the class hierarchy and creates a
new subclass within the hierarchy. Methods and outlets (see next step) are defined for
this new class definition. When a class is defined this way, only the template of the class
is created. The actual implementation of each method is defined later by writing the
code in Object C.
I I
(a) C m t d Palatte
Figure 20 :NeXT Interface Builder palette

3. Making connections: Up to this point we have defined the layout of the user interface.
At this step, the developer needs to make connections among application objects. For ex-
ample, when a stroller's slide bar is moved, a message is sent to an application object to
perform certain actions like shifting the text Again the Inspector is used to connect user
interface objects with methods of classes within the application.
The other form of interconnection is via outlets. An object's outlet contain the object
identity of another application object. Thus, an object can send messages to the object
connected by its outlets. An object can have many outlets allowing connections to
several objects simultaneously.

4. Actual application code: The previous steps are handled by Interface Builder directly. -
The last step is accomplished by writing the application code in Objective C. When the
developer is done with the first two steps, the Interface Builder defines the source files
necessary to build the application. These files contain the template for the class defini-
tions and the connections made among objects. At this stage, the developer needs to ex-
tend these source files. Extensions are made to specify the logic of the program and the
code for method definitions.

Check Your Progrcss 4

1. What are the major componcnrs of NcXTSTEP? How do tltcse elemcnts function?

2. How arc applications written in NeXTSTEP environment?

4.7 SUMMARY

The GUI has already made a tremendous contribution to the increased usability of computer
systems. It is with great excitement that we look forward to future innovations in human-
computer interfaces. GUI development is at the vanguard of creativity in many areas, such as
ergonomics, software development tools, computer graphics and linguistics to name just a
few. The past decade has seen rapid change in the understanding and definition of GUIs, but
we have only been through the infancy of G u s . There remains much to be done in terms of
increasing the productivity of computer users, standardising operations across different ar:
chitectureand adapting the humanecomputer interface to non-mditional applications. In this
unit we 'discussed several issues related to GUl including functioning of several popular packages.
 4.8 MODEL ANSWERS
1

Check Your Progress 1

i
1. GUI is a system that allows creation and manipulation of user interfaces employing win-
dows, menus, icons. dialog boxes, etc.
!
i The basic featiues of GUI are:
Pointing device such as mouse which controls cursor.

I
Point and shoot functionality under control of device which cause screen menus ap-
pear or disappear.
Support of windows which graphically display the status of a computer program.
Icons that represent files,directories and other application and system entities.
Support of graphical metaphors such as pulldown menus. dialog boxes, buttons,
slides that let the programmer and user tell the computer what to do and how to do
it.

(a) When a screen is split into several independent regions each one is called a window.
Several applications can display results simultaneously in dilferent windows. The user
can switch from one window to another window. Windowing systems have capabilities
to display windows either tiled or lapped. Users can organise the screen by resizing the
window or moving related windows closer.

(b) No model answer is given.

(c) No model answer is given,

(d) No model answer is given.

3. Bit-mapped display is made up of tiny dots (pixels) that is an independently addressable

and has much finer resolution than character displays. Bit-mapped displays have the ad-
vantages over character displays. One of the major advantages is of graphic capability.

Check Your Progress 2

1. There are four major components of GUI.

(i) A windowing system

(ii) 'An emerging model
(iii) . An application program interface
(iv) A set of tools and framewoh for creating interfaces and developing integrakd ap-
plication.

The API (Application Program Interface) is a set of programming language functions

that allow the programmer to specify how the actual application will control the menus
scroll bars and icons that appear on the screen. Liking windowing models, APIs align
wilh particular GUIs. Its features vary from package to package.
R q ~ o a l n Coaceprs
g and
S d t w m Todr

2. The= are several ways MS-Widow enhances DOS environment.

(i) Device independence. It presents a device independent interface to applications.

Unlike most of today's DOS applications, a window application is not bound to the
underlying hardware such as mouse, keyboard or display windows.
(ii) Multitasking. Users can have several applications in progress at the same time.
Each application can be ac~ivein a separate window.
(iii) Memory management. Windows also provide memory management, the 640K
limitation of MS-DOS. An application has the ability to extend memory and share
data segments wilh olher applications.
(iv) Data sharing. Clipboard allow data transfer between application clipboard. Any
type of data can be transferred from one window to another through h e clipboard.

3. No model answer is given.

Check Your Progress 3

1. The toolbox provides a cullection of utilities to access and manipulate Macintosh
hardware and softwareresources. It provides a set of utilities to manipulate windows
menu bar and dialog boxes. Some of the other utilities provided are:
-
(i) Fonts manager Allows manipulation of system and user defined fonts.
(ii) Event manager - Pmvides monitoring of events generated by keyboard and keypad
-
(iii) rext edit provides simple text editing capabilities such as cut and paste.
(iv) Toolbox utilities - Provides a set of general routines to manipulate &ngs, fued
point arithmetic and so forth.

2. No model answer is provided.

3. The X window system dpes not define any particular style of interface but provides a
mechanism for supporting many styles. X is also network-based in contrast with other
GUls, or the X architecture is based on Ihe premise that an application can run on one
computer while the graphical presentation of the application's output and the responses
from the user can occur on another computer.

Check Your Progress 4

1. No model answer is given.

2. No model answer is given.

4.9 FURTHER READINGS

1. Communication of ACM, April 1993.

2. Khosafiin, Setrag & Razmik Abnom :Object orientation :Concepts, languages,

databases. User interfaces, New York; John Wiley & Sons, 1990.