练习 7:将数据添加至页面
在此练习中,将随此教程提供的数据库中的数据添加到在前面的练习中创建的 Web 页面上。此任务分为下列几部分:
- 将字段添加至“页数据”视图,从而使这些字段与 Web 页面关联。
- 将“页数据”视图的字段放置在相关的 Web 页面上。
- 将变量(在此示例中是一个记录数组)添加至 EGL PageHandler,可将它认为是位于运行时过程之后的要运行代码。PageHandler 是页代码的一个示例,原因是它可以执行以下任何一个任务:
- 指定数据值以提交给 JSP 文件。那些值最终会显示在 Web 页面上。
- 处理从用户或从被调用程序返回的数据。
- 将控制权转交给另一个 JSP 文件。
将记录数组添加至“页数据”视图和 PageHandler
- 通过在“项目资源管理器”视图中双击 allcustomers.jsp 文件来打开它。
- 查找“页数据”视图,它通常位于工作台左下方。可以通过使用选项卡来显示“页数据”视图,但是,如果找不到它,则单击窗口 > 显示视图 > 页数据。
- 查找“选用板”视图,它通常位于工作台右边。如果找不到该视图,则单击窗口 > 显示视图 > 基本 > 选用板。
- 在“选用板”视图中,单击 EGL 抽屉以打开它。
- 从“选用板”视图中将记录图标拖至编辑器中的 allcustomers.jsp 页面。将打开“选择记录部件”窗口。
- 在“选择记录部件”窗口中,单击 Customer (data/CustomerRecord.egl)。通过此方式,选择每个数组元素都基于的记录部件。
- 在输入字段的名称字段中,输入以下文本:
customers
- 在数组修饰符下面,单击数组。
- 清除(除去对该复选框的选择)在 Web 页面上添加控件以显示 EGL 元素复选框。
“选择记录部件”窗口看起来应如下所示:

- 单击确定。
在“页数据”视图中,名为 allcustomers 的图标表示可用于 Web 页面的数据。
- 在“页数据”视图中,展开 allcustomers。名为 customers - Customer[] 的数组变量位于此图标下。
- 展开 customers - Customer[]。在此图标下有 12 个图标,分别表示该数据库记录中的 12 个字段。
“页数据”视图看起来应如下所示:

通过将条目添加至“页数据”视图,会将一个记录数组也添加至 PageHandler。在下一节中,将在 Web 页面上创建相关的字段。
在 Web 页面上显示数据
可以将“页数据”视图中列示的数据添加至 Web 页面。
- 在“页数据”视图中,单击 customers - Customer[] 数组变量。
- 单击 customers - Customer[] 数组变量并将其拖到文件 allcustomers.jsp 上,将它放在先前练习中添加的空白行中,位于 List of All Customers 文本下面。
将打开“插入列表控件”窗口。此窗口列示数据库记录中的所有字段。可以使用此窗口来选择将在页面上显示哪些记录。
- 单击无按钮。这就取消选择了所有字段。
- 选择这些字段旁边的复选框:
- customer_id
- first_name
- last_name
“插入列表控件”窗口看起来应如下所示:

- 单击完成。
将在页面上创建数据表,它带有在“插入列表控件”窗口中选择的 3 个字段的 3 个列。
- 保存该页面。
该页面看起来应如下所示:

数据表中的列具有基于数据库中的字段名称的标题。可以通过单击标题,打开“属性”视图,然户更改值字段来更改这些标题。
数据表中的 3 个文本字段显示为 {EGLcustomer_id}、{EGLfirst_name} 和 {EGLlast_name},它们表示在页面上显示数据库信息的位置。
将函数调用添加至 EGL 库
下一步是将代码添加至页面,此页面将调用 CustomerLib.egl 库中的函数。此函数将从数据库中读取数据并将它用于页面。
- 右键单击文件 allcustomers.jsp 的自由格式区域中的任何位置。
- 从弹出菜单中,单击编辑页面代码。allcustomers.egl 文件就会在编辑器中打开。此文件包括 PageHandler 部件。
在接下来的步骤中,您将把代码添加至 allcustomers.egl。该代码调用 CustomerLib.egl 库中的 getAllCustomers() 函数。
- 在 allcustomers.egl 文件中,在行 Function onPageLoad() 和 end 之间添加一个空白行。
- 单击新的空白行以将光标放在那儿。
- 在 Function onPageLoad() 和 end 行之间的空白行中,输入以下文本:
cust
- 按 Alt+/。内容辅助菜单将打开,显示以 cust 开头的可用 EGL 语句的列表。
- 在内容辅助菜单中,双击 CustomerLib - data。您可能需要向下滚动才能找到它。
如果 CustomerLib - data 未在此列表中出现(记得向下滚动,它应该在末尾附近),则检查是否已在练习 5 中成功完成创建、保存和生成 CustomerLib,并且没有任何编译错误(编译错误在 CustomerLib.egl 源代码中标有红色标记)。
现在,代码的新行是 CustomerLib。
- 在 CustomerLib 后输入一个句点。
- 再次按 Alt+/。将再次打开内容辅助菜单。
- 从内容辅助菜单中,双击 getAllCustomers。
- 保存文件。
现在,allcustomers.egl 文件看起来应如下所示:

下列是一些有关 allcustomers.egl 的详细信息:
- 该文件中的 import 语句使得数据包中的所有部件在开发时都可视。(记录部件 Customer 在此包中。)当将 Customers 变量包括在“页数据”视图中时,即为您创建了 import 语句。
- 刚好在 JSP 文件展示 Web 页面之前才调用 onPageLoad 函数。在此示例中,该函数会调用 getAllCustomers 函数(它在库 CustomerLib 中)。此函数使 pageHandler 中的记录数组接收 CUSTOMERS 数据库中的数据。此函数结束(但在展示 Web 页面之前)时,此记录数组中的数据位于相关的 Web 页面字段中。其它页面初始化也可能会出现在 onPageLoad 函数中;例如,可以设置光标焦点。
- 关闭该文件。
测试页面
现在可以在服务器上运行该页面了。遵循下列步骤以测试它并查看数据库数据在页面上显示的方式。
- 在“项目资源管理器”视图中,右键单击 allcustomers.jsp 文件。
- 从弹出菜单中,单击运行 > 在服务器上运行。
如先前练习中的一样,Web 页面在工作台内部的 Web 浏览器中打开。这次,动态数据将出现在该页面上。该页面看起来应如下所示:

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