练习 1.3:将 EGL 数据类型映射至 JSF 控件

“选用板”视图的“Faces 组件”抽屉中有许多不同的控件。必须将每个控件绑定至兼容的 EGL 数据类型才能正常工作。在此练习中,将再向页面添加两个控件并将它们绑定至 EGL 变量。完成之后,该页面看起来应如下所示:

此练习结束时页面的外观

添加复选框和组合框

  1. 在输入字段下面添加新行,方法是将光标放在 {Error Message for text1} 字段的右边,然后按 Enter 键。
  2. 从“选用板”视图的 Faces 组件抽屉中,将复选框(而不是“复选框组”)拖到输入字段下面的新行上。
  3. 在新的复选框下面添加一个新行,方法是将光标放在复选框的右边,然后按 Enter 键。
  4. 组合框拖到该复选框下面的新行上。
  5. 单击新的组合框以选择它。
  6. 在“属性”视图中,单击添加选项
  7. 名称下面,将组合框选项的名称从 Name0 更改为以下文本:

    Option 1

  8. 字段从 Value0 更改为以下文本:

    Combo box choice 1

  9. 用同样的方法,添加名为 Option 2 值为 Combo box choice 2 以及名为 Option 3 值为 Combo box choice 3 的两个组合框选项。

    “属性”视图看起来应如下所示:

    “属性”视图的外观

添加 EGL 代码以管理复选框和组合框

  1. 右键单击页面的内容区域,然后从弹出菜单中单击编辑页代码。JSFComponentTest.egl 文件将在编辑器中打开。
  2. 在 JSFComponentTest.egl 文件中,紧接着 PageHandler JSFComponentTest 这一行后面插入以下代码:

    comboBoxSelected char(20);
    checkBoxSelected char(1) {isBoolean=yes};

  3. 保存并关闭该文件。

将 EGL 代码绑定至 JSF 组件

  1. 返回到 JSFComponentTest.jsp 页面。
  2. 单击页面上的 {EGLOutputTextField} 输出字段,然后按 Delete 键。
  3. 从“选用板”视图的 HTML 标记抽屉中,将拖到页面上输出字段所在的地方。将打开“插入表”窗口。
  4. 在“插入表”窗口中,输入 3 表示行数,输入 2 表示列数。
  5. 单击确定
  6. 在表的左边顶部单元格中,输入 Value of input field
  7. 在表的左列第二个单元格中,输入 Value of check box
  8. 在表的左列底部单元格中,输入 Value of combo box

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

    页面上表的外观

  9. 将三个输出组件从“选用板”视图拖到表上,在右边列的每个空单元格中分别放置一个组件。

    下一步是在“页数据”视图中将各变量(这些变量是页代码文件中的变量)绑定至页面上的输入字段和输出字段。

  10. 从“页数据”视图中,将 outputTextField 变量拖到表右边顶部的输出字段上。
  11. checkBoxSelected 变量从“页数据”视图拖到表中第二个输出字段上。
  12. comboBoxSelected 变量从“页数据”视图拖到表右边底部输出字段上。

    现在就已经将三个输出组件绑定至页代码文件中的变量。最后,必须将输入组件绑定至变量。输入文本字段已经绑定至 inputTextField 变量,因此只需绑定另外两个变量。

  13. checkBoxSelected 变量从“页数据”视图直接拖到页面上的复选框上。现在,该复选框就被绑定至页代码文件中的变量。
  14. comboBoxSelected 变量从“页数据”视图直接拖到页面上的组合框上。

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

    页面上表的外观

  15. 保存该页面。
  16. 测试该页面。

    每次在页面上的输入字段中输入信息然后单击提交按钮时,表就会显示输入字段的值。

现在,您可以开始进行练习 1.4:直接从 EGL 代码创建 JSF 组件了。

反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.