Chapter 17: Java Swing GUI Part 2

CSC1016S: Java & OOP

Lecturer: Francois Meyer

October 18, 2023
Computer Science Department
University of Cape Town

Absolute JAVA, 6th Edition

Based on slides by Rose Williams, Kenrick Mock
GUI

• More GUI components - menus, text fields

• How to arrange GUI components
• How to know which button is clicked - action commands

1
Event-driven programming

1. GUI components (e.g. buttons) fire events.

2. A listener performs some action in response to an event.
3. This action is defined in an event handler.

2
Swing

3
Swing

4
GUI Components
Swing

A text field is an object of the class JTextField. It allows the user

to enter a single line of text.

5
Swing

A text field is an object of the class JTextField. It allows the user

to enter a single line of text.

JTextField in = new JTextField("Enter name", 30);

String inputString = in.getText();
in.setText("");

5
Swing

A text field is an object of the class JTextField. It allows the user

to enter a single line of text.

JTextField in = new JTextField("Enter name", 30);

String inputString = in.getText();
in.setText("");

A text area is an object of the class JTextArea. It is the same as a

text field, except that it allows multiple lines

5
Swing

A menu is an object of the class JMenu. A choice on a menu is

called a menu item, and is an object of the class JMenuItem.

6
Swing

A menu is an object of the class JMenu. A choice on a menu is

called a menu item, and is an object of the class JMenuItem.

JMenu sortMenu = new JMenu("Sort by");

6
Swing

A menu is an object of the class JMenu. A choice on a menu is

called a menu item, and is an object of the class JMenuItem.

JMenu sortMenu = new JMenu("Sort by");

JMenuItem recent = new JMenuItem("Recent");

recent.addActionListener(new ItemListener());
sortMenu.add(recent);

6
Swing

A menu is an object of the class JMenu. A choice on a menu is

called a menu item, and is an object of the class JMenuItem.

JMenu sortMenu = new JMenu("Sort by");

JMenuItem recent = new JMenuItem("Recent");

recent.addActionListener(new ItemListener());
sortMenu.add(recent);

JMenuItem likes = new JMenuItem("Most likes");

likes.addActionListener(new ItemListener());
sortMenu.add(likes);

6
Swing

A menu bar is a container for menus, typically placed near the top
of a windowing interface.

7
Swing

A menu bar is a container for menus, typically placed near the top
of a windowing interface.

JMenuBar bar = new JMenuBar();

bar.add(sortMenu);

7
Swing

A menu bar is a container for menus, typically placed near the top
of a windowing interface.

JMenuBar bar = new JMenuBar();

bar.add(sortMenu);

7
Swing

Code demo.

8
Layout Managers
Swing

Containers vs Components

9
Swing

Containers vs Components

1. Any class that is a descendent class of the class Container is

considered to be a container class.
e.g. JFrame, JPanel

9
Swing

Containers vs Components

1. Any class that is a descendent class of the class Container is

considered to be a container class.
e.g. JFrame, JPanel

2. Any container object can have components added to it. Any

descendent class of the class JComponent is called a
component class.
e.g. JButton, JLabel, JTextField, JTextArea

9
Swing

Almost every GUI built using Swing container classes will be made
up of three kinds of objects:

10
Swing

Almost every GUI built using Swing container classes will be made
up of three kinds of objects:

1. The container itself, probably a panel or window-like object.

10
Swing

Almost every GUI built using Swing container classes will be made
up of three kinds of objects:

1. The container itself, probably a panel or window-like object.

2. The components added to the container such as labels,

buttons, and panels.

10
Swing

Almost every GUI built using Swing container classes will be made
up of three kinds of objects:

1. The container itself, probably a panel or window-like object.

2. The components added to the container such as labels,

buttons, and panels.

3. A layout manager to position the components inside the

container.

10
Layout Managers

• The add method adds components to a JFrame, but doesn’t

specify how they are arranged.

11
Layout Managers

• The add method adds components to a JFrame, but doesn’t

specify how they are arranged.

• To describe how multiple components are to be arranged, a

layout manager is used.

11
Layout Managers

• The add method adds components to a JFrame, but doesn’t

specify how they are arranged.

• To describe how multiple components are to be arranged, a

layout manager is used.

• There are a number of layout manager classes:

• BorderLayout (default)
• FlowLayout
• GridLayout

11
Layout Managers

• The add method adds components to a JFrame, but doesn’t

specify how they are arranged.

• To describe how multiple components are to be arranged, a

layout manager is used.

• There are a number of layout manager classes:

• BorderLayout (default)
• FlowLayout
• GridLayout

• To add a layout manager to a JFrame:

setLayout(new BorderLayout());

11
Layout Managers

A BorderLayout manager places the components that are added to a

JFrame object into 5 regions.

12
Layout Managers

13
Layout Managers

14
Swing

FlowLayout manager is the simplest layout manager.

15
Swing

FlowLayout manager is the simplest layout manager.

• It arranges components one after the other, going from left to

right, in the order in which they are added.

15
Swing

FlowLayout manager is the simplest layout manager.

• It arranges components one after the other, going from left to

right, in the order in which they are added.

15
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.
setLayout(new GridLayout(rows, columns));

16
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.
setLayout(new GridLayout(rows, columns));

• Each entry is the same size.

16
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.
setLayout(new GridLayout(rows, columns));

• Each entry is the same size.

• Each component is stretched so that it fills its grid position.

16
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.
setLayout(new GridLayout(rows, columns));

• Each entry is the same size.

• Each component is stretched so that it fills its grid position.
• Items are placed in the grid from left to right, top to bottom.

16
Swing

17
Swing

18
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.

19
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.

• setLayout(new GridLayout(rows, columns));

Creates a grid with specified number of rows and
as many columns as required.

19
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.

• setLayout(new GridLayout(rows, columns));

Creates a grid with specified number of rows and
as many columns as required.

• setLayout(new GridLayout(rows, 0));

Same!

19
Swing

GridLayout arranges components in a 2D grid with some number

of rows and columns.

• setLayout(new GridLayout(rows, columns));

Creates a grid with specified number of rows and
as many columns as required.

• setLayout(new GridLayout(rows, 0));

Same!

• setLayout(new GridLayout(0, columns));

Creates a grid with specified number of columns and as many
rows as required.

19
Swing

A GUI is often organized in a hierarchical fashion, with containers

called panels inside other containers.

20
Swing

A GUI is often organized in a hierarchical fashion, with containers

called panels inside other containers.

• A panel is an object of the JPanel class that is a simple

container.

20
Swing

A GUI is often organized in a hierarchical fashion, with containers

called panels inside other containers.

• A panel is an object of the JPanel class that is a simple

container.

• It subdivides a JFrame and groups smaller objects into a larger

components (e.g. buttons into a panel, panels into a JFrame).

20
Swing

A JFrame and each panel in it can use different layout managers.

=⇒ Enables almost any kind of overall layout to be used in a GUI.
(Panels within the JFrame, panels within those panels, etc.)

21
Swing

A JFrame and each panel in it can use different layout managers.

=⇒ Enables almost any kind of overall layout to be used in a GUI.
(Panels within the JFrame, panels within those panels, etc.)

21
Action Commands
Swing

When a user clicks a button or menu item, an event is fired that

normally goes to one or more action listeners.

22
Swing

When a user clicks a button or menu item, an event is fired that

normally goes to one or more action listeners.

• This action event includes a String instance variable called the

action command for the button or menu item.

22
Swing

When a user clicks a button or menu item, an event is fired that

normally goes to one or more action listeners.

• This action event includes a String instance variable called the

action command for the button or menu item.
• This string can be retrieved with e.getActionCommand().

22
Swing

JButton nextButton1 = new JButton("NEXT");

next1.setActionCommand("next1");
JButton nextButton2 = new JButton("NEXT");
next2.setActionCommand("next2");

23
Swing

JButton nextButton1 = new JButton("NEXT");

next1.setActionCommand("next1");
JButton nextButton2 = new JButton("NEXT");
next2.setActionCommand("next2");

The default value for the action command string is what’s written on
the button or the menu item.

23
Swing

JButton nextButton1 = new JButton("NEXT");

next1.setActionCommand("next1");
JButton nextButton2 = new JButton("NEXT");
next2.setActionCommand("next2");

The default value for the action command string is what’s written on
the button or the menu item.

The setActionCommand method can be used to change the action

command for a component (useful when multiple components have
the same default action command.

23
Swing

24
Swing

Code demo

• Action commands to identify buttons

• Everything in one class

25