title: Java Applet Layout Doesn't Appear As It Is Supposed To o_O
body: <p>I am taking a Java class this semester and was working on a take-home quiz.
  In it we create a calculator of sorts which is supposed to look like the 1st image attached<a href="https://i.stack.imgur.com/Wcl74.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wcl74.jpg" alt="calculator_applet_intended"></a> </p>
  
  <p>As you can see the base panel is supposed to be divided into 2 rows and 1 column.
  The upper panel is divided into 3 rows and 2 columns.
  The lower panel has 4 buttons for the calculations to be performed.</p>
  
  <p>For this quiz I created 2 files, WholePanel.java and LayoutPanel.java.
  Here is the code for WholePanel.java:</p>
  
  <pre><code>package layoutpanel;
  
  import java.awt.BorderLayout;
  import static java.awt.BorderLayout.CENTER;
  import java.awt.*;
  import java.awt.event.*;
  import javax.swing.*;
  
  
  /**
   *
   * @author ross satchell
   */
  
  public class WholePanel extends JPanel{
      public JTextField textBox1, textBox2, resultBox;
      public double num1, num2, result;
      public JLabel label1, label2, label3;
      public JButton addButton, subButton, multipButton, dividButton;
  
  
  public WholePanel(){                            // constructor
      JPanel upperPanel, lowerPanel, subPanel;
      upperPanel = new JPanel();   // the panel for the top section
      lowerPanel = new JPanel();   // the panel for the lower section
      subPanel = new JPanel();     // panel to hold both upperPanel and lowerPanel
      label1 = new JLabel("Enter number 1:");
      label2 = new JLabel("Enter number 2:");
      label3 = new JLabel("Result:");
      textBox1 = new JTextField(10);
      textBox2 = new JTextField(10);
      resultBox = new JTextField(10);
      addButton  =new JButton("+");
      subButton = new JButton("-");
      multipButton = new JButton("*");
      dividButton = new JButton("/");
  
  
  
      upperPanel.setLayout(new GridLayout(3,2));
      upperPanel.add(label1);
      upperPanel.add(textBox1);       // set up layout and 
      upperPanel.add(label2);         // components for upperPanel
      upperPanel.add(textBox2);
      upperPanel.add(label3);
      upperPanel.add(resultBox);
  
      lowerPanel.setLayout(new FlowLayout());
      lowerPanel.add(addButton);
      lowerPanel.add(subButton);           // set up topLowerPanel 
      lowerPanel.add(multipButton);        // components and layout
      lowerPanel.add(dividButton);
  
      subPanel.setLayout(new BorderLayout());
      subPanel.add(upperPanel, BorderLayout.NORTH);
      subPanel.add(lowerPanel, BorderLayout.SOUTH);               // add each panel to the main subPanel
      this.add(subPanel);
  
      addButton.addActionListener(new ButtonListener());      // add button listeners
      subButton.addActionListener(new ButtonListener());      // for each of the 
      multipButton.addActionListener(new ButtonListener());   // four buttons
      dividButton.addActionListener(new ButtonListener());    //
  }
  
  
  private class ButtonListener implements ActionListener{
  
  
      public void actionPerformed(ActionEvent e){
          JButton buttonX = (JButton) e.getSource();
          num1 = Double.parseDouble(textBox1.getText());  // read values in textBox1
          num2 = Double.parseDouble(textBox2.getText());  // and textBox2
  
          if (buttonX == addButton){
              result = num1 + num2;
          }else if (buttonX == subButton){                // performed required calculation
              result = num1 - num2;
          }else if (buttonX == multipButton){
              result = num1 * num2;
          }else if (buttonX == dividButton){
              result = num1 / num2;
          }
          resultBox.setText("" + result);
          }   //  end actionPerformed() method
  
      }   // end ButtonListener class
  
  }       // end WholePanel class
  </code></pre>
  
  <p>And here is the code for LayoutPanel.java</p>
  
  <pre><code>package layoutpanel;
  
  import javax.swing.*;
  import java.awt.*;
  import java.awt.event.*;
  
  public class LayoutPanel extends JApplet{
  
  
  public void init(){
  
  WholePanel wholePanel = new WholePanel();
  getContentPane().add(wholePanel);
  setSize(300,200);
  }
  </code></pre>
  
  <p>When I run the applet it appears as thus:
  <a href="https://i.stack.imgur.com/VbMXL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VbMXL.jpg" alt="enter image description here"></a><br>
  As you can see, it appears as if both topPanel and lowerPanel are somehow both in the top row of subPanel.</p>
  
  <p>For curiosity's sake I tried changing the subPanel to a BorderLayout and positioned topPanel to the NORTH and lowerPanel to the SOUTH. However when I ran the applet it still appeared exactly the same!</p>
  
  <p>I have pored over the code trying to see what I have done wrong, but I'm completely stumped.
  I'm hoping a fresh set of eyes will see what careless mistake I have made.</p>
  
  <p>Any and all suggestions are most welcome.   </p>