< 上一课 | 下一课 >

第 6 课:将数据添加至页面

在此练习中,您会将本教程中所包括数据库中的数据添加至您在上一练习中创建的 Web 页面。
此任务分为以下几个部分:

在本课中,您还将使用 EGL 内容辅助功能部件,可使用此工具完成编程语句而不必输入整个语句。

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

  1. 如果 allcustomers.jsp 文件未打开,请在“企业资源管理器”视图中双击该文件以打开该文件。
  2. 找到“页数据”视图,该视图通常在工作台左下角。可通过使用选项卡来显示“页数据”视图,但如果找不到该视图,请单击窗口 > 显示视图 > 页数据
  3. 找到“选用板”视图,该视图通常在工作台右边。如果找不到该视图,请单击窗口 > 显示视图 > 基本 > 选用板
  4. 选用板视图中,单击 EGL 抽屉以打开该抽屉。
  5. 新建变量图标从“选用板”视图拖到编辑器中的 allcustomers.jsp 页面上。 创建新的 EGL 数据变量窗口将打开。
  6. 选择类型下,单击记录
  7. 记录类型下,单击客户 这样一来,您就选择了每个数组元素所基于的记录部件。
  8. 输入字段的名称字段中,输入以下文本:
    customers
  9. 数组属性下,选中数组复选框。 使大小字段留为空白。
  10. 清除添加用于在 Web 页面上显示 EGL 元素的控件复选框。

    “创建新的 EGL 数据变量”窗口如下所示:

    “创建新的 EGL 数据变量”窗口

  11. 单击确定 您将变量拖至其中的 JSP 上不会显示任何内容。原因是 EGL 在单独文件中创建了该变量并且调用了 JSF 处理程序,该处理程序包含用于响应 JSP 中的事件的代码。 表示新变量的项出现在 JSF 处理程序 > 数据下的“页数据”视图中。
  12. 展开 JSF 处理程序 > 数据,然后展开 customers - Customer[] customers 下有 12 个图标,分别表示此数据库记录中的 12 个字段。

“页数据”视图如下所示:

customers 数组变量可见的“页数据”视图

通过将条目添加至“页数据”视图,您还可将记录数组添加至 JSF 处理程序。在下一节中,您将在 Web 页面上创建相关字段。

在 Web 页面上显示数据

可将“页数据”视图中列示的数据添加至 Web 页面。
  1. 从“页数据”视图中,将 customers - Customer[] 数组变量拖到 allcustomers.jsp 文件上,将其放在“所有客户的列表”文本下您在上一练习中添加的空白行中。

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

  2. 要创建的数据控件下,保留缺省值 - 多列数据表
  3. 创建控件以下,单击显示现有记录(只读)

    选择此选项之后,页面上的数据会显示在只读输出字段中。如果您选择更新现有记录,那么页面上的字段是输入字段,可在这些字段中输入内容,这些字段下方是要将操作绑定至的按钮。您将在另一页面上创建此类型的字段。对于我们而言,创建新记录选项与更新现有记录相同,只是缺省按钮不同。

  4. 要显示的列下,单击按钮。 您已取消选择所有字段。
  5. 选中下列字段旁边的复选框:
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    “插入列表控件”窗口如下所示:

    “插入列表控件”窗口

  6. 单击完成 将在页面上创建带有三列的数据表,此三列对应您在“插入列表控件”窗口中选择的三个字段。
  7. 保存该页面。

该页面如以下示例所示:

页面的当前外观

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

数据表中显示为 {CUSTOMERID}{FIRSTNAME}{LASTNAME} 的三个文本字段表示数据库信息将出现在页面上的位置。

调用 EGL 库中的函数

下一步是将用于调用 CustomerLibrary.egl 库中函数的代码添加至此页面。该函数读取数据库中的数据并提供给页面。

  1. 右键单击 allcustomers.jsp 文件中自由格式区域内的任意位置。
  2. 在弹出菜单中,单击编辑页面代码

    allcustomers.egl 文件将在编辑器中打开。此文件包含 JSF 处理程序部件。在接下来的步骤中,您将用于从数据库检索数据并将其放在页面上的代码添加至此 JSF 处理程序。

  3. 在 allcustomers.egl 文件中,找到 customers Customer[0];

    这是用于定义您创建为显示在页面上的记录变量的代码行。您还需要定义用于存储 SQL 调用的成功或失败代码的记录。

  4. 在紧跟 customers Customer[0]; 行之后的空白行上,完全按已编写样式添加以下代码:
    status StatusRec;
    请注意 StatusRec 下的波浪红线,表示处理程序不知道类型。您需要添加一个 import 语句,用于告知处理程序在何处查找 StatusRec 记录定义。这可以通过右键单击编辑器窗口中的空白处,然后单击对导入进行组织来自动完成。
    StatusRec 下方的波浪红线以及显示了“对导入进行组织”选项的下拉菜单。

    此功能的键盘快捷键是 Ctrl+Shift+O。EGL 将检查对其可视的所有文件,查找必需的信息,并在文件顶部添加一个 import 语句。

    现在已有要从数据库检索的记录和 SQL 状态记录。将数据添加至页面的最后一步是将这两个变量传递至访问该数据库的函数。此函数名为 GetCustomerListAll(),由“数据访问应用程序”向导在上一课中创建。

    请注意 handler 声明后括在花括号中的行。这些行将值指定给 JSF 处理程序的属性。在 EGL 中,属性是用于修改部件行为方式的名称/值对。大多数 EGL 部件类型都有一个或多个属性,每种部件都可能有不同属性。在此情况下,对 JSF 处理程序定义了 4 个属性:

    onConstructionFunction = onConstruction
    onConstructionFunction 属性指定 JSF 处理程序中与 JSF 处理程序相关联的 Web 页面 (JSP) 第一次显示在浏览器中时运行的函数。在此情况下,该属性指定名为 onConstruction 的函数,缺省情况下该函数是在 JSF 处理程序中创建的。在本教程中,您将不会使用此函数。
    onPreRenderFunction = onPreRender
    onPreRenderFunction 属性指定 JSF 处理程序中关联 JSP 每次显示在浏览器中时(包括用户刷新页面或在查看另一页面后返回此页面时)运行的函数。在此情况下,该属性指定名为 onConstruction 的函数,缺省情况下该函数是在 JSF 处理程序中创建的。在接下来的几个步骤中,您会将用于每次页面装入时从数据库检索当前数据的代码添加至此函数。
    view = "allcustomers.jsp"
    view 属性指定与 JSF 处理程序相关联的 Web 页面。缺省情况下,Web 页面的名称与 JSF 处理程序的名称相同,但去掉文件扩展名。
    viewRootVar = viewRoot
    使用 viewRoot 变量来获取对 JSF 组件树的访问。在本教程中,您将不会使用 viewRoot 变量。有关 JSF 组件及 viewRoot 变量的更多信息,请参阅组件树访问
  5. 将用于调用 GetCustomerListAll() 库函数的代码添加至 onPreRender() 函数。此库函数从数据库中检索客户数据。在此情况下,请尝试在 EGL 编辑器中使用内容辅助工具:
    1. 将光标放在 function onPreRender()end 之间的空白行上。
    2. 输入以下代码:
      cust
    3. Ctrl + 空格键 代码补全窗口将打开,其中显示以 cust 开头的所有可用 EGL 命令和资源。
    4. 在内容辅助窗口中,通过使用键盘选中 CustomerLib 库并按 Enter 键或使用鼠标双击该库来选择该库。

      现在新代码行将显示为 CustomerLib

    5. CustomerLib 后输入句点。
    6. 再次按 Ctrl + 空格键 代码补全窗口将再次打开。
    7. 在代码补全窗口中,通过使用键盘选中 GetCustomerListAll(customerArray Customer[], status StatusRec) 函数并按 Enter 键或使用鼠标双击该函数来选择该函数。 小心不要选择 GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec) 函数。

      现在新代码行显示为 CustomerLib.GetCustomerListAll(customerArray, status) 并且 customerArray 自变量已被选中。

    8. 将新代码行中的缺省 customerArray 自变量更改为记录变量的名称:customers
    9. 使用分号结束代码行。
    最后,新代码行显示为:
    CustomerLib.GetCustomerListAll(customers, status);
    还应注意,文件顶部附近有一个新的 import 语句,该语句显示为 import eglderbydb.access.CustomerLib;。此行会导入库,所以您可以直接引用该库,而不需要在代码中写出该库的完整路径。

    内容辅助自动添加此 import 语句。如果您尚未使用内容辅助或者“对导入进行组织”功能来创建此 import 语句,那么您将需要指定库的显式位置以使用以下名称来限定库名:eglderbydb.access.CustomerLib

  6. 保存该文件。
allcustomers.egl 文件现在如以下示例所示:
allcustomers.egl 文件的代码

如果见到任何错误(在编辑器中用红色 X 符号标记),请确保您的代码与此文件中的代码相匹配:完成第 6 课后的 allcustomers.egl 文件

测试该页面

现在可在服务器上运行该页面。遵循下列步骤来测试该页面并了解数据库数据如何显示在该页面上。

继续之前,请做好以下预防措施:
  1. 如果您尚未保存 allcustomers.egl 和 allcustomers.jsp 文件,请进行保存,然后将其关闭。
  2. 确保应用程序服务器已启动并且同步。
  1. 在“企业资源管理器”视图中,右键单击 EGLWeb 项目,然后单击生成
  2. 在“企业资源管理器”视图中,右键单击 allcustomers.jsp 文件而不是 allcustomers.egl 文件。
  3. 在弹出菜单中,单击运行方式 > 在服务器上运行

    在上一课中,Web 页面在工作台内的 Web 浏览器中打开。此时动态数据会出现在该页面上。如果您未看到动态数据,请单击地址栏旁边的“刷新”图标。该页面如下所示:

    allcustomers.jsp 页面的当前外观

在下一课中,您将创建详细信息页面以显示个别客户记录中的所有字段。
< 上一课 | 下一课 >

反馈