在前面的几个练习中,您学会了如何将 JSF 组件添加至 Web 页面并手工将它们绑定至 EGL 数据。此方法耗时较多,但它让您全盘控制页面的外观。
在此练习中,将学习创建绑定至 EGL 数据的 JSF 组件的更简单更快的方法。将创建 EGL 数据并直接将它拖到页面上,从而自动创建已绑定的 JSF 组件。用这种方法创建的 JSF 组件取决于所用的 EGL 数据的类型。下表列出了基本 EGL 数据类型以及创建的用来在 Web 页面上表示这些数据类型的缺省 JSF 组件类型:
EGL 数据类型 |
缺省 JSF 组件类型 |
|---|---|
单个变量或 dataItem |
单个输入字段或输出字段 |
| 布尔变量或 dataItem | 复选框 |
单个记录 |
输入字段或输出字段及标签组 |
一维数组 |
数据表 |
嵌套的数组或两维数组 |
嵌套的数据表 |
EGLJSFcontrols
package pagehandlers;
import data.*;
PageHandler EGLJSFcontrols
{handleHardIOErrors = no, throwNrfEofExceptions = yes }
{view = "EGLJSFcontrols.jsp", onPageLoadFunction = onPageLoad}
//Individual EGL Variables
charFieldItem charField;
decimalFieldItem decimalField;
dateFieldItem dateField;
booleanFieldItem booleanField;
nameRec nameRecType;
//Dynamic array declarations
dBcustomerRecs Customer[];
custRecord custRecord1;
custRecords custRecord1[];
Function onPageLoad()
//Get Customers from DB
CustomerLib.getAllCustomers(dBcustomerRecs);
//Fill 1st occurrence of customer record
custRecord.CustomerInfo.name.firstName="Bill";
custRecord.CustomerInfo.name.midinit="K";
custRecord.CustomerInfo.name.lastName="Person";
custRecord.CustomerInfo.Address[1].Street="12 Any Street";
custRecord.CustomerInfo.Address[1].City="AnyCity";
custRecord.CustomerInfo.Address[1].State="NJ";
custRecord.CustomerInfo.Address[1].Zip="12345";
custRecord.CustomerInfo.Address[2].Street="123 Main Street";
custRecord.CustomerInfo.Address[2].City="Some City";
custRecord.CustomerInfo.Address[2].State="AK";
custRecord.CustomerInfo.Address[2].Zip="22222";
custRecord.CustomerInfo.Address[3].Street="456 IBM Road";
custRecord.CustomerInfo.Address[3].City="My Town";
custRecord.CustomerInfo.Address[3].State="NC";
custRecord.CustomerInfo.Address[3].Zip="55555";
custRecord.CustomerInfo.Phone="(111) 111-1111";
custRecords.appendElement(custRecord);
End
End
//Individual dataItems
DataItem charField char(22)
{value="This is a Text Field", displayName="Char Field"}
end
DataItem dateField char(10)
{value="10/01/2004", dateformat=usaDateFormat,
displayName = "Character(date) Field"}
end
DataItem decimalField decimal(7,2)
{value="2345.67", displayName = "Numeric Decimal Field"}
end
DataItem booleanField char(1)
{value="Y", isBoolean=yes, displayName = "Boolean Field"}
end
//Record and array declarations
record nameRecType type basicRecord //simple structured record
01 Fields;
10 Name;
15 LastName char(11) {Value="IBMUser"};
15 FirstName char(11) {Value="Ann"};
10 Address;
15 Street char(22) {Value="123 Any Street"};
15 City char(22) {Value="AnyTown"};
15 State char(22) {Value="AnyState"};
15 Zip char(5) {value="11111"};
End
//Record with primitives and array
record custRecord1 type basicRecord
01 CustomerInfo;
10 name;
20 firstName char(20);
20 midInit char(20);
20 lastName char(20);
10 Address[3]; //Note embedded fixed-length array
20 Street char(20);
20 City char(20);
20 State char(2);
20 Zip char(5);
10 Phone char(14);
end
刚才添加至页代码文件的代码创建了几份不同的数据。“页数据”视图列示了此数据,如下图中所示:

以下是现在“页数据”视图中可用的数据的描述:
这四个变量以及它们的标签就会显示在页面上的表中。标签的文本是通过 dataItem 声明中的 displayName 属性设置的。该页面看起来应如下所示:

就会在页面上创建一个数据表并显示 custRecords 记录中的字段。这个布局比表复杂一些,原因是此记录本身就复杂一些。该数据表包含客户名称列和电话号码列,以及表示记录中的一组地址的一个多列表。
页面的底部看起来应如下所示:

现在,您可以开始进行练习 1.5:动态更改样式了。