Lesson 6: Create the calculation results handler

The next handler that you create, CalculationResultsHandler, creates a pie chart to illustrate details that are issued by the previously created logic, MortgageCalculatorHandler.

About this task

The code that acts as an intermediary between the two handlers is an Infobus, which is an EGL library in the com.ibm.egl.rui project.

The Infobus works as follows:

A handler such as CalculationResultsHandler subscribes to an event of a specified name. At the time of subscription, the handler also gives the name of a function that will receive data when the specified event occurs. As a result of this subscription, the Infobus registers the function, maintaining the detail necessary to invoke the function later.
At the right moment, the same or a different handler publishes the event. This handler specifies both the event name and event-specific data and directs the Infobus to invoke the registered function.

You begin this lesson by dealing with the second of those two steps. You update the previously written MortgageCalculatorHandler handler to invoke the Infobus publish function when a new calculation is returned from the remote service. Then, you ensure that the CalculationResultsHandler handler has subscribed to the event.

The publish-and-subscribe makes possible the pie-chart display.

Publish the service results

Procedure

Find the displayResults() function that you created in the previous lesson. Add the following line before the end statement:
```
InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
```
The first argument is the event name, and the second is the record being passed to the functions that are registered for that event. Recall that the structure of that record is as follows:
```
record MortgageCalculationResult
   // user input
   loanAmount money;
   interestRate decimal(10, 8);
   term int;

   // calculated fields
   monthlyPayment money;
   interest money;
end
```
An error mark is displayed because the Infobus library is not being imported. To add the required import statement, press Ctrl+Shift+O. To remove the error mark, save the file.
The displayResults() function now looks as follows:
```
function displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
   inputRec_form.publish();
   hideProcessImage();
   InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
	end
```
As before, this code shows the payment amount in the payment field and uses the Rich UI MVC mechanism to publish the results of the calculation in the retResult record. The new statement involves a different kind of publish, making the record available to any widget that subscribes to the mortgageApplication.mortgageCalculated event.
Note:
The Infobus event names are case-sensitive. For example, mortgageApplication is different from MortgageApplication.
Save and close the file.

Create the CalculationResultsHandler handler

Procedure

In the MortgageUIProject project, right-click the handlers package and click New > Rich UI handler. These actions ensure that the New EGL Rich UI Handler page will reference the package.
Specify the source file name as CalculationResultsHandler and click Finish.
The handler opens in the Design view of the Rich UI editor.
As you did when you coded the calculator, reduce the size of the initial GridLayout widget to a single cell. On the General page of the Properties view, change the rows property to 1 and the columns property to 1.
Drag a PieChart widget from the Visualization drawer of the palette onto the single cell of the grid layout and give the widget the following name:
```
interestPieChart
```
EGL displays a default pie chart.
At the bottom of the editor, click the Source tab.
In the interestPieChart widget declaration, change the height property to 250.
You need only two sections in the pie chart. In the interestPieChart declaration, in the data field, replace the four lines that declare PieChartData records. Here is the new code:
```
new PieChartData{ y=1, text="Principal", 	color="#99ccbb"},
new PieChartData{ y=0, text="Interest", 		color="#888855"}
```
To calculate how much of the pie chart is taken by a given record, divide the y-field value for that record by the sum of y-field values. In this case, the division is 1/1, and the initial display shows the mortgage principal at 100%. The display at development time is only a placeholder until the application handles the first, default calculation at run time.
Subscribe to the Infobus event mentioned earlier by adding the following line to the start function:
```
InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);
```
This code ensures that the Infobus invokes the displayChart function whenever the specified event occurs. The next step will remove the error marks.
After the start function, add the displayChart function as follows and then organize the import statements by typing Ctrl+Shift+O:
```
function displayChart(eventName STRING in, dataObject ANY in)
   localPieData PieChartData[2];

   resultRecord MortgageCalculationResult = 
      dataObject as MortgageCalculationResult;
   localPieData = interestPieChart.data;
   localPieData[1].y = resultRecord.loanAmount;
   localPieData[2].y = resultRecord.interest;
   interestPieChart.data = localPieData;
end
```
When the event occurs, the displayChart function receives the input data into the dataObject parameter. The use of ANY as the parameter type ensures that you can use the Infobus mechanism to transfer any type of record.
Next, the function acts as follows:
- Creates the localPieData array, which is of type PieChartData[], as is appropriate for the data property of the pie chart.
- Assigns the received value to a record of type MortgageCalculationResult, in a statement that casts the second input parameter to the data type that is appropriate to your use of the Infobus:
```
resultRecord MortgageCalculationResult = 
   dataObject as MortgageCalculationResult;
```
- Assigns the data property of the pie chart, including color detail, to the new localPieData array.
- Assigns the received loan amount and interest value to that array.
- Forces the pie chart to refresh by updating its data property. Specifically, you assign the localPieData array to that property.
Save the file. If you see errors in your source file, compare your code to the file contents in Finished code for CalculationResultsHandler.egl after Lesson 6.

Test the pie chart

Procedure

Change to Preview view.
EGL displays a default pie chart showing 100% principal.
Close the file.

Lesson checkpoint

About this task

You learned how to complete the following tasks:

Use the InfoBus library to pass information between handlers.
Create a pie chart.

In the next lesson, you create the main handler, which uses the others.