Introduction to frames

A project with a frame A simple Event Running a Frame Object
Summary Practice Exercise

Learning Outcomes

On completion of this section you shall be familiar with

Download pdf version

Introduction

Up to now we have used the console to allow keyboard data to be inputted into the computer using System.in.read . Similarly we have used the same console to display the processed data using System.out.println. Although this worked reasonably well up to now where our input and output was relatively small, for serious data input we tend to use a GUI interface. Here we shall take a short look at an interface for a payroll application using a relatively simple version of the Pay class we have used earlier.

A Project with a Frame

Go to top

Here we shall be creating a project that has a class we have written ourselves called Pay and a frame that we shall create using our JDC.  First we shall list the class Pay solely for reference as there is noting in it that we have not met already.

Listing 15.1

 1

public class Pay

 2

{

 3

  private double hours, rate, gross, tax, nett;

 4

  private boolean validHours, validRate, calculateOK;

 5

  public Pay()

 6

  {

 7

    hours = 0;

 8

    rate = 0;

 9

    validHours = false;

 10

    validRate = false;

 11

    calculateOK = false;

 12

  }

 13

  public Pay(double h, double r)

 14

  {

 15

    setHours(h);

 16

    setRate(r);

 17

    calculate();

 18

  }

 19

  public void setHours(double h)

 20

  {

 21

    if((h>=5) && (h<=60))

 22

    {

 23

      hours = h;

 24

      validHours = true;

 25

    }

 26

    else

 27

      validHours = false;

 28

  }

 29

  public void setRate(double r)

 30

  {

 31

    if((r>=8) && (r<=50))

 32

    {

 33

      rate = r;

 34

      validRate = true;

 35

    }

 36

    else

 37

      validRate = false;

 38

  }

 39

  public double getHours()

 40

  {

 41

    if(calculateOK)

 42

      return hours;

 43

    else

 44

      return -1;

 45

  }

 46

  public double getRate()

 47

  {

 48

    if(calculateOK)

 49

      return rate;

 50

    else

 51

      return -1;

 52

  }

 53

  public double getGross()

 54

  {

 55

    if(calculateOK)

 56

      return gross;

 57

    else

 58

      return -1;

 59

  }

 60

  public double getTax()

 61

  {

 62

    if(calculateOK)

 63

      return tax;

 64

    else

 65

      return -1;

 66

  }

 67

  public double getNett()

 68

  {

 69

    if(calculateOK)

 70

      return nett;

 71

    else

 72

     return -1;

 73

 }

 74

  private void calculateGross()

 75

  {

 76

    gross = hours * rate;

 77

  }

 78

  private void calculateTax()

 79

  {

 80

    tax = gross * .25;

 81

  }

 82

  private void calculateNett()

 83

  {

 84

    nett = gross - tax;

 85

  }

 86

  public void calculate()

 87

  {

 88

    if(validHours && validRate)

 89

    {

 90

      calculateGross();

 91

      calculateTax();

 92

      calculateNett();

 93

      calculateOK = true;

 94

    }

 95

    else

 96

      calculateOK = false;

 97

  }

 98

  public String toString()

 99

  {

 100

    String msg;

 101

    msg = "Hours ";

 102

    msg = msg.concat(Double.toString(hours));

 103

    msg = msg.concat("\nRate ");

 104

    msg = msg.concat(Double.toString(rate));

 105

    msg = msg.concat("\nGross ");

 106

    msg = msg.concat(Double.toString(gross));

 107

    msg = msg.concat("\nTax ");

 108

    msg = msg.concat(Double.toString(tax));

 109

    msg = msg.concat("\nNett ");

 110

    msg = msg.concat(Double.toString(nett));

 111

    return msg;

 112

  }

 113

}

 

With our class in place we can now begin to create the Frame. To do this we click on File/New. This brings up the dialogue box in Fig 15.1

Fig 15.1

Here we select the General tab and from there pick Frame. Then when we click on OK we get Fig 15.2

Fig 15.2

This looks very much like the dialogue box for a class and we enter the name of our Frame in the text box labeled Class Name. Notice that the Base class combo box shows that our class will inherit javax.swing.JFrame.  This simply means that once we run our class we will have a visible window on our screens and not a nebulous object somewhere in the cyberspace of our computer’s memory.  In order to create the frame we simply click on OK.  This gives us the code shown below.

Listing 15.2

1

import java.awt.*;

 2

import javax.swing.*;

 3

public class PayFrame extends JFrame

 4

{

 5

  BorderLayout borderLayout1 = new BorderLayout();

 6

  public PayFrame()

 7

  {

 8

    try

 9

    {

 10

      jbInit();

 11

    }

 12

    catch (Exception exception)

 13

    {

 14

      exception.printStackTrace();

 15

    }

 16

  }

 17

  private void jbInit()

 18

      throws Exception

 19

  {

 20

    getContentPane().setLayout(borderLayout1);

 21

  }

 22

}

 

At this stage of the game you don’t need to concern yourself with any of the code. Instead click on the Design tab below the code and the display will alter to that in Fig 15.3.

 

Fig 15.3

Here we have a form in what is referred to as Design mode. Before we do anything with it we shall look at different parts of the display.  The column to the left of the form has a toolbox from which you can select objects to place on the form. (In some cases this column will appear as a toolbar running across the top.)  Here below the Swing button we have a button with OK written on it. This is a command button which we normally click to get our programme to perform some action. We shall be using this button shortly.  The jRadioButton object is used when we want to present the user with a series of options, only one of which may be selected. The jToggleButton object will not be used in our example but is used when we want to turn something from true to false or vice versa.  The jCheckBox object is used when we want to present the user with a series of choices, any number of which may be selected.  The jLabel object is used to display text on the screen. The user cannot directly alter this text.  The jTextField object is one of the most useful objects and is used both to display text and to accept keyboard input directly from the user. The JTextArea is similar to the jTextField except that it cannot accept input from the keyboard. For our application here we shall use jTextField, jLabel, jTextArea and jButton objects.

To the right of the Frame we have a list of the properties of the same Frame. The only one of them that we shall change is the Layout property which we shall change to null.

Now we are ready to add objects to the frame itself, beginning with a jTextField object. To do this we simply click on this object in the toolbar to the left and then draw it on the frame as shown in Fig 15.4 below.

Fig 15.4

Two properties of this object we shall have to change is the name and the text properties. Once we create our first text field the system gives it a default name of jTextField1. We shall change this to something more useful such as hoursField. To do this we simply edit out the current name and enter our own instead of it.  The convention when naming objects is to have two parts. The first part indicates what the object is to be used for and the second part indicates the type of object it is.  Since this is a text field that will hold the value of the hours worked the first half of the name is hours and the second is Field. 

The system also puts a default text value into the field of jTextField1. We simply edit this out to a blank.

Next we draw another field under this one which we shall name rateField since it will hold the value of the rate.  To the left of the two text fields we shall have two JLabel objects. We shall not change the names of those two object since we shall not be referring to them in our code, but we will change their text properties to Hours and Rate.

Beneath those we shall put a JTextArea object which will be used to display the results of the toString method of the class Pay and for this reason we shall name it as payDisplayArea. Finally we shall have a JButton object which we shall name calculateButton and whose text will be Calculate. Our display should now look something like Fig 15.5 below.

Fig 15.5

We have now completed the design of our Frame and thus we shall now look at the code behind it which is shown in Listing 15.3 below.

Listing 15.3

 1

import java.awt.*;

 2

import javax.swing.*;

 3

public class PayFrame extends JFrame

 4

{

 5

  public PayFrame()

 6

  {

 7

    try

 8

    {

 9

      jbInit();

 10

    }

 11

    catch (Exception exception)

 12

    {

 13

      exception.printStackTrace();

 14

    }

 15

  }

 16

  private void jbInit()

 17

      throws Exception

 18

  {

 19

    getContentPane().setLayout(null);

 20

    hoursField.setBounds(new Rectangle(201, 31, 137, 22));

 21

    rateField.setBounds(new Rectangle(201, 66, 137, 22));

 22

    jLabel2.setText("Rate");

 23

    jLabel2.setBounds(new Rectangle(49, 68, 86, 21));

 24

    payDisplayArea.setBounds(new Rectangle(201, 110, 146, 127));

 25

    calculateButton.setBounds(new Rectangle(136, 257, 142, 27));

 26

    calculateButton.setText("Calculate");

 27

    jLabel1.setText("Hours");

 28

    jLabel1.setBounds(new Rectangle(48, 32, 108, 22));

 29

    this.getContentPane().add(hoursField);

 30

    this.getContentPane().add(rateField);

 31

    this.getContentPane().add(jLabel1);

 32

    this.getContentPane().add(jLabel2);

 33

    this.getContentPane().add(payDisplayArea);

 34

    this.getContentPane().add(calculateButton);

 35

  }

 36

  JTextField hoursField = new JTextField();

 37

  JTextField rateField = new JTextField();

 38

  JLabel jLabel1 = new JLabel();

 39

  JLabel jLabel2 = new JLabel();

 40

  JTextArea payDisplayArea = new JTextArea();

 41

  JButton calculateButton = new JButton();

 42

}

 

Here we notice that a lot of extra code has been added to the class since we looked at it in Listing 15.2 – most of it inside the method jbInit. Also it has been added almost in the reverse order of what we would normally expect.  Thus at lines 36 – 41 objects have been created having names that we have specified on the form. Then inside the jbInit method those objects are given properties that determines where they will be placed on the frame and finally they are actually added to the frame. At line 20 the hoursField object is given properties that determines where it is to be positioned on the frame and what its size is going to be.  The first two values, 210 and 31 are the coordinates of its top left hand corner. Thus it will be positioned 201 pixels from the left of the frame and 31 pixels from the top of the frame.  The second and third values indicate the width and height of the object. In this case it will be 137 pixels wide and 22 pixels high. Lines 21, 23, 24, 25 and 28 do a similar job for the other objects.  Lines 22, 26 and 27 set the text values of the two labels and the button. Finally all of the objects are actually added to the frame at lines 29 – 34.

A simple Event

Go to top

Fig 15.6

  Our next task is to add an event to our form. Generally speaking an event is something that happens to one of the objects of the form that causes a piece of code to be run. In our case we would simply enter the values for the hours worked and the hourly rate into the two text field objects at the top of our frame and then click on the button. Clicking on the button is an event – specifically the actionPerformed event. To add this event to our button we first select the object itself as in Fig 15.6. Next we use the Events tab to the left and at the very top we see the actionPerformed event. We simply double click on this event, and immediately we are shown the code behind the frame where a new piece of code has been added as shown below.

 1

public void calculateButton_actionPerformed(ActionEvent e)

 2

  {

 3

 

 4

  }

 

This method is only part of the extra code that has been added but we shall only concentrate on this. Notice the method’s name – calculateButton_actionPerformed.  We can simply think of it as the method that will run when we click on the object named calculateButton. It is into this method that we shall put the code for calculating our payroll as shown below.

 1

  public void calculateButton_actionPerformed(ActionEvent e)

 2

  {

 3

    Pay p = new Pay();

 4

    p.setHours(Double.parseDouble(hoursField.getText().trim()));

 5

    p.setRate(Double.parseDouble(rateField.getText().trim()));

 6

    p.calculate();

 7

    payDisplayArea.setText(p.toString());

 8

  }

 

The firs thing we do is to create an object of the class Pay at line 3. at lines 4 and 5 its setHours and setRate methods are used to update the corresponding variables in the Pay object. Notice however how we pass the data to the Pay object. In line 4, the text field object hoursField will contain the value of hours but since it is a text field it can only hold text data or in other words String data.  Thus the getText method will return a String and not a numeric value.  For this reason the parseDouble method of the class Double is used to convert this to numeric format before passing it to the Pay object. Line 5 uses identical logic. At line 6 the calculate method is called and finally line 7 displays the results of the calculation on the text area object.

Running a Frame Object

Go to top

A frame is simply a Java class and thus in order to run it we shall simply create an object of it in the same way we created objects of all of our classes up to now. Below is our method main which creates our frame object for us.

 1

public class Untitled1

 2

{

 3

  public static void main(String[] args)

 4

  {

 5

    PayFrame pf = new PayFrame();

 6

    pf.setSize(500,500);

 7

    pf.setVisible(true);

 8

  }

 9

}

 

As we stated in line 5 an object of PayFrame is created. At line 6 its size is set to 500 pixels wide and 500 pixels tall. Line 7 makes it visible.  The result of running this would give a display as in Fig 15.7 below.

Fig 15.7

 Summary

Go to top
A frame is a GUI object that allows us to interact with our programme through text boxes and other objects. All frames are in fact child classes of the JFrame object, but containing code that controls their physical appearance on the screen.
In order to use a frame you simply add a new child class of JFrame to your project, draw text boxes, text areas, button, labels etc. Next ensure that your processing code receives its input data from the text boxes of the form and not from the keyboard and that the output is sent to the text area and not to System.out.println().

Practice

Go to top
Create a new project and copy the code for the class Person into it as shown in Listing 15.1. next create a frame class according to the instructions above. Add an actionPerformed event to the button and enter the code shown above into it. Now run the programme and check that the output meets your expectations.

Exercise

Go to top
Exercise 15.1


Modify the project from Exercise 14.1 as follows:
1 Add a frame to the project
2 Ensure that the frame has four text boxes to receive the Name, Address, Lawnmower code and Amount of Sale from the user. Also ensure that it has a text area for displaying the results of the calculation.
3 A single button on the form will read the values in the text boxes into the processing class, perform the calculations, display the results on the text area.