Vietnam National University of HCMC

International University
School of Computer Science and Engineering

Graphic User Interface

(IT069IU)

Le Duy Tan, Ph.D.

📧 ldtan@hcmiu.edu.vn

🌐 leduytanit.com 1
Previously,
- Polymorphism
- Method overriding in Inheritance
- Zoo Example
- Abstraction
- Abstract Class
- Abstract Method
- Examples:
- Zoo Example
- Company Payroll Example
- Interface
- Interface in real life examples
- Upgrade Company Payroll with Invoices Example
- Abstract vs Interface vs Composition

2
Agenda
- Mid-term Exam
- Possible Topics
- Format
- GUI in Java
- Swing Components
- Swing vs JavaFX vs AWT
- JOption-Panel (DialogBox)
- Java 2D API
- Java Coordinate System
- Draw Lines
- Draw Rectangles and Ovals
- Draw Colors
- Draw Polygons and Polylines
- Text Fields, Buttons and Menu Nagivations.
- Event Handler (Mouse & Keyboard)
- Layout:
- BorderLayout Frame & GridLayoutFrame 3
Mid-term Example
- Time: 90 minutes
- Date: Check your EdusoftWeb
- Test Method: Offline, closed paper, and write on exam paper.
- Language: You must use Java!
- 3 Questions:
- Question 1: Theory questions
- Three sub questions:
- Explain keywords in Java.
- Explain the difference between two things.
- Your answers should be from two to four sentences.
- Question 2 & 3: Coding questions
- Question 2: Given an UML Class Diagram, main method and expected output,
you need to write classes to satisfy them.
- Question 3: Given a problem statement, you need to write classes and a test
class (with main method).

4
Question 2: Example of Coding Question

- Given an UML diagram, a main method

and expected output:
- Your Task: Write two or three classes.
5
Question 3: Example of Problem Statement
- You need to create a system to pay employees of a company.
- There are three types of employees:
- Developer
- Designer
- Manager
- Developer has a name and his salary depends on how many projects he
completed. And 30% of the project reward will go to him. A developer can take a
number of projects
- Designer has a name and her salary depends on how many projects she
completed. And 20% of the project reward will go to her salary. A designer can
take a number of projects.
- Manager has a name and his salary depends how many people he manage and
their performance. His salary will be equal to all people he manages + 50% of the
projects reward will go to him. A manager can manage a number of developers
and managers.
- A project can be a name, cost and reward.
- Your Task: Write classes for Employee, Developer, Designer, Manager and Project. 6
Question 3: Example of Testing Your Classes
- In the previous project, write a test classes to follow the scenario:
- Create 2 Developers Tom and Charles
- Create 1 Designer Chloe
- Create 1 Manager Jerry
- Create two projects Alpha and Beta. The reward for Alpha is $500
and reward for Beta is $200.
- Tom is responsible for Alpha, Charles is responsible for Beta
- Chloe is responsible for designing Beta
- Jerry manage Tom, Charles and Chloe
- Print out salary for each person above.
- Your Task: Write a testing class with main method to test those scenario.
7
 CLI vs GUI
Command Line Interface vs Graphical User Interface

8
Command Line Interface
- So far, every input and output of our Java programs is through
command window (terminal/cmd/bash).

9
Graphic User Interface
(GUI)

10
Graphic User Interface (GUI)
- A graphical user interface (GUI) presents a user-friendly mechanism
for interacting with an application.
- Pronounced “GOO-ee”
- Gives an application a distinctive “look” and “feel.”
- Consistent, intuitive user-interface components give users a sense of
familiarity
- Learn new applications more quickly and use them more productively.
- User interacts via the mouse, the keyboard or another form of input,
such as voice recognition.

11
 Sample GUI of Java’s Swing GUI APIs

12
https://mlapshin.com/index.php/projects/swingset3/
Overview of Swing Components

13
Java GUI library
- Java’s GUI library:
- Abstract Window Toolkit (AWT):
- Package java.awt
- Is the very foundation of swing, it performs well but is lacking in advanced components.
- The look of UI differs between platforms (MacOS, Windows,...).
- Swing technology:
- Mature and popular.
- Based on AWT packages.
- A wider range of UI components and a bigger library of GUI elements.
- Only for desktop applications.
- Lack consistency with MVC.
- JavaFX technology:
- New and modern.
- The latest flagship of Java/Oracle. promising to be the facto standard in developing rich
desktop or web applications.
- Less component as compared to Swing APIs.
- Easier to build Desktop, Website and Mobile applications.
- Easier to add animation and special effects.
- Rich new toolkit and expected to grow in the future.
- Friendly with MVC pattern.
14
 Displaying Text in a Dialog Box
- Dialog boxes are windows in which programs display important
messages to users.
- Class JOption-Pane provides prebuilt dialog boxes that enable programs
to display windows containing messages—such windows are called
message dialogs.

15
Dialog Box in action

The first argument refers to that window (known as

the parent window) and causes the dialog to
appear centered over the app’s window. If the first
argument
is null, the dialog box is displayed at the center of
your screen.
The second argument is the String to display in the 16
dialog box.
Entering Text in a Dialog

Method format works like method System.out.printf,

except that format returns the formatted String rather
than displaying it in a command window.

[Q&A] What happens if you

click Cancel?

17
Simple GUI-Based Input/Output with JOptionPane

PLAIN_MESSAGE is the type of message dialog to display

which does not display an icon to the left of the message. 18
JOptionPane static constants for message dialogs

19
Classes and interfaces Java’s original graphics
capabilities and Java 2D API.

20
 Java Coordinate System for Drawing
- You need to understand Java’s coordinate system for identifying points on the screen.
- The upper-left corner of a GUI component has the coordinates (0, 0).
- A coordinate pair is composed of an x-coordinate (the horizontal coordinate) and a y-
coordinate (the vertical coordinate).
- The x-coordinate is the horizontal location moving from left to right.
- The y-coordinate is the vertical location moving from top to bottom.
- The x-axis describes every horizontal coordinate, and the y-axis every vertical coordinate.
- Coordinates indicate where graphics should be displayed on a screen.
- Coordinate units are measured in pixels.

21
First Drawing Application

22
Method paintComponent
- Every JPanel, including our DrawPanel, has a paintComponent method which
the system automatically calls every time it needs to display the DrawPanel.
- Method paintComponent must be declared as shown in line 9—otherwise, the
system will not call it.
- This method is called when a JPanel is first displayed on the screen, when it’s
covered then uncovered by a window on the screen, and when the window in
which it appears is resized.
- Method paintComponent requires one argument, a Graphics object, that’s
provided by the system when it calls paintComponent.
- The first statement in every paintComponent method you create should
always be which ensures that the panel is properly rendered before we begin
drawing on it:
23
 Class JFrame
- You create a window with an object of class JFrame.
- JFrame method setDefaultCloseOperation with the argument
JFrame.EXIT_ON_CLOSE to indicate that the application should terminate
when the user closes the window.
- Class JFrame’s add method to attach the DrawPanel to the JFrame.
- Method setSize takes two parameters that represent the width and height
of the JFrame, respectively.
- Finally, displays the JFrame by calling its setVisible method with the
argument true.
- When the JFrame is displayed, the DrawPanel’s paintComponent method
is implicitly called, and the two lines are drawn.
- Try resizing the window to see that the lines always draw based on the
window’s current width and height. 24
Exercise with Draw Lines (Lab)

25
Drawing Rectangles and Ovals

26
Exercise to draw concentric circles (Lab)
The innermost circle should have a radius of 10 pixels, and each successive
circle should have a radius 10 pixels larger than the previous one.

27
Color in Computer

28
Color Control

29
Draw Colors

30
Colors and Filled Shapes

31
Drawing Lines, Rectangles and Ovals

32
Oval and Round Rectangles Explanation

33
A bulls-eye with two random colors (Lab)

34
Draw an abstract painting (Lab)

35
Drawing Arc

36
Arcs displayed with drawArc and fillArc

37
Drawing Arcs

38
Drawing Spiral Paintings (Lab)
Drawing a spiral using drawLine (left) and drawArc (right).

39
Objects with Graphics

40
Objects with Graphics

41
Drawing Polygons and Polylines

42
Drawing Polygons and Polylines

43
Java 2D API
- The Java 2D API provides advanced two-dimensional graphics capabilities for
programmers who require detailed and complex graphical manipulations
- The API includes features for processing line art, text and images in packages
java.awt, java.awt.image, java.awt.color, java.awt.font, java.awt.geom,
java.awt.print and java.awt.image.renderable.
- Graphics2D is an abstract subclass of class Graphics, so it has all the
graphics capabilities demonstrated earlier.
- To access Graphics2D capabilities, we must cast the Graphics reference (g)
passed to paintComponent into a Graphics2D reference with a statement
such as:

44
45
Creating Your Own Shapes with General Path

46
Ultimate Challenge - Captain America (Lab)

47
Displaying Text and Images Using Labels

48
JLabel displaying shape statistics (Lab)
Modify GUI and Graphics to include a JLabel as a status bar that displays counts
representing the number of each shape displayed. Class DrawPanel should
declare a method that returns a String containing the status text. In main, first
create the DrawPanel, then create the JLabel with the status text as an argument
to the JLabel’s constructor. Attach the JLabel to the SOUTH region of the JFrame

49
Displaying Text and Images in a Window

Positioning constants (static members of interface SwingConstants).

Text Fields and an Introduction to Event Handling with Nested Classes

51
52
Common GUI Event Types and Listener Interfaces

53
 How Event Handling Works

A new entry containing a reference to the TextFieldHandler object is placed in textField1’s

listenerList:
54
JButton

55
JButton Example

56
JCheckBox

57
JRadioButton

58
JComboBox

59
JList

60
Mouse Event Handling

61
62
63
JPanel Subclass for Drawing with the Mouse

64
Key Event Handling

65
BorderLayoutFrame & GridLayout Frame

66
JSlider

67
MenuFrame

68
PopupFrame

69
JTabbedPaneFrame

70
JTextArea

71
Recap
- Mid-term Exam
- Possible Topics
- Format
- GUI in Java
- Swing Components
- Swing vs JavaFX vs AWT
- JOption-Pane (DialogBox)
- Java 2D API
- Java Coordinate System
- Draw Lines
- Draw Rectangles and Ovals
- Draw Colors
- Draw Polygons and Polylines
- Text Fields, Buttons and Menu Nagivations.
- Event Handler (Mouse & Keyboard)
- Layout:
- BorderLayout Frame & GridLayoutFrame 72
Game Tutorials with Java Swing
- RPG Adventure: https://www.youtube.com/watch?v=om59cwR7psI&list=PL_QPQmz5C6WUF-
pOQDsbsKbaBZqXj4qSq&ab_channel=RyiSnow

- Jave 2D tile Game:

https://www.youtube.com/watch?v=4D3YIYPkit4&list=PL_QPQmz5C6WVtEOazEZ_0r9kewAqvUf2Z&ab_channel=Ryi
Snow

- Teris with Jave Swing:

https://www.youtube.com/watch?v=dgVh6S8X25k&list=PL8wKnrrMApCoP9xTwOmQRHsZ8_Kr9c_DY

- Chess with Java Swing:

https://www.youtube.com/watch?v=vO7wHV0HB8w&list=PLnEZvjtYfz6uvTjfNcklgDMnUZTKid6zx&ab_channel=Scre
enWorks

- Snake game:
https://www.youtube.com/watch?v=bI6e6qjJ8JQ&t=1967s&ab_channel=BroCode

- Tic Tac Toe:

https://www.youtube.com/watch?v=rA7tfvpkw0I&ab_channel=BroCode
73
Java Game Libraries
- LWJGL:
https://www.lwjgl.org/frameworks

- Jmonkeyengine:
https://jmonkeyengine.org/

- libGDX:
https://libgdx.com/

74
Other Popular Game Engine

- Unity3D:
- You need to learn C#.
- https://unity.com/madewith

- UnrealEngine:
- You need to learn C++.
- https://www.unrealengine.com/en-US/

75
Thank you for your listening!

“Motivation is what gets you started.

Habit is what keeps you going!”
Jim Ryun

76