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

About this task

This lesson relies on capabilities from two external web sites:

The Google Places Service provides information about businesses in or near a specific place.
The Google Maps API provides a map that you can embed in your UI to show the location of a business.

If now or later you would like to learn more about some technologies used in lessons 10 and 11, see the following sources:

Create records for the Interface file

Procedure

To use the Google Places Service, you will create the following EGL parts:

A set of Record parts. Each definition is the basis of a variable that will be used to receive data from the service.
An Interface part. This definition is the basis of a service-access variable, which is used in the call statement that invokes the service.

You can create the Record parts in various ways, but in this lesson you will access a REST service on the web and include, in the web address, the details necessary to retrieve data from the service. The New EGL Record wizard will create the Record parts that correspond to the data that is retrieved at development time.

Do as follows:

In the MortgageServiceProject project, in the EGLSource folder, right-click the services package and click New > Record.
In the first page of the New EGL Record wizard, accept the details about the source folder and package and type the following name for the new source file:
```
GooglePlaceRecords
```
Click Next.
In the Templates page, click Records from XML. Click Next.

In the Records from XML window, click Create from a URL and paste the following URL into the URL field:

https://maps.googleapis.com/maps/api/place/search/xml?location=-33.8670522,151.1957362
&radius=1000&types=cafe&sensor=false&key=AIzaSyD_K9zveT6jhxgCApduywaOTuD5FiQFgpI&language=en

Combine the two lines into a single-line URL with no spaces.

The URL is shown in the Create from a URL field.

Click Next.
The wizard displays a Summary page that previews the code it will place in the new file.
Note:
The Google API Service sometimes returns no data, in which case only the ResultSet Record part is created. The lack of data is most likely on Sundays. If the service is unavailable or does not return data, click Cancel and wait for a later time to complete the tutorial.
Click Finish, which saves the file.
If you see errors in your source file, compare your code to the file contents in Finished code for GooglePlaceRecords.egl after Lesson 10.
Close the file.

Create the Local Search Interface

Procedure

When you use an external web service, you create an Interface part that identifies the service operations that will be accessed. The Interface part is used by the requesting code and is not a component of the service itself.

Do as follows:

Create a new Interface part by right-clicking MortgageUIProject and clicking New > Interface.
In the New EGL Interface Part window, complete the following fields:
1. In the Package field, enter the following name:
```
interfaces
```
2. In the EGL source file name field, enter the following name:
```
GooglePlaceRecords
```
3. Click Finish.
Replace the contents of the file with the following code:
```
package interfaces;

// interface
interface GooglePlacesService
function getSearchResults( typeName string? in ) 
returns(PlaceSearchResponse)
      {@GetRest{uriTemplate = 
"https://maps.googleapis.com/maps/api/place/search/xml?location
=37.47,-122.26&radius=50000&sensor=false&key=AIzaSyD_K9zveT6jhx
gCApduywaOTuD5FiQFgpI&language=en&keyword={typeName}",                 
							responseFormat = XML}}; end
```
After you paste the code, do as follows:
1. Remove extra lines so that the uriTemplate value is on a single line, without spaces.
2. Press Ctrl-Shift-O to include the import statement necessary to resolve the reference to the PlaceSearchResponse Record part.
3. Save the file.
The getSearchResults function prototype ensures that when the requester invokes the service, the requester's type argument is used in place of the bracketed elements in the uriTemplate value. The EGL runtime code uses the completed URI to access the service. The URI specifies that the service is to return 10 results, at most:
- The URI includes the keyword mortgage, which is used by the service to search for data.
- The URI specifies that the service is to return 10 results, at most.
If you see errors in your source file, compare your code to the file contents in Finished code for GooglePlacesService.egl after Lesson 10.
In the absence of errors, close the file.

Create the MapLocatorHandler handler

Procedure

To create the MapLocatorHandler handler:

In the MortgageUIProject/EGLSource folder, in the handlers package, create a Rich UI Handler part as you did in lesson 4. Give the handler the following name:
```
MapLocatorHandler
```
The handler opens in the Design view of the Rich UI editor.
Click inside the grid layout, right click the cell you selected, and click Delete > Row. The grid layout has three rows.
Create a line of introductory text:
1. From the Display and Input drawer of the palette, drag a TextLabel widget to the first cell of the GridLayout widget and give it the following name:
```
introLabel
```
2. In the Properties view, make the following changes:
  - On the General page, change the text property to the following phrase:
```
Search for places in San Francisco:
```
  - On the Layout page, set the horizontalSpan property to 3.
  - To save the file, press Ctrl-S.
Create a label for the type code input field:
1. Drag a TextLabel widget into the first cell of the second row and assign the following name:
```
typeLabel
```
2. In the Properties view, set the text property as follows:
```
Type:
```
Create a text field where the user can enter a type code:
1. Drag a DojoCombolBox widget into the second cell of the second row and assign the following name:
```
typeComboBox
```
2. In the Properties view, on the Position page, set the width property to 100.
3. On the Events page, click the row for the onChange event. Click the plus sign (+) to add a function for the event. The New Event Handler dialog is displayed.
4. 4. On the Properties page, click the ... button around the values, and assign below options to it in the popped dialog. ["bar", "food", "restaurant", "cafe", "movie_theater", "mortgage", "bank", "atm"]
5. Enter the following name for the new function:
```
checkForEnter
```
6. Click OK.
  EGL switches to Source view and displays the checkForEnter function. Notice two other recent additions:
  - In the declaration of the typeComboBox widget, the onChange property is set to checkForEnter.
  - The following import statement resolves the reference to the DojoComboBox widget type:
```
import dojo.widgets.DojoComboBox;
```
7. Click Design to return to the Design view.
  The checkForEnter function name is now displayed next to the onChange event. The function is said to be bound to the typeField field. You will add the code for this function in the next lesson.
8. To save the file, press Ctrl-S.
Add a button to initiate the search for the specified type code:
1. Drag a Button (Dojo) widget from the Display and Input drawer of the palette to the third cell in the second row. Assign the following name:
```
typeButton
```
2. In the Properties view, on the Events page, click the row for the onClick event. Click the plus sign (+) to add a function for the event.
3. In the New Event Handler window, enter the following name for the new function:
```
buttonClicked
```
4. Click OK.
  EGL switches to Source view and displays the buttonClicked function.
5. Click Design to return to the Design view.
  The buttonClicked function name is now displayed next to the onClick event. The function is bound to the typeButton button. You will add the code for this function in the next lesson.
6. On the General page, change the text property for the button to the following name:
```
Search
```
7. To save the file, press Ctrl-S.
Create a box to contain the list of mortgage companies.
1. From the Layout drawer of the palette, drag a Box widget onto the first cell of the third row and give it the following name:
```
listingBox
```
2. In the Properties view, on the General page, set the columns property to 1.
3. On the Position page, set the width property to 150.
4. On the Layout page, set the verticalAlignment property to TOP and the horizontalSpan property to 2.
At this point, the UI looks like the following picture:
From the Samples drawer of the palette, drag a Google Map widget to the last cell in the third row, next to the listingBox widget, and give it the following name:
```
localMap
```
Refresh the Design view of the Rich UI editor by clicking the refresh button on the upper right of the Design view, not the upper right of Project Explorer.
The Design surface looks as follows:
To save the file, press Ctrl-S.

Results

You have finished working in Design view.

If you click the Source tab, you can see code that the EGL Rich UI editor created.

Lesson checkpoint

About this task

You learned how to complete the following tasks:

Create Record definitions from the data retrieved from a service.
Configure an Interface part with details that allow for service access.
Create a user interface that includes a Google map.

In the next lesson, you add source code to complete the MapLocatorHandler handler.