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.

I think this should be possible using the built-in layout managers, but I found [MigLayout](http://www.miglayout.com/) particularly useful since it is quite flexible and intuitive and also provides a debug renderer to display the calculated layout constraints. — Thomas, Jul 23 '14 at 12:13
`FlowLayout` is obviously not the correct choice. You should consider `GridLayout`, `BoxLayout`, or maybe `GridBagLayout`. Additionally, there are more layout managers written by others (not part of JDK), for example `MigLayout`. I fear that it will come with some hours of learning. — Seelenvirtuose, Jul 23 '14 at 12:13
You could use 2 `JPanels` in your `JFrame`. First one to display input/output with, for example `FlowLayout` and second one with buttons using `GridLayout`. — mlethys, Jul 23 '14 at 12:13
Gridbaglayout is what you need : http://blue-walrus.com/2011/12/gridbaglayout-tutorial/ — Oliver Watkins, Jul 23 '14 at 13:12
as others have stated you can use those layouts or make multiple panels each with flow layout (not the best way of doing it, but since you have just learned that layout, you can do that), it's gonna be painfull, but that's another way of doing that. You can check more about [Layout Managers](http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html) and see which one fits your needs. That link also provides examples or you can Google them. — Frakcool, Jul 23 '14 at 13:26

score 2 · Answer 1 · answered Jul 23 '14 at 13:19

2

Flowlayout or Gridlayout by themselves won't help you. Either you can use Gridbaglayout, or a combination of layouts such as FlowLaout+Gridlayout.

If you are drawing a calculator, I am assuming you are drawing something like this :

enter image description here

Where you have title information at the top, a calculator keypad in the middle, and some other buttons at the bottom :

This could be achieved with a vertical box layout, with flowlayouts at the top and bottom, and in the middle a grid layout with all the number keys.

But... without you showing a diagram of what you want its very difficult to say.

answered Jul 23 '14 at 13:19

Oliver Watkins

12,575
33
119
225

This is indeed what I'm looking for. I don't need the bottom part, just basically a flow layout at the top and a grid layout below that it seems. But for some reason can't get it to work. Thanks for the help though – alwynmalan Jul 23 '14 at 13:30
1

@alwynmalan the trick should be to use 3 panels, **Top:** with `FlowLayout` and **Middle:** with `GridLayout`. **contentPane:** with a `BoxLayout` adding both (Top and Middle) panels created before. – Frakcool Jul 23 '14 at 13:38
@ Frakcool It makes perfectly sense...but hell I have no idea how to do that lol. Will do some research and try to make it work thank you. – alwynmalan Jul 23 '14 at 13:54
let me try something similar to your calculator, so I don't make your homework for you but guide you on how to do it – Frakcool Jul 23 '14 at 13:56

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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:

enter image description here

java swing calculator layouts

2 Answers2