JFrame Layout management

Question

With the following code I tried to create a layout for a calculator frame.

The output I get seems as if there is something going extremely wrong but I can't spot it.

Output:

enter image description here

My question is can you try to compile this and see if you get the same output as me?

If you do is there anything I should be checking when getting this sort of problem. Thanks

Code:

package mycalculator;

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

public class MyCalculatorGUI extends JFrame {

    //initialise all the components
    JPanel mainPanel = new JPanel();
    JPanel memPanel = new JPanel();
    JPanel advFuncPanel = new JPanel();
    JPanel wordFuncPanel = new JPanel();
    JPanel numPanel = new JPanel();
    JPanel basicFuncPanel = new JPanel();
    JTextField txtDisplay = new JTextField(100);
    JToggleButton mPlus = new JToggleButton("M+");
    JButton mClear = new JButton("CM");
    JButton mA = new JButton("A");
    JButton mB = new JButton("B");
    JButton mC = new JButton("C");
    JButton mD = new JButton("D");
    JButton aSq = new JButton("x"+ "\u00B2");
    JButton aCu = new JButton("x" + "\u00B3");
    JButton aPowa = new JButton("x" + "\u00AA");
    JButton aInv = new JButton("x" + "\u00AF" + "\u00B9");
    JButton aSqrt = new JButton("\u221A" + "x");
    JButton aFact = new JButton("x!");
    JButton btnSin = new JButton("sin(x)");
    JButton btnCos = new JButton("cos(x)");
    JButton btnTan = new JButton("tan(x)");
    JButton btnaSin = new JButton("arcsin(x)");
    JButton btnaCos = new JButton("arccos(x)");
    JButton btnaTan = new JButton("arctan(x)");
    JToggleButton hyp = new JToggleButton("hyp");
    JButton btnAbs = new JButton("abs(x)");
    JButton btnExp = new JButton("exp(x)");
    JButton btnLog = new JButton("log(x)");
    JButton btnLn = new JButton("ln(x)");
    JButton btnLoga = new JButton("loga(x)");
    JButton btn1 = new JButton("1");
    JButton btn2 = new JButton("2");
    JButton btn3 = new JButton("3");
    JButton btn4 = new JButton("4");
    JButton btn5 = new JButton("5");
    JButton btn6 = new JButton("6");
    JButton btn7 = new JButton("7");
    JButton btn8 = new JButton("8");
    JButton btn9 = new JButton("9");
    JButton btn0 = new JButton("0");
    JButton btnDot = new JButton(".");
    JButton btnCl = new JButton("Cl");
    JButton btnBs = new JButton("\u00AB");
    JButton btnPlus = new JButton("+");
    JButton btnMinus = new JButton("-");
    JButton btnMult = new JButton("*");
    JButton btnDiv = new JButton("\u00F7");
    JButton btnEq = new JButton("=");

    public static void main(String[] args) {

        new MyCalculatorGUI();

    }

    public MyCalculatorGUI() {

        // create the frame for the Calculator
        this.setLocationRelativeTo(null);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setResizable(false);
        this.setTitle("Calculator");

        // parent panel containes every other panel
        mainPanel.setLayout(new GridBagLayout());
        this.add(mainPanel);

        // text display
        txtDisplay.setEditable(false);
        addComp(mainPanel, txtDisplay, 0, 0, 4, 1);

        // --------------------------------------------------------------------------

        // memory panel, flow layout, 6 buttons same size, spans gridwidth 2
        memPanel.setLayout(new FlowLayout());

        // add button to panel
        memPanel.add(mPlus);
        memPanel.add(mClear);
        memPanel.add(mA);
        memPanel.add(mB);
        memPanel.add(mC);
        memPanel.add(mD);       

        // add panel to main panel
        addComp(mainPanel, memPanel, 0, 1, 2, 1);

        // --------------------------------------------------------------------------

        // advFuncPanel, flow layout, 6 buttons same size, spans gridwidth 2
        advFuncPanel.setLayout(new FlowLayout());

        // add button to panel
        advFuncPanel.add(aSq);
        advFuncPanel.add(aCu);
        advFuncPanel.add(aPowa);
        advFuncPanel.add(aInv);
        advFuncPanel.add(aSqrt);
        advFuncPanel.add(aFact);

        // add panel to main panel
        addComp(mainPanel, advFuncPanel, 0, 2, 2, 1);

        // --------------------------------------------------------------------------

        // wordFuncPanel, grid layout (3 rows, 4 columns), 12 buttons same size, spans gridwidth 2
        wordFuncPanel.setLayout(new GridLayout(3, 4));

        // add buttons to panel     
        wordFuncPanel.add(btnSin);
        wordFuncPanel.add(btnaSin);
        wordFuncPanel.add(hyp);
        wordFuncPanel.add(btnLog);
        wordFuncPanel.add(btnCos);
        wordFuncPanel.add(btnaCos);
        wordFuncPanel.add(btnAbs);
        wordFuncPanel.add(btnLn);
        wordFuncPanel.add(btnTan);
        wordFuncPanel.add(btnaTan);
        wordFuncPanel.add(btnExp);
        wordFuncPanel.add(btnLoga);

        // add panel to main panel
        addComp(mainPanel, wordFuncPanel, 0, 3, 2, 1);

        // --------------------------------------------------------------------------

        // numPanel, gridbaglayout, spans gridheight 3
        numPanel.setLayout(new GridBagLayout());

        // add buttons to panel
        addComp(numPanel, btn1, 0, 0, 1, 1);
        addComp(numPanel, btn2, 1, 0, 1, 1);
        addComp(numPanel, btn3, 2, 0, 1, 1);
        addComp(numPanel, btn4, 0, 1, 1, 1);
        addComp(numPanel, btn5, 1, 1, 1, 1);
        addComp(numPanel, btn6, 2, 1, 1, 1);
        addComp(numPanel, btn7, 0, 2, 1, 1);
        addComp(numPanel, btn8, 1, 2, 1, 1);
        addComp(numPanel, btn9, 2, 2, 1, 1);
        addComp(numPanel, btn0, 0, 3, 2, 1);
        addComp(numPanel, btnDot, 2, 3, 1, 1);
        addComp(numPanel, btnCl, 0, 4, 2, 1);
        addComp(numPanel, btnBs, 2, 4, 1, 1);

        // add panel to mainpanel
        addComp(mainPanel, numPanel, 2, 1, 1, 3);

        // --------------------------------------------------------------------------

        //basicFuncPanel, verticalboxlayout, spans gridheight 3
        basicFuncPanel.setLayout(new BoxLayout(basicFuncPanel, BoxLayout.Y_AXIS));

        // add buttons to panel
        basicFuncPanel.add(btnPlus);
        basicFuncPanel.add(btnMinus);
        basicFuncPanel.add(btnMult);
        basicFuncPanel.add(btnDiv);
        basicFuncPanel.add(btnEq);

        // add panel to main panel  
        addComp(mainPanel, basicFuncPanel, 3, 1, 1, 3);

        // --------------------------------------------------------------------------

        this.pack();
        this.setVisible(true);

    }


    private void addComp(JPanel panel, JComponent comp, int xPos, int yPos, int compWidth, int compHeight) {

        GridBagConstraints gridConstraints = new GridBagConstraints();

        gridConstraints.gridx = xPos;
        gridConstraints.gridy = yPos;
        gridConstraints.gridwidth = compWidth;
        gridConstraints.gridheight = compHeight;
        gridConstraints.weightx = 100;
        gridConstraints.weighty = 100;
        gridConstraints.insets = new Insets(5, 5, 5, 5);
        gridConstraints.anchor = GridBagConstraints.CENTER;
        gridConstraints.fill = GridBagConstraints.BOTH;

        panel.add(comp, gridConstraints);

    }

    private JComponent[] components = { mPlus, mClear, mA, mB, mC, mD, aSq, aCu, aPowa, aInv, aSqrt, aFact,
        btnSin, btnCos, btnTan, btnaSin, btnaCos, btnaTan, hyp, btnAbs, btnExp, btnLog, btnLn, btnLoga, 
        btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9, btn0, btnDot, btnCl, btnBs, btnPlus, btnMinus,
        btnMult, btnDiv, btnEq };

    public JComponent[] getComponents() {
        return components;
    }


}

No I am not getting the same output. It's not overlapping and looking fine. Nice use of Layouts. — Braj, Jun 17 '14 at 19:38

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

Just do one change and everything will work fine.

public static void main(String[] args) {

    SwingUtilities.invokeLater(new Runnable() {
        
        @Override
        public void run() {
            new MyCalculatorGUI();
        }
    });
}

Use SwingUtilities.invokeLater() to make sure that EDT is initialized properly.

EDIT

Some time this.setResizable(false); create issues while re-sizing or packing the components in the JFrame.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 17 '14 at 19:40

Braj

46,415
5
60
76

can you add `this.add(mainPanel);` just before `this.pack();` – Braj Jun 17 '14 at 19:50
Aha I have corrected that. The problem is still present, I assume it's several bugs working together. – user3749872 Jun 17 '14 at 19:53
Can you comment this line for the time `this.setResizable(false);` I think JFrame want to resize but can't. – Braj Jun 17 '14 at 19:54
That was it! Thank you very much, will make sure I watch out next time. – user3749872 Jun 17 '14 at 20:01
OK I'll update it in my post as well to make it helpful for others as well. – Braj Jun 17 '14 at 20:02

JFrame Layout management

1 Answers1

EDIT