在前面的几个练习中,您学会了如何将 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:动态更改样式了。