演習 7: ページへのデータの追加

この演習では、このチュートリアルに付属しているデータベース内のデータを、前の演習で作成した Web ページに追加します。このタスクは以下の部分に分かれます。

ページ・データ・ビューおよび PageHandler へのレコード配列の追加

  1. allcustomers.jsp」ファイルをダブルクリックしてプロジェクト・エクスプローラー・ビューで開く。
  2. ページ・データ・ビューを見つける。 通常、ワークベンチの左下にあります。ページ・データ・ビューはタブを使用して表示することができますが、ページ・データ・ビューが見つからない場合は、 「ウィンドウ」>「ビューの表示」>「ページ・データ」をクリックしてください。
  3. パレット・ビューを見つける。通常、ワークベンチの右側にあります。そのビューが見つからない場合は、 「ウィンドウ」>「ビューの表示」>「基本」>「パレット」 をクリックしてください。
  4. パレット・ビューで、「EGL」ドロワーをクリックして開く。
  5. レコード」アイコンをパレット・ビューからエディター内の allcustomers.jsp ページ にドラッグする。「レコード・パーツの選択」ウィンドウが開きます。
  6. 「レコード・パーツの選択」ウィンドウで、 「Customer (data/CustomerRecord.egl)」をクリックする。 この場合、それぞれの配列エレメントの基となるレコード・パーツ を選択します。
  7. フィールドの名前を入力」フィールドに、以下のテキストを入力する。

    customers

  8. 配列修飾子」の下で「配列」をクリックする。
  9. Web ページに EGL エレメントを表示するためのコントロールを追加する」 チェック・ボックスをクリアする (チェックマークを除去する)。

    「レコード・パーツの選択」ウィンドウは次のようになります。

    「レコード・パーツの選択」ウィンドウ

  10. OK」をクリックする。

    ページ・データ・ビューで、 allcustomers という名前のアイコンは Web ページで使用可能なデータを 表します。

  11. ページ・データ・ビューで、「allcustomers」を展開する。「customers - Customer[]」という名前の配列変数がこのアイコンの下にあります。
  12. customers - Customer[]」を展開する。このアイコンの下には、 このデータベース・レコードの 12 のフィールドを示す 12 個のアイコンがあります。

    ページ・データ・ビューは次のようになります。

    customers 配列変数が表示されたページ・データ・ビュー

    ページ・データ・ビューにエントリーを追加することにより、 PageHandler にレコードの配列を追加することにもなります。次のセクションでは、 Web ページ上に関連フィールドを作成します。

Web ページへのデータの表示

ページ・データ・ビューにリストされたデータは、Web ページに追加できます。

  1. ページ・データ・ビューで、 「customers - Customer[]」配列変数をクリックする。
  2. customers - Customer[]」配列変数をクリックして allcustomers.jsp ファイルにドラッグし、「すべてのカスタマーのリスト (List of All Customers)」テキストの下にある、前の演習で追加したブランク行でリリースする。

    「リスト・コントロールの挿入」ウィンドウが開きます。このウィンドウにはデータベース・レコード内のすべてのフィールドのリストが表示されます。このウィンドウを使用して、ページに表示するレコードを選択することができます。

  3. なし」ボタンをクリックする。すべてのフィールドが選択解除されます。
  4. 以下のフィールドの横のチェック・ボックスを選択する。

    「リスト挿入のコントロール」ウィンドウは次のようになります。

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

  5. 終了」をクリックする。

    「リスト・コントロールの挿入」ウィンドウで 選択した 3 つのフィールドの 3 列を持つデータ・テーブルが作成されます。

  6. ページを保管する。

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

    現在のページの外観

    データ・テーブルの列には、データベースのフィールドを基にした見出しがあります。これらの見出しは、その見出しをクリックしてプロパティー・ビューを開き、「」フィールドを変更することにより変更できます。

    データ・テーブルの 3 つのテキスト・フィールド ({EGLcustomer_id}{EGLfirst_name}、および {EGLlast_name}) は、データベース情報がページ上のどの場所に表示されるかを示しています。

EGL ライブラリーへの関数呼び出しの追加

次のステップでは、CustomerLib.egl ライブラリーの関数を呼び出す コードをこのページに追加します。その関数はデータベースからデータを読み取って、 ページで使用できるようにします。

  1. allcustomers.jsp ファイルのフリー・フォーム・エリアの任意の場所を右 クリックする。
  2. ポップアップ・メニューから、「ページ・コードの編集」 をクリックする。allcustomers.egl ファイルがエディターで開きます。このファイルには PageHandler パーツが含まれています。

    次のステップでは、 allcustomers.egl にコードを追加します。このコードは CustomerLib.egl ライブラリーから getAllCustomers() 関数を呼び出します。

  3. allcustomers.egl ファイルで、 Function onPageLoad() 行と End 行の間にブランク行を追加する。
  4. 新規ブランク行をクリックしてそこにカーソルを置く。
  5. Function onPageLoad() 行と end 行の間のブランク行に以下のテキストを入力する。

    cust

  6. Ctrl+スペース・バーを押す。コンテンツ・アシスト・メニューが開き、 cust で始まる使用可能な EGL ステートメントのリストを表示します。
  7. コンテンツ・アシスト・メニューで、「CustomerLib - data」をダブルクリックする。見つけるためにスクロールダウンが 必要な場合があります。

    このリストに「CustomerLib - data」が表示されていない場合は (終わり近くにありますので、必ずスクロールダウンしてください)、演習 5 で CustomerLib を 正しく作成、保管、生成していること、およびコンパイル・エラーが発生していないことを 確認してください (コンパイル・エラーは CustomerLib.egl ソースで赤いマークで 表示されています)。

    現在、コードの新規行には「CustomerLib」 と表示されています。

  8. CustomerLib」の後にピリオドを入力する。
  9. 再度、Ctrl+スペース・バーを押す。コンテンツ・アシスト・メニューが再び開きます。
  10. コンテンツ・アシスト・メニューから、「getAllCustomers」 をダブルクリックする。
  11. ファイルを保管する。

    この時点で、allcustomers.egl ファイルは次のようになります。

    現在の allcustomers.egl ファイルの外観

    以下に、allcustomers.egl に関するいくつかの詳細情報を示します。

  12. ファイルを閉じる。

ページのテスト

これで、サーバーでページを実行する準備ができました。 以下のステップに従って ページをテストし、データベースのデータがページにどのように表示されるかを確認してください。

  1. プロジェクト・エクスプローラー・ビューで、 allcustomers.jsp ファイルを右クリックする。
  2. ポップアップ・メニューから、「実行」>「サーバーで実行」 をクリックする。

    前の演習と同様に、ワークベンチ内の Web ブラウザーで Web ページが開きます。ここで、ダイナミック・データがページに表示されます。 ページは次のようになります。

    現在の allcustomers.jsp ページの外観

これで、『演習 8: 別のページへのリンク』を開始する準備ができ ました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.