练习 7:将数据添加至页面

在此练习中,将数据库的 CUSTOMER 表中的数据添加至在前面的练习中创建的 Web 页面。此任务需具备三个方面:

将记录数组添加至“页数据”视图和页面处理程序

  1. 通过在“项目资源管理器”视图中双击 allcustomers.jsp 文件来打开它。
  2. 查找通常在工作台左下方的“页数据”视图。可以通过使用选项卡来展现“页数据”视图;但是,如果找不到它,则单击窗口 > 显示视图 > 页数据
  3. 查找通常在工作台右边的“选用板”视图。如果找不到该视图,则单击窗口 > 显示视图 > 基本 > 选用板
  4. 在“选用板”视图中,单击 EGL 抽屉。
  5. 从“选用板”视图中将记录图标拖至“页数据”视图。将打开“选择记录部件”窗口。
  6. 在“选择记录部件”窗口中,单击 Customer (data/CustomerRecord.egl)。通过此方式,选择在其基础上建立的每个数组元素的记录部件。
  7. 输入字段的名称字段中,输入以下文本:

    customers

  8. 数组修饰符下,单击数组
  9. 清除(除去对该复选框的选择)添加控件以显示 Web 页面上的 EGL 元素复选框。

    “选择记录部件”窗口看起来应如下所示:

    “选择记录部件”窗口

  10. 单击确定

    在“页数据”视图中,名为 allcustomers 的图标表示可用于 Web 页面的数据。

  11. 单击 allcustomers 图标旁边的 + 符号来展开它。名为 customers - Customer[] 的数组变量位于此图标下。
  12. 单击 customers - Customer[] 图标旁边的 + 符号来展开它。在此图标下有 12 个图标,分别表示该数据库记录中的 12 个字段。

    “页数据”视图看起来应如下所示:

    具有 customers 数组变量的“页数据”视图

    通过将条目添加至“页数据”视图,会将一个记录数组也添加至特定于页面的页面处理程序。在下一节中,将在 Web 页面上创建相关的字段。

在 Web 页面上显示数据

可以将“页数据”视图中列示的数据添加至 Web 页面。

  1. 在“页数据”视图中,单击 customers - Customer[] 数组变量。
  2. 单击 customers - Customer[] 数组变量并将其拖到文件 allcustomers.jsp 上,将它释放在先前练习中添加的空白行中,位于“所有客户列表”文本下面。

    将打开“插入列表控件”窗口。此窗口列示数据库记录中的所有字段并允许您选择将在页面上显示哪些字段。

  3. 单击按钮。现在已取消选择所有字段。
  4. 选择这些字段旁边的复选框:

    “插入列表控件”窗口看起来应如下所示:

    “插入列表控件”窗口

  5. 单击完成

    将在页面上创建数据表,它带有在“插入列表控件”窗口中选择的 3 个字段的 3 个列。

  6. 保存该页面。

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

    页面的当前外观

    数据表中的列具有基于数据库中的字段名称的标题。可以通过单击标题,打开“属性”视图,然户更改字段来更改这些标题。

    数据表中的 3 个文本字段(显示为 {EGLcustomer_id}{EGLfirst_name}{EGLlast_name})表示页面上数据库信息将显示的地方。

将函数调用添加至 EGL 库

下一步是将代码添加至在 CustomerLib.egl 库中调用函数的这一页面 。此函数将从数据库中读取数据并使它可用于页面。

  1. 右键单击文件 allcustomers.jsp 的自由格式区域中的任何位置。
  2. 从弹出菜单中,单击编辑页面代码。allcustomers.egl 文件就会在编辑器中打开。该文件包括页面处理程序。

    在接下来的步骤中,您将把代码添加至此文件。代码将调用 CustomerLib.egl 库中的 getAllCustomers() 函数。

  3. 在 allcustomers.egl 文件中,在行 Function onPageLoad()end 之间添加一个空行。
  4. 单击新的空行以将光标放在那儿。
  5. Function onPageLoad()end 行之间的空行中,输入以下文本:

    cust

  6. 按 Alt+/ 键。内容辅助菜单将打开,带有以 cust 开头的可用 EGL 语句的列表。
  7. 在内容辅助菜单中,双击 CustomerLib - data。您可能需要向下滚动才能找到它。

    如果 CustomerLib - data 未在此列表中出现(记得向下滚动,它应该在末尾附近),则进行检查以查看是否已在练习 5 中成功完成创建、保存和生成 CustomerLib,并且没有任何编译错误(编译错误在 CustomerLib.egl 源中作为红色标记出现)。

    现在,代码的新行是 CustomerLib

  8. CustomerLib 后输入一个句点。
  9. 再次按 Alt+/ 键。将再次打开内容辅助菜单。
  10. 从内容辅助菜单中,双击 getAllCustomers
  11. 保存文件。

    现在,allcustomers.egl 文件看起来应如下所示:

    allcustomers.egl 文件的当前外观

    下列是一些有关 allcustomers.egl 的详细信息:

测试页面

现在可以在服务器上运行该页面了。遵循下列步骤以测试它并查看数据库数据在页面上显示的方式。

  1. 在“项目资源管理器”视图中,右键单击 allcustomers.jsp 文件。
  2. 从弹出菜单中,单击运行 > 在服务器上运行

    如先前练习中的一样,Web 页面在工作台内部的 Web 浏览器中打开。这次,动态数据将出现在该页面上。该页面看起来应如下所示:

    allcustomers.jsp 页面的当前外观

现在,您可以开始练习 8:链接至另一个页面

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