Graphical User Interfaces
AAHC

Click on A to make all fonts on the page smaller.

Click on A to make all fonts on the page larger.

Click on HC to toggle high contrast mode. When you move your mouse over some bold words in high contrast mode, related words are automatically highlighted. Text is shown in black and white.


Views

In this lesson, we'll create a user interface and learn about the Layout Manager. Most of the constructs in this code were demonstrated in the previous Java course series, so you'll probably recognize them. But using the Panel and the various LayoutManagers for GUI Frame's Panels will be new. To learn more about layout managers, check out the java.awt.LayoutManager in the API. If you want to dig deeper still into layout managers, visit the Visual Guide to Layout Managers Tutorial.

When it runs to completion, our application will have three separate JPanels (InitPanel, InputPanel, and OutputPanel); one for each stage of the run. In the picture below, they are separated by red lines so you can differentiate between them:

JFrames and JPanels

A JFrame (similar to a Frame in AWT) is a Window for the user. We know that JFrame is a Swing Component, because it is preceded by J. All Swing component names are preceded by a J in order to avoid confusing them with AWT Components. We can add menus and Panels (JMenus and JPanels) to suit our needs. In fact, both JFrame and JPanel inherit from Container, so we can add other Components to both of them.

We'll provide the user with a top-level JFrame and add various JPanels to it.

JFrames: The Top-Level View

Let's create the JFrame (Window) that will hold the JPanels and other components. Then we'll add a Menu Bar (JMenuBar) and a Menu item "File" (JMenuItem) with the menu option "Exit." Then we'll capture the click event, so we can close the window when we test it. If we didn't do this, we'd have to use the Console to end the program.

Swing components are referred to as "light weight" (as opposed to AWT components which are "heavy weight"), meaning that the components use the operating system to create components like Checkboxes and Choices. Swing components are created and drawn by the Swing library rather than relying on the operating system to draw them. This gives Java applications and applets a uniform look and feel across multiple operating systems. And when using Swing, the look and feel of your applications can be changed by altering a few lines of code.

Okay, time to get busy!

In the java4_Lesson1 project, create a new SalesUserInterface class as shown:

Go to the SalesUserInterface editor window and edit it as shown in blue:

CODE TO TYPE: SalesUserInterface
package salesGUI;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class SalesUserInterface extends JFrame{
    SalesApp app;
    JMenuBar mb;
    JMenu m;
    JMenuItem q, r, s, t;

    public SalesUserInterface(SalesApp myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new JMenuBar();
        setJMenuBar(mb);
        m = new JMenu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
             public void actionPerformed(ActionEvent e) {
                 System.exit(0);
             }
        });
    
        pack();
        setVisible(true);
    }
}

Save it. It won't run, because we haven't created a Main class yet. We'll do that, but first let's take a closer look at the code we do have:

OBSERVE: SalesUserInterface
package salesGUI;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
        
public class SalesUserInterface >extends JFrame>{
    SalesApp app;
    JMenuBar mb;
    JMenu m;
    JMenuItem q, r, s, t;
    
    public SalesUserInterface(SalesAPP myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayoutManager(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new JMenuBar();
        setJMenuBar(mb);
        m = new JMenu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });
            
        pack();
        setVisible(true);
    }
}

So let's go over our code piece by piece. We imported javax.swing.*, java.awt.event, the java.BorderLayout, and java.awt.Dimension. The JFrame container is extended from Swing. Our SalesUserInterface class extends JFrame from Swing. We imported java.awt.event to allow us to capture events. We imported java.BorderLayout as our chosen Layout Manager. Finally, we imported java.awt.Dimension in order to size the window in this instance.

Next, we set up the variables for this application to use. The app variable is a reference to the SalesApp class that we created earlier. The other variables are of type JMenuBar, JMenu, and JMenuOption, all of which are Swing components we'll use for our menu bar. Again, the "J" is used here to differentiate Swing components from AWT components.

The constructor for this class accepts a SalesAPP object as a parameter. This enables the SalesApp object to make computations from this GUI.

We call app.setMyUserInterface(this), which passes the SalesUserInterface object to the SaleApp instance. (This may be a bit confusing right now, because we haven't used this handle yet. Don't worry, we'll get there. Patience grasshopper.)

Next, we call the JFrame method setLayoutManager(new BorderLayout()), in which we create a new BorderLayout()--we'll use the BorderLayout manager. Well, we aren't actually using it just yet, but it will be used to lay out the JPanels when we add them. For now, let's get the window up with the File menu and Exit option.

In the dark red code above, we instantiate a JMenuBar called mb, and then set the menu bar on the SalesUserInterface JFrame with setJMenuBar(mb);. Then we add the JMenu "File" to the menu bar, and add the "Exit" JMenuItem to that.

We add an ActionLister to the Exit Menu Item to catch the click event. To do that, we use the anonymous inner class technique. Then we call System.exit(0); in the implemented interface method ActionPerformed() to kill the Application process.

Finally, we call pack(); and setVisible(true); to show the GUI. The method pack() is actually inherited from Window, and causes the window to be set to its preferred size. setVisible() makes the window visible on the screen. These two methods should always be called when using a JFrame.

Okay, let's make a Main Class and get this application running!

Start a new Main Class file in the same location as your SalesUserInterface class. Type the blue code as shown:

CODE TO TYPE: Main
     
package salesGUI;
         
public class Main {
    public static void main(String[] args) {
         
        SalesApp newApp = new SalesApp();
        SalesUserInterface appFrame = new SalesUserInterface(newApp);
    }
}   

Save and run it. Select File | Exit:

OBSERVE: Breaking Down the Main
     
package salesGUI;
          
public class Main {
    public static void main(String[] args) {
            
        SalesAPP newApp = new SalesApp();
        SalesUserInterface appFrame = new SalesUserInterface(newApp);
    }
}   

Here we instantiate a SalesApp object we call newApp. Then we instantiate a SalesUserInterface object and pass the newApp object to it as a parameter. In the SalesUserInterface object, we get that newApp object and it becomes app, which will ultimately make calculations for us.

Now, add the first JPanel: InitPanel. We'll add this class as an Inner Class to SalesUserInterface. We do that for two reasons:

  • This class is specific to the SalesUserInterface and we don't plan to reuse it.
  • It will make it easier to access aspects of the SalesUserInterface later in this lesson.

Add the blue code to SalesUserInterface:

CODE TO EDIT: Inner Class InitPanel in SalesUserInterface
package salesGUI;
    
import java.awt.BorderLayout;
import java.awt.Dimension; 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
    
public class SalesUserInterface extends JFrame{
    SalesApp app;
    JMenuBar mb;
    JMenu m;
    JMenuItem q, r, s, t;
    JLabel peopleLabel;
    JTextField peopleField;
    JButton jbNumPeople, done;
        
    public SalesUserInterface(SalesAPP myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new JMenuBar();
        setJMenuBar(mb);
        m = new JMenu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });
        InitPanel specifyNumber = new InitPanel();
        add("North", specifyNumber);
        pack();
        setVisible(true);
    }
    
    private class InitPanel extends JPanel{
        public InitPanel() {
            peopleLabel = new JLabel("Enter the number of sales people");
            add(peopleLabel);
            peopleField = new JTextField(5);
            add(peopleField);
            jbNumPeople = new JButton("Submit");
            add(jbNumPeople);
        }
    }
}   

Save this SalesUserInterface and run the Main.java.

You'll see the "Enter the Number of Sales People" JLabel, an input JTextfield, and a Submit JButton. Of course, it doesn't do anything just yet.

OBSERVE: InitPanel
package salesGUI;
          
import java.awt.*;
import java.awt.Dimension;
import java.awt.event.*;
import javax.swing.*;
          
public class SalesUserInterface extends JFrame {
    SalesApp app;
    JMenuBar mb;
    JMenu m;
    JMenuItem q, r, s, t;
        JLabel peopleLabel;
        JTextField peopleField;
        JButton jbNumPeople, done;
    
    public SalesUserInterface(SalesAPP myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new MenuBar();
        setMenuBar(mb);
        m = new Menu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });
        InitPanel specifyNumber = new InitPanel();
        add("North", specifyNumber);
        pack();
        setVisible(true);
    
    }
    
    public class InitPanel extends JPanel{
        public InitPanel() {
            peopleLabel = new JLabel("Enter the number of sales people");
            add(peopleLabel);
            peopleField = new JTextField(5);
            add(peopleField);
            jbNumPeople = new JButton("Submit");
            add(jbNumPeople);
        }
    }
}
  

We created a new class called InitPanel, which extends JPanel. We added a JLabel, JTextfield, and JButton. We used the add() method from JPanel to add each of those instantiated objects to our JPanel. Then we added the variables used in InitPanel to the global scope of SalesUserInterface. You'll see why we did that later in this lesson.

OBSERVE
InitPanel specifyNumber = new InitPanel();
add("North", specifyNumber);

Just for practice, try changing "North" to "East" or "South" and running the program again to observe the effect it has.

We want our GUI to look like this:

So next, we need to create the input panel to add to our JFrame. We'll make a class called InputPanel, and implement it as inputPanel on our SalesUserInterface. Let's make it a separate class (we might want to reuse it someday). In this particular class, we'll extend JPanel and layer more JPanels onto it. Here's a graphical representation of what we'll be adding to our InputPanel:

In the java4_Lesson1 project, create an InputPanel class as shown:

Type InputPanel as shown in blue:

CODE TO TYPE: InputPanel
package salesGUI;
    
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
          
public class InputPanel extends JPanel {
    JPanel topPanel;
    SalesApp app;
    JLabel prompt;
          
    public InputPanel(SalesApp container) {
        this.app = container;
        this.setLayout(new BorderLayout());
        topPanel = new JPanel();
        topPanel.setLayout(new FlowLayout());
        add("North", topPanel);
        prompt = new JLabel("Give values for each salesperson:");
        topPanel.add(prompt);
    }
}

Save it. We can't view it on our SalesUserInterface yet, because we haven't added this InputPanel to our SalesUserInterface JFrame. Let's do that now!

In your SalesUserInterface.java file, add the code shown in blue:

CODE TO EDIT: SalesUserInterface
package salesGUI;
          
java.awt.BorderLayout;
import java.awt.Dimension; 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
          
public class SalesUserInterface extends JFrame{
    SalesApp app;
    JMenuBar mb;
    JMenu m;
    JMenuItem q, r, s, t;
    JLabel peopleLabel;
    JTextField peopleField;
    JButton jbNumPeople, done;
          
    public SalesUserInterface(SalesAPP myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new JMenuBar();
        setJMenuBar(mb);
        m = new JMenu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
             public void actionPerformed(ActionEvent e) {
                 System.exit(0);
             }
        });
        InitPanel specifyNumber = new InitPanel();
        add("North", specifyNumber);
        InputPanel inputPanel = new InputPanel(app);
        add("Center",inputPanel);
        pack();
        setVisible(true);
    }
          
    public class InitPanel extends JPanel {
        public InitPanel() {
            peopleLabel = new JLabel("Enter the number of sales people");
            add(peopleLabel);
            peopleField = new JTextField(5);
            add(peopleField);
            jbNumPeople = new JButton("Submit");
            add(jbNumPeople);
        }
    }  
}      

Save this SalesUserInterface and run the Main. You'll see the prompt Give values for each salesperson. That's our topPanel!

So far, we've added the topPanel, a JPanel, into InputPanel. We still need to make the middle panel to do all of the work in InputPanel. We'll add some code to prepare our InputPanel to accept the number of sales people entered from the InitPanel as well.

CODE TO EDIT: InputPanel
package salesGUI;
              
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
             
public class InputPanel extends JPanel {
              
    JPanel topPanel, middlePanel, bottomPanel, leftPanel, rightPanel;
    SalesApp app;
    JLabel prompt, doneLabel, jlSalesBar;
    JLabel[] jlSales;                        
    JButton done; 
    JTextField[] jtfSales;
    JTextField jtfSalesBar; 
    int numPeople;
              
    public InputPanel(SalesApp container, int numPeople, int gridX) {
        this.app = container;
        this.numPeople = numPeople;
        this.setLayout(new BorderLayout());
        topPanel = new JPanel();
        topPanel.setLayout(new FlowLayout());
        middlePanel = new JPanel(new GridLayout(numPeople, gridX));
        bottomPanel = new JPanel();
        bottomPanel.setLayout(new FlowLayout());
        leftPanel = new JPanel();
        rightPanel = new JPanel();
        add("North", topPanel);
        add("Center", middlePanel);
        add("South", bottomPanel);
        add("East", rightPanel);
        add("West", leftPanel);
        jlSales = new JLabel[numPeople];
        jtfSales = new JTextField[numPeople];
        prompt = new JLabel("Give values for each salesperson:");
        topPanel.add(prompt);
        
        for (int x = 0; x < numPeople; x++)
        {
            jlSales[x] = new JLabel("Sales Person " + (x+1));
            jtfSales[x] = new JTextField("0",8);
            middlePanel.add(jlSales[x]);
            middlePanel.add(jtfSales[x]);
        }                                                
        jlSalesBar = new JLabel("Enter a value for the sales goal");
        bottomPanel.add(jlSalesBar);
        jtfSalesBar = new JTextField("0",8);
        bottomPanel.add(jtfSalesBar);
        doneLabel = new JLabel("Click when all are entered:");
        bottomPanel.add(doneLabel);
        done = new JButton("All Set");
        bottomPanel.add(done);
    }
}                   

Save it. We've added lots of new code here. Let's just get it working so we can actually see it in action first, then we'll go over it in detail.

In order for the button in the InitPanel to work, we'll create a new private inner class in SalesUserInterface.java that will serve as the button's listener. Let's call it NumPeopleSalesListener.

In SalesUserInterface.java, add the code shown in blue:

CODE TO EDIT: SalesUserInterface
package salesGUI;
     
java.awt.BorderLayout;
import java.awt.Dimension; 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
     
public class SalesUserInterface extends JFrame{
    SalesApp app;
    JMenuBar mb;
    JMenu m, m1;
    JMenuItem q,r,s,t;
    InputPanel inputPanel;
    JLabel peopleLabel;
    JTextField peopleField;
    JButton jbNumPeople, done;
    int numPeople;
    boolean processed = false;
    
    public SalesUserInterface(SalesAPP myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new JMenuBar();
        setJMenuBar(mb);
        m = new JMenu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });
     
        InitPanel specifyNumber = new InitPanel();
        add("North", specifyNumber);
        // REMOVE the next two lines.
        InputPanel inputPanel = new InputPanel(app);
        add("Center",inputPanel);
        pack();
        setVisible(true);
    }
     
    private class InitPanel extends JPanel {
        public InitPanel() {
            peopleLabel = new JLabel("Enter the number of sales people");
            add(peopleLabel);
            peopleField = new JTextField(5);
            add(peopleField);
            jbNumPeople = new JButton("Submit");
            add(jbNumPeople);
            jbNumPeople.addActionListener(new NumSalesPeopleListener());
        } 
    }
    
    private class NumSalesPeopleListener implements ActionListener {   
        public void actionPerformed(ActionEvent event){    
            if (inputPanel != null)
            {
                remove(inputPanel);
                app = new SalesApp();
            }
            numPeople = Integer.parseInt(peopleField.getText());  
            inputPanel = new InputPanel(app, numPeople, 2);
            add("Center", inputPanel);
            SalesUserInterface.this.validate();   
        }
    }     
}

Save it and run Main.java. When your application appears, type in a number and press Submit. You'll see the input fields for your salespeople.

Now let's go over this, bit by bit. First we'll look over the code we added to InputPanel:

OBSERVE: InputPanel
package salesGUI;
          
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
          
public class InputPanel extends JPanel {
    JPanel topPanel, middlePanel, bottomPanel, leftPanel, rightPanel;
    SalesAPP app;
    JLabel prompt, doneLabel, jlSalesBar;
    JLabel[] jlSales;                        
    JButton done; 
    JTextField[] jtfSales;
    JTextField jtfSalesBar; 
    int numPeople;
          
    public InputPanel(SalesApp container,int numPeople , int gridX) {
        this.app = container;
        this.numPeople = numPeople;
        this.setLayout(new BorderLayout());
        topPanel = new JPanel();
        topPanel.setLayout(new FlowLayout());
        middlePanel = new JPanel(new GridLayout(numPeople, gridX));
            
        bottomPanel = new JPanel();
        bottomPanel.setLayout(new FlowLayout());
        leftPanel = new JPanel();
        rightPanel = new JPanel();
        add("North", topPanel);
        add("Center", middlePanel);
        add("South", bottomPanel);
        add("East", rightPanel);
        add("West", leftPanel);
        jlSales = new JLabel[numPeople];
        jtfSales = new JTextField[numPeople];
          
        add("North", topPanel);
        prompt = new JLabel("Give values for each salesperson:");
        topPanel.add(prompt);
        
        for (int x = 0; x < numPeople; x++)
        {
            jlSales[x] = new JLabel("Sales Person " + (x+1));
            jtfSales[x] = new JTextField("0",8);
            middlePanel.add(jlSales[x]);
            middlePanel.add(jtfSales[x]);
        }                                              
        jlSalesBar = new JLabel("Enter a value for the sales goal");
        bottomPanel.add(jlSalesBar);
        jtfSalesBar = new JTextField("0",8);
        bottomPanel.add(jtfSalesBar);
        doneLabel = new JLabel("Click when all are entered:");
        bottomPanel.add(doneLabel);
        done = new JButton("All Set");
        bottomPanel.add(done); 
    }
}   

The code in blue is already familiar, so we'll turn our attention to the new stuff. When we call this InputPanel() constructor in SalesUserInterface, we will supply the parameters numPeople and gridX. Those parameters are used in the GridLayout(rows, cols) constructor (go ahead and look up GridLayout in the API). numPeople is the number of rows that our grid will have and gridX is the total number of columns our grid will have.

The code in red is a for statement that is indexed by x up to numPeople. We create an array of both JLabel and JTextField components, then add them to the middlePanel. When we add components using add, the GridLayout layout manager automatically adds them from left-to-right and top-to-bottom, and allows them each the same amount of space. Nice.

Now, look at the code we added to SalesUserInterface:

OBSERVE: SalesUserInterface.java
package salesGUI;
          
java.awt.BorderLayout;
import java.awt.Dimension; 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
          
public class SalesUserInterface extends JFrame{
    SalesApp app;
    JMenuBar mb;
    JMenu m, m1;
    JMenuItem q,r,s,t;
    InputPanel inputPanel;
    JLabel peopleLabel;
    JTextField peopleField;
    JButton jbNumPeople, done;
    int numPeople;
    boolean processed = false;
    
    public SalesUserInterface(SalesApp myApp) {
        app = myApp;
        app.setMyUserInterface(this);
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(600, 600));
        mb = new JMenuBar();
        setJMenuBar(mb);
        m = new JMenu("File");
        mb.add(m);
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener(){
             public void actionPerformed(ActionEvent e) {
                 System.exit(0);
             }
        });
        
        InitPanel specifyNumber = new InitPanel();
        add("North", specifyNumber);
        
        pack();
        setVisible(true);
    }
          
    private class InitPanel extends JPanel {
        public InitPanel() {
            peopleLabel = new JLabel("Enter the number of sales people");
            add(peopleLabel);
            peopleField = new JTextField(5);
            add(peopleField);
            jbNumPeople = new JButton("Submit");
            add(jbNumPeople);
            jbNumPeople.addActionListener(new NumSalesPeopleListener());
        } 
    }
    
    private class NumSalesPeopleListener implements ActionListener {   
        public void actionPerformed(ActionEvent event){    
            if (inputPanel != null)
            {
                remove(inputPanel);
                app = new SalesAPP();
            }
            numPeople = Integer.parseInt(peopleField.getText());  
            inputPanel = new InputPanel(app,numPeople, 2);
            add("Center", inputPanel);
            SalesUserInterface.this.validate();   
        }
    }
}

We've added the actionlistener NumSalesPeopleListener to the JButton jbNumPeople. And we've added the NumSalesPeopleListener class that implements ActionListener. In the implemented actionPerformed() method, we've added an if statement that checks to see if an inputPanel exists already. If we change the number of sales people, then we rebuild that existing inputPanel. We remove(inputPanel) and create a new SalesApp to pass to the new InputPanel. We retrieve the numPeople using the getText() method in peopleField (a JTextField object). Now, when we create an instance of InputPanel, we pass it numPeople (the number of rows we want) and 2 (the number of columns we want).

Next, we add the inputPanel, position it in the "Center", and then call SalesUserInterface.this.validate(). We call JFrame's validate() method when we rebuild and re-add the inputPanel component. In our code, we called pack() before we called setVisible(). Once a panel is visible on a JFrame, we call validate() to get our application to redraw. Because NumSalesPeopleListener is an inner class, we can use SalesUserInterface.this to access the JFrame's validate() method.

So far, so good. Now let's turn our InputPanel into a listener and make our done JButton grab the numbers the user enters and send them to our SalesApp.

Edit InputPanel.java as shown in blue:

CODE TO EDIT: InputPanel
package salesGUI;
          
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
          
public class InputPanel extends JPanel implements ActionListener {
    JPanel topPanel, middlePanel, bottomPanel, leftPanel, rightPanel;
    JLabel[] jlSales;                        
    JButton done; 
    SalesApp app;
    JLabel prompt, doneLabel, jlSalesBar; 
    JTextField[] jtfSales; 
    JTextField jtfSalesBar; 
    int numPeople; 
    int [] sales;
    int goal;
    
    public InputPanel(SalesAPP container, int numPeople, int gridX) {
        this.app = container;
        this.numPeople = numPeople;
        sales = new int[numPeople];
        this.setLayout(new BorderLayout());
        topPanel = new JPanel();
        topPanel.setLayout(new FlowLayout());
        middlePanel = new JPanel(new GridLayout(numPeople, gridX));
        bottomPanel = new JPanel();
        bottomPanel.setLayout(new FlowLayout());
        leftPanel = new JPanel();
        rightPanel = new JPanel();
        add("North", topPanel);
        add("Center", middlePanel);
        add("South", bottomPanel);
        add("East", rightPanel);
        add("West", leftPanel);
        jlSales = new JLabel[numPeople];
        jtfSales = new JTextField[numPeople];
        prompt = new JLabel("Give values for each salesperson:");
        topPanel.add(prompt);
        
        for (int x = 0; x < numPeople; x++)
        {
            jlSales[x] = new JLabel("Sales Person " + (x+1));
            jtfSales[x] = new JTextField("0",8);
            middlePanel.add(jlSales[x]);
            middlePanel.add(jtfSales[x]);
        }                                                
        jlSalesBar = new JLabel("Enter a value for the sales goal");
        bottomPanel.add(jlSalesBar);
        jtfSalesBar = new JTextField("0",8);
        bottomPanel.add(jtfSalesBar);
        doneLabel = new JLabel("Click when all are entered:");
        bottomPanel.add(doneLabel);
        done = new JButton("All Set");
        bottomPanel.add(done);
        done.addActionListener(this);
    }
         
    public void actionPerformed(ActionEvent event) {
        if(event.getSource() instanceof JButton)
        {
            if ((JButton)event.getSource() == done) 
            {
                for (int x = 0; x < numPeople; x++)
                {
                    sales[x] = Integer.parseInt(jtfSales[x].getText());
                }
                app.setSales(sales);
                goal = Integer.parseInt(jtfSalesBar.getText());
                app.setSalesBar(goal);
            }
        }
     }
}

Save and run it (run the Main.java). Now type in a number (we used 4) and when the input panel comes up, enter numbers into that as well; include the sales goal. Then click All Set as shown:

The System.out.print output appears in the Console:

OBSERVE: Changes to InputPanel
package salesGUI;

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

public class InputPanel extends JPanel implements ActionListener {
    Panel topPanel, middlePanel, bottomPanel, leftPanel, rightPanel;
    JLabel[] jlSales;                       
    JLabel  prompt, doneLabel, jlSalesBar;
    JTextField[] jtfSales;                  
    JTextField jtfSalesBar;                 
    JButton done;
    SalesApp app;      
    int numPeople;
    int [] sales;
    int goal;

    public InputPanel(SalesApp container, int numPeople, int gridX){
        this.app = container;
        this.numPeople = numPeople;
        sales = new int[numPeople];
        this.setLayout(new BorderLayout());  
        topPanel = new Panel();
        topPanel.setLayout(new FlowLayout());
        middlePanel = new Panel();
        middlePanel.setLayout(new GridLayout(numPeople, gridX));
        bottomPanel = new Panel();
        bottomPanel.setLayout(new FlowLayout());
        leftPanel = new Panel();
        rightPanel = new Panel();
        add("North", topPanel);
        add("Center", middlePanel);
        add("South", bottomPanel);
        add("East", rightPanel);
        add("West", leftPanel);
        
        jlSales = new JLabel[numPeople];
        jtfSales = new JTextField[numPeople];
        prompt = new JLabel("Give values for each salesperson:");
        topPanel.add(prompt);
        for (int x = 0; x < numPeople; x++)
        {
            jlSales[x] = new JLabel("Sales Person " + (x+1));
            jtfSales[x] = new JTextField("0",8);
            middlePanel.add(jlSales[x]);
            middlePanel.add(jtfSales[x]);
        }                                                
        jlSalesBar = new JLabel("Enter a value for the sales goal");
        bottomPanel.add(jlSalesBar);
        jtfSalesBar = new JTextField("0",8);
        bottomPanel.add(jtfSalesBar);
        doneLabel = new JLabel("Click when all are entered:");
        bottomPanel.add(doneLabel);
        done = new JButton("All Set");
        bottomPanel.add(done);
        done.addActionListener(this);
    }

    public void actionPerformed(ActionEvent event){
        if (event.getSource() instanceof JButton)
        {
            if ((JButton)event.getSource() == done) 
            {
                for (int x = 0; x < numPeople; x++)
                {
                    sales[x] = Integer.parseInt(jtfSales[x].getText());
                }
                app.setSales(sales);
                goal = Integer.parseInt(jtfSalesBar.getText());
                app.setSalesBar(goal);
            }
        }
    }
}

The actionPerformed() method of this InputPanel class determines whether the source of the event is a JButton. If it is, we use a for loop to go through the number of people and look in each of the TextFields defined by the jtfSales[] array. We use getText() to get the text the user typed in and we use Integer.parseInt() to convert that text into an integer. Then we call the setSales() method of the SalesApp object. We determine the value of the goal and set the salesBar to that value.

Okay, nice work! Take a break, pat yourself on the back, and bask in the glory of your accomplishments so far! We'll do the Output Panel for this user interface in the next lesson. See you there!