演習 2.4: コンボ・ボックスの動的取り込み
ユーザーが、できる限り簡単に検索を行えるようにするため、ユーザー・エラーを防ぎ、ユーザーによる意思決定を最大限に単純化する必要があります。この演習では、「STATE」入力フィールドをコンボ・ボックスに変更して、検索ページをより使いやすいものにする方法を学習します。コンボ・ボックスには、ユーザーが使用すべき状態を推測しなくても済むように、データベース内の少なくとも 1 つのカスタマー・レコードによって示される状態のみが表示されます。
ライブラリーへのコードの追加
- CustomerLib.egl を開く。
- ファイルの最後の end 文の直前に以下のコードを追加する。
function getAllCustomerStates(Customers Customer[])
get Customers with
#sql{
select STATE
from EGL.CUSTOMER
group by STATE
};
end
以下は、追加した getAllCustomerStates 関数に関する技術面での注釈です。
- この関数は、getAllCustomers 関数と同じ方法で、データベースのカスタマー・レコードにアクセスします。大きな違いは、getAllCustomerStates 関数では、Customer テーブル内のすべてのフィールドではなく、STATE フィールドのみが選択されます。
- group by STATE 行は、それぞれの状態が検索結果で 1 回だけ表示されるようにするため、検索結果を状態ごとにまとめます。
- ファイルを保管する。
- Ctrl+G キーを押すか、ファイルを右クリックしてポップアップ・メニューで「生成」をクリックし、ライブラリー・ファイルの Java を生成する。
- ファイルを閉じる。
ページ・ハンドラーへのコードの追加
- customersearch.jsp ページに戻る。
- customersearch.jsp ページを右クリックし、ポップアップ・メニューから「ページ・コードの編集 」をクリックする。
- customersearch.egl ファイルで、andOr char(3); で始まるコード行を見つけ、その下にブランク行を追加する。
- 追加した新規ブランク行に、次のコード行を挿入する。
customerStates Customer[];
- Function onPageLoad() で始まるコード行を見つけ、その下にブランク行を追加する。
- Function onPageLoad() 行の下に追加した新規ブランク行に、次のコード行を挿入する。
CustomerLib.getAllCustomerStates(customerStates);
customersearch.egl ファイルは次のようになります。

以下は、ここで追加したコードに関する技術面での注釈です。
- customerStates 配列には、データベース内の少なくとも 1 人の顧客によって示される状態のリストが入ります。
- onPageLoad 関数に追加した行は、customerStates 配列をライブラリー内の getAllCustomerStates 関数に送ります。その結果、配列に状態のリストが取り込まれます。
- ファイルを保存して閉じる。
ページへのコンボ・ボックスの追加
データが動的に取り込まれるコンボ・ボックスを追加する方法は、前の演習で追加したラジオ・ボタン・グループのような、事前定義値を持つ JSF コントロールを追加する方法よりも複雑です。ここでは、コンボ・ボックスを以下の 2 つの EGL データにバインドする必要があります。
- customerStates 配列。コンボ・ボックスのオプションのリストを提供します。
- searchTerms.State 変数。ユーザーがコンボ・ボックスから選択したオプションの値が入ります。
- customersearch.jsp ページに戻る。
- 「STATE」入力フィールドをクリックして Delete キーを押す。
- 削除した入力フィールドの代わりに、パレット・ビューの「Faces コンポーネント」ドロワーから「コンボ・ボックス (Combo Box)」を追加する。
- ページ・データ・ビューで、「customersearch」>「customerStates- Customer[]」を展開する。
- ページ・データ・ビューの「customerStates - Customer[]」の下の「state - STATE」をコンボ・ボックスへドラッグする。
- コンボ・ボックスをクリックして選択する。
- プロパティー・ビューを開く。
- プロパティー・ビューで、「値」フィールドの横の「ページ・データ・オブジェクトの選択」ボタン
をクリックする。「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
- 「ページ・データ・オブジェクトの選択」ウィンドウで、「customersearch」>「searchTerms - Customer」を展開する。
- 「searchTerms - Customer」の下で「state - STATE」をクリックする。
「ページ・データ・オブジェクトの選択」ウィンドウは次のようになります。

- 「OK」をクリックする。
- ページを保管する。
- ページをテストする。
これで、「演習 2.5: 検索結果のカスタマイズ」を開始する準備ができました。