GUI components: JFrame, JLabel, JTextField, JButton and layouts

This week we build the parts of a graphical user interface (GUI): a window, text, a text box, a button, and the layouts that place them. Reacting to clicks (event handling) is the topic of next week. In the exam this topic usually comes as code reading: “what is visible in this window”, “which layout”, “why does this line not compile”. There is not much to memorize; it is enough to know a few defaults and how the layouts behave.

Golden rules:

1. Everything is a String. JTextField.getText() returns a String; if you want a number, use Integer.parseInt.
2. JPanel defaults to FlowLayout, the content pane of a JFrame to BorderLayout.
3. In BorderLayout, one component per region. An add without a position goes to CENTER and replaces the previous one.
4. setVisible(true) last. Use EXIT_ON_CLOSE so that the program ends when the window is closed.

TIP · Swing or JavaFX? Deitel’s book teaches with Swing (newer editions also have JavaFX chapters). This page uses Swing; it comes with the JDK. If your instructor shows JavaFX, the concepts are exactly the same: Stage ≈ JFrame, Scene ≈ content pane, Label / TextField / Button, and HBox, VBox, GridPane, BorderPane instead of layouts.

The structure of Swing

Every part of a GUI is a component. Components that hold other components are called containers. JFrame is the outermost window, and JPanel is a container you put components into and place inside the window.

The inheritance chain can come up in the exam as an “is-a” question:

java.awt.Component
  └─ java.awt.Container
       ├─ java.awt.Window ─ java.awt.Frame ─ javax.swing.JFrame
       └─ javax.swing.JComponent
            ├─ JLabel
            ├─ JPanel
            ├─ JTextComponent ─ JTextField ─ JPasswordField
            └─ AbstractButton ─ JButton
                              └─ JToggleButton ─ JCheckBox, JRadioButton

JButton jb = new JButton("OK");
System.out.println(jb instanceof JComponent);
System.out.println(jb instanceof Container);
System.out.println(jb instanceof Component);
Object lbl = new JLabel();
System.out.println(lbl instanceof AbstractButton);
System.out.println(new JCheckBox() instanceof AbstractButton);

true
true
true
false
true

The first window

The standard way to write a window is to create a class that derives from JFrame and set up the components in the constructor. If you keep the components as fields, the event handlers (week 6) can reach them.

import java.awt.*;
import javax.swing.*;

public class LoginFrame extends JFrame {
    private final JLabel userLabel = new JLabel("User:");
    private final JTextField userField = new JTextField(12);
    private final JLabel passLabel = new JLabel("Password:");
    private final JPasswordField passField = new JPasswordField(12);
    private final JButton loginButton = new JButton("Login");

    public LoginFrame() {
        super("Login");                         // window title
        setLayout(new FlowLayout());            // replace the default BorderLayout
        add(userLabel);
        add(userField);
        add(passLabel);
        add(passField);
        add(loginButton);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(260, 140);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new LoginFrame().setVisible(true));
    }
}

SwingUtilities.invokeLater builds the window on Swing’s own thread (the event dispatch thread); this is the correct pattern in the books. In the exam, writing new LoginFrame().setVisible(true); is also accepted.

PITFALL · the program does not end when the window closes. The default close behavior of JFrame is HIDE_ON_CLOSE: the window becomes invisible but the JVM keeps running. Do not forget to write setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE).

Reading a value from a text field

Everything the user types comes as a String. To do arithmetic you have to convert it; text that cannot be converted throws NumberFormatException.

JTextField field = new JTextField(10);
System.out.println("[" + field.getText() + "] cols=" + field.getColumns());
field.setText("Deniz Yilmaz Uzun Bir Isim");
System.out.println(field.getText().length());     // 10 columns is not a limit

JTextField num = new JTextField("12");
int n = Integer.parseInt(num.getText());
System.out.println(n * 2);
num.setText("12a");
try {
    Integer.parseInt(num.getText());
} catch (NumberFormatException e) {
    System.out.println("NumberFormatException: " + e.getMessage());
}

[] cols=10
26
24
NumberFormatException: For input string: "12a"

Layout managers

In Swing you do not position components pixel by pixel. Every container has a layout manager; it decides where the components go and what size they have. When the window grows or shrinks, it recomputes the placement.

JPanel panel = new JPanel();
System.out.println(panel.getLayout().getClass().getSimpleName());
JRootPane root = new JRootPane();      // the structure that builds the content pane of a JFrame
System.out.println(root.getContentPane().getLayout() instanceof BorderLayout);

FlowLayout
true

FlowLayout

The simplest. Components line up side by side in the order they are added, centered by default. new FlowLayout(FlowLayout.LEFT) aligns them to the left. If the window narrows, a component that does not fit moves to the next row. It is practical for forms, but since the arrangement changes with the window size, it is not enough for precise design.

BorderLayout

It divides the window into five regions. North and south take the full width, east and west take the remaining height, and center takes everything else. If you give no region, add(c) adds to the center.

JPanel bp = new JPanel(new BorderLayout());
JButton b1 = new JButton("One"), b2 = new JButton("Two");
bp.add(b1, BorderLayout.CENTER);
bp.add(b2, BorderLayout.CENTER);      // replaces b1
BorderLayout bl = (BorderLayout) bp.getLayout();
System.out.println(bp.getComponentCount());
System.out.println(((JButton) bl.getLayoutComponent(BorderLayout.CENTER)).getText());

2
Two

The way to put more than one component in a region is to insert a panel:

public EditorFrame() {
    super("Editor");
    add(new JLabel("Title bar text"), BorderLayout.NORTH);
    add(new JTextArea(10, 30), BorderLayout.CENTER);
    JPanel buttons = new JPanel();              // FlowLayout
    buttons.add(new JButton("Save"));
    buttons.add(new JButton("Cancel"));
    add(buttons, BorderLayout.SOUTH);           // two buttons in one region
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    pack();                                     // shrink to the preferred size
}

pack() sizes the window to the preferred size of the components; it can be used instead of setSize.

GridLayout

new GridLayout(rows, columns) or, with gaps, new GridLayout(rows, columns, hgap, vgap). All cells are of equal size and the components fill the cell completely. A 2 x 3 grid in a 300 x 100 pixel panel:

JPanel gp = new JPanel(new GridLayout(2, 3));
for (int i = 1; i <= 6; i++) gp.add(new JButton("B" + i));
gp.setSize(300, 100);
gp.doLayout();
for (Component c : gp.getComponents()) {
    Rectangle r = c.getBounds();
    System.out.println(((JButton) c).getText() + " x=" + r.x + " y=" + r.y
                       + " w=" + r.width + " h=" + r.height);
}

B1 x=0 y=0 w=100 h=50
B2 x=100 y=0 w=100 h=50
B3 x=200 y=0 w=100 h=50
B4 x=0 y=50 w=100 h=50
B5 x=100 y=50 w=100 h=50
B6 x=200 y=50 w=100 h=50

PITFALL · rows first. GridLayout(2, 3) means 2 rows and 3 columns, not the other way around. Think of it as in matrices: rows × columns.

Nested panels

Real screens do not come out of a single layout. The method: divide the screen into regions and put a JPanel with its own layout in each region. For example, a calculator: the window is a BorderLayout, with a JTextField for the result in NORTH and a keypad panel with GridLayout(4, 3, 5, 5) in CENTER.

setLayout(new GridLayout(4, 3, 5, 5));
String[] keys = {"1","2","3","4","5","6","7","8","9","*","0","#"};
for (String k : keys) add(new JButton(k));

Common mistakes

JPanel bp = new JPanel(new BorderLayout());
JButton b1 = new JButton("One"), b2 = new JButton("Two");
bp.add(b1, BorderLayout.CENTER);
bp.add(b2, BorderLayout.CENTER);
BorderLayout bl = (BorderLayout) bp.getLayout();
System.out.println(bp.getComponentCount());
System.out.println(((JButton) bl.getLayoutComponent(BorderLayout.CENTER)).getText());

JTextField f = new JTextField("7");
int x = f.getText();

JTextField num = new JTextField("12");
System.out.println(Integer.parseInt(num.getText()) * 2);
num.setText("12a");
try {
    Integer.parseInt(num.getText());
} catch (NumberFormatException e) {
    System.out.println("NumberFormatException: " + e.getMessage());
}

JPasswordField p = new JPasswordField();
String s = p.getPassword();

JButton jb = new JButton("OK");
System.out.println(jb instanceof JComponent);
System.out.println(jb instanceof Component);
Object lbl = new JLabel();
System.out.println(lbl instanceof AbstractButton);
System.out.println(new JCheckBox() instanceof AbstractButton);

public class App {
    public static void main(String[] args) {
        JFrame f = new JFrame("Demo");
        f.setVisible(true);
        f.add(new JLabel("Hello"));
        f.setSize(200, 100);
    }
}

import java.awt.FlowLayout;
import javax.swing.*;

public class TemperatureFrame extends JFrame {
    private final JTextField celsiusField = new JTextField(6);
    private final JButton convertButton = new JButton("Convert");
    private final JLabel resultLabel = new JLabel("F: ?");

    public TemperatureFrame() {
        super("C to F");                 // window title
        setLayout(new FlowLayout());
        add(new JLabel("Celsius:"));
        add(celsiusField);
        add(convertButton);
        add(resultLabel);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(300, 100);
    }

    public static void main(String[] args) {
        new TemperatureFrame().setVisible(true);
    }
}