Add Time Value of Money Logic to the Interface

In this step, we will add time value of money logic to the calculator interface that we created in Step 3.   We will add the logic by simply dropping the non-visual com.cedarspring.TVM bean onto the BeanBox and visually wiring it to the graphical user interface elements

Load the Calculator Interface

Open the BeanBox utility.  Then select File-->Load from the pulldown menu of the BeanBox panel, enter gui.tmp as the file name, and finally click Open.  The GUI interface that we created in the last step should appear in the center BeanBox panel.

Add the TVM Bean

Click on the TVM bean in the ToolBox panel.  The cursor should change to a cross.  Now, move the cursor to any unused area at the bottom of the BeanBox panel and click once.  Even though TVM is a non-visual Bean that will not appear as a graphical element in the final applet, the BeanBox utility will temporarily represent it as a rectangle with the label "TVM" to assist in wiring.  Your BeanBox panel should look like this:

Bind the BigDecimalField and TVM Properties

In this step we will bind the value properties of the five BigDecimalFields to the presentValue, futureValue, payment, interestPerYear, and numberOfPeriods properties of the TVM Bean.  Then when a numerical value is entered into one of the five entry fields, that BigDecimalField bean will notify the TVM bean that the value of a property has changed.  Likewise, when one of the TVM properties changes, the TVM bean will notify the corresponding BigDecimalField Bean.   This insures that property values stored internally in the TVM Bean will always be in sync with values in the visual display.  You can learn more about bound properties and how to wire them in the BeanBox in Chapter 2 of The JavaBeans Tutorial.

Click on the TVM Bean at the bottom of the center BeanBox panel (not the one in the ToolBox!) once to highlight it.  Now select Edit-->Bind property from the pulldown menu.  Click presentValue in the dialog that pops up to select it as the source property in the TVM bean and then click OK.    Move the cursor to the top BigDecimalField and click anywhere in the field.  As you move the cursor, a red "rubber band" will  stretch between TVM and the field to show that they are being bound.  From the dialog that pops up, select value as the target property in the BigDecimalField bean and then click OK.

We have only bound presentValue in one direction (TVM to BigDecimalField).   TVM will notify the BigDecimalField when the presentValue field changes.  However, we also want BigDecimalField to  notify TVM when its value changes.  Click on the top BigDecimalField to highlight it.  Now open Edit-->Bind property from the pulldown menu.  Click value in the dialog that pops up to select it as the source property and then click OK. Move the cursor to TVM and click anywhere in the rectangle.    Select presentValue as the destination property from the dialog that pops up and then click OK.  Now the two will stay in sync.

Repeat this pattern to bind the remaining four BigDecimalFields to their corresponding TVM properties:

Hook the Buttons to TVM Compute Methods

Next we will connect each button on the right-hand side of the five entry fields to a corresponding compute method in the TVM Bean.  For example, when the button labeled "Present Value" is pressed, it will generate an ActionEvent.   When this occurs, we want to invoke the computePresentValue() method in the TVM Bean.  This method will calculate a new presentValue based on the values in the other four fields. 

Click on the button labeled "Present Value" to highlight it.   Select Edit-->Events-->action-->actionPerformed from the pulldown menu. Move the cursor over the TVM Bean at the bottom of the panel.  A red "rubber band" will stretch between the button and the TVM bean to show that the action event is being connected to TVM.  Click on TVM and select computePresentValue as the target method from the dialog box.  Click OK.

Repeat this pattern to connect the remaining four buttons to their corresponding TVM compute methods:

Hook the Clear Button to the TVM Clear Method

Click on the button labeled "Clear" to highlight it.   Select Edit-->Events-->action-->actionPerformed from the pulldown menu. Move the cursor over the TVM Bean at the bottom of the panel.  A red "rubber band" will stretch between the button and the TVM bean to show that the action event is being connected to TVM.  Click on TVM and select clear as the target method from the dialog box.  Click OK.  Now when the Clear button is clicked, the tvm.clear() method will be invoked which will clear the five edit fields.

Bind the TVM message Property to the ChangeReporter Field

Click on the TVM Bean at the bottom of the center BeanBox panel (not the one in the ToolBox!) once to highlight it.  Now open Edit-->Bind property from the pulldown menu.  Click message in the dialog that pops up to select it as the source property and then click OK.    Move the cursor to the ChangeReporter Bean and click anywhere in the field.  As you move the cursor, a red "rubber band" will  stretch between TVM and the field to show that they are being bound.  Select text as the target property from the dialog that pops up and then click OK. Now when the message property of TVM changes, the text will be displayed in the ChangeReporter field.

Limit Range of Values Allowed in Entry Fields

The TVM bean only accepts interest rate values between 0 and 999% and number of period values that are whole numbers between 0 and 1200. When we enter a value outside of those ranges, the bean will fire an error event and set the message property to an appropriate error message.  However, it is probably better to catch these errors earlier, before they are passed to the TVM bean.  We can do this by modifying the min-max property values of the BigDecimalField beans.

Click on the interestRate entry field (fourth from the top) to highlight it.  Move to the property sheet panel on the far right side of your screen and enter 999 into the maxValue field.  Check that minValue is set to 0. Now, change both minValueEnabled and maxValueEnabled to true.  Setting the min and max values have no effect utill you enable them.

Click on the numberOfPeriods field to highlight it.  Change the maxValue to 1200 and enable min and max values. Set the scale property to 0 so that only whole numbers can be entered.

Now, test the fields.  Enter 320 into the numberOfPeriods field and press return. The value should be accepted.  Next, enter -1. You should hear a "beep" and the last valid value (320) should reappear.  Also test with 0, 1200, 1200.5, and 1201.

Save a Copy of the Calculator

Select Save from the pulldown menu menu.  Enter calc.tmp as the file name and click Save.  Now you can restore the calculator at any time by selecting Load from the File menu and entering calc.tmp as the file to load.