< 前へ | 次へ >

演習 4: コンボ・ボックスに動的にデータを取り込む

この演習では、顧客の州のうち有効な選択項目のみを コンボ・ボックスにリストすることで、検索ページをさらに使いやすくします。
ユーザーができるだけ簡単に検索を行えるようにするには、 ユーザー・エラーを防ぎ、ユーザーが行わなければならない決定を 可能な限り簡素化する必要があります。 この演習では、「State」入力フィールドをコンボ・ボックスに置き換えることで、 検索ページをより使いやすくする方法を学習します。 このコンボ・ボックスには、データベース内で少なくとも 1 つの顧客レコードに含まれる州のみをリストして、ユーザーがどの州を使用するかを検討する手間を省きます。

コードをライブラリーに追加する

まず、データベース内に含まれる州をすべて取り出す関数を、ライブラリーに追加する必要がありま す。 この関数は、ライブラリー内の他の関数よりも単純なものになります。 データベースから 1 つの列だけを取り出せばよく、 検索の入力パラメーターもありませんし、 出力配列に保持されるのは州のリストだけです。 州情報に対して、顧客レコードの配列を使用することもできますが、 レコード内の他のフィールドは必要ないので、 ストリングの配列を使用する方が作業は単純になります。
  1. SearchLibrary.egl を開きます。
  2. 次の関数をライブラリーに追加します。
    	function getAllCustomerStates(listOfStates STRING[])
    		customers Customer[0];
    		counter INT;
    
    		get customers with
    			#sql{
    				select "STATE"
    				from EGL.CUSTOMER
    				order by "STATE" asc
     			};
    
    		listOfStates.removeAll();
    		for (counter from 1 to customers.getSize() by 1)
    			listOfStates.appendElement(customers[counter].State);
    		end
    
    	end
  3. ファイルを保管します。
  4. ライブラリーを生成します。
先ほど追加した getAllCustomerStates 関数に関する技術上の注意点を以下に示します。
  • この関数は、getAllCustomers() 関数と同じように、データベースの顧客レコードにアクセスします。 ただし、getAllCustomerStates() 関数が大きく異なる 点は、Customer テーブル内のすべてのフィールドではなく、STATE フィールドのみを選択するところです。
  • 「group by」 SQL コマンドによって、 州別に結果がグループ化されるため、 各州は結果の中で一度しかリストされません。
  • 「order by」 SQL command によって、結果がアルファベット順に表示されます。asc キーワードは、昇順であることを示します。
  • for ループによって、state フィールドのみが レコードから文字列の配列に移動します。

これで、SearchLibrary.egl ファイルのコードが完成しました。 このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、演習 4 終了後の SearchLibrary.egl ファイルのファイルに記載されているコードと、作成したコードが一致していることを確認してください。

コードを JSF ハンドラーに追加する

  1. customersearch.jsp ページに戻ります。
  2. customersearch.jsp ページを右クリックし、ポップアップ・メニューで「ページ・コードの編集」をクリックします。
  3. andOr CHAR(3); 行の後に、次の命令行を追加します。
    customerStates STRING[0];
    この変数は、 ライブラリー内の関数から返された州のリストを保持します。
  4. function onPreRender() の後に、ブランク行を 1 行追加します。 このブランク行に、次の命令行を追加します。
    SearchLibrary.getAllCustomerStates(customerStates);
  5. ファイルを保管します。

生成が終了すると、customersearch.egl ファイルは次のようになります (一部の関数は圧縮されており、その場合はページの左マージンに正符号が表示されます)。

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

先ほど追加したコードに関する技術上の注意点を以下に示します。

  • customerStates 配列には、データベース内で少なくとも 1 人の顧客のレコードに含まれる州のリストが保持さ れます。
  • onPreRender 関数に追加した行に よって、customerStates 配列が ライブラリー内の getAllCustomerStates 関数に送られ、 この配列に州のリストが取り込まれます。

これで、customersearch.egl ファイルのコードが完成しました。 このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、演習 4 終了後の customersearch.egl ファイルのファイルに記載されているコードと、作成したコードが一致していることを確認してください。

コンボ・ボックスをページに追加する

動的にデータが取り込まれるコンボ・ボックスの追加は、 前回の演習で追加したラジオ・ボタン・グループのような、 事前定義された値を持つ JSF コントロールの追加よりも、複雑な作業になります。 このコンボ・ボックスは、次の 2 つの EGL データにバインドしなければなりません。
  • customerStates 配列。オプションのリストを、コンボ・ボックスに提供します。
  • searchTerms.State 変数。コンボ・ボックスからユーザーが選択した項目を保持します。
  1. customersearch.jsp ページに戻ります。
  2. 「STATE」入力フィールドをクリックして選択し、Delete キーを押します。 入力フィールドが、ページから削除されます。
  3. パレットから、「拡張 Faces コンポーネント」ドロワーを開きます。
  4. 「コンボ・ボックス」項目をページにドラッグし、 「STATE」入力フィールドがあった場所に配置します。
  5. ページ・データ・ビューで、「JSF ハンドラー」 > 「データ」 > searchTerms - Customer を展開します。
  6. ページ・データ・ビューの searchTerms - Customer で 、State - State をコンボ・ボックスまでドラッグします。
    カーソル・メッセージには、「Drop here to bind 'STATE' to the control 'menu1'」と表示されています。
  7. コンボ・ボックスをクリックして、選択します。
  8. プロパティー・ビューを開きます。 プロパティー・ビューでは、「値」フィールドに #{customersearch.searchTerms.State} が設定されています。 これは、コンボ・ボックスで選択された項目の値が searchTerms レコード の State フィールドに挿入されることを示します。
  9. プロパティー・ビューの右端で、選択項目のテーブルの近くにある「選択項目のセットを追加」をクリックします。 選択項目のリストに、<selectitems> ラベルとデフォルト値を持つ、新しい項目が追加されます。 <selectitems> ラベルは、単一の静的ラベルではなく、 複数のオプションを表す JSF タグです。 言い換えれば、このコンボ・ボックスは、コンボ・ボックス内の両方のラベルの「値」列で指定した値と、 それらのラベルで表される値を使用します。
  10. <selectitems> ラベルの横にある「値」フィールドで、「ページ・データ・オブジェクトの選択」ボタンをクリックします。 「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
  11. 「ページ・データ・オブジェクトの選択」ウィンドウで「データ」を展開して customerStates - string[] をクリックします。

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

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

  12. 「OK」をクリックします。 これで、customerStates 変数から取り出されたものがコンボ・ボックス内の選択項目になり、 コンボ・ボックスで選択された州が searchTerms 変数に挿入されます。
  13. ページを保管します。
  14. ページのテストを行います。

演習のチェックポイント

検索パラメーターのリストを作成するコンボ・ボックスを、Web ページ上に作成しました。
この演習では、以下を行う方法を学習しました。
  • 限定検索用のコードを、ライブラリーに追加する
  • 変更した検索関数を呼び出すコードを、JSF ハンドラーに追加する
  • コンボ・ボックスを、Web ページに追加する
  • 変更した検索関数を、コンボ・ボックスにバインドする
では、『演習 5: 検索結果をカスタマイズする』に進みましょう。
< 前へ | 次へ >

フィードバック