Using JPanel to make a calculator: how to use layo

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

Answer 1

1. You need to add the buttons to the `JPanel'. For example:

   for(JButton b : buttons2) { buttonJPanel2.add(b); } 
   

2. BorderLayout accepts one component at each location, so if you set BorderLayout.AFTER_LAST_LINE twice, the last add overwrites previous one.

Answer 2

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 :)