< 上一课 | 下一课 >

第 8 课:创建更新页面

在此练习中,您将创建允许用户更新 CUSTOMER 表的 Web 页面。此页面将接收其他页面传递的参数,仅显示该参数指示的记录并接受该记录的已更新信息。

创建 updatecustomer.jsp 文件

  1. 在“企业资源管理器”视图中,右键单击 EGLWeb 项目的 WebContent 文件夹。
  2. 单击新建 > Web 页面
  3. 文件名字段中,输入以下文本作为新文件的名称:
    updatecustomer.jsp
  4. 确保文件夹字段列示了 /EGLWeb/WebContent 文件夹。
  5. 模板列表中,单击我的模板
  6. 预览框中,单击 A_gray.htpl 模板。
  7. 单击完成 新页面已创建并会在编辑器中打开。
  8. 将缺省文本替换为以下文本:
    更新客户信息
  9. Enter 键三次以插入三个空白行。
  10. 保存该页面。
新的 updatecustomer.jsp 页面如下所示:

updatecustomer.jsp 页面的外观

添加 EGL 记录并在页面上显示该记录

下一步是将 EGL 数据添加至此页面。创建 allcustomers.jsp 文件时,您在一个步骤中将数据添加至页面,然后在另一个步骤中通过从“页数据”视图拖动该数据以在页面上显示该数据。这次您将选中添加用于在 Web 页面上显示 EGL 元素的控件复选框,以在一个步骤中将数据添加至页面并在页面上显示该数据。
  1. 在“选用板”视图上打开 EGL 抽屉。
  2. 新建变量图标拖到页面上文本“Update Customer Information.”下面的位置。 “创建新的 EGL 数据变量”窗口将打开。
  3. 选择类型下,单击记录
  4. 记录类型下,单击客户
  5. 输入字段的名称字段中,输入以下文本:
    customer
  6. 数组属性下,清除数组复选框。
  7. 选中添加用于在 Web 页面上显示 EGL 元素的控件复选框。
  8. 单击确定 新记录显示在“页数据”视图中并且“插入控件”窗口将打开。
  9. 在“插入控件”窗口中,单击更新现有记录
  10. 单击选项 “选项”窗口将打开。
  11. 选中提交按钮复选框。
  12. 清除删除按钮复选框。
  13. 提交按钮标签,请输入以下文本:
    更新此记录
  14. 单击确定
  15. 单击完成
  16. 保存该页面。

将在 Web 页面上插入用于更新记录的数据控件。请注意,页面上有 {Error Messages} 控件。此控件并非意味着页面有错误;{Error Messages} 控件用于标记将显示运行时错误消息的位置。

该页面如下所示:

updatecustomer.jsp 页面的外观

检索数据

既然页面上具有对应数据的字段,那么需要添加用于从数据库检索数据的代码。回忆一下上一课中,您添加了用于在名为 CID 的参数中传递客户标识号的链接。在这些步骤中,您将为新 Web 页面设置处理程序以接受此参数并从数据库检索要显示在页面上的适当记录。
  1. 右键单击 updatecustomer.jsp 文件的自由格式区域中的任意位置。
  2. 在弹出菜单中,单击编辑页面代码 updatecustomer.egl 文件将在编辑器中打开。
  3. 如您编辑过的上一 JSF 处理程序中所示,您需要添加用于存储 SQL 调用的成功或失败代码的记录。在紧跟 customer Customer; 行之后的位置完全按已编写样式添加以下代码:
    status StatusRec;
    将数据添加至页面的下一步是将 JSF 处理程序配置为接受链接将传递至其的 CID 参数。
  4. 完全按已编写样式将 function onPreRender() 行更改为以下代码:
    function onPreRender(CID INT)
    现在 JSF 处理程序配置为接受名为 CID 的整数参数。
  5. 在紧跟 function onPreRender(CID INT) 后面的空白行上,完全按已编写样式添加以下代码:
    customer.customerId = CID;
    现在您已将标识号指定给客户记录。下一步是从数据库检索带有此标识号的记录。
  6. 在下一行上,完全按已编写样式添加以下代码。 您可能想要使用在第 6 课:将数据添加至页面中学习的代码补全功能。
    CustomerLib.GetCustomer(customer, status);
    GetCustomer 函数与您先前使用的 GetCustomerAll 函数类似,但 GetCustomer 函数检索一个记录,而 GetCustomerAll 函数检索一组记录。 现在客户记录包含其标识已传递至此 JSF 处理程序的记录。
    新函数如下所示:
    	function onPreRender(CID INT)
    		customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. 优化导入并保存该文件。
JSF 处理程序如下所示:
updatecustomer.egl 文件的外观

现在,当您单击 allcustomers.jsp 页面上的链接时,updatecustomer.jsp 页面会使用有关该客户记录的详细信息装入。现在可更改 Web 页面上的字段中的信息,但没有函数可用来发送对数据库的这些更新。在下一节中,您将使用 UpdateCustomer 函数来对数据库进行这些更新。

更新数据库中的记录

在本节中,您在 JSF 处理程序中添加名为 updateRecord 的新 EGL 函数。然后,将此函数绑定至您在 Web 页面上创建的按钮。这样一来,当您在 Web 页面上单击该按钮时,updateRecord 函数将运行并且会调用 UpdateCustomer 函数以更新数据库记录。最后,updateRecord 函数会使浏览器转回 allcustomers.jsp 页面,以便可看到您对该记录所做的更改。
  1. 在 updatecustomer.egl 文件中,正好在最终 End 语句之前方添加以下函数(完全按已编写样式)。 您可能想要使用代码补全或者在此页面中粘贴该函数以确保它正确。
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. 保存并关闭该文件。

    下一步是将此函数绑定至 Web 页面上的按钮。

  3. 在编辑器中打开 updatecustomer.jsp 页面。 此页面在编辑器选项卡中可能仍然处于打开状态。如果在编辑器选项卡上找不到该页面,请在“项目资源管理器”视图的 EGLWeb/WebContent 文件夹中双击 updatecustomer.jsp 文件。
  4. 在“页数据”视图中,展开 JSF 处理程序 > 操作 此文件夹列示 JSF 处理程序中除 onPreRender()onConstruction() 函数以外的所有函数。在此情况下,此文件夹显示您刚创建的 updateRecord() 函数。
  5. 直接将 updateRecord() 函数拖到 Web 页面上标有“更新此记录”的按钮上。 页面外观不会更改,但现在此函数已绑定至该按钮并且将在按下该按钮时运行。
  6. 保存该页面。

以下是 updatecustomer.egl 文件的完整代码。如果在此文件中看到用红色 X 符号标记的任何错误,请确保代码与此文件中的代码相匹配:第 8 课后已完成的 updatecustomer.egl 文件

updatecustomer.egl 文件的外观

测试完成的站点

现在可测试站点。您现在可更新和查看数据库的 Customer 表中的任何记录。
  1. 在“企业资源管理器”视图中,右键单击 allcustomers.jsp 文件,然后单击运行方式 > 在服务器上运行 相关页面将在 Web 浏览器中打开。现在列表中的每个客户姓氏都有指向 updatecustomer.jsp 所显示 Web 页面的超链接。
  2. 单击其中一个客户姓氏。 您将会进至 updatecustomer.jsp 显示的 Web 页面,并且该 Web 页面显示特定于该行的信息。
  3. 对记录输入新 FIRST_NAME。
  4. 对此页面上的其他一些字段输入新信息。不要更改 CUSTOMER_ID 字段。
  5. 输入完新信息时,单击更新此记录按钮。
单击更新此记录按钮时,您将返回至 allcustomers.jsp 页面。请注意,该记录已更改为显示您输入的新 FIRST_NAME。您可再次单击该记录的姓氏以查看数据库中已保存的新信息。

您已完成本教程

在本教程中,您使用样本 Derby 数据库为客户文件构建了一个起作用的文件维护实用程序。现在,您可以利用此知识来完成使用 EGL 构建 JSF 搜索页教程。
< 上一课 | 下一课 >

反馈