Using JPanel to make a calculator: how to use layout?

Question

I'm working on a question that simply states to make an GUI that looks like This calculator, it doesn't have to function, just look like it. So I think I have the JPanel and JButton components right but I can't organize the fields to make it come out right. I'm pretty new so any crash course on how to organize a GUI would be appreciated.

Here's what I have so far:

// Using a JPanel to help lay out components.
import java.awt.GridLayout;
import java.awt.BorderLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.JTextField;

public class Calculator extends JFrame 
{
private final JPanel buttonJPanel2, buttonJPanel3, buttonJPanel4, 
buttonJPanel5; // panel to hold buttons
private final JButton[] buttons3, buttons4, buttons5; 
private final JButton[] buttons2;
private final JTextField buttonJPanel1;

// no-argument constructor
public Calculator()
{
  super("Calculator");
  buttonJPanel1 = new JTextField();

  add(buttonJPanel1, BorderLayout.NORTH); // add panel1 to JFrame

  buttons2 = new JButton[4];
  buttons2[0] = new JButton("7");
  buttons2[1] = new JButton("8");
  buttons2[2] = new JButton("9");
  buttons2[3] = new JButton("/");
  buttonJPanel2 = new JPanel(); 
  buttonJPanel2.setLayout(new GridLayout(1, buttons2.length));

  add(buttonJPanel2, BorderLayout.AFTER_LAST_LINE); // add panel2 to JFrame

  buttons3 = new JButton[4];
  buttons3[0] = new JButton("4");
  buttons3[1] = new JButton("5");
  buttons3[2] = new JButton("6");
  buttons3[3] = new JButton("*");
  buttonJPanel3 = new JPanel(); 
  buttonJPanel3.setLayout(new GridLayout(1, buttons3.length));

  add(buttonJPanel3, BorderLayout.AFTER_LAST_LINE); // add panel3 to JFrame

  buttons4 = new JButton[4];
  buttons4[0] = new JButton("1");
  buttons4[1] = new JButton("2");
  buttons4[2] = new JButton("3");
  buttons4[3] = new JButton("-");
  buttonJPanel4 = new JPanel(); 
  buttonJPanel4.setLayout(new GridLayout(1, buttons4.length));

  add(buttonJPanel4, BorderLayout.AFTER_LAST_LINE); // add panel4 to JFrame

  buttons5 = new JButton[4];
  buttons2[0] = new JButton("0");
  buttons5[1] = new JButton(".");
  buttons5[2] = new JButton("=");
  buttons5[3] = new JButton("+");
  buttonJPanel5 = new JPanel(); 
      buttonJPanel5.setLayout(new GridLayout(1, buttons5.length));

      add(buttonJPanel5, BorderLayout.AFTER_LAST_LINE); // add panel5 to 
//JFrame
   } 


public static void main(String[] args)
      { 
         PanelFrame panelFrame = new PanelFrame(); 
         panelFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
         panelFrame.setSize(700, 500); 
         panelFrame.setVisible(true); 
      } 

} // end class PanelFrame

Hello and welcome to StackOverflow, a website where you can get help on specific problems with code. Start with the [tour](https://stackoverflow.com/tour) and what questions are [suitable for asking](https://stackoverflow.com/help/on-topic) and which ones are [not](https://stackoverflow.com/help/dont-ask). You might also want to check out [Minimal, Complete and Verifiable Examples](https://stackoverflow.com/help/mcve). — Raymo111, Apr 10 '18 at 20:38
[GridLayout](https://docs.oracle.com/javase/tutorial/uiswing/layout/grid.html) can arrange components into a grid, n rows m columns. Just Specify the number of columns and add all the components into it. — MatheM, Apr 10 '18 at 20:45
I see you create buttons, but I don't see you adding the buttons to the panel. Read the above tutorial link for working examples to get started with the basics. — camickr, Apr 10 '18 at 20:47
*"`buttonJPanel1 = new JTextField();`"* For something that is neither a button nor a panel, you could hardly have created a worse name for a text field. General tips: 1) Provide ASCII art or a simple drawing of the *intended* layout of the GUI at minimum size, and if resizable, with more width and height - to show how the extra space should be used. 2) See also this [calculator example](http://stackoverflow.com/a/7441804/418556). It uses `ScriptEngine` to evaluate the expression in the text field. — Andrew Thompson, Apr 11 '18 at 02:44

score 0 · Accepted Answer · answered Apr 11 '18 at 12:01

In short: every component has to be declared,

JButton button1;

initialized

button1 = new JButton("Click me!");

and added to the component above it in the hierarchy (in this case the panel)

panel1.add(button1);

If you do not add the components to the panel and the panel to the frame they will not be part of the GUI, thus not visible.

A JPanel can be set to adjust its layout in different ways using a LayoutManager as you have done with GridLayout (which seems fitting for a calculator). I suggest you read about how to use the grid layout here.

Hope I could help :)

score 0 · Answer 2 · answered Apr 12 '18 at 07:45

0

You need to add the buttons to the `JPanel'. For example:
```
for(JButton b : buttons2) { buttonJPanel2.add(b); } 
```
BorderLayout accepts one component at each location, so if you set BorderLayout.AFTER_LAST_LINE twice, the last add overwrites previous one.

answered Apr 12 '18 at 07:45

c0der

18,467
6
33
65

I had no idea that you actually had to add them, so noob, i went through a few tutorial videos after and got it fixed, thank you guys :) – Matt Taliancich May 10 '18 at 02:26

Using JPanel to make a calculator: how to use layout?

2 Answers2

Linked