OUR LADY OF FATIMA UNIVERSITY

COLLEGE OF COMPUTER STUDIES

OOPR212
OBJECT-ORIENTED
PROGRAMMING II
MODULE 1
GUI BASICS
Module Objectives:

❑ Explore the creation of graphical user

interfaces (GUIs).
❑ Utilize the use of JOptionPane Class for
GUI Input in Java Programming.
TOPICS:

❑ Introduction
❑ Graphical Input and Output with Option
Panes
❑ Using Input Dialog Boxes
❑ Using Confirm Dialog Boxes
Java Quick
Start Review
7

Welcome to Apache
NetBeans IDE!
Let’s start with the first set of slides

Reference: https://netbeans.apache.org/kb/docs/java/index.html
8

Setting Up the Project

Take the steps below to set up a new Java project.

1. In the IDE, choose File > New Project

or click the "New Project" button in the
toolbar.
2. In the New Project wizard, select Java
Application, as shown in the figure
below. Then click Next.
10

Creating a Java Source File

Right-click the package name and choose New |
Java Class
11

You should see the following components:

Projects window: Source Editor: Navigator:

Top left, contains a Central area, Lower left, useful
tree view of the contains files, for quickly
components of where most of your navigating between
the project, work will be done, elements within the
including source currently with a selected class.
files, libraries that Java source file
your code called Main open.
depends on, and
so on.
12

Adding Code to the Java Source File

 A skeleton main class has been created for you. Let’s add
13

some basic content to produce a 'hello world' message.

1. Between the braces, type psvm and press Tab.

You should now see public static void main statement.

2. Within the public static void main statement,

type sout and press Tab.
You should now see a System.out.println statement.

Within the quotation marks, type Hello 2022!.

14

Running the Application

Make sure to save the Java source file, right-click the
project and choose Run or choose Run Project under
the Run menu. Click Select Main Class.
“ 😉
Congratulations!
HELLO SECOND SEMESTER.
Week 2: Laboratory Exercise 1
30 POINTS
17

Week 2: Laboratory Exercise 1

Overview
Project Name:
Printing University Vision & Mission
OLFUVM
Create a Java program
that displays the Class name:
VISION and MISSION lastname_firstname_
of the UNIVERSITY. W2L1
Introduction to
GUI Building
19

A picture is worth a thousand words

What is the
importance of
having a Graphical
User Interface?
20

GUI

❑GUI means Graphical User Interface.

❑GUI is a Graphical Interface which is a visual
representation of communication presented to
the user for easy interaction with the machine.
❑It is the common user Interface that includes
Graphical representation like buttons and icons
and communication can be performed by
interacting with these icons rather than the usual
text-based or command-based communication.
Reference: https://www.educba.com/what-is-gui/
21

GUI

❑program interface that takes advantage of the

computer’s graphics capabilities to make the
program easier to use
❑designed in 1970 by Xerox Corporation’s Palo
Alto Research Center
❑Basic Components:
❑Pointer
❑Pointing device
❑Icons
❑Desktop
❑Windows
❑Menu
Reference: https://www.educba.com/what-is-gui/
22

JAVA GUI

❑JAVA provides a rich set of libraries to create

Graphical User Interface in a platform
independent way.
▸ About the JFC and Swing
▪ JFC is short for Java Foundation Classes, which
encompass a group of features for building graphical
user interfaces (GUIs) and adding rich graphics
functionality and interactivity to Java applications.

Reference: https://docs.oracle.com/javase/tutorial/uiswing/start/about.html
23

JAVA GUI

❑ In Java, GUI-based programs are

implemented by using the classes from the
standard
➢ javax.swing (Swing classes) and
➢ java.awt (AWT classes) packages.
❑All GUI classes are based on the
fundamental classes in the Application
Windowing Toolkit or AWT.
24

JFC FEATURES
Feature Description
Includes everything from buttons to split panes to tables.
Swing GUI
Many components are capable of sorting, printing, and drag
Components
and drop, to name a few of the supported features.
The look and feel of Swing applications is pluggable, allowing a choice of look and feel. For example, the same
Pluggable Look-and-Feel program can use either the Java or the Windows look and feel. Additionally, the Java platform supports the GTK+
Support look and feel, which makes hundreds of existing look and feels available to Swing programs. Many more look-
and-feel packages are available from various sources.

Enables assistive technologies, such as screen readers and Braille displays, to get information from the user
Accessibility API
interface.
Enables developers to easily incorporate high-quality 2D graphics, text, and images in applications and applets.
Java 2D API
Java 2D includes extensive APIs for generating and sending high-quality output to printing devices.

Allows developers to build applications that can interact with users worldwide in their own languages and cultural
Internationalization conventions. With the input method framework developers can build applications that accept text in languages
that use thousands of different characters, such as Japanese, Chinese, or Korean.

Reference: https://docs.oracle.com/javase/tutorial/uiswing/start/about.html
Java AWT
26

Java AWT

AWT Hierarchy Java’s platform-independent windowing,

graphics, and user-interface widget toolkit
part of the Java Foundation Classes (JFC)
– the standard API Application Program
Interface) for providing graphical user
interfaces for Java programs contains the
fundamental classes used for
constructing GUIs.
27

AWT Components & Containers

Java SWING
29

Java Swing

▸ Graphical user interface ▸ Supports pluggable look and

toolkit in Java, which is one feel – not by using the native
part of the Java Foundation platform's facilities, but by
Classes (JFC) roughly emulating them
▸ Includes graphical user ▸ Classes are often described
interface (GUI) widgets such as lightweight because they
as text boxes, buttons, split- do not require allocation of
panes, and tables native resources in the
▸ Runs the same on all operating system’s window
platforms toolkit
30

Java Swing

▸ UI elements such as dialog You insert the import statement

boxes and buttons; you
can usually recognize their import javax.swing.*;
names because they begin
with J at the beginning of your Java
▸ Each Swing component is program files so you can take
a descendant of a advantage of the Swing UI
components and their methods
JComponent, which in turn
inherits from the
java.awt.Container class
31

Hierarchy of Java Swing classes

Reference:https://www.javatpoint.com/java-swing
Graphical Input
and Output with
Option Panes
33

JOptionPane class

▸ The JOptionPane class is used to provide standard

dialog boxes such as
▸ message dialog box, confirm dialog box and
input dialog box.
▸ These dialog boxes are used to display information
or get input from the user. The JOptionPane class
inherits JComponent class.
 There are four commonly used static methods
34

for JOPtionPane dialogs:

Method Name Description

Asks a confirming question, like yes/no/cancel.
showConfirmDialog • Allows for various combinations of OK, YES, NO, and
CANCEL buttons
Prompt for some input.
▪ Allows for the user to enter arbitrary information either in a
showInputDialog
text field or with a combo-box style list of values.
▪ It provides only OK and CANCEL buttons.
Tell the user about something that has happened.
showMessageDialog • Allows for only for a message and an OK button
The Grand Unification of the above three.
• Allows you to display buttons containing the text of your
showOptionDialog choice.
35

Using the import Statement

import javax.swing.JOptionPane;
The JOptionPane class is not automatically available to your Java programs.
This statement tells the compiler where to find the JOptionPane class.
36

showMessageDialog()

EXAMPLE 1
Place your screenshot here Dialog displaying "Hello World!",
with OK button, standard "info"
icon, and title "Message".

JOptionPane.showMessageDialog(null, "Hello!");
37

showMessageDialog()

EXAMPLE 2
Dialog displaying "Hello!", with
OK button, no standard icon,
and title “Sample ONLY".

int messageType = JOptionPane.PLAIN_MESSAGE;

JOptionPane.showMessageDialog(null, "Hello!", “Sample ONLY",
messageType);
38

Message Types

messageType
Defines the style of the message. The Look and Feel manager may lay
out the dialog differently depending on this value, and will often provide
a default icon. The possible values are:
ERROR_MESSAGE
INFORMATION_MESSAGE
WARNING_MESSAGE
QUESTION_MESSAGE
PLAIN_MESSAGE
39

showInputDialog()

EXAMPLE 3
Dialog with empty text field,
"Enter value:" prompt string,
plus OK and CANCEL
Place your screenshot here
buttons.

String res = JOptionPane.showInputDialog ("Enter value:");

JOptionPane.showMessageDialog(null, "Hello " + res);
40

showconfirmDialog()

EXAMPLE 4
Dialog displaying "Hello!” with
YES+NO+CANCEL buttons,
standard "question mark" icon,
and title "Select an Option“

int res = JOptionPane.showConfirmDialog(null, "Hello!");.

41

Option Types

optionType
Defines the set of option buttons that appear at the
bottom of the dialog box:
DEFAULT_OPTION
YES_NO_OPTION
YES_NO_CANCEL_OPTION
OK_CANCEL_OPTION
Week 2: Laboratory Exercise 2
30 POINTS
Week 2: Laboratory Exercise 2

Overview Project Name: Week2

JOptionPane Class Class name:lastname_firstname_W2L2

Create a java program

that will prompt the
user to enter his/her
name then it will
display the message
that will welcome the
user.
THANKS! 😉
Any questions?
Credits

Special thanks to all the people who made and

released these awesome resources for free:

▸ Presentation template by SlidesCarnival

▸ Photographs by Startupstockphotos
Presentation design

This presentation uses the following typographies and colors:

▸ Titles: Dosis
▸ Body copy: Roboto
You can download the fonts on these pages:
https://www.fontsquirrel.com/fonts/dosis
https://material.google.com/resources/roboto-noto-fonts.html

▸ Orange #ff8700
You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to
create new slides or download the fonts to edit the presentation in PowerPoint®