演習 1.4: EGL データから JSF コンポーネントを直接作成

これまでの演習では、JSF コンポーネントを Web ページに追加してそれらを EGL データに手動でバインドする方法を学習しました。そのような方法は、時間がかかりますが、ページの外観の完全な制御を可能にします。

この演習では、EGL データにバインドする JSF コンポーネントを簡単かつ迅速に作成する方法を学習します。EGL データを作成してそれをページへ直接ドラッグすると、バインドされた JSF コンポーネントが自動的に作成されます。そのような方法で作成される JSF コンポーネントのタイプは使用する EGL データのタイプによって異なります。次の表に、EGL データの基本的なタイプと Web ページ上でそれらを表すために作成される JSF コンポーネントのデフォルトのタイプを示します。
EGL データ・タイプ
デフォルトの JSF コンポーネント・タイプ
単一の変数または DataItem
単一の入力/出力フィールド
ブール変数または dataItem チェック・ボックス
単一のレコード
入力/出力フィールドおよびラベルのグループ
1 次元配列
データ・テーブル
ネスト型配列または 2 次元配列
ネスト型データ・テーブル

Web ページの作成

  1. プロジェクト・エクスプローラー・ビューで、「EGLWeb」プロジェクトをクリックして選択する。
  2. メニュー・バーから「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
  3. ファイル名」フィールドに次のファイル名を入力する。

    EGLJSFcontrols

  4. ページ・テンプレートから作成」チェック・ボックスを選択する。
  5. 次へ」をクリックする。
  6. ページ・テンプレート・タイプ」の下で、「ユーザー定義ページ・テンプレート」をクリックする。
  7. サムネール」の下で「A_gray.htpl」テンプレートをクリックする。
  8. 終了」をクリックする。新規ファイルがプロジェクトに追加され、そのファイルがエディターで開きます。
  9. デフォルト・テキストの「Place your page content here.」を除去する。
  10. デフォルト・テキストの代わりに、Examples of dragging and dropping EGL data と入力する。
  11. Enter キーを 3 回押してブランク行を 3 行挿入する。

ページへのデータの追加

  1. エディターで EGLJSFcontrols.jsp ページを右クリックし、ポップアップ・メニューから「ページ・コードの編集」をクリックする。EGLJSFcontrols.egl ファイルがエディターで開きます。
  2. EGLJSFcontrols.egl ファイル内のすべてのコードを除去する。
  3. 除去したコードの代わりに、以下のコードを挿入する。
    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. ファイルを保存して閉じる。
  5. エディター内の EGLJSFcontrols.jsp ページに戻り、ページ・データ・ビューを確認する。

    ページ・コード・ファイルに追加したばかりのコードによって、いくつかの異なるデータが作成されています。ページ・データ・ビューには、次のピクチャーのように、それらのデータが表示されています。

    データ項目が表示されたページ・データ・ビュー

    以下に、ページ・データ・ビューで表示されるようになったデータについて説明します。

    booleanFieldItem
    booleanField タイプの単一の EGL 変数。 booleanField タイプは、長さが 1、プロパティーが isBoolean=yes である文字プリミティブとして、ページ・コードで定義されています。
    charFieldItem
    charField タイプの単一の EGL 変数。 charField タイプは、長さが 22 の文字プリミティブとして、ページ・コードで定義されています。
    custRecord
    custRecord1 タイプの単一の EGL レコード。 custRecord1 タイプは、顧客の名前および配列 (顧客の住所を 3 つまで入れることができます) を含む EGL レコードとして、ページ・コードで定義されています。
    custRecords
    custRecord1 タイプの EGL レコードの配列。
    dateFieldItem
    dateField タイプの単一の EGL 変数。 dateField タイプは、長さが 10、プロパティーが dateFormat=usaDateFormat である文字プリミティブとして、ページ・コードで定義されています。
    dBcustomerRecs
    Customer タイプの EGL レコードの配列。この配列は、データベース内の顧客の完全なリストを表します。
    decimalFieldItem
    decimalField タイプの単一の EGL 変数。 decimalField タイプは、10 進数のプリミティブとして、ページ・コードで定義されています。
    nameRec
    nameRecType タイプの単一の EGL レコード。 nameRecType タイプは、顧客の名前およびその顧客の住所を 1 つ含む EGL レコードとして、ページ・コードで定義されています。
     
  6. ページ・データ・ビューで、Ctrl キーを押しながら以下の 4 つの変数をクリックして選択する。
  7. 4 つの変数をページ・データ・ビューから EGLJSFcontrols.jsp ページへドラッグする。「挿入のコントロール」ウィンドウが開きます。
  8. 「挿入のコントロール」ウィンドウで、「既存レコードの更新」をクリックする。
  9. オプション」をクリックする。「オプション」ウィンドウが開きます。
  10. 実行ボタン」チェック・ボックスをクリアする。
  11. 削除ボタン」チェック・ボックスをクリアする。
  12. OK」をクリックする。
  13. 終了」をクリックする。

    4 つの変数がそれらのラベルと共にページ上に表形式で表示されます。ラベルのテキストは dataItem の宣言内の displayName プロパティーによって設定されます。ページは次のようになります。

    EGLJSFcontrols ページの外観

  14. パレット・ビューの「HTML タグ」ドロワーから、「水平けい線」をページ上の表の下へ直接ドラッグ・アンド・ドロップする。
  15. ページ・データ・ビューから「nameRec - nameRecType」レコードをページ上の水平けい線の下へ直接ドラッグする。「コントロールの挿入」ウィンドウが再び開きます。
  16. 既存レコードの更新」をクリックする。
  17. オプション」をクリックする。「オプション」ウィンドウが開きます。
  18. 実行ボタン」チェック・ボックスをクリアする。
  19. 削除ボタン」チェック・ボックスをクリアする。
  20. OK」をクリックする。
  21. 終了」をクリックする。nameRec レコード内のフィールドが、この演習で既に追加した一連の変数と同様に、ページ上に表形式で表示されます。
  22. 別の「水平けい線」をページ上の nameRec レコードのすぐ下へドラッグする。

ページへの複雑なデータの追加

  1. ページ・データ・ビューから「custRecords - custRecord1[]」をページ上の水平けい線の下へドラッグする。「リスト・コントロールの挿入」ウィンドウ が開きます。
  2. 終了」をクリックする。

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

  3. このデータ・テーブルの下にもう 1 つ水平けい線を追加する。
  4. ページ・データ・ビューから「dBcustomerRecs - Customer[]」をページ上の水平けい線の下へドラッグする。「リスト・コントロールの挿入」ウィンドウ が開きます。
  5. 終了」をクリックする。データベース内のすべてのカスタマー・レコードを表すもう 1 つのデータ・テーブルがページ上に作成されます。

    ページの下部は次のようになります。

    ページの外観

  6. ページを保管する。
  7. ページをテストする。それぞれのタイプのデータの外観を確認してください。

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

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.