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
