演習 2.4: コンボ・ボックスの動的取り込み

ユーザーが、できる限り簡単に検索を行えるようにするため、ユーザー・エラーを防ぎ、ユーザーによる意思決定を最大限に単純化する必要があります。この演習では、「STATE」入力フィールドをコンボ・ボックスに変更して、検索ページをより使いやすいものにする方法を学習します。コンボ・ボックスには、ユーザーが使用すべき状態を推測しなくても済むように、データベース内の少なくとも 1 つのカスタマー・レコードによって示される状態のみが表示されます。

ライブラリーへのコードの追加

  1. CustomerLib.egl を開く。
  2. ファイルの最後の end 文の直前に以下のコードを追加する。
    function getAllCustomerStates(Customers Customer[])
        get Customers with
            #sql{
                select STATE
                from EGL.CUSTOMER
                group by STATE
            };
      end

    以下は、追加した getAllCustomerStates 関数に関する技術面での注釈です。

  3. ファイルを保管する。
  4. Ctrl+G キーを押すか、ファイルを右クリックしてポップアップ・メニューで「生成」をクリックし、ライブラリー・ファイルの Java を生成する。
  5. ファイルを閉じる。

ページ・ハンドラーへのコードの追加

  1. customersearch.jsp ページに戻る。
  2. customersearch.jsp ページを右クリックし、ポップアップ・メニューから「ページ・コードの編集 」をクリックする。
  3. customersearch.egl ファイルで、andOr char(3); で始まるコード行を見つけ、その下にブランク行を追加する。
  4. 追加した新規ブランク行に、次のコード行を挿入する。

    customerStates Customer[];

  5. Function onPageLoad() で始まるコード行を見つけ、その下にブランク行を追加する。
  6. Function onPageLoad() 行の下に追加した新規ブランク行に、次のコード行を挿入する。

    CustomerLib.getAllCustomerStates(customerStates);

    customersearch.egl ファイルは次のようになります。

    customersearch.egl ファイル内のコード

    以下は、ここで追加したコードに関する技術面での注釈です。

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

ページへのコンボ・ボックスの追加

データが動的に取り込まれるコンボ・ボックスを追加する方法は、前の演習で追加したラジオ・ボタン・グループのような、事前定義値を持つ JSF コントロールを追加する方法よりも複雑です。ここでは、コンボ・ボックスを以下の 2 つの EGL データにバインドする必要があります。

  1. customersearch.jsp ページに戻る。
  2. 「STATE」入力フィールドをクリックして Delete キーを押す。
  3. 削除した入力フィールドの代わりに、パレット・ビューの「Faces コンポーネント」ドロワーから「コンボ・ボックス (Combo Box)」を追加する。
  4. ページ・データ・ビューで、「customersearch」>「customerStates- Customer[]」を展開する。
  5. ページ・データ・ビューの「customerStates - Customer[]」の下の「state - STATE」をコンボ・ボックスへドラッグする。
  6. コンボ・ボックスをクリックして選択する。
  7. プロパティー・ビューを開く。
  8. プロパティー・ビューで、「」フィールドの横の「ページ・データ・オブジェクトの選択」ボタン をクリックする。「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
  9. 「ページ・データ・オブジェクトの選択」ウィンドウで、「customersearch」>「searchTerms - Customer」を展開する。
  10. searchTerms - Customer」の下で「state - STATE」をクリックする。

    「ページ・データ・オブジェクトの選択」ウィンドウは次のようになります。

    「ページ・データ・オブジェクトの選択」ウィンドウの外観

  11. OK」をクリックする。
  12. ページを保管する。
  13. ページをテストする。

これで、『演習 2.5: 検索結果のカスタマイズ』を開始する準備が できました。

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