< 前へ | 次へ >

演習 5: 検索結果をカスタマイズする

この演習では、検索結果を表示するために、より複雑なデータ・テーブルを作成する方法を学習します。

これまでは、Web ページに追加した JSF コンポーネントはそれぞれ、単一のデータベース・テーブルのデータにバインドしていました。 複雑なリレーショナル・データベースを使用する場合には、複数のテーブルのデータを一度に処理することができます。

この演習では、Customer テーブルと State テーブルの両方のデータを表示することで、 結果のカスタマイズを行います。 このようにすると、顧客の名前 (Customer テーブルのデータ) と、 顧客の完全な (2 文字の略称ではない) 州名 (State テーブルのデータ) の両方が、 結果に表示されます。 また、顧客の姓と名を組み合わせてフルネームのフィールドを作成することで、 結果のカスタマイズを行うこともできます。 最終的なデータ・テーブルは、次のようになります。

完全な顧客名および州名を含むデータ・テーブル

このようなカスタマイズを施したデータ・テーブルを作成する一番簡単な方法は、 このデータ・テーブル内の単一のレコードを表す EGL レコードを、 カスタマイズして作成することです。 そして、これらのレコードの配列を作成して、データ・テーブルにバインドします。 この演習でカスタマイズして作成する EGL レコードは、 次の 3 つのフィールドから成り立っています。
  • email フィールド。Customer テーブルにある顧客の電子メール・アドレスを保持します。
  • fullName フィールド。Customer テーブルにある 顧客の姓と名を組み合わせた名前を保持します。
  • State フィールド。顧客の完全な州名を保持します。 この検索関数は、完全な名前を取得するために 、Customer テーブルにある顧客の州の略称と 、State テーブルにある略称と州名のリストを相互参照します。

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

  1. SearchLibrary.egl を開きます。
  2. 次の関数をライブラリーに追加します。
    	function getOneState(state Statetable)
    		get state;
    	end
    stateTable レコードは、Statetable.egl ファイルで定義されています。したがって、この関数を入力する際にコード補完機能を使用しなかった場合は、インポートを編成する必要があります (Ctrl+Shift+O)。
  3. このファイルのライブラリーの最後にある end ステートメントの直後 に、 次のコードを追加します。
    Record customizedResult type basicRecord
    	fullName STRING {displayName = "Full Name"};
    	email STRING {displayName = "Email Address"};
    	stateName STRING {displayName = "State"};
    end
    注: ライブラリーそのものにレコード定義を組み込むことができない ため、customizedResult レコード定義は、 ライブラリーを閉じる end ステートメントの後に追加しなければなりません。
  4. ファイルを保存します。
  5. ファイルを生成します。

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

コードをページ・コード・ファイルに追加する

  1. customersearch.jsp ページに戻ります。
  2. customersearch.jsp ページを右クリックし、ポップアップ・メニューで「ページ・コードの編集」をクリックします。
  3. JSF ハンドラーの customerStates STRING[0]; 行の後に、次の変数定義を追加します。
    allRecords customizedResult[0];
    この変数は、 先ほど作成したカスタマイズ・レコードに基づいて、新しい検索結果を表示します。
  4. このコード行を挿入する際にコード補完機能を使用しなかった場合は、必ずインポートを編成してください。
  5. 次の関数を、JSF ハンドラーに追加します。
    	function generateCustomResults(passedResults Customer[])
    		allRecords.removeAll();
    		oneRecord customizedResult;
    		counter INT = 1;
    		state Statetable;
    		
    		//loop once for each search result returned
    		while (counter <= (passedResults.getSize()))
    			oneRecord.fullName = passedResults[counter].FirstName ::
    						" " :: passedResults[counter].LastName;
    			oneRecord.email = passedResults[counter].EmailAddress;
    			state.STATE_ABBREV = passedResults[counter].state;
    			SearchLibrary.getOneState(state);
    			oneRecord.stateName = state.STATE_NAME;
    			allRecords.appendElement(oneRecord);
    			counter = counter + 1;
    		end
    	end
    この関数によって、カスタマイズされた検索結果が組み立てられます。 この関数を、searchFunction 関数の最後に呼び出す必要があります。
  6. JSF ハンドラーで、searchFunction() 関数を閉じる end ステートメントの直前に、次のコード行を追加します。
    generateCustomResults (searchResults);
  7. ファイルを保存します。
JSF ハンドラーに追加した新しい関数が、 次の一般的なステップに従って、カスタマイズされた検索結果を組み立てます。
  1. 姓と名を使って、顧客のフルネームを組み立てます。
  2. 顧客の電子メール・アドレスを取得します。
  3. 顧客の州の略称を取得します。
  4. 略称と一致する州名を検索します。
  5. フルネーム、電子メール・アドレス、および州名を allRecords 配列に追加します。

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

カスタマイズしたデータ・テーブルを作成する

  1. customersearch.jsp ページに戻ります。
  2. オプション: 古い検索結果を削除するには、古いデータ・テーブルを削除します。 次のステップは、任意で実行してください。
    1. 古い検索結果テーブル内のどこかをクリックして、そのテーブル内にカーソルを移動します。
    2. 下矢印キーを押します。 データ・テーブル全体が選択されます。
    3. Delete キーを押します。 データ・テーブルがページから削除されます。
  3. ページ・データ・ビューから、ページ上の古いデータ・テーブル・ロケーションの直下に 、allRecords - customizedResult[] をドラッグします。 「リスト挿入のコントロール」ウィンドウ が開きます。
  4. 「既存レコードの表示 (読み取り専用)」の横にある、 ラジオ・ボタンをクリックします。
  5. 「終了」をクリックします。 新しいデータ・テーブルが、ページ上に作成されます。
  6. ページを保存します。
  7. ページのテストを行います。

顧客を検索すると、顧客のフルネーム、電子メール・アドレス、 および州名がデータ・テーブルに表示されるようになります。 ページは次のようになります。

完成した検索ページ

演習のチェックポイント

「FirstName」フィールドと「LastName」フィールドを組み合わせて「Fullname」フィールドにし、「State」フィールドの 2 文字のコードを完全な州名に変換することで、 検索結果をカスタマイズしました。

この演習では、次の作業を行う方法を学習しました。
  • 結果をカスタマイズする関数を、ライブラリーに追加する
  • ライブラリー・ファイルで、ライブラリー自身の外側にレコードを追加する
  • 新たにカスタマイズされた結果関数を、JSF ハンドラーに追加する
  • 新しい結果テーブルを、Web ページに配置する
  • 新しい結果関数を、テーブルにバインドする
< 前へ | 次へ >

フィードバック