< 前へ | 次へ >

演習 1: シンプルな検索ページを作成する

この演習では、シンプルな検索ページのセットアップを行います。 検索機能を実行する EGL コードの追加については、 次の演習で説明します。
このページを作成する基本的なステップは、 他の EGL-JSF Web ページの場合と基本的に同じです。
  1. Web ページを作成する。
  2. EGL 変数を作成する。
  3. EGL データを JSF コンポーネントにバインドする。
  4. EGL 変数を管理する EGL 関数を追加する。
この演習では、最初の 3 つのステップを説明します。 4 つ目のステップは、次の演習で説明します。 すべての演習は、Introducing EGLのチュートリアルのファイルと知識に基づいています。

Web ページを作成する。

  1. 「プロジェクト・エクスプローラー」ビューで、EGLWeb プロジェクトの「WebContent」フォルダーを右クリックし、「新規」 > 「Web ページ」をクリックします。
  2. 「ファイル名」フィールドに、新規ファイルの名前として次のテキスト (拡張子を含む) を入力します。
    customersearch.jsp
  3. 「フォルダー」フィールドに /EGLWeb/WebContent フォルダーが表示されていることを確認します。
  4. 「テンプレート」リストで、 「マイ・テンプレート」をクリックします。
  5. 「プレビュー」ボックスで、「A_gray.htpl」テンプレートをクリックします。
  6. 「終了」をクリックします。 新規ページが作成されてエディターで開きます。
  7. デフォルトのテキストに代えて、「Customer Search」と入力します。
  8. Enter キーを 3 回押してブランク行を 3 行挿入します。

レコードを作成する

次に、EGL レコードを 2 つ作成します。 searchTerms レコードは、検索用の入力データ、つまり検索語を表します。 この場合、searchTerms レコードには、 検索する顧客の名前と顧客の州が保持されます。 searchResults[] レコード配列は、検索結果、 つまり検索入力と一致するデータベースのレコードを表します。
  1. 「パレット」ビューの「EGL」ドロワーから、 ページ上の「Customer Search」テキストの下に、 「新規変数」をドラッグします。 「新規 EGL データ変数の作成」ウィンドウが開きます。
  2. 「型の選択」に おいて、「レコード」をクリックします。
  3. 「レコード・タイプ」において、 「カスタマー (Customer)」をクリックします。
  4. 「フィールドの名前を入力」フィールドに、 以下のテキストを入力します。
    searchTerms
  5. 「配列」チェック・ボックスのチェック・マークを外します。
  6. 「Web ページに EGL 要素を表示するためのコントロールを追加する」チェック・ボックスをクリアします。
  7. 「OK」をクリックします。
  8. 「パレット」ビューからページ上の「Customer Search」テキストの下に、 もう一度「新規変数」をドラッグします。 「新規 EGL データ変数の作成」ウィンドウが再び開きます。
  9. 「型の選択」に おいて、「レコード」をクリックします。
  10. 「レコード・タイプ」において、 「カスタマー (Customer)」をクリックします。
  11. 「フィールド名を入力してください」で、次のフィールド名を入力します。
    searchResults
  12. 「配列」チェック・ボックスにチェック・マークを付けます。
  13. 「Web ページに EGL 要素を表示するためのコントロールを追加する」チェック・ボックスをクリアします。

  14. 「OK」をクリックします。
これで、ページ・データ・ビューに 2 つの新しい変数が表示されます。

ページにレコードを追加する

  1. ページ・データ・ビューで、「JSF ハンドラー」および「データ」を展開します。
  2. ページ・データ・ビューからページ上の「Customer Search」テキストの下に、searchTerms - Customer レコードをドラッグします。 「挿入のコントロール」ウィンドウが開きます。
  3. 「挿入のコントロール」ウィンドウの「コントロールの作成対象」で、 「既存レコードの更新」をクリックします。
  4. 「表示するフィールド」のフィールド・リストで、 「なし」ボタンをクリックします。 これで、すべてのチェック・ボックスのチェック・マークが外れます。

  5. 「LastName」フィールドと「State」フィールドの横にあるチェック・ボックスに、チェック・マークを付けます。
  6. 「オプション」ボタンをクリックします。
  7. 「オプション」ウィンドウで、「実行ボタン」チェック・ボックスにチェック・マークを付けます。
  8. 「実行ボタン」「ラベル」フィールドに、 「Submit」 と入力します。

  9. 「削除ボタン」チェック・ボックスをクリアします。
  10. 「OK」をクリックします。
  11. 「終了」をクリックします。 ページ上に、顧客の姓のフィールドと 顧客の州のフィールドがあるフォームが表示されます。 これらの入力フィールドに、顧客を検索するための検索語を入力します。 ページは次のようになります。

    検索ページの外観

  12. 「Submit」ボタンの {Error Messages} フィールドの右側にカーソルを置き、「Enter」キーを押して、「Submit」ボタンの下にブランク行を 1 行追加します。
  13. パレットから、「拡張 Faces コンポーネント」ドロワーを開きます。
  14. 「拡張 Faces コンポーネント」ドロワーからページ上の「Submit」ボタンの下の新しい行に、 「出力」コンポーネントを 2 つドラッグします。 これらの出力フィールドには、返された結果の数とメッセージが、「5 Customer(s) found. Search again? (該当する顧客は 5 人です。もう一度検索しますか?)」というように表示されます。
  15. 出力フィールドの後に別のブランク行を追加します。ページ・データ・ビューから「Submit」ボタンと 2 つの新しい出力フィールドの下の新規ブランク行に、searchResults - Customer[] をドラッグします。 「リスト挿入のコントロール」ウィンドウ が開きます。
  16. 「リスト挿入のコントロール」ウィンドウで、「既存レコードの表示 (読み取り専用)」の横にあるラジオ・ボタンをクリックします。
  17. 「表示するカラム」のリストで、「なし」ボタンをクリックします。 これで、チェック・ボックスのチェック・マークが外れます。
  18. 「LastName」フィールド、 「EmailAddress」フィールド、 および「State」フィールドの横にあるチェック・ボックスに、 チェック・マークを付けます。 「リスト挿入のコントロール」ウィンドウは、次のようになります。

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

  19. 「終了」をクリックします。
  20. ページを保管します。
これで、ユーザーが検索語を入力するための入力フィールドと、 検索結果を表示するためのデータ・テーブルが、この検索ページに作成されました。 検索ページは、次のようになります。

検索ページの外観

演習のチェックポイント

これで、シンプルな検索ページが作成されました。
この演習では、次の作業を行う方法を学習しました。
  • EGL Web ページを作成する
  • EGL レコードを作成する
  • Web ページに EGL レコードを追加する
では、 『演習 2: 検索関数のコードを追加する』に進みましょう。
< 前へ | 次へ >

フィードバック