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