Graphical User Interfaces, continued
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.


Making the Output Panel

Now that we've created the input panel and have output going to the console, let's create a Panel to display the output:

We can take advantage of JLabel's ability to display HTML to format the output.

Using the same java4_Lesson1 project we used in the previous lesson, create an OutputPanel class as shown:

The output panel we're going to build will actually consist of two panels: one in the East area and one in the West area of the layout. They will be used to display the output of the application to the user.

Type OutputPanel as shown in blue:

CODE TO TYPE: OutputPanel
package salesGUI;

import javax.swing.*;
import java.text.DecimalFormat;

public class OutputPanel extends JPanel {
	
    JLabel jlSalesOutput;
    JPanel leftPanel, rightPanel;
    JLabel jlSalesBar;
    JTextField jtfSalesBar;
    JButton done;
    SalesApp app;      
    int salesBar;
    int [] sales; 

    public OutputPanel(SalesApp container) {
        app = container;
        sales = app.getSales();
        leftPanel = new JPanel();
        rightPanel = new JPanel();
        add("East", rightPanel);
        add("West", leftPanel);
        jlSalesOutput = new JLabel();
        rightPanel.add(jlSalesOutput);
        jlSalesOutput.setText("");
    }
}

Next we'll add methods to format and display the results. The writeOutput() method uses concatenation (+=) to build a +=txtOutput String that contains all of our output. We are using JLabel's ability to display HTML content, and displaying the data as we would in an HTML document.

NoteHTML break tags (<br>) are used for new lines in the txtOutput Strings for the output JLabel.

CODE TO EDIT: OutputPanel
package salesGUI;

import java.awt.Panel;
import javax.swing.*;
import java.text.DecimalFormat;

public class OutputPanel extends JPanel {
  
    JLabel jlSalesOutput;
    Panel leftPanel, rightPanel;
    JLabel jlSalesBar;
    JTextField jtfSalesBar;
    JButton done;
    SalesApp app;      
    int salesBar;
    int [] sales; 

    public OutputPanel(SalesApp container) {
        app = container;
        sales = app.getSales();
        leftPanel = new Panel();
        rightPanel = new Panel();
        add("East", rightPanel);
        add("West", leftPanel);
        jlSalesOutput = new JLabel();
        rightPanel.add(jlSalesOutput);
        jlSalesOutput.setText("");
    }

    public void refreshOutput(){
        jlSalesOutput.setText("");
    }

    protected void writeOutput(){  
        app.calculateMinMax();
        DecimalFormat df1 =  new DecimalFormat("####.##");  
        // Build the output string like an HTML doc 
        String txtOutput = 
           "<html>Sales Figures<br>__________________________<br>";
        for (int x = 0; x < sales.length; x++)
        {
            txtOutput += "Sales Person " + (x + 1) + ": $" + sales[x] + "<br>";
        }

        txtOutput += "<br>The lowest sales belongs to sales person " + 
            (app.getMin() + 1) + " with $" + sales[app.getMin()] + "<br>";
        txtOutput += "The highest sales belongs to sales person " + 
            (app.getMax() + 1) + " with $" + sales[app.getMax()] + "<br>";
        txtOutput += "<br>The total sales were: $ " + 
            app.getTotalSales() + "<br>";
        txtOutput += "The average sales was: $ " + df1.format(app.getAverage()) + 
            "<br><br>";
        txtOutput += createSalesBarInfo();
        txtOutput += "</html>";

        jlSalesOutput.setText(txtOutput);
        validate();
        repaint();
    }


    protected String createSalesBarInfo(){                                               
        String salesBarOutput = "";
        int overSalesBar = 0;
        int [] performance = app.determineTopSalesPeople();
        int [] sales = app.getSales();

        for (int x = 0; x < sales.length; x++)
        {
            if (performance[x] ==1)
            {
                overSalesBar++;
                salesBarOutput += "Sales person " + (x + 1) + 
                    " sold more than the sales goal with sales of "+ sales[x]+ "<br>" ;
            }
            else if (performance[x] ==0)
            {
               salesBarOutput += "Sales person " + (x + 1) + 
                   " exactly reached the sales goal with sales of "+ sales[x]+ "<br>" ;
            }
        }
        if (overSalesBar ==1)
            salesBarOutput += "Only " + overSalesBar + 
                " sales person sold more than the sales goal of " + app.getBar() + "<br><br>";
        else
            salesBarOutput += overSalesBar + 
                " sales people sold more than the sales goal of " + app.getBar() + "<br><br>";
        return salesBarOutput;     
    } 

}

Here we use JLabel's ability to display HTML to display the sales totals of each salesperson, and which were greater than, lower than, or equal to the sales bar.

For more information on the javax.swing.JLabel, look at the API, as well as How to Use Labels in the Java Tutorial on Using Swing Components.

Save the OutputPanel class.

Click on InputPanel.java. If you haven't done so, save it now--any errors you have should go away.

Click on SalesUserInterface.java; it should be free of errors as well. Now let's add the Results option and OutputPanel. Edit SalesUserInterface as shown in blue below:

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;
    OutputPanel results;  
    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");
        m1 = new JMenu ("Options"); 
        mb.add(m);
        mb.add(m1); 
        m.add(q = new JMenuItem("Exit"));
        q.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });
        
        m1.add(t= new JMenuItem("Results")); 
        t.addActionListener(new ActionListener() {  
            public void actionPerformed(ActionEvent e) {  
                if (processed) 
                { 
                    remove(results); 
                } 
                results = new OutputPanel(app); 
                add("South", results); 
                processed = true; 
                results.writeOutput();}
        }); 

        InitPanel specifyNumber = new InitPanel();
        add("North", specifyNumber);
        //InputPanel inputPanel = new InputPanel(app, numPeople, 2);
        //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 the Main class. Enter a number of salespeople, their sales numbers and the goal, and then click All Set. Select Options | Results, and you should see something like this: