< 上一课 | 下一课 >

第 11 课:向地图定位器处理程序添加代码

完成您在上一课中创建的用户界面的背景代码。

完成 MapLocatorHandler.egl 的源代码

  1. 请确保 MapLocatorHandler.egl 文件在 Rich UI 编辑器中已打开。如果您位于“设计”视图中,请单击源代码选项卡。
  2. 紧靠在 start 函数前面添加一个空白行,并声明一个基于您所创建的界面部件的变量:
    lookupService YahooLocalService{@restbinding};

    @restbinding 属性指示服务访问详细信息位于代码中而不是位于 EGL 部署描述符中。很容易作出决策,但是不可改变。更改服务位置将要求您更改源代码。第 14 课中介绍了 EGL 部署描述符,您很可能将服务访问详细信息放在大多数开发工作中。

  3. 要解析对于界面部件的引用,请按 Ctrl+Shift+O 组合键。后续步骤将添加新的红色错误标记,您将在本课程稍后部分才会将其除去。
  4. 请勿向 start 函数添加内容。
  5. 按如下所示完成 checkForEnter 函数:
    function checkForEnter(event Event in)
       if(event.ch == 13)
          search();
       end
    end

    考虑以下背景详细信息:EGL 运行时代码将调用 checkForEnter 函数并传递事件对象,事件对象是包括有关该事件的详细信息的内存结构。在这种情况下,导致进行此调用的事件是 onKeyDown,并且事件对象包括用于表示用户的击键的 ASCII 字符。具体来说,数字 13 是 ASCII 表中的回车符(ENTER 键)的十进制值,如以下位置所述:ASCII 表和描述 (http://www.asciitable.com)

    仅当焦点位于文本字段上并且用户按诸如 Tab 键或 ENTER 键时,才会调用 checkForEnter 函数。仅当按 ENTER 键时,此函数又会调用 search 函数。您马上就会创建 search 函数。

  6. 完成 buttonClicked()函数:
    function buttonClicked(event Event in)
       search();
    end

    buttonClicked 函数及其与特定于按钮的 onClick 属性的关系可确保用户单击 Search 按钮时就会调用 search 函数。

  7. 要添加 search 函数,请将以下代码放在此处理程序末尾,但是要放在此文件的最后一个 end 语句前面:
    function search()
       localMap.zoom = 13;
       
       // show an initial marker, as necessary to display the map at all
       // (the marker identifies only the zip code)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " + zipField.text});
    
       // Call the remote Yahoo! service, passing the zip code
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          returning to showResults onException displayError;
    end
    请注意下列详细信息:
    • EGL Google 地图窗口小部件包括 zoom 属性,此属性指定地图的比例尺。不指定用于北卡罗来纳州的缺省地图的大比例尺(其中,zoom 值为 8),请将 zoom 值设置为 13,这将生成一副显示各条城市街道的地图。
    • EGL Google 地图窗口小部件还包括 addMarker 函数,此函数接受类型为 MapMarker 的记录,并且标识输入地址在地图上的位置。

      在特定邮政编码所代表地区的此初始屏幕上,您为 localMap.addMarker() 函数提供的唯一详细信息就是该邮政编码本身。稍后,您将设置 address 属性以提供更多详细信息,用来显示特定于地址的标记。

  8. 接下来,您将添加 showResults 函数,如果成功访问了 Yahoo! 服务而无任何错误,就会调用此函数。请将以下代码放在 search 函数后面,但是要放在此文件的最后一个 end 语句前面:
    function showResults(retResult ResultSet in)
       linkListing HyperLink[0];
       for(i INT from 1 to retResult.result.getSize() by 1)
          newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};
          newLink.setAttribute("address", retResult.result[i].Address + ", "
             + retResult.result[i].city + ", " + retResult.result[i].state);
          newLink.setAttribute("title", retResult.result[i].Title);
          newLink.onClick ::= mapAddress;
          linkListing.appendElement(newLink);
       end
       listingBox.setChildren(linkListing);
    end	
    您调用此服务时将返回一系列抵押贷款公司的详细信息。请考虑 showResults 函数的下列方面:
    • 每个元素都包含一个“标题”(即,公司名称)和地址。
    • showResults 函数将创建一系列超链接窗口小部件并通过输入数组来读取。对于输入数组中的每个元素,此函数将在超链接窗口小部件数组中创建一个元素。
    • 如以下声明所示,每个超链接窗口小部件都有可显示的文本和填充内容,并且包括占位符 (#) 而不是 Web 地址:
      newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};

      超链接将导致调用代码而不是 Web 地址。但是,存在占位符可确保超链接以熟悉的方式来显示文本(即,使用下划线和颜色来显示),就像用户单击超链接将打开 Web 站点一样。

    • 此函数将调用 setAttribute 函数以将值放入 DOM 树中,放入内存中特定于此窗口小部件的区域。尤其是,此函数将存储标题,然后存储地址,以供另一个函数检索。
    • 对于每个超链接窗口小部件,showResults 函数通过对 onClick 事件指定 mapAddress 函数来设置运行时行为。
    • 将超链接窗口小部件的完整数组指定为列表框的唯一子代。
  9. 将以下函数放在 showResults 函数后面:
    function mapAddress(e Event in)
    
       // Show the marker when the user clicks the link
       businessAddress STRING = e.widget.getAttribute("address") as STRING;
       businessName STRING = e.widget.getAttribute("title") as STRING;
       localMap.addMarker(new MapMarker { 
          address = businessAddress, 
          description = businessName} );
    end

    当用户在运行时单击此超链接时,mapAddress 函数将检索在 showResults 函数中设置的属性并在所显示的地图上设置标记。

  10. 现在,您将添加异常处理程序,用于在访问 Yahoo! 服务失败的情况下接收数据。请将以下代码放在 mapAddress 函数后面,但是要放在此文件的最后一个 end 语句前面:
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Yahoo Service", 
                               "Cannot invoke Yahoo Local Service: " 
                               + ex.message, null);
    end

    DojoDialogLib 是您在第 2 课中添加至工作空间的 com.ibm.egl.rui.dojo.samples 项目中的一个库部件。该库中的 showError 函数将在对话框中显示信息。函数调用中包括一个名为 message 的字符串,它位于 EGL 运行时代码传递给 displayError 函数的异常记录中。

  11. 通过按 Ctrl+Shift+F 来调整代码的格式,通过按 Ctrl+Shift+O 来解析引用,然后保存该文件。如果您在源文件中发现错误,请将您的代码与在第 11 课之后已为 MapLocatorHandler.egl 完成的代码中的文件内容进行比较。

测试新的 Portlet

因为此 Portlet 独立运行,所以您可以单独对其进行测试。

  1. 务必保存该文件,然后单击预览 EGL 将显示输入表单和北卡罗来纳州的缺省地图。
  2. 输入以下邮政编码:
    10001
    此邮政编码代表位于市中心区的曼哈顿。
  3. 按 Enter 键,或者单击搜索按钮。 抵押贷款公司列表显示在屏幕左下侧。右侧是纽约市地图。
    市中心区曼哈顿的地图。
    注: Yahoo! Local Search Service 有时不返回任何数据,在这种情况下,会由于发生“空异常”而显示错误消息。最有可能在星期天缺少数据。如果此服务不可用或者未返回数据,请单击取消,稍后再完成本教程。

    以下位置可能报告了 Yahoo! Local Search Service 存在的问题:位于以下网址的“本地 API - 一般问题”:http://developer.yahoo.net/forum

  4. 单击左列中的任何名称。 地图中显示了一个指示企业所在位置的标记。如果您将鼠标光标悬停在此标记上,就会显示该企业的名称。
  5. 重做同样的搜索,或者在附近的邮政编码(例如,10009)所代表的地区进行搜索。您放在地图上的标记将保持位于原处。此外,请注意,Yahoo! 将搜索与您所指定邮政编码邻近的邮政编码所代表地区检索到的地址。
  6. 如果您想要在每次进行搜索之前除去所有标记,请单击源代码选项卡,并在 showResults 函数顶部添加以下行:
    localMap.removeAllMarkers();  
  7. 预览选项卡中测试您所作的工作。
  8. 关闭该文件。

课程复习要点

您已学习如何完成下列任务:
  • 创建和使用基于 Local Search Service 的变量。
  • 对用户的击键作出响应。
  • 使用 DOM 树将值从一个函数传递给另一个函数。
  • 开始使用地图窗口小部件。

在下一课中,您将在应用程序中嵌入新的处理程序。

< 上一课 | 下一课 >

反馈