Java, Swing, and Eclipse: The Calculator Lab.

ENGI 5895, Winter 2010

January 14, 2010

A very simple application

This was prepared with Eclipse 3.4 as the development environment.

Recommendation. Access my Quick Introduction to the AWT tutorial on the course website
and refer to it when needed.
1. Start Eclipse
If you get a workspace not available message, click OK

Set the workspace to somewhere on the H: drive. (Or if you are using your own computer, wherever you like.)
Note the workspace location.
Click Ok.

Close the Welcome window if there is one.

2. Create a new project (see Fig 1)
On the Menu select File / New / Project ....
Select Java Project and click Next.
Set Project Name to Calculator

Set the execution environement to the default.

Select Create separate folders for sources and class files

Click Finish. In the Package Explorer view you should see your project.
3. Create a class (see Fig 2)
Right-click on the Calculator project in the Package Explorer
On the context menu select New / Class.
Set Source folder to Calculator/src

Set the Package to calculator.

Set the Name to View

Set Modifiers to public

Set Superclass to javax.swing.JFrame

1

Figure 1:

Figure 2:

 Check checkboxes public static void main(String [] args) and Generate comments
Click on Finish.

4. Edit the import declaration to be

import javax.swing.*;
import java.awt.*;
5. Add a 0-parameter private constructor for View:
In the constructor for View call setSize(300,300), setVisible( true ) and setDefaultCloseOperation(JFrame.EXIT ON CLOSE)
Your constructor should look like this
private View() {
setSize(300,300) ;
setVisible( true ) ;
setDefaultCloseOperation(JFrame.EXIT ON CLOSE) ;
}
6. main is a bit complicated (and strange). It should look like this:
public static void main(String[] args) {
SwingUtilities.invokeLater( new Runnable() {
public void run() {
new View() ;
}} ) ;
}
7. Run the program (see Fig 3)
Save the file with CTRL-s

Check that there are no errors. (Errors will be indicated by red Xs in the Package
Explorer.)
In the Package Explorer, right click on the file View.java.

On the popup context menu, select Run As / Java Application

You should see the frame and should be able to close it.

Adding a Model
1. Obtain the Model.java file and the Op.java file from the courses website and save them
both to the Calculator/src/calculator directory.
2. In the Package Explorer, right click on the Calculator project and select Refresh.
3

Figure 3:
3. Open Model in the editor. Identify its public methods.
4. To the View class add an initialized private field
private Model model = new Model();

Adding some components

In the constructor for View:

1. Set the layout manager for the View by adding
setLayout(new FlowLayout() );
as the first line of the constructor.
2. Add (after the call to setLayout) code to add 10 buttons to the View, labeled 0 to 9. I added
each button with code
JButton digitButton = new JButton( Integer.toString(i) ) ;
add( digitButton ) ;
3. Also add a button labeled +, a button labelled Clear, and a button labelled =.
4. Declare a final private field of type JLabel. Call it valueLabel. Initialize this field by creating
a new JLabel.
5. In the constructor add the value label to the frame.
4

6. Add a call to refresh() at the end of Views constructor.

7. Create a new method in View
void refresh() {
valueLabel.setText( model.getResult() ) ; }
8. Add a call to refresh somewhere near the end of the constructor.
9. Try running your application. See Fig. 4

Figure 4:

Closing the loop

Create a class DigitListener that implements the interface java.awt.event.ActionListener. Each DigitListener should know a View and a Model. (I.e. it should have pointers to a View and to a Model
as its fields.) The constructor of DigitListener should record a pointer to a View, a pointer to a
Model, and an int. Since DigitListener implements ActionListener, it must have a subroutine with
signature
@Override public void actionPerformed( ActionEvent e )
This subroutine should update the model by calling digit and then refresh the view. (Note that
although the parameter is not used, it must still be declared.)
Back in Views constructor you need to create instances of DigitListener and associate them
with the appropriate listener like this.
JButton digitButton = new JButton( Integer.toString(i) ) ;
digitButton.addActionListener( new DigitListener( this, model, i ) ) ;
add( digitButton ) ;

Try your application now. Click on the digit buttons. You should see the eect in the operand
label.
Notice how the Swing framework is calling your code even though the dependence goes the
other way. This is an example of inversion of dependence.
Create a class OperationListener similar to DigitListener, but that calls method operation rather
than digit in the model. Note that the operation method of class Model takes a parameter of the
enumeration class Op. The Op class defines a number of constants of type Op. To refer to these,
you simply write Op.ADD or Op.CLEAR etc.
Associate an OperationListener with the + button, the Clear button, and the =
Figure 5 shows your application at this point as a UML class diagram.
Try your application now.

Figure 5:

More to try

Try adding more buttons. Try changing the style of the buttons. Try adding more operations to
the model. See if you can add buttons to change the precision or the base. If you prefer RPN,
create an RPN calculator. Make the calculator programmable.
Obviously there is much more to learn about layout of components within containers. Try using
GridLayout or GridBagLayout and also using JPanels and borders.