Java grid layout GUI - how to enter new pane on event?

Question

How can I set a button to link to a completely different grid pane? If I click the JButton "More options" for example, I want it to link me to a new page with more JButton options. Right now, everything is static.

The program right now just calculates the area of a rectangle given an length and width when you press "Calculate." The grid layout is 4 x 2, denoted by JLabel, JTextField, and JButton listed below.

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

public class RectangleProgram extends JFrame
{
private static final int WIDTH = 400;
private static final int HEIGHT = 300;

private JLabel lengthL, widthL, areaL;
private JTextField lengthTF, widthTF, areaTF;
private JButton calculateB, exitB;

//Button handlers:
private CalculateButtonHandler cbHandler;
private ExitButtonHandler ebHandler;

public RectangleProgram()
{
    lengthL = new JLabel("Enter the length: ", SwingConstants.RIGHT);
    widthL = new JLabel("Enter the width: ", SwingConstants.RIGHT);
    areaL = new JLabel("Area: ", SwingConstants.RIGHT);

    lengthTF = new JTextField(10);
    widthTF = new JTextField(10);
    areaTF = new JTextField(10);

    //SPecify handlers for each button and add (register) ActionListeners to each button.
    calculateB = new JButton("Calculate");
    cbHandler = new CalculateButtonHandler();
    calculateB.addActionListener(cbHandler);
    exitB = new JButton("Exit");
    ebHandler = new ExitButtonHandler();
    exitB.addActionListener(ebHandler);

    setTitle("Sample Title: Area of a Rectangle");
    Container pane = getContentPane();
    pane.setLayout(new GridLayout(4, 2));

    //Add things to the pane in the order you want them to appear (left to right, top to bottom)
    pane.add(lengthL);
    pane.add(lengthTF);
    pane.add(widthL);
    pane.add(widthTF);
    pane.add(areaL);
    pane.add(areaTF);
    pane.add(calculateB);
    pane.add(exitB);

    setSize(WIDTH, HEIGHT);
    setVisible(true);
    setDefaultCloseOperation(EXIT_ON_CLOSE);
}

private class CalculateButtonHandler implements ActionListener
{
    public void actionPerformed(ActionEvent e)
    {
        double width, length, area;

        length = Double.parseDouble(lengthTF.getText()); //We use the getText & setText methods to manipulate the data entered into those fields.
        width = Double.parseDouble(widthTF.getText());
        area = length * width;

        areaTF.setText("" + area);
    }
}

public class ExitButtonHandler implements ActionListener
{
    public void actionPerformed(ActionEvent e)
    {
        System.exit(0);
    }
}

public static void main(String[] args)
{
    RectangleProgram rectObj = new RectangleProgram();
}

}

Answer 1

You can use CardLayout. It allows the two or more components share the same display space.

Here is a simple example

public class RectangleProgram {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {

            @Override
            public void run() {

                JFrame frame = new JFrame("Area of a Rectangle");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

                JTextField lengthField = new JTextField(10);
                JTextField widthField = new JTextField(10);
                JTextField areaField = new JTextField(10);

                JButton calculateButton = new JButton("Calculate");
                JButton exitButton = new JButton("Exit");

                final JPanel content = new JPanel(new CardLayout());

                JButton optionsButton = new JButton("More Options");
                optionsButton.addActionListener(new ActionListener() {

                    @Override
                    public void actionPerformed(ActionEvent e) {
                        CardLayout cardLayout = (CardLayout) content.getLayout();
                        cardLayout.next(content);
                    }
                });

                JPanel panel = new JPanel(new GridLayout(0, 2)) {
                    @Override
                    public Dimension getPreferredSize() {
                        return new Dimension(250, 100);
                    }
                };
                panel.add(new JLabel("Enter the length: ", JLabel.RIGHT));
                panel.add(lengthField);

                panel.add(new JLabel("Enter the width: ", JLabel.RIGHT));
                panel.add(widthField);
                panel.add(new JLabel("Area: ", JLabel.RIGHT));
                panel.add(areaField);
                panel.add(calculateButton);
                panel.add(exitButton);

                JPanel optionsPanel = new JPanel();
                optionsPanel.add(new JLabel("Options", JLabel.CENTER));

                content.add(panel, "Card1");
                content.add(optionsPanel, "Card2");
                frame.add(content);
                frame.add(optionsButton, BorderLayout.PAGE_END);

                frame.pack();
                frame.setVisible(true);
            }
        });
    }
}

Read How to Use CardLayout