练习 9:创建更新页面

在此练习中,将创建允许用户更新 CUSTOMER 表的 Web 页面。

创建文件 updatecustomer.jsp

  1. 在“项目资源管理器”视图中,单击 EGLWeb 项目的 WebContent 文件夹。
  2. 单击文件 > 新建 > Faces JSP 文件。将打开“新建 Faces JSP 文件”向导。
  3. 文件名字段中,输入此文本作为新文件的名称:

    updatecustomer

  4. 选择从页面模板创建复选框。
  5. 单击下一步
  6. 缩略图框中,单击 A_gray.htpl 模板。
  7. 单击完成。这样就创建了新页面并将在编辑器中打开它。
  8. 用以下文本来替换缺省文本:

    Update Customer Information

  9. 按 Enter 键 3 次以插入 3 个空白行。
  10. 保存该页面。

    新的 updatecustomer.jsp 页面看起来应如下所示:

    updatecustomer.jsp 页面的外观

将 EGL 记录添加至页面

下一步是将 EGL 数据添加至此页面:

  1. 打开“选用板”视图上的 EGL 抽屉。
  2. 记录图标拖到“页数据”视图上。将打开“选择记录部件”窗口。
  3. 数组修饰符下面,清除数组复选框。
  4. 清除在 Web 页面上添加控件以显示 EGL 元素复选框。
  5. 从列表中选择记录部件或输入以下一个名称下面,单击 Customer (data/CustomerRecord.egl)
  6. 单击确定。新记录将出现在“页数据”视图中。

在 JSP 页面上显示数据

如练习 7 中那样,下一步是在该页面上创建数据控件。

  1. 在“页数据”视图中,单击 customer - Customer
  2. customer - Customer 拖到 Web 页面上,当光标在“更新客户信息”文本下面时松开鼠标按键。将打开“插入控件”窗口。
  3. 在“插入控件”窗口中,单击更新现有记录
  4. 单击选项。将打开“选项”窗口。
  5. 选择提交按钮复选框。
  6. 清除删除按钮复选框。
  7. 对于提交按钮标签,请输入以下文本:

    Update this record

  8. 单击确定
  9. 单击完成

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

  10. 保存该页面。

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

    updatecustomer.jsp 页面的外观

将函数添加至库以更新数据库行

既然 Web 页面上有了这些控件,您就需要将两个函数添加至 CustomerLib.egl 库中:

  1. 在“项目资源管理器”视图中,展开 EGLSource 文件夹和 data 包,然后双击 CustomerLib.egl
  2. 在这两个 end 语句之间,插入此代码:
    Function getCustomer(Customer Customer)
      get Customer usingKeys Customer.Customer_ID;
    end
  3. 保存该文件。

    CustomerLib.egl 文件看起来应如下所示:

    customerlib.egl 文件的外观。

    以下是一些有关 getCustomer() 的详细信息:

  4. 和练习 6 一样,您可以右键单击 get Customer usingKeys 行,然后单击 SQL 语句 > 查看以查看此代码生成的 SQL 语句。当完成查看 SQL 语句时,单击关闭

    如果没有看到“查看”命令,则确保光标在代码的 get Customer usingKeys 这一行上。

    接下来,添加完成如下任务的函数:

  5. 在 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
  6. 保存该文件。
  7. 要生成输出,按 Ctrl+G 或右键单击该文件中的任何位置,并从弹出菜单中单击“生成”。

    该文件看起来应如下所示:

    customerlib.egl 文件的外观

    以下是一些有关 updateCustomerData() 的详细信息:

    此文件中任何红色的标记都指示存在语法错误。确保您输入的代码与显示的完全一样。如果对此代码进行了更改,则记得保存该文件(Ctrl+S)并生成输出(Ctrl+G)。

将函数调用添加至 EGL 库

现在,添加调用两个新的库函数的代码。

  1. 通过在“项目资源管理器”视图中双击文件 updatecustomer.jsp 来打开它。
  2. 右键单击 updatecustomer.jsp 显示的 Web 页面中的任何地方,并从弹出菜单中单击编辑页代码。将打开 updatecustomer.egl 文件。
  3. 将以下代码从该文件中除去:
    Function onPageLoad()
    End
  4. 在上一个步骤中删除代码的位置,插入以下代码:
    Function onPageLoad(CID int)
    customer.Customer_ID = CID;
    CustomerLib.getCustomer(customer); End

    现在,代码看起来应如下所示:

    updatecustomer.egl 文件的外观

    以下是一些有关 onPageLoad() 的详细信息:

  5. 在刚插入的代码下面(但在最后一个 end 语句之前),插入用户提交输入时进行响应的函数:
    Function updatecustomerRec()
    CustomerLib.updateCustomerData(customer);
    forward to "allcustomers";
    End
  6. 保存该文件。

    现在,代码看起来应如下所示:

    updatecustomer.egl 文件的外观

    以下是一些有关 updateCustomerRec() 的详细信息:

将该函数绑定至“提交”按钮

创建更新页面的最后一步是将 updateCustomerRec() 绑定至 Web 页面上的提交按钮。

  1. 打开文件 updatecustomer.jsp
  2. 在“页数据”视图中,展开 Actions 文件夹并单击标记为 updatecustomerRec() 的图标。
  3. updatecustomerRec() 图标直接拖放到页面上的“更新这条记录”按钮上。

    此页面的外观没有发生更改,但该按钮现在已绑定至 pageHandler 的 updatecustomerRec() 函数。

  4. 保存该页面。

测试完成的站点

现在可以在服务器上运行该站点了。

  1. 在“项目资源管理器”视图中,右键单击 allcustomers.jsp 文件并从弹出菜单中单击运行 > 在服务器上运行

    相关页面在 Web 浏览器中打开。现在,列表中的每个客户标识号都是指向 updatecustomer.jsp 所显示的 Web 页面的超链接。

  2. 单击其中一个客户标识号。会转到 updatecustomer.jsp 显示的 Web 页面,此 Web 页面显示特定于行的信息。
  3. 输入此记录的新 FIRST_NAME。
  4. 为该页面上的其它字段输入新信息。不要更改 CUSTOMER_ID 字段。
  5. 完成输入新的信息之后,单击更新这条记录按钮。

    当单击更新这条记录按钮时,会返回到 allcustomers.jsp 显示的 Web 页面。注意,已更改此记录来显示在步骤 4 中输入的新 FIRST_NAME。您可以再次单击此记录的标识号来查看在数据库中已保存的新信息。

请继续查看教程总结

使用条款 | 反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.