Lesson 7: Create the main Rich UI handler

The main page uses the EGL portal widget to manage communication between different handlers.

As noted in an earlier lesson, Rich UI gives a new meaning to the long-standing notion of Model View Controller (MVC), which is redefined specifically for logic that runs in the browser. Similarly, Rich UI gives a new meaning to the words portal and portlet.

In general, a portal is a web page that controls independent UI components called portlets. In the traditional use of these terms, a portal is server-side code. The portlets embedded by the portal are web-page snippets, each of which might be stored in a different remote location. The web page is constructed on the server where the portal code resides, and the completed web page is transferred from the server to the browser.

In contrast, a Rich UI portal is a widget that runs in the browser and that references a set of portlet widgets, each of which references a Rich UI handler. The next sections demonstrate how to code a portal and portlets in Rich UI.

Create the MainHandler handler

Create a new Rich UI Handler in the handlers package of the MortgageUIProject project, as you did in the previous lesson. The handler name in this case is MainHandler. The Handler opens in the Design view of the Rich UI editor.
If you do not see the Samples drawer in the Palette view, click the Refresh palette button to the left of the Palette view.
Select the initial GridLayout widget that was created for the handler. Make sure the entire widget is surrounded by the dotted line.
Press the Delete key to remove the widget.
From the Samples drawer of the palette, drag a portal widget onto the editor and give it the following name:
```
mortgagePortal
```
At the bottom of the editor, click the Source tab.
In the mortgagePortal declaration, change the number of columns to 2, and set the column widths to 350 and 650. The content of the file is as shown here:
After the mortgagePortal declaration, skip a line and add the following declarations:
```
	calculatorHandler MortgageCalculatorHandler{};
	resultsHandler CalculationResultsHandler{};
```
These statements declare two variables, each of which is based on a Handler part; in this case, a Handler part developed in this tutorial.

Skip a line and add the following code:

calculatorPortlet Portlet{children = [calculatorHandler.ui],
   title = "Calculator"};
resultsPortlet Portlet{children = [resultsHandler.ui],
   title = "Results", canMove = TRUE, canMinimize = TRUE};

Each new portlet variable is declared with a reference to the initial UI in the embedded handler.

To remove error marks, press Ctrl+Shift+O.
Code the start function as follows:
```
function start()
   mortgagePortal.addPortlet(calculatorPortlet, 1);
   mortgagePortal.addPortlet(resultsPortlet, 1);

   // Subscribe to calculation events 
   InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);

   // Initial state is minimized
   resultsPortlet.minimize();
end	
```
The code acts as follows:
- Adds the previously declared portlets to the portal: one to show the calculator, and another to show the pie chart.
- Ensures that the main handler is subscribed to the same event as CalculationResultsHandler, in this case to ensure that the restorePortlets function runs when the remote service returns a mortgage calculation.
- Minimizes the second portlet so that at run time, the pie chart is not visible initially.
After the start function, add the function that will be invoked when the service returns a calculation:
```
function restorePortlets(eventName STRING in, dataObject ANY in)
   if(resultsPortlet.isMinimized())
      resultsPortlet.restore();
   end
end
```
The portlet-specific restore function causes the pie chart to be displayed.
To remove the error marks, press Ctrl+Shift+O, and 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 7.

Test the portal

Test the main portal to make sure that the results portlet receives changes from the calculation portlet.

At the bottom of the editor, click Preview. EGL displays the main handler, where the portal is declared. The handler displays the two subordinate portlets.
Click Calculate. The animated image indicates that processing is in progress. When the calculation finishes, the pie chart is displayed.
Move your cursor over one of the pie chart sections for an expanded view.
Change any of the calculation values and click Calculate again. The pie chart reflects the changes in the proportion of principal to interest.
Close the file.

Lesson checkpoint

You learned how to complete the following tasks:

Create a portal widget.
Add portlets to the portal and, in this way, make available the handlers that you created in previous lessons.

In the next lesson, you add a portlet to list your mortgage calculations.

< Previous | Next >