これまでの演習では、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 レコード内のフィールドが表示されます。レコード自体がより複雑なものであるため、このレイアウトは表よりも複雑です。データ・テーブルには、顧客の名前および電話番号の列と、レコード内の住所の配列を表す複数列から構成される表が表示されます。
ページの下部は次のようになります。
これで、「モジュール 2: 検索ページの作成」を開始する準備ができました。