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.


mortgagePortal

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.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.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: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.


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