Lecture 2 – Arranging Components on a User Interface

Laying Out an Interface

A layout manager determines how components will be arranged when they are added to a container.

Java includes a bunch of general-purpose layout managers: BorderLayout, BoxLayout, FlowLayout, and GridLayout. To create a layout
manager for a container, first call its constructor to create an instance of the class, as in this example:

FlowLayout flo = new FlowLayout();

After you create a layout manager, you make it the layout manager for a container by using the container’s setLayout() method. The layout
manager must be established before any components are added to the container. If no layout manager is specified, its default layout will be used—
FlowLayout for panels and BorderLayout for frames.

The following statements represent the starting point for a frame that uses a layout manager to control the arrangement of all the
components that will be added to the frame:

import javax.swing.*;
import java.awt.*;
public class Starter extends JFrame {
public Starter() {
FlowLayout lm = new FlowLayout();
setLayout(lm);
// add components here
}
}

After the layout manager is set, you can start adding components to the container that it manages. For some of the layout managers, such
as FlowLayout, the order in which components are added is significant.

Flow Layout

The FlowLayout class in the java.awt package is the simplest layout manager. It lays out components in rows in a manner similar to the
way words are laid out on a page— from left to right until there’s no more room at the right edge and then on to the leftmost point on the next row.

By default, the components on each row will be centered when you use the FlowLayout () constructor with no arguments. If you want the
components to be aligned along the left or right edge of the container, the FlowLayout.LEFT or FlowLayout.RIGHT class variable can be used as the
constructor’s only argument, as in the following statement:

FlowLayout righty = new FlowLayout(FlowLayout.RIGHT);

The FlowLayout.CENTER class variable is used to specify a centered alignment for components.

The application in Listing 2.1 displays six buttons arranged by the flow layout manager. Because the FlowLayout.LEFT class variable was
used in the FlowLayout() constructor, the components are lined up along the left side of the application window.

LISTING 2.1 The Full Text of Alphabet.java

1:
2: import java.awt.*;
3: import javax.swing.*;
4:
5: public class Alphabet extends JFrame {
6: JButton a = new JButton(“Alibi”);
7: JButton b = new JButton(“Burglar”);
8: JButton c = new JButton(“Corpse”);
9: JButton d = new JButton(“Deadbeat”);
10: JButton e = new JButton(“Evidence”);
11: JButton f = new JButton(“Fugitive”);
12:
1
Lecture 2 – Arranging Components on a User Interface

13: public Alphabet() {

14: super(“Alphabet”);
15: setSize(360, 120);
16: setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
17: FlowLayout lm = new FlowLayout(FlowLayout.LEFT);
18: setLayout(lm);
19: add(a);
20: add(b);
21: add(c);
22: add(d);
23: add(e);
24: add(f);
25: setVisible(true);
26: }
27:

28: public static void main(String[] arguments) {

29: Alphabet frame = new Alphabet();
30: }
31: }

Figure 2.1 shows the application running.

FIGURE 2.1 Six buttons arranged in flow layout.

In the Alphabet application, the flow layout manager uses the default gap of five pixels between each component on a row and a gap of
five pixels between each row. You can change the horizontal and vertical gap between components with some extra arguments to the FlowLayout()
constructor.

The FlowLayout(int, int, int) constructor takes the following three arguments, in order:

 The alignment, which must be one of three class variables of FlowLayout: CENTER, LEFT, or RIGHT
 The horizontal gap between components, in pixels
 The vertical gap, in pixels

The following constructor creates a flow layout manager with centered components, a horizontal gap of 30 pixels, and a vertical gap of 10:

FlowLayout flo = new FlowLayout(FlowLayout.CENTER, 30, 10);

Box Layout

The next layout manager can be used to stack components from top to bottom or from left to right. Box layout improves on flow layout by
making sure that components always line up vertically or horizontally—regardless of how their container is resized.

A box layout manager must be created with two arguments to its constructor: the container it will manage and a class variable that sets up
vertical or horizontal alignment.

The alignment, specified with class variables of the BoxLayout class, can be X_AXIS for left-to-right horizontal alignment and Y_AXIS for
top-to-bottom vertical alignment.
2
Lecture 2 – Arranging Components on a User Interface

The following code sets up a panel to use vertical box layout:

JPanel optionPane = new JPanel();

BoxLayout box = new BoxLayout(optionPane,BoxLayout.Y_AXIS);

Components added to the container will line up on the specified axis and be displayed at their preferred sizes.

The Stacker application in Listing 2.2 contains a panel of buttons arranged with box layout.

LISTING 2.2 The Full Text of Stacker.java

1: import java.awt.*;
2: import javax.swing.*;
3:
4: public class Stacker extends JFrame {
5: public Stacker() {
6: super(“Stacker”);
7: setSize(430, 150);
8: setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
9: // create top panel
10: JPanel commandPane = new JPanel();
11: BoxLayout horizontal = new BoxLayout(commandPane, BoxLayout.X_AXIS);
12: commandPane.setLayout(horizontal);
13: JButton subscribe = new JButton(“Subscribe”);
14:
15: JButton unsubscribe = new JButton(“Unsubscribe”);
16: JButton refresh = new JButton(“Refresh”);
17: JButton save = new JButton(“Save”);
18: commandPane.add(subscribe);
19: commandPane.add(unsubscribe);
20: commandPane.add(refresh);
21: commandPane.add(save);
22: // create bottom panel
23: JPanel textPane = new JPanel();
24: JTextArea text = new JTextArea(4, 70);
25: JScrollPane scrollPane = new JScrollPane(text);
26: // put them together
27: FlowLayout flow = new FlowLayout();
28: textPane.setLayout(flow);
29: textPane.add(scrollPane);
30: add(commandPane);
31: add(textPanePane);
32: setVisible(true);
33: }
34:
35: public static void main(String[] arguments) {
36: Stacker st = new Stacker();
37: }
38: }

When the class is compiled and run, the output should resemble Figure 2.2.

3
Lecture 2 – Arranging Components on a User Interface

FIGURE 2.2 A user interface with buttons arranged with the box layout manager.

The panel of buttons along the top edge of the interface is stacked horizontally. If the second argument to the constructor in lines 11–12
was BoxLayout.Y_AXIS, the buttons would be arranged vertically instead.

Grid Layout

The grid layout manager arranges components into a grid of rows and columns. Components are added first to the top row of the grid,
beginning with the leftmost grid cell and continuing to the right. When all the cells in the top row are full, the next component is added to the leftmost
cell in the second row of the grid—if there is a second row—and so on.

Grid layout managers are created with the GridLayout class, which belongs to the java.awt package. Two arguments are sent to the
GridLayout constructor—the number of rows in the grid and the number of columns. The following statement creates a grid layout manager with 10
rows and 3 columns:

GridLayout gr = new GridLayout(10, 3);

As with flow layout, you can specify a vertical and a horizontal gap between components with two extra arguments. The following
statement creates a grid layout with 10 rows and 3 columns, a horizontal gap of 5 pixels, and a vertical gap of 8 pixels:

GridLayout gr2 = new GridLayout(10, 3, 5, 8);

The default gap between components under a grid layout is 0 pixels in both vertical and horizontal directions.

Listing 2.3 contains an application that creates a grid with three rows, three columns, and a 10-pixel gap between components in both the
vertical and horizontal directions.

LISTING 2.3 The Full Text of Bunch.java

1:
2: import java.awt..*;
3: import javax.swing.*;
4:
5: public class Bunch extends JFrame {
6: JButton marcia = new JButton(“Marcia”);
7: JButton carol = new JButton(“Carol”);
8: JButton greg = new JButton(“Greg”);
9: JButton jan = new JButton(“Jan”);
10: JButton alice = new JButton(“Alice”);
11: JButton peter = new JButton(“Peter”);
12: JButton cindy = new JButton(“Cindy”);
13: JButton mike = new JButton(“Mike”);
14: JButton bobby = new JButton(“Bobby”);
15:

4
Lecture 2 – Arranging Components on a User Interface

16: public Bunch() {

17: super(“Bunch”);
18: setSize(260, 260);
19: setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
20: JPanel pane = new JPanel();
21: GridLayout family = new GridLayout(3, 3, 10, 10);
22: pane.setLayout(family);
23: pane.add(marcia);
24: pane.add(carol);
25: pane.add(greg);
26: pane.add(jan);
27: pane.add(alice);
28: pane.add(peter);
29: pane.add(cindy);
30: pane.add(mike);
31: pane.add(bobby);
32: add(pane);
33: setVisible(true);
34: }
35:
36: public static void main(String[] arguments) {
37: Bunch frame = new Bunch();
38: }
39: }

Figure 2.3 shows this application.

FIGURE 2.3 Nine buttons arranged in a 3x3 grid layout.

One thing to note about the buttons in Figure 2.3 is that they expanded to fill the space available to them in each cell. This is an important
difference between grid layout and some of the other layout managers, which display components at a much smaller size.

Border Layout

Border layouts, which are created by using the BorderLayout class in java.awt, divide a container into five sections: north, south, east,
west, and center. The five areas of Figure 2.4 show how these sections are arranged.

5
Lecture 2 – Arranging Components on a User Interface

FIGURE 2.4 Components arranged under border layout.

Under border layout, the components in the four compass points take up as much space as they need—the center gets whatever space is
left over. Ordinarily, this results in an arrangement with a large central component and four thin components around it.

A border layout is created with either the BorderLayout () or BorderLayout(int, int) constructors. The first constructor creates a border
layout with no gap between any of the components. The second constructor specifies the horizontal gap and vertical gap, respectively.

After you create a border layout and set it up as a container’s layout manager, components are added using a call to the add() method
that’s different from what you have seen previously:

add(Component, String)

The first argument is the component that should be added to the container. The second argument is a BorderLayout class variable that
indicates to which part of the border layout to assign the component. The variables NORTH, SOUTH, EAST, WEST, and CENTER can be used.

The following statement adds a button called quitButton to the north portion of a border layout:

add(quitButton, BorderLayout.NORTH);

Listing 2.4 contains the application used to produce Figure 2.4.

LISTING 2.4 The Full Text of Border.java

1:
2: import java.awt.*;
3: import javax.swing.*;
4:
5: public class Border extends JFrame {
6: JButton nButton = new JButton(“North”);
7: JButton sButton = new JButton(“South”);
8: JButton eButton = new JButton(“East”);
9: JButton wButton = new JButton(“West”);
10: JButton cButton = new JButton(“Center”);
11:
12: public Border() {
13: super(“Border”);
14: setSize(240, 280);
15: setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
16: setLayout(new BorderLayout());
17: add(nButton, BorderLayout.NORTH);
18: add(sButton, BorderLayout.SOUTH);
19: add(eButton, BorderLayout.EAST);
6
Lecture 2 – Arranging Components on a User Interface

20: add(wButton, BorderLayout.WEST);

21: add(cButton, BorderLayout.CENTER);
22: }
23:
24: public static void main(String[] arguments) {
25: Border frame = new Border();
26: frame.setVisible(true);
27: }
28: }

Mixing Layout Managers

To find the layout that is just right, you often have to combine more than one layout manager on the same interface.

This is done by putting several containers inside a larger container (such as a frame) and giving each smaller container its own layout
manager.

The container to use for these smaller containers is the panel, which is created from the JPanel class. Panels are containers used to group
components together. There are two things to keep in mind when working with panels:

 The panel is filled with components before it is put into a larger container.
 The panel has its own layout manager.