< 上一课 | 下一课 >

第 10 课:创建地图定位器处理程序

开始创建一个 Portlet,您可以在此 Portlet 中输入邮政编码并查看抵押贷款公司的列表和地图。单击此列表中某个公司的名称,地图中将显示此公司的位置标记。
完成本课程要依赖以下两个外部 Web 站点提供的功能:
如果您现在或稍后想要学习有关第 10 课和第 11 课中使用的某些技术的更多信息,请参阅下列信息源:

为接口文件创建记录

要使用 Yahoo! Local Search Service,您将创建下列 EGL 部件:

您可以采用各种方式创建记录部件,但是在本课程中,您将在 Web 上访问 REST 服务,并在 Web 地址中包括从此服务检索数据时所需要的详细信息。“新建 EGL 记录”向导将创建与在开发时检索到的数据相对应的记录部件。

按如下所示执行操作:

  1. MortgageServiceProject 项目的 EGLSource 文件夹中,右键单击 services 包,然后单击新建 > 记录
  2. 在“新建 EGL 记录”向导中,接受有关源文件夹和包的详细信息,并为新的源文件输入以下名称:
    YahooRecords
  3. 单击下一步
  4. 在“模板”页面中,单击 XML 记录。单击下一步
  5. 在“XML 记录”窗口中,单击从 URL 创建,并将以下 URL 粘贴到 URL 字段中:
    http://local.yahooapis.com/LocalSearchService/V3/localSearch?
    appid=YahooDemo&query=pizza&zip=94306&results=2
    将这两行组合成没有空格的单行 URL。
    URL 显示在“从 URL 创建”字段中。
  6. 单击下一步 此向导将显示“摘要”页面,此页面提供了它将放入新文件中的代码的预览。
    代码显示在“预览”窗口中。
    注: Yahoo! Local Search Service 有时不返回任何数据,在这种情况下,将仅创建 ResultSet 记录部件。最有可能在星期天缺少数据。如果此服务不可用或者未返回数据,请单击取消,稍后再完成本教程。

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

  7. 单击完成,这将保存该文件。
  8. 如果您在源文件中发现错误,请将您的代码与在第 10 课之后已为 YahooRecords.egl 完成的代码中的文件内容进行比较。
  9. 关闭该文件。

创建本地搜索界面

当您使用外部 Web Service 时,创建一个界面部件,用于标识将访问的服务操作。界面部件供请求代码使用,它并不是服务本身的组件。

按如下所示执行操作:

  1. 通过右键单击 MortgageUIProject 并单击新建 > 界面来创建新的界面部件。
  2. 在“新建 EGL 界面部件”窗口中填写下列字段:
    1. 字段中输入以下名称:
      interfaces
    2. EGL 源文件名称字段中输入以下名称:
      IYahooLocalService
    3. 单击完成
  3. 将此文件的内容替换为以下代码:
    package interfaces;
    
    interface YahooLocalService
       function getSearchResults(appId string in, zipCode string in) returns(ResultSet)
          {@GetRest{uriTemplate = "http://local.yahooapis.com/LocalSearchService/V3/
                    localSearch?appid={appId}&query=mortgage&zip={zipcode}&results=10",
                    responseFormat = XML}};
    end
    粘贴代码之后,请按如下所示执行操作:
    1. 除去额外的行,以使 uriTemplate 值位于单行上且没有空格。
    2. 按 Ctrl+Shift+O 组合键,以包括在解析对于 ResultSet 记录部件的引用时所需要的 import 语句。
    3. 保存该文件。
    getSearchResults 函数原型确保当请求者调用此服务时,在 uriTemplate 值中将使用请求者的 appIdzipCode 自变量,而不使用带方括号的元素。EGL 运行时代码使用已完成的 URI 来访问此服务,在本例中,有关该 URI 的下列详细信息始终正确:
    • 该 URI 中包括关键字“mortgage”,此服务使用此关键字来搜索数据。
    • 该 URI 指定此服务至多返回 10 个结果。
  4. 如果您在源文件中发现错误,请将您的代码与在第 10 课之后已为 IYahooLocalService.egl 完成的代码中的文件内容进行比较。
  5. 不存在错误的情况下,关闭该文件。

创建 MapLocatorHandler 处理程序

要创建 MapLocatorHandler 处理程序,请完成下列步骤:

  1. MortgageUIProject/EGLSource 文件夹的 handlers 包中,像在第 4 课中那样创建 Rich UI 处理程序部件。为此处理程序指定以下名称:
    MapLocatorHandler
    此处理程序在 Rich UI 编辑器的“设计”视图中打开。
  2. 在网格布局中单击,右键单击您所选择的单元格,然后单击删除 > 行。网格布局有三行。
  3. 创建包含介绍性文本的一行:
    1. 从选用板的显示和输入抽屉中,将 TextLabel 窗口小部件拖到 GridLayout 窗口小部件的第一个单元格中,并为其指定以下名称:
      introLabel
    2. 在“属性”视图中,进行下列更改:
      • 在“常规”页面上,将 text 属性更改为以下短语:
        搜索本地的抵押贷款企业
      • 在“布局”页面上,将 horizontalSpan 属性设置为 3
      • 要保存该文件,请按 Ctrl+S 组合键。
  4. 为“邮政编码”输入字段创建一个标签:
    1. 将 TextLabel 窗口小部件拖到第二行的第一个单元格并指定以下名称:
      zipLabel
    2. 在“属性”视图中,按如下所示设置 text 属性:
      邮政编码:
  5. 创建一个文本字段,用户可以在其中输入邮政编码:
    1. 将 TextField 窗口小部件拖到第二行的第二个单元格并指定以下名称:
      zipField
    2. 在“属性”视图的“位置”页面上,将 width 属性设置为 100
    3. 在“事件”页面上,单击 onKeyDown 事件所在的行。单击加号 (+) 以对此事件添加函数。将显示“新建事件处理程序”对话框。
    4. 对新函数输入以下名称:
      checkForEnter
    5. 单击确定 EGL 将切换至“源代码”视图并显示 checkForEnter 函数。注意最近添加的其他两个添加项:
      • 在 zipField 窗口小部件的声明中,onKeyDown 属性设置为 checkForEnter
      • 以下 import 语句将解析对于 TextField 窗口小部件类型的引用:
        import com.ibm.egl.rui.widgets.TextField;
    6. 单击设计以返回到“设计”视图。 现在,checkForEnter 函数名显示在 onKeyDown 事件旁边。据说此函数已绑定至 zipField 字段。在下一课中,您将为此函数添加代码。
    7. 要保存该文件,请按 Ctrl+S 组合键。
  6. 添加一个按钮以开始搜索所指定的邮政编码:
    1. 将 Button (Dojo) 窗口小部件从选用板的显示和输入抽屉拖到第二行的第三个单元格中。指定以下名称:
      zipButton
    2. 在“属性”视图的“事件”页面上,单击 onClick 事件所在的行。单击加号 (+) 以对此事件添加函数。
    3. 在“新建事件处理程序”窗口中,对新函数输入以下名称:
      buttonClicked
    4. 单击确定 EGL 将切换至“源代码”视图并显示 buttonClicked 函数。
    5. 单击设计以返回到“设计”视图。 现在,buttonClicked 函数名显示在 onClick 事件旁边。此函数已绑定至 zipButton 按钮。在下一课中,您将为此函数添加代码。
    6. 在“常规”页面上,将此按钮的 text 属性更改为以下名称:
      搜索
    7. 要保存该文件,请按 Ctrl+S 组合键。
  7. 创建一个框,使其包含抵押贷款公司的列表。
    1. 从选用板的布局抽屉中,将 Box 窗口小部件拖到第三行的第一个单元格中,并为其指定以下名称:
      listingBox
    2. 在“属性”视图的“常规”页面上,将 columns 属性设置为 1
    3. 在“位置”页面上,将 width 属性设置为 150
    4. 在“布局”页面上,将 verticalAlignment 属性设置为 TOP,将 horizontalSpan 属性设置为 2
    此时,UI 看起来如下图所示:
    由三行和三列组成的网格中包含邮政编码的输入字段,还有一个按钮和空白框
  8. 从选用板的样本抽屉中,将“Google 地图”窗口小部件拖到第三行的最后一个单元格,位于 listingBox 窗口小部件旁边,并为其指定以下名称:
    localMap
    通过单击位于“设计”视图右上方(而不是位于项目资源管理器的右上方)的“刷新”按钮来刷新 Rich UI 编辑器的“设计”视图。“刷新”按钮显示两个指向相反方向的黄色箭头。
    “设计”表面看起来为如下所示:
    屏幕上显示了一个用于介绍的行,一个用于提交邮政编码的字段,用于放置搜索结果的框,还有一个缺省地图。
  9. 要保存该文件,请按 Ctrl+S 组合键。
您已完成“设计”视图中的工作。

如果您单击源代码选项卡,那么可以看到 EGL Rich UI 编辑器已创建的代码。在第 10 课之后已为 MapLocatorHandler.egl 完成的代码中也提供了此代码。

课程复习要点

您已学习如何完成下列任务:
  • 使用从服务检索到的数据来创建记录定义。
  • 使用允许服务访问的详细信息来配置界面部件。
  • 创建一个包括 Google 地图的用户界面。

在下一课中,您将添加源代码以完成 MapLocatorHandler 处理程序。

< 上一课 | 下一课 >

反馈