Welcome
Getting started
Do and Learn
Create a mortgage application with EGL Rich UI
Create a Rich UI application so that the user can do the following tasks: calculate monthly mortgage payments, given a loan amount and interest rate; display a pie chart that tells the interest and principal for the life of the mortgage; retrieve any of the payment calculations that were provided earlier to the same user; and display a map of the mortgage lenders who have offices in one or another U.S. zip code.
Lesson 12: Embed the map locator handler in the application
Add a new portlet to the main portal.

Overview
Getting started
- Tutorials
- Do and Learn
  - Introducing EGL
    In this tutorial, you will learn how to build a simple dynamic web site using EGL. This site has two pages: one to display a list of records in a database and another to allow users to change the data from one of those records.
  - Create a hello world program with EGL
    In this tutorial, you will learn how to write and run your first EGL program. Although the program you create will not be powerful or complex, it will demonstrate how an EGL program works.
  - Create a hello world service with EGL
    In this tutorial, you will learn how to build a simple web service with EGL. Then, you will create a client that uses this service.
  - Create a mortgage application with EGL Rich UI
    Create a Rich UI application so that the user can do the following tasks: calculate monthly mortgage payments, given a loan amount and interest rate; display a pie chart that tells the interest and principal for the life of the mortgage; retrieve any of the payment calculations that were provided earlier to the same user; and display a map of the mortgage lenders who have offices in one or another U.S. zip code.
    - Introduction
    - Lesson 1: Plan the mortgage application
      Design your application on paper before you begin coding.
    - Lesson 2: Set up the workspace
      Before you write your logic, create two EGL projects and import the Dojo samples.
    - Lesson 3: Create the mortgage calculation service
      Create a dedicated service to calculate monthly payments.
    - Lesson 4: Create the user interface for the calculator
      Start to build the calculator by using EGL wizards and then the Rich UI editor.
    - Lesson 5: Add code to the mortgage calculator handler
      Add functions to the handler that you created in the previous lesson.
    - 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.
    - Lesson 7: Create the main Rich UI handler
      The main page uses the EGL portal widget to manage communication between different handlers.
    - Lesson 8: Create the calculation history handler
      Create a table in which you can click a row to display a previous calculation.
    - 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.
    - Lesson 10: Create the map locator handler
      Begin to create a portlet where you can enter a mortgage code and see a list of mortgage places and a map. Click the name of a place in the list, and the map displays a location marker
    - Lesson 11: Add code to the map locator handler
      Complete the background code for the user interface that you created in the previous lesson.
    - Lesson 12: Embed the map locator handler in the application
      Add a new portlet to the main portal.
    - Lesson 13: Install Apache Tomcat
      You can use Apache Tomcat to display the web page and to run the EGL-generated service.
    - Lesson 14: Deploy and test the mortgage application
      During the deployment process, EGL creates HTML files and server-specific code to match your target environment.
    - Summary
      You have completed the Create a mortgage application with EGL Rich UI tutorial.
    - Resources
      A variety of resources are available.
  - Access a database with EGL Rich UI
    In this tutorial, you create a Rich UI application so that the user can access rows in an SQL database.
Installing
Upgrading and migrating
Developing
Samples
Troubleshooting and support
Reference
Glossary
Using the help
Notices for IBM Rational Business Developer documentation

Lesson 12: Embed the map locator handler in the application

Add a new portlet to the main portal.

Change the main portal

Procedure

Add lines for the map portlet that are similar to the lines for the other three:

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

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

mapPortlet Portlet{children = [mapHandler.ui], 
			title = "Map", canMove = FALSE, canMinimize = TRUE};

In the start() function, below the existing calls to addPortlet(), add the new portlet to the portal:
```
	mortgagePortal.addPortlet(mapPortlet, 2);
```
In this case, you are adding the map portlet to the second, wider column.
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 12.

Results

Test the portal

About this task

Test the main portal to make sure that the new Map portlet is displayed and that all portlets work correctly.

Procedure

At the bottom of the editor, click Preview.
EGL displays the main portal and the four subsidiary portlets.
Calculate at least two different mortgages and search for mortgages in the Map portlet.
Close the file.

Lesson checkpoint

About this task

There were no new tasks in this lesson.

In the next lesson, you install Apache Tomcat on your system so that you can run your application on an application server.