Lesson 9: Embed the calculation history handler in the application

To add the calculation history handler to your page, you must change the results portlet and the main portal.

About this task

Change the results portlet

Procedure

As of the end of the previous lesson, the CalculationResultsHandler handler subscribes to a single event: mortgageApplication.mortgageCalculated. When that event occurs, the handler updates and re-displays the pie chart. However, the user might select a row in the history portlet and cause a different event to be published: mortgageApplication.mortgageResultSelected. If CalculationResultsHandler subscribes to that event, too, the handler can respond to the user's selection in the same way, by updating and re-displaying the pie chart.

The simplest way to subscribe to both events is to use the asterisk (*), which is a wildcard character that represents any event in a set of events. Do as follows:

In the Rich UI editor, open the CalculationResultsHandler.egl file and switch to the Source view.

In the start() function, find the following line:

InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);

Replace the lowest-level qualifier in the event name with the asterisk:
```
InfoBus.subscribe("mortgageApplication.*", displayChart);
```
EGL now calls the displayChart function whenever an event occurs if the name of the event begins with mortgageApplication..
Save and close the file.

Change the main portal

Procedure

For the history portlet, add lines that are similar to the lines for the other two portlets:

In the Rich UI editor, open the MainHandler.egl file and click the Source tab.
Immediately below the resultsHandler declaration, add a similar declaration for historyHandler:
```
historyHandler CalculationHistoryHandler{};
```

Immediately below the resultsPortlet declaration, add a similar declaration for historyPortlet:

historyPortlet Portlet{children = [historyHandler.historyResults_ui], 
			title = "History", canMove = TRUE, canMinimize = TRUE};

In the start function, below the existing calls to addPortlet, add the new portlet to the portal:
```
	mortgagePortal.addPortlet(historyPortlet, 1);
```
As you did with resultsPortlet, set historyPortlet to be minimized initially:
```
	historyPortlet.minimize();
```

Add code for historyPortlet to the end of restorePortlets() function:

		if(historyPortlet.isMinimized())
			historyPortlet.restore();
		end

Save the file. If you see errors in your source file, compare your code to the file contents in Finished code for MainHandler.egl after Lesson 9.

Results

Test the portal

About this task

Test the main portal to make sure that the new history portlet is displayed and works correctly.

Procedure

At the bottom of the editor, click Preview.
EGL displays the main portal and the three subsidiary portlets.
Click Calculate.
An animated image indicates that work is in progress. When the calculation finishes, the pie chart and history are displayed.
Change the term of the mortgage to 5 years and click Calculate again.
A row is added to the history list.
Click a cell in the first row of the history list.
The pie chart displays the values for the row selected in the history list.

Lesson checkpoint

About this task

You learned how to subscribe to multiple, similarly named events.

In the next lesson, you add a portlet to display a map of mortgage companies that are in a specified area of the United States.