1. Creating Graphical User Interfaces
Dr. Mark L. Hornick

2. Placing GUI components on a JFrame
CS-1020
11/17/2018
Placing GUI components on a JFrame
There are two ways to put GUI components on the content pane of a JFrame:
Absolute positioning
You explicitly specify the position and size of GUI objects within the content pane
btnQuit.setBounds( 10, 125, 80, 30 );
Use a Layout Manager
A class that controls automatic placement of components
The content pane of a frame is where we can place GUI components. Among the approaches available to us to place components, we will study the easier one here. The easier absolute positioning is not a recommended approach for practical applications, but our objective here is to learn the basic handling of events and placement of GUI objects, we will use the easier approach. Chapter 12 of the textbook discusses different layout managers.
SE-1020
Dr. Mark L. Hornick
Dr. Mark L. Hornick

3. Layout Managers automatically determine how the GUI components appear within the container
Many different layout managers exist; some are:
FlowLayout
BorderLayout
GridLayout
To use, set the layout manager of a JFrame’s Container to the type of layout manager you want to use:
FlowLayout fl = new FlowLayout(FlowLayout.CENTER); contentPane.setLayout(fl);
SE-1020
Dr. Mark L. Hornick

4. Using FlowLayout
In using this layout, GUI components are placed in left-to-right order.
When the component does not fit on the same line, left-to-right placement continues on the next line.
As a default, components on each line are centered.
SE-1020
Dr. Mark L. Hornick

5. FlowLayout behavior when the frame containing the components is resized
SE-1020
Dr. Mark L. Hornick

6. BorderLayout
This layout manager divides the container into five regions: center, north, south, east, and west.
Not all regions have to be occupied.
SE-1020
Dr. Mark L. Hornick

7. BorderLayout resizing
CS-1020
11/17/2018
BorderLayout resizing
The north and south regions expand or shrink in width only
The east and west regions expand or shrink in height only
The center region expands or shrinks on both height and width.
contentPane.setLayout(new BorderLayout());
contentPane.add(button1, BorderLayout.NORTH);
contentPane.add(button2, BorderLayout.SOUTH);
contentPane.add(button3, BorderLayout.EAST);
contentPane.add(button4, BorderLayout.WEST);
contentPane.add(button5, BorderLayout.CENTER);
SE-1020
Dr. Mark L. Hornick
Dr. Mark L. Hornick

8. GridLayout Places GUI components on equal-size N by M grids.
Components are placed in top-to-bottom, left-to-right order.
Number of rows and columns remains the same after the frame is resized, but the width and height of each region will change.
SE-1020
Dr. Mark L. Hornick

9. GridLayout resizing
SE-1020
Dr. Mark L. Hornick

10. Complex layouts
For sophisticated GUI’s, it can be difficult to use a single layout manager to get the look you are after.
Another approach is to use panels
Multiple panels can be placed in a content pane
The class that implements a panel is JPanel
Panel 1
Panel 3
Panel 3
SE-1020
Dr. Mark L. Hornick

11. Using Panels Panels can be placed on a JFrame
using absolute positioning
using a layout manager
Each panel can employ it’s own layout manager
or not
UI components are added to the panels, rather than the JFrame
But you can still add components to the JFrame as well
Border Layout panel
Absolute positioning panel
Flow Layout panel
SE-1020
Dr. Mark L. Hornick

12. Nested Layouts A panel can be placed inside another panel
This is called nesting panels
Nesting can be done to any level
Here, the East region of the outer panel contains a border layout
SE-1020
Dr. Mark L. Hornick

13. Another nested panel example
Here, the Center region of the outer panel contains a border layout
SE-1020
Dr. Mark L. Hornick

14. North
Center
South
SE-1020
Dr. Mark L. Hornick

15. North
Center
South
SE-1020
Dr. Mark L. Hornick