演習 2.1: 単純な検索ページの作成

以降の 2 つの演習では、検索ページを作成します。ここでページを構築するためのステップは、基本的には、モジュール 1 で作成した単純なテスト用ページと同じです。

  1. Web ページを作成する。
  2. EGL データを作成する。
  3. JSF コンポーネントへ EGL データをバインドする。
  4. EGL データを管理するための EGL 関数を追加する。

この演習ではステップ 1 から 3 について説明し、演習 2.2 でステップ 4 について説明します。

Web ページの作成

  1. EGLWeb」プロジェクトをクリックして選択する。
  2. メニュー・バーから「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
  3. 名前」フィールドに次のファイル名を入力する。

    customersearch

  4. ページ・テンプレートから作成」チェック・ボックスを選択する。
  5. 次へ」をクリックする。
  6. ページ・テンプレート・タイプ」の下で、「ユーザー定義ページ・テンプレート」をクリックする。
  7. サムネール」の下で「A_gray.htpl」テンプレートをクリックする。
  8. 終了」をクリックする。新規ファイルがプロジェクトに追加され、そのファイルがエディターで開きます。
  9. デフォルト・テキストの「Place your page content here.」を除去する。
  10. デフォルト・テキストの代わりに、Customer Search と入力する。
  11. Enter キーを 3 回押してブランク行を 3 行挿入する。

レコードの作成

以下のステップでは、EGL レコードを 2 つ作成します。 searchTerms レコードは、検索入力データ、つまり検索項目を表します。この例では、検索対象の顧客の名前および状態が searchTerms レコードに入ります。searchResults[] レコード配列は、検索結果または検索入力データと一致するデータベースからのレコードを表します。

  1. パレット・ビューの「EGL」ドロワーから、「レコード」をページ・データ・ビューへドラッグする。「レコード・パーツの選択」ウィンドウが開きます。
  2. 「レコード・パーツの選択」ウィンドウで、 「Customer (data/CustomerRecord.egl)」をクリックする。
  3. フィールドの名前を入力」の下に、次のテキストを入力する。

    searchTerms

  4. 配列 (Array)」チェック・ボックスをクリアする。
  5. Web ページに EGL エレメントを表示するためのコントロールを追加する」チェック・ボックスをクリアする。
  6. 終了」をクリックする。
  7. 別の「レコード」をパレット・ビューからページ・データ・ビューへドラッグする。「レコード・パーツの選択」 ウィンドウが再び開きます。
  8. 「レコード・パーツの選択」ウィンドウで、 「Customer (data/CustomerRecord.egl)」をクリックする。
  9. フィールドの名前を入力」の下に、次のテキストを入力する。

    searchResults

  10. 配列 (Array)」チェック・ボックスを選択する。
  11. Web ページに EGL エレメントを表示するためのコントロールを追加する」チェック・ボックスをクリアする。
  12. OK」をクリックする。

ページへのレコードの追加

  1. ページ・データ・ビューで、「customersearch」を展開する。
  2. ページ・データ・ビューから「searchTerms - Customer」レコードを、ページ上の「Customer Search」テキストの下へドラッグする。「挿入のコントロール」ウィンドウが開きます。
  3. 「挿入のコントロール」ウィンドウで、「既存レコードの更新」をクリックする。
  4. なし (None)」をクリックする。
  5. 表示するフィールド」の下で、「last_name」フィールドおよび「state」フィールドの横のチェック・ボックスを選択する。
  6. オプション」をクリックする。
  7. 「オプション」ウィンドウで、「実行ボタン」チェック・ボックスを選択する。
  8. 削除ボタン」チェック・ボックスをクリアする。
  9. OK」をクリックする。
  10. 終了」をクリックする。

    ページは次のようになります。

    検索ページの外観

  11. 「実行」ボタンの右側の「{Error Messages}」フィールドにカーソルを置いて Enter キーを押し、「実行」ボタンの下にブランク行を 1 行追加する。
  12. パレット・ビューから、2 つの「出力 (Output)」コンポーネントをページ上の「実行」ボタンの下の新規行へドラッグする。

    これらの出力フィールドには、戻された検索結果の数、および 「5 Customer(s) found. Search again?」などのメッセージが表示されます。

  13. ページ・データ・ビューから「searchResults - Customer[]」をページ上の「Submit」ボタンおよび新規の出力フィールドの下へドラッグする。「リスト・コントロールの挿入」ウィンドウ が開きます。
  14. 「リスト挿入のコントロール」ウィンドウで「なし (None)」をクリックする。
  15. last_name」、「email_address」、および「state」フィールドの横のチェック・ボックスを選択する。「リスト挿入のコントロール」ウィンドウは次のようになります。

    「リスト挿入のコントロール」ウィンドウ

  16. 終了」をクリックする。
  17. ページを保管する。

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

    検索ページの外観

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

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.