练习 9:创建更新页面
在此练习中,将创建允许用户更新 CUSTOMER 表的 Web 页面。
创建文件 updatecustomer.jsp
- 在“项目资源管理器”视图中,单击 EGLWeb 项目的 WebContent 文件夹。
- 单击文件 > 新建 > Faces JSP 文件。将打开“新建 Faces JSP 文件”向导。
- 在文件名字段中,输入此文本作为新文件的名称:
updatecustomer
- 选择从页面模板创建复选框。
- 单击下一步。
- 从缩略图框中,单击 A_gray.htpl 模板。
- 单击完成。这样就创建了新页面并将在编辑器中打开它。
- 用以下文本来替换缺省文本:
Update Customer Information
- 按 Enter 键 3 次以插入 3 个空白行。
- 保存该页面。
新的 updatecustomer.jsp 页面看起来应如下所示:

将 EGL 记录添加至页面
下一步是将 EGL 数据添加至此页面:
- 打开“选用板”视图上的 EGL 抽屉。
- 将记录图标拖到该页面上。将打开“选择记录部件”窗口。
- 在数组修饰符下面,清除数组复选框。
- 清除在 Web 页面上添加控件以显示 EGL 元素复选框。
- 在从列表中选择记录部件或输入以下一个名称下面,单击 Customer (data/CustomerRecord.egl)。
- 单击确定。
新记录将出现在“页数据”视图中。
在 JSP 页面上显示数据
如练习 7 中那样,下一步是在该页面上创建数据控件。
- 在“页数据”视图中,单击 customer - Customer。
- 将 customer - Customer 拖到 Web 页面上,当光标在“更新客户信息”文本下面时松开鼠标按键。将打开“插入控件”窗口。
- 在“插入控件”窗口中,单击更新现有记录。
- 单击选项。将打开“选项”窗口。
- 选择提交按钮复选框。
- 清除删除按钮复选框。
- 对于提交按钮的标签,请输入以下文本:
Update this record
- 单击确定。
- 单击完成。
将用于更新记录的数据控件插入到 Web 页面上。注意,页面上有 {Error Messages} 字段。此字段并非表示页面有错误;{Error Messages} 字段标记运行时错误消息将显示的位置。
- 保存该页面。
该页面看起来应如下所示:

将函数添加至库以更新数据库行
既然 Web 页面上有了这些控件,您就需要将两个函数添加至 CustomerLib.egl 库中:
- 第 1 个函数将来自数据库行的数据放置到 Web 页面上以供用户查看。此函数并不锁定该行。
- 当用户提交对该数据的更改时会调用第 2 个函数。此函数和第 1 个函数一样检索同样的行,然后更新用户更改过的行。
- 在“项目资源管理器”视图中,展开 EGLSource 文件夹和 data 包,然后双击 CustomerLib.egl。
- 在这两个 end 语句之间,插入此代码:
Function getCustomer(Customer Customer)
get Customer usingKeys Customer.Customer_ID;end
- 保存文件。
CustomerLib.egl 文件看起来应如下所示:

以下是一些有关 getCustomer() 的详细信息:
- 该函数接受放置到 Customer 中的传递值,它是基于 Customer 记录部件的变量。该记录部件引用 CUSTOMER 表,并将 CUSTOMER_ID 标识为表中的关键字列。
- EGL get 语句包括 USINGKEYS 子句,它会标识将与关键字列的运行时值相比较的值的源。特别是,get 语句会检索这样的表行:列 CUSTOMER_ID 的值和称为 Customer 的变量中 CUSTOMER_ID 字段的值相同。
- EGL get 语句中的 USINGKEYS 子句在此示例中不是必要的;由于该记录部件中的 keyitems 规范,缺省情况下该变量中的 CUSTOMER_ID 字段可能已被使用。
- 和练习 6 一样,您可以右键单击 get Customer usingKeys 行,然后单击 SQL 语句 > 查看以查看此代码生成的 SQL 语句。当完成查看 SQL 语句时,单击关闭。
如果没有看到“查看”命令,则确保光标在代码的 get Customer usingKeys 这一行上。
接下来,添加完成如下任务的函数:
- 获取数据库行(在此示例中,用于更新)
- 更改检索的内容
- 更新行
- 在 CustomerLib.egl 文件中,请在步骤 2 中添加的代码之后(但是在最后一个 end 语句之前)添加以下代码:
Function updateCustomerData(CustomerNew Customer)
CustomerOld Customer; CustomerOld.Customer_ID = CustomerNew.Customer_ID; get CustomerOld forUpdate; move CustomerNew to CustomerOld byName; replace CustomerOld;end
- 保存该文件。
- 要生成输出,按 Ctrl+G 或右键单击该文件中的任何位置,并从弹出菜单中单击“生成”。
该文件看起来应如下所示:

以下是一些有关 updateCustomerData() 的详细信息:
- 该函数接受放置到 CustomerNew 中的传递值,它是基于 Customer 记录部件的变量。CustomerNew 将包含用户输入。
- 该函数声明 CustomerOld,它是基于同一个记录部件的变量。目的是使用 CustomerOld 来读取数据库、从 CustomerNew 接收用户输入以及使用该输入更新数据库。
- 要为与数据库的两个交互中的第一个交互准备 CustomerOld,函数将 CustomerNew 中的关键字段值指定给 CustomerOld 中的关键字段。
- 如与函数 getCustomer() 相关的描述那样,EGL get 语句检索这样的表行:列
CUSTOMER_ID 的值和在语句中指定的变量中的 CUSTOMER_ID 字段的值相同;在此示例中,在名为 CustomerOld 的变量中。forUpdate
子句让您使用随后的 EGL 语句来替换或删除数据库行;而该子句的另一个作用(对于大多数数据库管理系统)是锁定行。
- 要为与数据库的第二个交互准备 CustomerOld,EGL move 语句将数据从
CustomerNew 中的字段复制到 CustomerOld 中的同名字段。
- EGL replace 语句将更新由 get 语句检索到的行。
此文件中任何红色的标记都指示存在语法错误。确保您输入的代码与显示的完全一样。如果对此代码进行了更改,则记得保存该文件(Ctrl+S)并生成输出(Ctrl+G)。
- 关闭该文件。
将函数调用添加至 EGL 库
现在,添加调用两个新的库函数的代码。
- 通过在“项目资源管理器”视图中双击文件 updatecustomer.jsp 来打开它。
- 右键单击 updatecustomer.jsp 显示的 Web 页面中的任何地方,并从弹出菜单中单击编辑页代码。将打开 updatecustomer.egl 文件。
- 将以下代码从该文件中除去:
Function onPageLoad()
End
- 在上一个步骤中删除代码的位置,插入以下代码:
Function onPageLoad(CID int)
customer.Customer_ID = CID;
CustomerLib.getCustomer(customer); End
现在,代码看起来应如下所示:

以下是一些有关 onPageLoad() 的详细信息:
- 在运行时,在 JSP 文件显示 Web 页面之前调用 pageHandler 的 onPageLoad 函数
- 在此示例中,该函数接受表示特定客户的整数。此整数由 HTTP 请求参数提供,如练习 8 中所述的那样。
- 此函数将该整数指定给绑定至 Web 页面上字段的变量字段(Customer_ID)。该变量(customer)是基于
Customer 记录部件的,且对 pageHandler 是全局的。
- 此函数将变量传递给库函数 getCustomer;而此函数将列数据从 CUSTOMER 数据库检索到该变量的每个字段中。
- 当 onPageLoad 函数结束时,EGL 运行时代码将数据从 pageHandler 中的字段放置到 Web 页面上的相关字段中。
- 在刚插入的代码下面(但在最后一个 end 语句之前),插入用户提交输入时进行响应的函数:
Function updatecustomerRec()
CustomerLib.updateCustomerData(customer);
forward to "allcustomers";End
- 保存该文件。
现在,代码看起来应如下所示:

以下是一些有关 updateCustomerRec() 的详细信息:
- 需要将此函数绑定至 Web 页面上的某个按钮。当用户单击该按钮时,就会调用该函数。
- EGL forward 语句将控制权转移至 JSP 文件,该 JSP 文件表示 CUSTOMER 表中所有行的列表。
- 关闭该文件。
将该函数绑定至“提交”按钮
创建更新页面的最后一步是将 updateCustomerRec() 绑定至 Web 页面上的提交按钮。
- 打开文件 updatecustomer.jsp。
- 在“页数据”视图中,展开 Actions 文件夹并单击标记为 updatecustomerRec() 的图标。
- 将 updatecustomerRec() 图标直接拖放到页面上的“更新这条记录”按钮上。
此页面的外观没有发生更改,但该按钮现在已绑定至 pageHandler 的 updatecustomerRec() 函数。
- 保存该页面。
测试完成的站点
现在可以在服务器上运行该站点了。
- 在“项目资源管理器”视图中,右键单击 allcustomers.jsp 文件并从弹出菜单中单击运行 > 在服务器上运行。
相关页面在 Web 浏览器中打开。现在,列表中的每个客户标识号都是指向 updatecustomer.jsp 所显示的 Web 页面的超链接。
- 单击其中一个客户标识号。会转到 updatecustomer.jsp 显示的 Web 页面,此 Web 页面显示特定于行的信息。
- 输入此记录的新 FIRST_NAME。
- 为该页面上的其它字段输入新信息。不要更改 CUSTOMER_ID 字段。
- 完成输入新的信息之后,单击更新这条记录按钮。
当单击更新这条记录按钮时,会返回到 allcustomers.jsp 显示的 Web 页面。注意,已更改此记录来显示在步骤 4 中输入的新 FIRST_NAME。您可以再次单击此记录的标识号来查看在数据库中已保存的新信息。
请继续查看教程总结。