演習 2.1: 単純な検索ページの作成
以降の 2 つの演習では、検索ページを作成します。ここでページを構築するためのステップは、基本的には、モジュール 1 で作成した単純なテスト用ページと同じです。
- Web ページを作成する。
- EGL データを作成する。
- JSF コンポーネントへ EGL データをバインドする。
- EGL データを管理するための EGL 関数を追加する。
この演習ではステップ 1 から 3 について説明し、演習 2.2 でステップ 4 について説明します。
Web ページの作成
- 「EGLWeb」プロジェクトをクリックして選択する。
- メニュー・バーから「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
- 「名前」フィールドに次のファイル名を入力する。
customersearch
- 「ページ・テンプレートから作成」チェック・ボックスを選択する。
- 「次へ」をクリックする。
- 「ページ・テンプレート・タイプ」の下で、「ユーザー定義ページ・テンプレート」をクリックする。
- 「サムネール」の下で「A_gray.htpl」テンプレートをクリックする。
- 「終了」をクリックする。新規ファイルがプロジェクトに追加され、そのファイルがエディターで開きます。
- デフォルト・テキストの「Place your page content here.」を除去する。
- デフォルト・テキストの代わりに、Customer Search と入力する。
- Enter キーを 3 回押してブランク行を 3 行挿入する。
レコードの作成
以下のステップでは、EGL レコードを 2 つ作成します。 searchTerms レコードは、検索入力データ、つまり検索項目を表します。この例では、検索対象の顧客の名前および状態が searchTerms レコードに入ります。searchResults[] レコード配列は、検索結果または検索入力データと一致するデータベースからのレコードを表します。
- パレット・ビューの「EGL」ドロワーから、「レコード」をページ・データ・ビューへドラッグする。「レコード・パーツの選択」ウィンドウが開きます。
- 「レコード・パーツの選択」ウィンドウで、
「Customer (data/CustomerRecord.egl)」をクリックする。
- 「フィールドの名前を入力」の下に、次のテキストを入力する。
searchTerms
- 「配列 (Array)」チェック・ボックスをクリアする。
- 「Web ページに EGL エレメントを表示するためのコントロールを追加する」チェック・ボックスをクリアする。
- 「OK」をクリックする。
- 別の「レコード」をパレット・ビューからページ・データ・ビューへドラッグする。「レコード・パーツの選択」ウィンドウが再び開きます。
- 「レコード・パーツの選択」ウィンドウで、
「Customer (data/CustomerRecord.egl)」をクリックする。
- 「フィールドの名前を入力」の下に、次のテキストを入力する。
searchResults
- 「配列 (Array)」チェック・ボックスを選択する。
- 「Web ページに EGL エレメントを表示するためのコントロールを追加する」チェック・ボックスをクリアする。
- 「OK」をクリックする。
ページへのレコードの追加
- ページ・データ・ビューで、「customersearch」を展開する。
- ページ・データ・ビューから「searchTerms - Customer」レコードを、ページ上の「Customer Search」テキストの下へドラッグする。「挿入のコントロール」ウィンドウが開きます。
- 「挿入のコントロール」ウィンドウで、「既存レコードの更新」をクリックする。
- 「なし (None)」をクリックする。
- 「表示するフィールド」の下で、「last_name」フィールドおよび「state」フィールドの横のチェック・ボックスを選択する。
- 「オプション」をクリックする。
- 「オプション」ウィンドウで、「実行ボタン」チェック・ボックスを選択する。
- 「Submit button Label」フィールドに「Submit」と入力する。
- 「削除ボタン」チェック・ボックスをクリアする。
- 「OK」をクリックする。
- 「終了」をクリックする。
ページは次のようになります。

- 「実行」ボタンの右側の「{Error Messages}」フィールドにカーソルを置いて Enter キーを押し、「実行」ボタンの下にブランク行を 1 行追加する。
- パレット・ビューから、2 つの「出力 (Output)」コンポーネントをページ上の「実行」ボタンの下の新規行へドラッグする。
これらの出力フィールドには、戻された検索結果の数、および 「5 Customer(s) found. Search again?」などのメッセージが表示されます。
- ページ・データ・ビューから「searchResults - Customer[]」をページ上の「Submit」ボタンおよび新規の出力フィールドの下へドラッグする。「リスト・コントロールの挿入」ウィンドウが開きます。
- 「リスト挿入のコントロール」ウィンドウで「なし (None)」をクリックする。
- 「last_name」、「email_address」、および「state」フィールドの横のチェック・ボックスを選択する。「リスト挿入のコントロール」ウィンドウは次のようになります。

- 「終了」をクリックする。
- ページを保管する。
これで、検索ページに、検索結果を表示するデータ・テーブルだけでなく、ユーザーが検索項目を入力するための入力フィールドも配置されました。検索ページは次のようになります。

これで、『演習 2.2: 検索関数に関するコードの追加』を開始する
準備ができました。