CHAPTER THREE

GRAPHICAL UI LAYOUT
After completing this chapter you will be able to…
 Define Graphical User Interface
 Identify Graphical User Interface Design Processes
 Identify Requirements
 Describe Abstract Window Toolkit (AWT) packages
 Explain what Defect logging and tracking system
 List various Defect tracking parameters
 Identify Defect tracking tools
 Graphical user interface
• A graphical user interface is a form of user interface that allows users
to interact with electronic devices through graphical icons and visual
indicators instead of text-based user interfaces, typed command labels,
or text navigation.
• It is a computer program that enables a person to communicate with a
computer through the use of symbols, visual metaphors, and pointing
devices.
• The actions in a GUI are usually performed through
direct manipulation of the graphical elements. Beyond computers,
GUIs are used in many handheld mobile devices such as MP3 players,
portable media players, gaming devices, smartphones and smaller
household, office and industrial controls.
3
 Processes
User interface design requires a good understanding of user needs. It mainly
focuses on the needs of the platform and its user expectations. There are
several phases and processes in the user interface design.
• Functionality requirements gathering – assembling a list of the
functionality required by the system to accomplish the goals of the
project and the potential needs of the users.
• User and task analysis – a form of field research, it's the analysis of the
potential users of the system by studying how they perform the tasks that
the design must support, and conducting interviews to elucidate their
goals. Typical questions involve:
 What would the user want the system to do?
4
Cont…
 How would the system fit in with the user's normal workflow or
daily activities?
 How technically savvy is the user and what similar systems does
the user already use?
 What interface look & feel styles appeal to the user?
• Information architecture - development of the process and/or information
flow of the system.
• Prototyping – development of wire-frames, either in the form of
paper prototypes or simple interactive screens. These prototypes are
stripped of all look & feel elements and most content in order to
concentrate on the interface.
5
Cont…
• Usability inspection – letting an evaluator inspect a user interface. Some
common usability inspection methods include cognitive walkthrough,
which focuses the simplicity to accomplish tasks with the system for new
users and it is a formal method for evaluating the UI without the user,
heuristic evaluation, in which a set of heuristics are used to identify
usability problems in the UI design, and pluralistic walkthrough, in which
a selected group of people step through a task scenario and discuss
usability issues.
• Usability Testing - testing of the prototypes on an actual user—often using
a technique called think aloud protocol where you ask the user to talk
about their thoughts during the experience.

6
Cont…
• Graphical User-interface design - actual look and feel the design of the
final graphical user interface (GUI).
• Software Maintenance - After the deployment of a new interface,
occasional maintenance may be required to fix software bugs, change
features, or completely upgrade the system. Once a decision is made to
upgrade the interface, the legacy system will undergo another version of
the design process, and will begin to repeat the stages of the interface life
cycle.

7
 Requirements
• The dynamic characteristics of a system are described in terms of the
dialogue requirements contained in seven principles of part 10 of the
ergonomics standard, the ISO 9241.
• This part of ISO 9241 presents a set of usability heuristics that applies to
the interaction of people and information systems (the heuristics are based
on an earlier German standard). The standard refers to this interaction as a
“dialogue” and describes seven “dialogue principles”.
The seven dialogue principles – the dialogue principles for user friendly
design described in a standard ISO 9241-110
They are…

8
Cont…
1. Suitability for the task (the dialogue should be suitable for the user’s
task and skill level); It describes how reasonable something is in order to
complete a specific task. Example : Tooth brush for sweep floor.
2. Self-descriptiveness (the dialogue should make it clear what the user
should do next); At any time, users are aware what is happening and how
to interact with the object or interface. Thereby, the ultimate goal is that
a product explains itself without the need of any instructions or written
hints for its users.
3. Controllability (the user should be able to control the pace and sequence
of the interaction); Users should always be in control of their interactions
with the system. They start, pause or cancel an action, according to their
individual preferences.
9
Cont…
4. Conformity with user expectations (it should be consistent); It describes
to which extent an interaction with a product reflects what the user
expected. If something does not happen in the way the user expected, the
user gets upset. In the worst case, the user will make errors that cannot
be undone.
5. Error tolerance (the dialogue should be forgiving); Error tolerance
means that a product reacts to user’s errors. If possible, the product
corrects occurring errors independently autonomously. If this is not
feasible, the product informs the user and allows easy error correction,
while supporting the user as far as possible.

10
Cont…
6. Suitability for individualisation (the dialogue should be able to be
customised to suit the user); Meaning that users can adapt the product to
their own needs. For example, a beginner has different expectations of a
product than an expert.
7. Suitability for learning (the dialogue should support learning).  When it
is necessary to learn how to use certain functions of a product, this
should be as easy as possible. Metaphors and help dialogues guide the
user, in order to reduce learning time. For example, the gesture to turn
the page on an e-book resembles the gesture to turn the page on a real
book. At best, users can guess this gesture because it is intuitive.
Besides, the gesture is easy to remember for users because it takes up on
their habits.
11
 Abstract Window Toolkit (AWT) Packages
awt package is the main package of the AWT, or Abstract Windowing
Toolkit. It contains classes for graphics, and also defines the basic graphical
user interface (GUI) framework for Java.
Java AWT (Abstract Window Toolkit) is an API to develop GUI or window-
based applications in java.
 the java.awt package contains the core AWT graphics classes:
• GUI Component classes, such as Button, TextField, and Label.
• GUI Container classes, such as Frame and Panel.
• Layout managers, such as FlowLayout, BorderLayout and
GridLayout.
• Custom graphics classes, such as Graphics, Color and Font.
12
Cont…
Containers and Components

There are two types of GUI elements:

1. Component (Widget, Control): Components are elementary GUI
entities, such as Button , Label , and TextField. They are also called
widgets, controls in other graphics systems.
2. Container: Containers, such as Frame and Panel, are used to
hold components in a specific layout (such as FlowLayout or
GridLayout). 13
Cont…
AWT Container Classes
Each GUI has a top level container. The commonly used top-layer containers
in AWT are Frame, Dialog, and Applet:

A Frame provides the "main window" for your GUI application. It has a title
bar (containing an icon, a title, minimize, maximize/restore-down and close
buttons), an optional menu bar, and the content display area.
14
Cont…
Secondary Containers: Panel and ScrollPane

Secondary containers are placed inside a top-level container or another

secondary container. AWT provides these secondary containers:
• Panel: a rectangular box used to layout a set of related GUI
components in pattern such as grid or flow.
• ScrollPane: provides automatic horizontal and/or vertical scrolling
for a single child component.

15
Cont…
Layout Managers and Panel
A container has a so-called layout manager to arrange its components. The
layout managers provide a level of abstraction to map your user interface on
all windowing systems, so that the layout can be platform-independent.
1. FlowLayout - the default layout. It layouts the components in a directional flow.
Constructors:
public FlowLayout();
public FlowLayout(int alignment);
public FlowLayout(int alignment, int hgap, int vgap);
// alignment: FlowLayout.LEFT (or LEADING), FlowLayout.RIGHT (or
TRAILING), or FlowLayout.CENTER
// hgap, vgap: horizontal/vertical gap between the components
// by default: hgap = 5, vgap = 5, alignment = FlowLayout.CENTER
16
Cont…
Layout Managers and Panel
In the java.awt.FlowLayout, components are arranged from left-to-right
inside the container in the order that they are added (via method
aContainer.add (aComponent)). When one row is filled, a new row will be
started. The actual appearance depends on the width of the display window.

17
Cont…
Layout Managers and Panel
2. GridLayout
The GridLayout is used to arrange the components in rectangular grid. One
component is displayed in each rectangle.
Constructors
public GridLayout();
public GridLayout(int rows, int columns);
public GridLayout(int rows, int columns, int hgap, int vgap);
// by default: rows = 1, cols = 1, hgap = 0, vgap = 0
In java.awt.GridLayout, components are arranged in a grid (matrix) of rows
and columns inside the Container. Components are added in a left-to-right,
top-to-bottom manner in the order they are added (via method
aContainer.add (aComponent)). 18
Cont…
Layout Managers and Panel
3. BorderLayout
Constructors
public BorderLayout();
public BorderLayout(int hgap, int vgap);
// by default hgap = 0, vgap = 0
In java.awt.BorderLayout, the container is divided into 5 zones: EAST,
WEST, SOUTH, NORTH, and CENTER. Components are added using
method aContainer.add (aComponent, zone), where zone is either
BorderLayout.NORTH (or PAGE_START), BorderLayout.SOUTH (or
PAGE_END), BorderLayout.WEST (or LINE_START), BorderLayout.EAST
(or LINE_END), or BorderLayout.CENTER.
19
Cont…
Layout Managers and Panel
4. BoxLayout
It has a single constructor:
public BoxLayout(Container target, int axis)
1.The first argument is the container
2.The second is the layout direction.
The BoxLayout class puts components in a single row or column. It respects
the components' requested maximum sizes and also lets you align
components.
The BoxLayout is used to arrange the components either vertically or
horizontally.

20
Cont…
Layout Managers and Panel
5. GridBagLayout
Constructor:
GridBagLayout (): It is used to create a grid bag layout manager.
public GridBagLayout()
GridBagLayout is a sophisticated, flexible
layout manager. It aligns components by
placing them within a grid of cells, allowing
components to span more than one cell.
The rows in the grid can have different heights,
and grid columns can have different widths.

21
Cont…
Layout Managers and Panel
6. GroupLayout
Constructors
Container pane = getContentPane();
GroupLayout gl = new GroupLayout (pane);
pane.setLayout (gl);
GroupLayout groups its components and places them in a Container
hierarchically. The grouping is done by instances of the Group class. Group is
an abstract class and two concrete classes, which implement this Group class,
are SequentialGroup and ParallelGroup.
SequentialGroup positions its child sequentially one after another where as
ParallelGroup aligns its child on top of each other.
22
Cont…
Layout Managers and Panel
6. GroupLayout

GroupLayout is a layout manager that was developed for use by GUI builder
tools, but it can also be used manually. GroupLayout works with the
horizontal and vertical layouts separately. The layout is defined for each
dimension independently.

23
Cont…
Layout Managers and Panel
7. SpringLayout
Constructors
public class SpringLayout extends Object implements LayoutManager2.
The SpringLayout positions the children of its associated container
according to a set of constraints.
SpringLayout is a flexible layout manager designed for use by GUI builders.
It lets you specify precise relationships between the edges of components
under its control. For example, you might define that the left edge of one
component is a certain distance (which can be dynamically calculated) from
the right edge of a second component. SpringLayout lays out the children of
its associated container according to a set of constraints.
24
Cont…
Layout Managers and Panel
8. CardLayout
The CardLayout class manages the components in such a manner that only
one component is visible at a time. It treats each component as a card that is
why it is known as CardLayout.
Constructors of CardLayout class
CardLayout (): creates a card layout with zero horizontal and vertical gap.
CardLayout(int hgap, int vgap): creates a card layout with the given
horizontal and vertical gap.

25
 Defect Logging and Tracking System
Defect logging, a process of finding defects in the application under test or
product by testing or recording feedback from customers and making new
versions of the product that fix the defects or the clients feedback.
Defect logging/tracking of software testing is intended to check bugs/defects
in a software application
What is Bug?
A bug is the consequence/outcome of a coding fault
What is Defect?
A defect is a variation or deviation from the original business requirements
A bug tracking system or defect tracking system is a software application
that keeps track of reported software bugs in software development projects.
It may be regarded as a type of issue tracking system.
26
Cont…
Few guidelines that govern the process of an efficient defect tracking
procedure are as follows: Implementation of the following fundamentals
provides a solid foundation for success:
• Information Capture - This is to determine the minimum amount of
information required to begin with. To detect a bug one should be aware
of descriptions, products, and screen shots.
• Reproduction - It is a little difficult and time consuming task to
reproduce a defect. Often it becomes necessary to reproduce some
previous bugs to analyze the pattern of defect occurrence.
• Prioritize and Schedule - Once a defect is detected, according to its
severity and degree of risk involved, it is prioritized and scheduled to be
fixed.
27
Cont…
• Communication - Frequent communication must exist for effective and
constructive effort. Details regarding who is responsible for creating and
who is responsible for fixing the bug, must be identified.
• Environment - To identify the possibility of defect occurrence, the testers
must wisely try hardware and software combinations intended for that
product to ensure effective bug analysis.

28
 Best Practices
1. It is recommended to follow a unified approach. By that we mean,
developers and testers must collaboratively work towards defect tracking
mechanism, so that no ambiguity in the process occurs. All those who are
using the same defect-tracking tool within the organization with an aim to
track defect, must give their feedback on the same.
2. Users of the defect-tracking tool must be at ease with the system. That
is, a system must be easy to understand and implement without much
complications in the features.
3. A defect should be clearly defined, that is, the defects logged are easily
comprehensible. A defect report should therefore contain the following
fields - title, summary, and system configuration, steps to reproduce the
defect, expected results, and brief notes having content about essentials.
29
Cont…
4. Avoid defect duplication as much as possible. To reduce the chances of
defect duplication, users should query the database before submitting the
defect. This shall ensure whether the defect already exists in the database
or not.
5. Match the team's workflow. When a defect is reported, it is verified
whether the defect is actually a defect. Allocate resources for fixing the
defects, time required by the development and QA teams, cost to be
incurred in the process. Finally release the fixed defect. Tracking all these
activities are important in effectively meeting defect management.

30
Cont…
6. Integrate with change management. There is a feature in defect tracking
tool that lets us integrate tasks at the developer's end with those that are
being done on the defect tracking side. Linking of changes in code to
defects will provide a better description of the change, provide new
approach to release management, simplify QA tasks, provide better
accountability, and therefore provide better overall project management.
7. It is of course the most important factor to involve customers or end
users in beta testing of a software. This enhances the chances of defect
correction and allows QA team to see defect aspects in a broader
spectrum.

31
 Defect Tracking Parameters
Defects are tracked based on various parameters such as:
1. Defect Id - Lists each defect uniquely
2. Priority - Assigning priority to a defect on the basis of the degree of risk
involved
3. Severity - Determines to what extent the defect can affect the system
4. Created By - The name of the person who has detected the defect
5. Created Date - The date on which the defect was captured
6. Assigned to - The person to whom the defect is reported for resolving it
7. Resolved Date - The date on which the defect is resolved
8. Resolved By - The team/person who resolved the defect
9. Status - Defect fixed or postponed (based on the severity of the defect)
32
 Best Bug/Defect Tracking Tools
Backlog, AdminiTrack, AsiTrack,
Defect Tracker, Dragonfly,
Defectr, AceProject, Bug/Defect
Tracking Expert, Bugvisor, Bugzero,Bugstation. etc.

33
 EN
34