これまでの演習では、JSF コンポーネントを Web ページに追加してそれらを EGL データに手動でバインドする方法を学習しました。そのような方法は、時間がかかりますが、ページの外観の完全な制御を可能にします。
この演習では、EGL データにバインドする JSF コンポーネントを簡単かつ迅速に作成する方法を学習します。EGL データを作成してそれをページへ直接ドラッグすると、バインドされた JSF コンポーネントが自動的に作成されます。そのような方法で作成される JSF コンポーネントのタイプは使用する EGL データのタイプによって異なります。次の表に、EGL データの基本的なタイプと Web ページ上でそれらを表すために作成される JSF コンポーネントのデフォルトのタイプを示します。
EGL データ・タイプ |
デフォルトの JSF コンポーネント・タイプ |
|---|---|
単一の変数または DataItem |
単一の入力/出力フィールド |
| ブール変数または dataItem | チェック・ボックス |
単一のレコード |
入力/出力フィールドおよびラベルのグループ |
1 次元配列 |
データ・テーブル |
ネスト型配列または 2 次元配列 |
ネスト型データ・テーブル |
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
ページ・コード・ファイルに追加したばかりのコードによって、いくつかの異なるデータが作成されています。ページ・データ・ビューには、次のピクチャーのように、それらのデータが表示されています。

以下に、ページ・データ・ビューで表示されるようになったデータについて説明します。
4 つの変数がそれらのラベルと共にページ上に表形式で表示されます。ラベルのテキストは dataItem の宣言内の displayName プロパティーによって設定されます。ページは次のようになります。

データ・テーブルがページ上に作成され、custRecords レコード内のフィールドが表示されます。レコード自体がより複雑なものであるため、このレイアウトは表よりも複雑です。データ・テーブルには、顧客の名前および電話番号の列と、レコード内の住所の配列を表す複数列から構成される表が表示されます。
ページの下部は次のようになります。

これで、『演習 1.5: スタイルの動的変更』を開始する準備ができ ました。