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

在此练习中,将数据库的 CUSTOMER 表中的数据添加至在前一个练习中创建的 Web 页面。此任务分为下列几部分:

将记录数组添加至“页数据”视图和 PageHandler

  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 个字段。

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

    提供了客户数组变量的页数据视图

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

在 Web 页面上显示数据

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

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

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

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

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

    “插入列表控件”窗口

  5. 单击完成

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

  6. 保存该页面。

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

    页面的当前外观

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

    数据表中的 3 个文本字段显示为 {EGLcustomer_id}{EGLfirst_name}{EGLlast_name},它们表示在页面上显示数据库信息的位置。

将函数调用添加至 EGL 库

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

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

    在接下来的步骤中,您将把代码添加至 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.