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

添加复选框和组合框
- 在输入字段下面添加新行,方法是将光标放在 {Error Message for text1} 字段的右边,然后按 Enter 键。
- 从“选用板”视图的 Faces 组件抽屉中,将复选框(而不是“复选框组”)拖到输入字段下面的新行上。
- 在新的复选框下面添加一个新行,方法是将光标放在复选框的右边,然后按 Enter 键。
- 将组合框拖到该复选框下面的新行上。
- 单击新的组合框以选择它。
- 在“属性”视图中,单击添加选项。
- 在名称下面,将组合框选项的名称从 Name0 更改为以下文本:
Option 1
- 将值字段从 Value0 更改为以下文本:
Combo box choice 1
- 用同样的方法,添加名为 Option 2 值为 Combo box choice 2 以及名为 Option 3 值为 Combo box choice 3 的两个组合框选项。
“属性”视图看起来应如下所示:
添加 EGL 代码以管理复选框和组合框
- 右键单击页面的内容区域,然后从弹出菜单中单击编辑页代码。JSFComponentTest.egl 文件将在编辑器中打开。
- 在 JSFComponentTest.egl 文件中,紧接着 PageHandler JSFComponentTest 这一行后面插入以下代码:
comboBoxSelected char(20);
checkBoxSelected char(1) {isBoolean=yes};
- 保存并关闭该文件。
将 EGL 代码绑定至 JSF 组件
- 返回到 JSFComponentTest.jsp 页面。
- 单击页面上的 {EGLOutputTextField} 输出字段,然后按 Delete 键。
- 从“选用板”视图的 HTML 标记抽屉中,将表拖到页面上输出字段所在的地方。将打开“插入表”窗口。
- 在“插入表”窗口中,输入 3 表示行数,输入 2 表示列数。
- 单击确定。
- 在表的左边顶部单元格中,输入 Value of input field。
- 在表的左列第二个单元格中,输入 Value of check box。
- 在表的左列底部单元格中,输入 Value of combo box。
该页面看起来应如下所示:

- 将三个输出组件从“选用板”视图拖到表上,在右边列的每个空单元格中分别放置一个组件。
下一步是在“页数据”视图中将各变量(这些变量是页代码文件中的变量)绑定至页面上的输入字段和输出字段。
- 从“页数据”视图中,将 outputTextField 变量拖到表右边顶部的输出字段上。
- 将 checkBoxSelected 变量从“页数据”视图拖到表中第二个输出字段上。
- 将 comboBoxSelected 变量从“页数据”视图拖到表右边底部输出字段上。
现在就已经将三个输出组件绑定至页代码文件中的变量。最后,必须将输入组件绑定至变量。输入文本字段已经绑定至
inputTextField 变量,因此只需绑定另外两个变量。
- 将 checkBoxSelected 变量从“页数据”视图直接拖到页面上的复选框上。现在,该复选框就被绑定至页代码文件中的变量。
- 将 comboBoxSelected 变量从“页数据”视图直接拖到页面上的组合框上。
该页面看起来应如下所示:

- 保存该页面。
- 测试该页面。
每次在页面上的输入字段中输入信息然后单击提交按钮时,表就会显示输入字段的值。
现在,您可以开始进行练习 1.4:直接从 EGL 代码创建 JSF 组件了。