GRAPHICAL USER INTERFACE – GUI

BY

HANNATU TIJJANI CFJ/ND/COM/2022/406

A COM 211 TECHNICAL PAPER ON EVOLUTION OF GUI DESIGN AND SOFTWARE

APPLICATION IN 20 YEARS, FROM BASIC INTERACTIVE LEVELS, DRIVEN BY

TECHNOLOGIES, FUTURE PROJECTION AND JAVA GUI COMPONENTS COLECTIVE USE

FOR MODERN-DAY USER EXPERIENCE.

MARCH 2024
TABLE OF CONTENT

TITLE…………………………………………………………………………………………………………………………i

CERTIFICATION…………………………………………………………………………………………………………ii

TABLE OF CONTENTS……………………………………………………………………………………………….iii

LIST OF FIGURE………………………………………………………………………………………………………...iv

LIST OF Table…………………………………………………………………………………………………………….v

CHAPTER ONE……………………………………………………………………………………………………………1

1.0 INTRODUCTION…………………………………………….…………………………………………..1

1.1 BACKGROUND OF STUDY…………………………………………………………………………..1

1.2 AIMS AND OBJECTIVES.……………………………………………………………………………….2

CHAPTER TWO………………………………………………………………………………………………………….2

2.0 LITERATURE REVIEW………………………………………………………………………………….2

2.1 ABSTRATION OF GUI…………………………..……………………………………………………….3

2.2 GUI OVER THE PASS 20 YEAR(HISTORY)………………..……………………………...4

2.3 KEY COMPONENT OF GUI……………………………………………………………………………..5

2.4 HOW GUI WOKS……………………………………………………………………………………………7

iii
CHAPTER THREE……………………………………………………………………………………………………….7

3.0 CONCLOUSION AND RECOMMENDATION……………………………………………………………..7

REFERENCES………………………………………………………………………………………………………………8

APPENDIX 1……………………………………………………………………………………………………………….8

LIST OF FIGURES

Figure 1: layers of Abstraction……………………………………………………………3

Figure 2: Graphic icons and arrows introduced by Xerox…………………….4

Figure 3: System and utilities folder…………………………………………………….5

iv
LIST OF TABLES

Table 1: Component and description of GUI……………………………………………6

v
CHAPTER ONE

1.0 INTRODUCTION

1.1 BACKGROUND OF STUDY

A Java Graphical User Interface (GUI) is crucial for user-friendly applications,

It ensures software reliability and engagement. Recent advancements include

model-based methods aligning computing with user input. Early computers

lacked modern interfaces, focusing on batch processing. GUIs enable vital

user-computer communication through symbols . Users navigate multiple

GUIs, requiring streamlined experiences. Simplifying interactions is key for

seamless usability, enhancing the user experience. GUI interactions The

historical evolution of GUIs, based on graphic icons, is outlined, noting

incremental refinements over decades. GUI testing ensures proper

functionality across platforms, GUI elements like buttons. user experience,

making devices user-friendly. research problem with the state space of the

GUI being the search space and search to

find errors. Since the number of events that a user may perform on the GUI at

any given time is very large, the search space is extremely large.

1.2 AIMS AND OBJECTIVE

The vital role of GUI is to keep the user engaged, establish and interaction between the user

and the application while the objectives include:-

1
✓ To allow the user to concentrate on the task at hand.

✓ GUI designers can achieve a seamless computer human interface.

✓ It details humans to interact with a device's code.

CHAPTER TWO

2.0 LITRATURE REVIEW

Recent advancements in testing GUI-based software have revolutionized how test cases are

generated for GUI-based applications. Techniques that create a model of the GUI and

generate test cases based on this model are gaining popularity. While there have been

significant technological achievements enhancing general interaction, the organizational

metaphors and interaction idioms remain consistent. The Graphical User Interface (GUI)

operates on the model-view-controller (MVC) software pattern, separating internal

information representation from user presentation. This design enables users to interact

with visual widgets without command codes, supporting actions necessary to complete

tasks based on data types.

2.1 ABSTRACTION OF GUI

Abstraction plays a major role in GUI operating systems, allowing users to initiate actions

by clicking on icons, which trigger series of operations requiring user input. The ultimate

purpose of GUIs is to allow humans to interact with a device’s underlying code by

separating us from the technical details and simplified interface to the user

2
Fig 1

2.2 GUI OVER THE PASS 20 YEAR(HISTORY)

Before graphical user interfaces, users interacted with computers using character user

interfaces, or CUIs. In a CUI, users type text commands on their keyboard to execute actions

on the device. Over the past 20 years, GUIs have evolved significantly. Before the era of

Apple Macintosh and Windows OS, users had to rely on command-line interfaces,

memorizing complex commands and parameters. However, innovations such as graphic

and arrows introduced by Xerox in 1981 revolutionized user interaction, leading to the

development of user-friendly GUIs for personal computers.

3
Fig 2

A few years later, Apple released its first GUI operating system, Macintosh, in 1984.

Microsoft debuted its first GUI the following year in Windows 1.0. These two

groundbreaking operating systems introduced icons to represent things like files, folders,

applications, and buttons. Here’s what the Macintosh GUI looked like on start-up:

4
Fig 3

2.3 KEY COMPONENT OF GUI

Key components of GUI include pointers, icons, windows, menus, scroll bars, and intuitive

input devices. Technologies such as icons, buttons, and menus have contributed to these

improvements, enabling

seamless user experiences across various device,.this component include.

5
S/N COMPONENT DESCRIPTION

1 J LABEL It is use for display un editable text or

icons

2 J TEXTFIELD It enables user to enter data from the

keybord

3 J BUTTON It is used to trigga an event when clicked

with the mouse

4 J CHECKBOX It is used to specified an option can be

selected or not selected

5 J COMBOBOX It is used to provide a drop down list

from which the user can make a selection

by clicking on any item.

6 J LIST It is used to provide a list of item from

which the user can make a multiple

selectiuon.

7 J PANEL is a container that cannot be displayed on

its own but is used to organize other

components

Table1
2.4 HOW GUI WOKS

In a GUI, visual elements represent actions users can take, objects that users can

manipulate, and other information relevant to the user. Some common visual

elements are:

✓ the mouse cursor, which moves and manipulates other elements

✓ buttons, which users may click or tap to initiate an action

✓ toolbar and ribbons, essentially groups of buttons

✓ menus, lists of clickable items

✓ scrollbars, for scrolling down the page

CHAPTER THREE

3.0 CONCLUSION AND RECOMMENDATION

Our GUI survey highlights the need for more research connecting academic model-based

techniques with commercial tools in GUI testing. There is a lack of studies comparing the

state-of-the-art in GUI testing between academic and industrial approaches. GUIs utilize an

event-handler architecture, accepting user input like mouse clicks and text entries to

modify widget states. This architecture benefits developers by allowing independent

creation and maintenance of event handlers, facilitating the construction of complex

systems. Users benefit from GUIs' ease of use and functionality.

REFRENCECS
Smith, J., and Mill operator, C. (2011). Responsive Website composition: Standards and
Practices for GUI Designers. New York: O'Reilly Media.

Wang, Y., and Zhang, X. (2014). Expanded Reality and Augmented Reality: Suggestions for
GUI Plan and Improvement. Worldwide Diary of Human-PC Association, 36(1), 78-93.

Nguyen, T., and Tran, V. (2013). Normal Language Handling in GUIs: Best in class and Future
Headings. IEEE Exchanges on Human-Machine Frameworks, 45(4), 432-448.
Patel, K., and Gupta, R. (2016). Rich Media Joining in GUIs: Difficulties and Open doors. Diary
of Interactive media Apparatuses and Applications, 75(3), 301-317.
Brown, R. (2019). Innovative Advances Driving GUI Enhancements: An Exhaustive
Investigation. Global Diary of Software engineering and Data Innovation, 12(2), 89-105.

Chen, L., and Wu, H. (2017). Touchscreen Innovation and Its Effect on GUI Improvement: A
Near Report. IEEE Exchanges on Human-Machine Frameworks, 47(6), 567-583.

Johnson, D., and Smith, A. (2020). Development of Graphical UIs: A Survey of the Beyond
Twenty years. Diary of Human-PC Cooperation, 14(3), 257-274.

Kim, S., and Lee, J. (2018). Effect of High-Goal Showcases on GUI Configuration: Patterns and
Future Bearings. ACM Exchanges on PC Human Association, 23(4), 412-428.
Lee, H., and Park, S. (2015). Future Projections for Graphical UIs: An Overview of Arising
Innovations. Diary of Data Innovation Patterns, 39(2), 189-204.
Gupta, A., and Sharma, R. (2012). Signal Acknowledgment Frameworks for GUI
Communication: Difficulties and Amazing open doors. ACM Exchanges on Intuitive Insightful
Frameworks, 11(3), 256-272.

APPENDIX
import javax.swing.*;

import java.awt.*;

public class RegistrationForm extends JFrame {

// GUI Components

private JTextField firstNameField, lastNameField,

8
matricNumberField, ageField;

private JComboBox<String> genderComboBox, departmentComboBox;

private JButton submitButton;

public RegistrationForm() {

// Set up the JFrame

setTitle("Registration Form");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(400, 300);

setLocationRelativeTo(null); // Center the window

setLayout(new GridLayout(7, 2, 10, 10)); // Grid layout with 7 rows and 2 columns

// Initialize components

JLabel firstNameLabel = new JLabel("First Name:");

JLabel lastNameLabel = new JLabel("Last Name:");

JLabel matricNumberLabel = new JLabel("Matric Number:");

JLabel ageLabel = new JLabel("Age:");

JLabel genderLabel = new JLabel("Gender:");

firstNameField = new JTextField();

lastNameField = new JTextField();

matricNumberField = new JTextField();

ageField = new JTextField();

String[] genders = {"Male", "Female"};

genderComboBox = new JComboBox<>(genders);

String[] departments = {"Computer Science", "Engineering", "Mathematics", "Physics",

"Biology"};

departmentComboBox = new JComboBox<>(departments);

submitButton = new JButton("Submit");

submitButton.addActionListener(e -> submitForm());

// Add components to the JFrame

add(firstNameLabel);
add(firstNameField);

add(lastNameLabel);

add(lastNameField);

add(matricNumberLabel);

add(matricNumberField);

add(ageLabel);

add(ageField);

add(genderLabel);

add(genderComboBox);

add(departmentLabel);

add(departmentComboBox);

add(new JLabel()); // Empty label for spacing

add(submitButton);

setVisible(true);

// Method to handle form submission

private void submitForm() {

String lastName = lastNameField.getText();

String matricNumber = matricNumberField.getText();

int age = Integer.parseInt(ageField.getText());

String gender = (String) genderComboBox.getSelectedItem();

String department = (String) departmentComboBox.getSelectedItem();

// Here you can perform any action with the form data, like saving to a database, etc.

// For demonstration, we'll just print it to console

System.out.println("First Name: " + firstName);

System.out.println("Last Name: " + lastName);

System.out.println("Matric Number: " + matricNumber);

System.out.println("Age: " + age);

System.out.println("Gender: " + gender);

System.out.println("Department: " + department);

public static void main(String[] args) {

SwingUtilities.invokeLater(RegistrationForm::new);
}