java swing calculator layouts

Question

I need to do an assignment and create a calculator. It's a beginner Java course, so keep in mind that I'm no expert. It shouldn't look spectacular, so the easiest way to achieve the below would be great.

The inner workings of it is fine, but drawing it has been a real headache.

We've only gotten exposure to flowlayout so far...and in this instance it's not what I want at all. Let me start of by telling you what layout I'm looking for:

• At the top a heading spreading across the calculator, with perhaps a background fill.
• Then below that, 2 buttons next to each other.
• Below that, two labels next to each other.
• Then two text field next to each other.
• Below that, two labels next to each other.
• Then two text field next to each other.

I tried drawing it here, but it doesn't format correctly. If I can put it in HTML it would basically be a simple table, with 6 rows and 2 columns. But the top row must span across both columns.

Flowlayout just put everything next to each other from left to right.

After that I tried using GridLayout, but the top heading was the problem here, as it didn't span across both columns.

Here is my code so far:

public class TripCalculator extends JFrame implements ActionListener {

    public static final int WIDTH = 400;
    public static final int HEIGHT = 300;
    public static final int NUMBER_OF_CHAR = 4;
    public JTextField stopTime, distance, tripTime, speed;

    public TripCalculator() {
        setSize(WIDTH, HEIGHT);
        WindowDestroyer listener = new WindowDestroyer();
        addWindowListener(listener);

        Container contentPane = getContentPane();

        contentPane.setLayout(new FlowLayout());

        JLabel heading = new JLabel("HEADING");
        contentPane.add(heading);

        contentPane.setLayout(new FlowLayout());

        JButton addStop = new JButton("BUTTON1");
        addStop.addActionListener(this);

        JButton addLeg = new JButton("BUTTON2");
        addLeg.addActionListener(this);

        contentPane.add(addStop);
        contentPane.add(addLeg);

        JLabel subHead1 = new JLabel("LABEL1");
        contentPane.add(subHead1);

        JLabel subHead2 = new JLabel("LABEL2");
        contentPane.add(subHead2);

        stopTime = new JTextField(NUMBER_OF_CHAR);
        contentPane.add(stopTime);

        distance = new JTextField(NUMBER_OF_CHAR);
        contentPane.add(distance);

        JLabel subHead3 = new JLabel("LABEL3");
        contentPane.add(subHead3);

        JLabel subHead4 = new JLabel("LABEL4");
        contentPane.add(subHead4);

        tripTime = new JTextField(NUMBER_OF_CHAR);
        contentPane.add(tripTime);

        speed = new JTextField(NUMBER_OF_CHAR);
        contentPane.add(speed);
    }
}

I would greatly appreciate if anyone can show me in the right direction.

Answer 1

Here's an example of using multiple Layout Managers as you can see you can use more than one, but you should use more than one JPanel to achieve what you want.

Also a recommendation is: Don't extend from JFrame, instead create a JFrame object as I did in this example and here's why you shouldn't do that.

import java.awt.*;
import javax.swing.*;
public class LayoutManagersExample {
    public static void main(String args[]) {
        new LayoutManagersExample();
    }

    public LayoutManagersExample() {
        JFrame frame = new JFrame("Layout Managers Example");
        JPanel topPane = new JPanel();
        JPanel midPane = new JPanel();
        JPanel panesHolder = new JPanel();
        JLabel label = new JLabel("Top label");
        JTextField field = new JTextField();
        field.setColumns(5);

        topPane.setLayout(new FlowLayout());
        midPane.setLayout(new GridLayout(3, 2));

        topPane.add(label);
        topPane.add(field);

        midPane.add(new JButton("Button 1"));
        midPane.add(new JButton("Button 2"));
        midPane.add(new JButton("Hello I'm a button"));
        midPane.add(new JButton("HEY! Click me :)"));
        midPane.add(new JButton("I love you"));
        midPane.add(new JButton("This is another button"));

        panesHolder.setLayout(new BoxLayout(panesHolder, BoxLayout.Y_AXIS));
        panesHolder.add(topPane);
        panesHolder.add(midPane);

        frame.add(panesHolder);
        frame.setSize(400, 300);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
    }
}

And this is how it looks like: