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

この演習では、前の演習で作成した Web ページに、データベースの CUSTOMER テーブルからのデータを追加します。このタスクは以下の部分に分かれます。

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

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

    customers

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

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

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

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

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

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

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

    カスタマー配列変数があるページ・データ・ビュー

    ページ・データ・ビューにエントリーを追加することにより、 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 について細かな点をいくつか説明します。

ページのテスト

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

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

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

    この時点における allcustomers.jsp ページの外観

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

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