1.

0 INTRODUCTION
The Graphical User Interface (GUI) is one of the most revolutionary
changes to occur in the evolution of modern computing system. In less
than 10 years, the expectation of what the interaction between human
and computer would be like was changed from a terse, 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. In this unit, we will look at another type of
software, which helps users to interact with the system easily and to
perform a complex task with little knowledge of operating system or
memorised commands.

The software providing such features supports Modern User Interface

concept such as desktop metaphor, which makes computer 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 a popular package supporting
GUI - MS-Windows.

1.1 OBJECTIVES
After going through this unit, you will be able to:
define what is GUI and how it is different from character oriented system,
define all the terms related with GUI, and
identify important features of GUIs
identify resources available in MS-Windows
identify various dialog-box options.

1.2 WHAT IS GRAPHICAL USER INTERFACE?

The terms “user interface” originated in the engineering environment in
the late 1970s. Virtually every one who interacted directly with computers
had been engineers and programmers, but a new kind of users was
emerging: the non-programming user. These users often reacted more
negatively to difficulties in dealing with a machine. New forms of
interaction was needed, new interfaces were required and attention
flowed to “the user interface”.
 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 functionality to support not only

graphics but also dimensions, colour, height, video and highly
dynamic interaction. Modern user interfaces can simulate a very
realistic view of a real, three dimensional world.

1.3 EVOLUTION OF THE HUMAN AND MACHINE

INTERACTION
1 A Graphical User Interface
2 The primary means of communication with computer until
recently has been through command-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 systems allowed the use of CRT terminals to

interact/communicate with the computer. Users trying to
share precious computer resources such as CPU and peripherals
heavily burdened these early systems. The batch system 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
system. 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 keystrokes to
accomplish certain tasks. Early users of computers 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 line 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 getting their jobs done through the machine.
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 control, 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 devices 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 armed with
graphical user-interfaces. The basic assumption of these new
workstations was that one user could have a powerful 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
more intuitive and easy-to-use environment. Instead of memorising
commands to each stage, the user selects a command from a menu
bar displaying a list of available commands.

For example, Figure 1 displays the menu bar. This menu bar
displays a list of commands available such as File, Edit and view.
When the mouse is clicked on any one of these menu commands
the appropriate action is taken.
Pull-down and pop-up menus display option commands available for
each selection. Figure 2 shows the pull-down menu displayed when
the file menu item is selected. The user can then select from
different file related activities.
Dialog boxes allow more complex interaction between the user and
the computer. Dialog boxes employ a large 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 etc. Icons symbolize words and concepts
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 behaviour. Once the pencil
icon is clicked, for example, the cursor can behave as a pencil to
draw lines.
Figure 3: Dialog box
1.4 COMMON GRAPHICAL USER INTERFACE TERMS
This section presents a list of terms and commonly with the
graphical user interface (GUI) 1.

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.

2) Bit-mapped displays

As memory chips get denser and cheaper, bit displays are

replacing character-based display screens. Bit-mapped displays
made up of tiny dots (pixels) that are independently addressable
and provide much finer resolution than character displays. Bit-
mapped displays have advantages over character displays

3) Window

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.
The end-user can switch from one application to another or
share data between applications. Windowing systems have
capabilities to display windows either tiled or over-lapped, Figure
6 and Figure 7. Users can organise the screen by resizing the
window or moving related windows closer.
 4) Menus
A menu displays a list of commands available within an application
(figure 1). From the menu, the end-user can select operations such as File,
Edit, view. Instead of remembering 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 icon 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 File
pull down 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 additional information
Some of the information obtained are the number of copies and page
numbers to be printed. Dialog boxes are also used to indicate error
messages in the form of alert boxes. Dialog boxes use a wide range of
screen control elements to communicate with the user.

6) Icons
Icons are used to provide a symbolic representation of any system/user-
defined object such as file, folder, address, book, applications and so on. A
specific type of icon represents different types of objects. 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. Double clicking on
the folder icon causes a window to be opened displaying a list of icons and
folder icons representing the folder’s contents.
 7) Desktop metaphor
In the desktop metaphor, users are not aware of applications. Users deal
with files, folder, drawer, 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 an icon
representing the report cause word processor to get started and to load the
report file implicitly. Today, several computing environments provide this
capability.

8) Graphic User Interfaces

GUIs are systems that allow creation and manipulation of user interfaces
employing windows, menus, icons, dialog boxes, mouse and keyboard.
Macintosh toolbox, Microsoft windows and X-windows are some examples of
GUIs.
 1.5 MICROSOFT WINDOWS (MS-WINDOWS)

MS-Windows is the most popular GUI for personal computers. 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 Independence: Windows presents a device-independent interface to applications. 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 applications from this responsibility. The
application deals with the Windows API to manipulate any underlying devices.

3. Multitasking: Windows provides non-pre-emptive 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 the ability to use the extended memory, share data
segments with other applications and swap unwanted segments to disk.

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

6. Data Sharing : Windows allows 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. Information such as bitmap, metafile, character
strings and other data formats can be shared.

7. Support for Object Orientation: In order to create screen objects such as windows, the
application developer defines a class (similar to record) specifying the necessary properties.
Instances of class can then be created. Several applications can share the same windows
simultaneously. To communicate with instances of a window class, messages are sent and received
by a special function called the window function. The windows handles all messages such as re-
drawing the screen, displaying icons or pop-up menus and changing the contents of the client area
(refer to figure 10). This facilitates the process of Application development. An application can
choose to display the window, resize the window, display additional information in the client area,
and so on.
1.5.1 Structure of a Windows
Since the window parts of many of the window based application software are common,
this makes a person to understand and memorise faster. You will see that the button to
maximise or to minimise always appear on the right top corner in all the windows. Similarly
the menu bar, the tittle bar, the control menu bar also appear at the same place for all the
windows. This way if you get familiar to one window, you will get familiar with the other
windows too as the meaning for each of the similar buttons remain the same. Depending
upon the type of application all windows, however, may not have every element.

Figure 10: Parts of windows

Control-menu box: It is in the upper-left corner of each window. Clicking on the Control-menu box opens
the Control menu. The Control menu can be used to move, size, and close a window
while working with the keyboard.

Title Bar It shows the name of the application, document, or a folder name.
Menu Bar It lists the available menus. A menu contains a list of actions or commands.
Scroll Bars They are used to move through a document or a list when the entire document or list
does not fit in the window.
Maximise Button Clicking this button using the mouse enlarges the active window so that it fills the entire
desktop.
Minimise Button Clicking this button reduces the window to an icon and arranges it on the desktop.
Minimising the application window does not quit the application.
Restore Button The Maximise button is replaced by the Restore button after the window is enlarged.
Clicking this button returns the window to its previous size.
Window Border It is the outside edge of the window. The window can be resized by lengthening or
shortening the border.
Insertion Point It is a flashing vertical bar that marks the place where text or graphics are to appear on
typing or drawing.
Mouse Pointer An arrow used for pointing items. It appears if the mouse is installed on the system.
Client Area Area inside the window which is under the application control

Resources

Resources are used to manage windows and user-defined objects., MS-Windows provides
nine kinds of resources to application developers. These resources are : icons, cursors,
menus dialog boxes, fonts, bitmaps, char strings, user defined resources, and keyboard
accelerators

1) Icons and cursors: Windows defines a few types of icons and cursors. An icon or a
cursor is essentially a bit-mapped region that is used to represent and symbolise a
window or cursor. A developer can also define an original icon or cursor using the
ICONEDIT utility.
2) Icons and cursors: Windows defines a few types of icons and cursors. An icon or a
cursor is essentially a bit-mapped region that is used to represent and symbolise a
window or cursor. A developer can also define an original icon or cursor using the
ICONEDIT utility.
3) Icons and cursors: Windows defines a few types of icons and cursors. An icon or a
cursor is essentially a bit-mapped region that is used to represent and symbolise a
window or cursor. A developer can also define an original icon or cursor using the
ICONEDIT utility.
4) Fonts : Windows provides a few families of fonts with different sizes and shapes :
modem, roman, Swiss, Helvetica, and script. Application processors and desktop
publishing can define additional fonts as needed.
5) Bitmaps : They are used to represent icons, cursors, or draw picture on the screen.
Both mono and colour bitmaps can be defined.
6) Character Strings : Character strings are handled as resources mainly to provide a
manageable solution to internationalisation of a window application.
7) User-Defined 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.
1.5.2 Basic Mouse Techniques

Generally the mouse has two buttons where one is the primary mouse button and the other is
secondary. In Windows, the left mouse button is set as the primary button by default. The primary
button is used to perform the majority of the tasks whereas the secondary button is used to display
shortcut menu for the current window application.

1.5.3 Using Menus

Each application window, and other windows as well, have menu names located on the menu bar.
Commands, the actions that can be carried out in Windows, are listed on menus. Along with the menus
on the menu bar, each window also has a control menu.

1.6 WORKING WITH A DIALOGUE BOX

A dialogue box supplies additional information to a command, required for the completion of a task.
An ellipsis(...) after a menu command indicates that a dialogue box will appear on choosing this
command. Most dialogue boxes contain options that can be selected. After specifying the options,
one can choose a command button to carry out the command. Some other dialogue boxes may
display information, warnings, or error messages. Moving a dialogue box is just like moving a
window - by dragging the title bar or using the Move command on the Control menu.

1.6.1 Types of Options

One may need to select one or more options within a dialogue box and for this one need to
move from one option to another. To move within a dialogue box :

One can either click that option or press TAB to move to the next option and SHIFT+TAB to the
previous option.

The currently selected option is marked by the selection cursor, which appears as a dotted
rectangle, a highlight or both. The types of dialogue box options are as follows :
 Figure 11: Dialog box options

Command Button A Command Button initiates an immediate action, such as carrying out
or canceling a command. The OK, Cancel and Help buttons are common command buttons. They
are often located along the bottom or on the right side of the dialogue box. Some command
buttons are marked with greater-than signs (>>) which expands the active dialogue box. A
command button containing an ellipsis (...) opens another dialogue box.
Text Box A list box displays a list of choices. If there are more choices than can fit in the box,
scroll bars are provided to move quickly through the list. Usually only one item can be selected
in a list box; and in some cases, more than one item can also be selected.

Drop-Down List Box

A drop-down list box appears initially as a rectangular box containing the current selection. On
selecting the down arrow in the square box at the right, a list of available choices appears. If
there are more choices than can fit in the box, scroll bars are provided.
Option Buttons
Option buttons represent a group of mutually exclusive options. Only one option can be
selected at a time. The selected option button contains a black dot. If one option is already
selected, then the current option replaces it.
Check Box
A check box presents non-exclusive options, that is, more than one option can be selected at a
time. Selected 0063heck boxes contain an X.
 1.7 STARTING WINDOWS
This screen is called the desktop (metaphor), the settings of which can be changed as the user likes.

Figure 13: Start Window

To adjust settings such as desktop colour and background, use the right mouse button to click
anywhere on the desktop, and then click Properties.

The icons on the left side represent some of the accessories and tools. They provide the short and
easier access to the features that we will discuss in the later sessions. The bar that is at the bottom
of the screen is called the taskbar.

1.7.1 Task Bar

The taskbar contains the Start button, which is used to quickly start a program or to find a file. It
is also the fastest way to get Help. By default, the taskbar and the Start menu are always visible
when Windows is running.
Also when you open a program, a document, or window, a button appears on the taskbar. You
can use this button to quickly switch between the windows you have opened.
To customize the taskbar, right-click on it, and click on Properties.

1.7.2 Start Menu

 Click on the Start button. The menu options (as shown in Figure) are popped-up above the
taskbar. From here you can start your adventure with Windows

When you click on the option that has a right pointed arrow, a cascading menu appears.
Depending on your computer and the options you have chosen, you may see additional
items in these cascading menus. An overview of each command is shown below :

1) Click the Start button, and then point to Settings.

2) Click Taskbar..., and then click the Start Menu Programs tab.
3) Click Add..., and then click Browse....
4) Locate the program you want to add, and then double-click it.
5) Click Next, and then double-click the menu on which you want the program to appear.
6) Type the name that you want to see on the menu, and then click Finish.
7) If Windows prompts you to choose an icon, click one and then click Finish.
1.7.3 Shortcut Menus

Use the right mouse button to click any item and see a shortcut menu. This menu contains
common commands that you can use on the item you clicked. For example, by clicking on
the blank area on the taskbar with your right mouse button, you can choose to arrange
windows and customize taskbar.
 To work with files and folders, instead of using the standard menus to find the command
you need, use the right mouse button to click a file or folder. The menu that appears shows
the most frequently used commands for that file or folder.

1.7.4 Setup Screen Saver

The screen saver is set to save the wear and tear of the screen. The screen saver starts if your
computer is idle for the number of minutes specified in the Wait box. To clear the screen saver after
it has started, move your mouse or press any key.

To set-up the screen saver, follow the steps given below

1) Right-click on the desktop and select Properties OR Choose Settings option from the Start menu,
then select Control Panel and choose Display from the displayed items.
2) Click on the Screen Saver tab.
3) Click on the down-arrow under Screen Saver field and browse through the different screen
savers.
4) Choose the one that you like.
5) Click on Settings... button to customize the way it works.
6) You can set the password by choosing the option Password Protected.
7) Set Password... button is activated. Click on it and specify the password.
8) Preview the screen saver and set the timings, so that after the specified time, the screen saver
will be activated
9) Press OK.

Shut-Down Windows
To shut down your computer, click the Start button, click Shut Down, and then click Shut Down The
Computer. Do not turn off your computer until the "You can now safely turn off your computer"
message appears\