演習 1.3: JSF コントロールへの EGL データ・タイプのマッピング

パレット・ビューの「Faces コンポーネント」ドロワーにはさまざまなコントロールがあります。それぞれのコントロールが正しく機能するために、対応するタイプの EGL データにバインドする必要があります。この演習では、さらに 2 つのコントロールをページに追加して、それらを EGL 変数にバインドします。このページは、完成時には次のようになります。

この演習の完了時のページの外観

コンボ・ボックスへのチェック・ボックスの追加

  1. カーソルを「{Error Message for text1}」フィールドの右側に置いて Enter キーを押し、入力フィールドの下に新規行を追加する。
  2. パレット・ビューの「Faces コンポーネント」ドロワーから、「チェック・ボックス (Check Box)」(「チェック・ボックス・グループ (Check Box Group)」ではありません) を入力フィールドの下の新規行へドラッグする。
  3. カーソルをチェック・ボックスの右側に置いて Enter キーを押し、チェック・ボックスの下に新規行を追加する。
  4. コンボ・ボックス (Combo Box)」をチェック・ボックスの下の新規行へドラッグする。
  5. 新規コンボ・ボックスをクリックして選択する。
  6. プロパティー・ビューで、「選択項目の追加」をクリックする。
  7. 名前 (Name)」の下で、コンボ・ボックスの選択項目の名前を「Name0」から次のテキストに変更する。

    Option 1

  8. 」フィールドの値を「Value0」から次のテキストに変更する。

    Combo box choice 1

  9. 同様の方法で、コンボ・ボックスの選択項目として、Option 2 (値は Combo box choice 2) および Option 3 (値は Combo box choice 3) を追加する。

    プロパティー・ビューは次のようになります。

    プロパティー・ビューの外観

チェック・ボックスとコンボ・ボックスを管理する EGL コードの追加

  1. ページのコンテンツ領域を右クリックし、ポップアップ・メニューで「ページ・コードの編集 」をクリックする。JSFComponentTest.egl ファイルがエディターで開きます。
  2. JSFComponentTest.egl ファイルで、次のコードを PageHandler JSFComponentTest 行のすぐ下に挿入する。

    comboBoxSelected char(20);
    checkBoxSelected char(1) {isBoolean=yes};

  3. ファイルを保存して閉じる。

JSF コンポーネントへの EGL コードのバインド

  1. JSFComponentTest.jsp ページに戻る。
  2. ページ上で「{EGLOutputTextField}」出力フィールドをクリックし、Delete キーを押す。
  3. パレット・ビューの「HTML タグ」ドロワーから、「表 (Table)」を、出力フィールドがあったページへドラッグする。「表の挿入」ウィンドウが開きます。
  4. 「表の挿入」ウィンドウで、行数として 3 を、列数として 2 を入力する。
  5. OK」をクリックする。
  6. 表の左側の上から 1 番目のセルに Value of input field と入力する。
  7. 表の左側の列の上から 2 番目のセルに Value of check box と入力する。
  8. 左側の最後のセルに Value of combo box と入力する。

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

    ページ上の表の外観

  9. パレット・ビューから 3 つの「出力 (Output)」コンポーネントを、それぞれ、表の右側の列の空のセルへドラッグする。

    次のステップでは、ページ・コード・ファイル内の変数を表すページ・データ・ビュー内の変数を、ページ上の入力フィールドおよび出力フィールドにバインドします。

  10. ページ・データ・ビューから、「outputTextField」変数を表の右上の出力フィールドへドラッグする。
  11. checkBoxSelected」変数をページ・データ・ビューから表の 2 番目の出力フィールドへドラッグする。
  12. comboBoxSelected」変数をページ・データ・ビューから表の右下の出力フィールドへドラッグする。

    これで、3 つの出力コンポーネントがページ・コード・ファイル内の変数にバインドされました。最後に、入力コンポーネントを変数にバインドする必要があります。入力テキスト・フィールドは既に inputTextField 変数にバインドされているので、他の 2 つをバインドします。

  13. checkBoxSelected」変数を、ページ・データ・ビューから、ページ上のチェック・ボックスへ直接ドラッグする。これで、チェック・ボックスがページ・コード・ファイル内の変数にバインドされました。
  14. comboBoxSelected」変数を、ページ・データ・ビューから、ページ上のコンボ・ボックスへ直接ドラッグする。

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

    ページ上の表の外観

  15. ページを保管する。
  16. ページをテストする。

    ページ上で入力フィールドに情報を入力して「実行」ボタンをクリックするたびに、表内に入力フィールドの値が表示されます。

これで、「演習 1.4: EGL データから JSF コンポーネントを直接作成」を開始する準備ができました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.