练习 2.1:创建简单的搜索页面

在接下来的两个练习中,将创建一个搜索页面。用于构建此页面的步骤与在模块 1 中创建的简单测试页面完全相同:

  1. 创建 Web 页面。
  2. 创建 EGL 数据。
  3. 将 EGL 数据绑定至 JSF 组件。
  4. 添加 EGL 函数以管理 EGL 数据。

此练习讨论步骤 1 到步骤 3。练习 2.2 讨论步骤 4。

创建 Web 页面

  1. 单击 EGLWeb 项目以选择它。
  2. 从菜单栏中,单击文件 > 新建 > Faces JSP 文件。将打开“新建 Faces JSP 文件”向导。
  3. 名称字段中,输入以下名称作为文件名:

    customersearch

  4. 选择从页面模板创建复选框。
  5. 单击下一步
  6. 页面模板类型下面,单击用户定义的页面模板
  7. 缩略图下面,单击 A_gray.htpl 模板。
  8. 单击完成。这就会将新文件添加至项目,并且该文件会在编辑器中打开。
  9. 删除缺省文本 Place your page content here
  10. 在缺省文本的位置,输入 Customer Search
  11. Enter 键三次以插入三个空白行。

创建记录

在下面的步骤中,将创建两个 EGL 记录。searchTerms 记录表示搜索输入,或者搜索项。在此示例中,searchTerms 记录存放要搜索的客户的名字和州。记录的 searchResults[] 数组表示搜索结果,或者数据库中与搜索输入相符的记录。

  1. 从“选用板”视图的 EGL 抽屉中,将记录拖到“页数据”视图上。将打开“选择记录部件”窗口。
  2. 在“选择记录部件”窗口中,单击 Customer (data/CustomerRecord.egl)
  3. 输入字段的名称下面,为字段输入以下名称:

    searchTerms

  4. 清除数组复选框。
  5. 清除在 Web 页面上添加控件以显示 EGL 元素复选框。
  6. 单击完成
  7. 从“选用板”视图中将另一个记录拖到“页数据”视图上。将再次打开“选择记录部件”窗口。
  8. 在“选择记录部件”窗口中,单击 Customer (data/CustomerRecord.egl)
  9. 输入字段的名称下面,为字段输入以下名称:

    searchResults

  10. 选择数组复选框。
  11. 清除在 Web 页面上添加控件以显示 EGL 元素复选框。
  12. 单击确定

将记录添加至页面

  1. 在“页数据”视图中,展开 customersearch
  2. 从“页数据”视图中,将 searchTerms - Customer 记录拖到页面上 Customer Search 文本下面。将打开“插入控件”窗口。
  3. 在“插入控件”窗口中,单击更新现有记录
  4. 单击
  5. 要显示的字段下面,选择 last_namestate 字段旁边的复选框。
  6. 单击选项
  7. 在“选项”窗口中,选择提交按钮复选框。
  8. 清除删除按钮复选框。
  9. 单击确定
  10. 单击完成

    该页面看起来应如下所示:

    搜索页面的外观

  11. 在“提交”按钮下面添加一个空白行,方法是将光标放在“提交”按钮的 {Error Messages} 字段右边,然后按 Enter 键。
  12. 从“选用板”中将两个输出组件拖到页面提交按钮下面的新行上。

    这些输出字段将显示返回的结果数和一条消息,例如,5 Customer(s) found. Search again?

  13. 从“页数据”视图中,将 searchResults - Customer[] 拖到页面上提交按钮和两个新输出字段的下面。将打开“插入列表控件”窗口。
  14. 在“插入列表控件”窗口中,单击
  15. 选择 last_nameemail_addressstate 字段旁边的复选框。“插入列表控件”窗口看起来应如下所示:

    “插入列表控件”窗口

  16. 单击完成
  17. 保存该页面。

    现在,搜索页面具有一些输入字段供用户输入搜索项,还有一个数据表用于显示搜索结果。搜索页面看起来应如下所示:

    搜索页面的外观

现在,您可以开始进行练习 2.2:为搜索函数添加代码了。

使用条款 | 反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.