演習 7: ページへのデータの追加
この演習では、このチュートリアルに付属しているデータベース内のデータを、前の演習で作成した
Web ページに追加します。このタスクは以下の部分に分かれます。
- ページ・データ・ビューにフィールドを追加し、これらのフィールドを Web ページと関連付ける。
- ページ・データ・ビューから関連 Web ページにフィールドを配置する。
- 変数 (この場合、レコードの配列) を EGL
PageHandler に追加する。PageHandler はランタイム・プロセスの
背後で実行されるコードであると考えることができます。PageHandler は
以下のいずれのタスクも実行できるため、ページ・コード の一種であるといえます。
- JSP ファイルへの実行依頼のデータ値を割り当てる。これらの値は、
最終的に Web ページに表示されます。
- ユーザーまたは呼び出されたプログラムから戻されたデータを操作する。
- 別の JSP ファイルに制御を移動する。
ページ・データ・ビューおよび PageHandler へのレコード配列の追加
- 「allcustomers.jsp」ファイルをダブルクリックしてプロジェクト・エクスプローラー・ビューで開く。
- ページ・データ・ビューを見つける。
通常、ワークベンチの左下にあります。ページ・データ・ビューはタブを使用して表示することができますが、ページ・データ・ビューが見つからない場合は、
「ウィンドウ」>「ビューの表示」>「ページ・データ」をクリックしてください。
- パレット・ビューを見つける。通常、ワークベンチの右側にあります。そのビューが見つからない場合は、
「ウィンドウ」>「ビューの表示」>「基本」>「パレット」
をクリックしてください。
- パレット・ビューで、「EGL」ドロワーをクリックして開く。
- 「レコード」アイコンをパレット・ビューからエディター内の allcustomers.jsp ページ
にドラッグする。「レコード・パーツの選択」ウィンドウが開きます。
- 「レコード・パーツの選択」ウィンドウで、
「Customer (data/CustomerRecord.egl)」をクリックする。
この場合、それぞれの配列エレメントの基となるレコード・パーツ
を選択します。
- 「フィールドの名前を入力」フィールドに、以下のテキストを入力する。
customers
- 「配列修飾子」の下で「配列」をクリックする。
- 「Web ページに EGL エレメントを表示するためのコントロールを追加する」
チェック・ボックスをクリアする (チェックマークを除去する)。
「レコード・パーツの選択」ウィンドウは次のようになります。

- 「OK」をクリックする。
ページ・データ・ビューで、
allcustomers という名前のアイコンは Web ページで使用可能なデータを
表します。
- ページ・データ・ビューで、「allcustomers」を展開する。「customers - Customer[]」という名前の配列変数がこのアイコンの下にあります。
- 「customers - Customer[]」を展開する。このアイコンの下には、
このデータベース・レコードの 12 のフィールドを示す 12 個のアイコンがあります。
ページ・データ・ビューは次のようになります。

ページ・データ・ビューにエントリーを追加することにより、
PageHandler にレコードの配列を追加することにもなります。次のセクションでは、
Web ページ上に関連フィールドを作成します。
Web ページへのデータの表示
ページ・データ・ビューにリストされたデータは、Web ページに追加できます。
- ページ・データ・ビューで、
「customers - Customer[]」配列変数をクリックする。
- 「customers - Customer[]」配列変数をクリックして
allcustomers.jsp ファイルにドラッグし、「すべてのカスタマーのリスト (List of
All Customers)」テキストの下にある、前の演習で追加したブランク行でリリースする。
「リスト・コントロールの挿入」ウィンドウが開きます。このウィンドウにはデータベース・レコード内のすべてのフィールドのリストが表示されます。このウィンドウを使用して、ページに表示するレコードを選択することができます。
- 「なし」ボタンをクリックする。すべてのフィールドが選択解除されます。
- 以下のフィールドの横のチェック・ボックスを選択する。
- customer_id
- first_name
- last_name
「リスト挿入のコントロール」ウィンドウは次のようになります。

- 「終了」をクリックする。
「リスト・コントロールの挿入」ウィンドウで
選択した 3 つのフィールドの 3 列を持つデータ・テーブルが作成されます。
- ページを保管する。
ページは次のようになります。

データ・テーブルの列には、データベースのフィールドを基にした見出しがあります。これらの見出しは、その見出しをクリックしてプロパティー・ビューを開き、「値」フィールドを変更することにより変更できます。
データ・テーブルの 3 つのテキスト・フィールド ({EGLcustomer_id}、
{EGLfirst_name}、および {EGLlast_name}) は、データベース情報がページ上のどの場所に表示されるかを示しています。
EGL ライブラリーへの関数呼び出しの追加
次のステップでは、CustomerLib.egl ライブラリーの関数を呼び出す
コードをこのページに追加します。その関数はデータベースからデータを読み取って、
ページで使用できるようにします。
- allcustomers.jsp ファイルのフリー・フォーム・エリアの任意の場所を右
クリックする。
- ポップアップ・メニューから、「ページ・コードの編集」
をクリックする。allcustomers.egl ファイルがエディターで開きます。このファイルには PageHandler パーツが含まれています。
次のステップでは、
allcustomers.egl にコードを追加します。このコードは CustomerLib.egl ライブラリーから
getAllCustomers() 関数を呼び出します。
- allcustomers.egl ファイルで、
Function onPageLoad() 行と End 行の間にブランク行を追加する。
- 新規ブランク行をクリックしてそこにカーソルを置く。
- Function onPageLoad() 行と end 行の間のブランク行に以下のテキストを入力する。
cust
- Ctrl+スペース・バーを押す。コンテンツ・アシスト・メニューが開き、
cust で始まる使用可能な EGL ステートメントのリストを表示します。
- コンテンツ・アシスト・メニューで、「CustomerLib -
data」をダブルクリックする。見つけるためにスクロールダウンが
必要な場合があります。
このリストに「CustomerLib - data」が表示されていない場合は
(終わり近くにありますので、必ずスクロールダウンしてください)、演習 5 で CustomerLib を
正しく作成、保管、生成していること、およびコンパイル・エラーが発生していないことを
確認してください (コンパイル・エラーは CustomerLib.egl ソースで赤いマークで
表示されています)。
現在、コードの新規行には「CustomerLib」
と表示されています。
- 「CustomerLib」の後にピリオドを入力する。
- 再度、Ctrl+スペース・バーを押す。コンテンツ・アシスト・メニューが再び開きます。
- コンテンツ・アシスト・メニューから、「getAllCustomers」
をダブルクリックする。
- ファイルを保管する。
この時点で、allcustomers.egl ファイルは次のようになります。

以下に、allcustomers.egl に関するいくつかの詳細情報を示します。
- ファイルには、開発時にデータ・パッケージ内のすべてのパーツを可視にする
import 文があります。(レコード・パーツ Customer がそのパッケージにあります。)
import 文は、ページ・データ・ビューに Customers
変数を組み込んだときに作成されました。
- onPageLoad 関数は、JSP ファイルが Web ページを提示する直前に呼び出されます。この場合、この関数はライブラリー CustomerLib にある
getAllCustomers 関数を呼び出します。その関数は、ページ・ハンドラーのレコード配列に CUSTOMERS
データベースからのデータを受信させます。関数が終了すると (ただし、
Web ページが提示される前)、レコード配列のデータが関連 Web ページの
フィールドに配置されます。onPageLoad 関数でその他のページ初期化も行うことができます。例えばカーソルのフォーカスを設定できます。
- ファイルを閉じる。
ページのテスト
これで、サーバーでページを実行する準備ができました。 以下のステップに従って
ページをテストし、データベースのデータがページにどのように表示されるかを確認してください。
- プロジェクト・エクスプローラー・ビューで、
allcustomers.jsp ファイルを右クリックする。
- ポップアップ・メニューから、「実行」>「サーバーで実行」
をクリックする。
前の演習と同様に、ワークベンチ内の Web ブラウザーで
Web ページが開きます。ここで、ダイナミック・データがページに表示されます。 ページは次のようになります。

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