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

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

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

  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 個のアイコンがあります。

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

    customers 配列変数を持つページ・データ・ビュー

    ページ・データ・ビューにエントリーを追加することで、 そのページに特定のページ・ハンドラーにレコードの配列も追加されます。次のセクションでは、 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 ファイルがエディターで開きます。 このファイルにはページ・ハンドラーが含まれます。

    次のステップでは、 そのファイルにコードを追加します。このコードは 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.