< 前へ | 次へ >

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

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

このタスクは以下の部分に分かれます。

この演習では、EGL コンテンツ・アシスト機能も使用します。このツール機能を使用すると、ステートメント全体を入力しなくても、プログラミング・ステートメントを入力することができます。

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

  1. allcustomers.jsp ファイルが開かれていない場合、「エンタープライズ・エクスプローラー」ビューでダブルクリックして開きます。
  2. 「ページ・データ」ビューを見つけます。 通常、ワークベンチの左下にあります。 「ページ・データ」ビューは、 タブを使用して表示することができますが、 「ページ・データ」ビューが見つからない場合は、 「ウィンドウ」 > 「ビューの 表示」 > 「ページ・データ」と クリックしてください。
  3. 「パレット」ビューを見つけます。通常、ワークベンチの右側にあります。そのビューが見つからない場合は、 「ウィンドウ」 > 「ビューの表示」 > 「基本」 > 「パレット」 をクリックしてください。
  4. 「パレット」ビューで、「EGL」ドロワーをクリックして開きます。
  5. 「新規変数」アイコンを「パレット」ビューからエディター内の「allcustomers.jsp」ページにドラッグします。 「新規 EGL データ変数の作成」ウィンドウが開きます。
  6. 「型の選択」に おいて、「レコード」をクリックします。
  7. 「レコード・タイプ」において、 「カスタマー (Customer)」をクリックします。 この場合、それぞれの配列要素の基となるレコード・パーツを選択します。
  8. 「フィールドの名前を入力」フィールドに、以下のテキストを入力します。
    customers
  9. 「配列プロパティー」において、 「配列」チェック・ボックスを選択します。 「サイズ」フィールドはブランクのままにしておきます。
  10. 「Web ページに EGL 要素を表示するためのコントロールを追加する」チェック・ボックスをクリアします。

    「新規 EGL データ変数の作成」ウィンドウは、 次のようになります。

    「新規 EGL データ変数の作成」ウィンドウ

  11. 「OK」をクリックします。 変数をドラッグした JSP 上には何も表示されません。これは、EGL が、JSF ハンドラーという別のファイルに変数を作成したためです。このファイルには、JSP 内のイベントに応答するためのコードが含まれています。 新規変数を表す項目が、「JSF ハンドラー」 > 「データ」の「ページ・データ」ビューに表示されます。
  12. 「JSF ハンドラー」 > 「データ」と展開してから、「customers - Customer[]」を展開します。 customers の下に、このデータベース・レコードの 12 個のフィールドを示す 12 個のアイコンがあります。

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

customers 配列変数が表示された状態の、「ページ・データ」ビュー

「ページ・データ」ビューにエントリーを 追加すると、JSF ハンドラーにもレコードの配列が追加されます。 次のセクションでは、Web ページ上に関連フィールドを作成します。

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

「ページ・データ」ビューにリストされたデータは、Web ページに追加できます。
  1. 「ページ・データ」ビューから、「customers - Customer[]」配列変数を allcustomers.jsp ファイルにドラッグし、「List of all customers」テキストの下にある、前回の演習で追加したブランク行の中で放します。

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

  2. 「作成するデータ・コントロール」は、デフォルト値 (「複数列データ・テーブル」) のままにします。
  3. 「コントロールの作成対象」で、「既存レコードの表示 (読み取り専用)」をクリックします。

    このオプションを選択すると、ページ上のデータは読み取り専用の出力フィールドに表示されます。 「既存レコードの更新」を選択すると、ページ上のフィールドは、ユーザーが入力できる入力フィールドになり、それらのフィールドの下にはアクションをバインドできるボタンが表示されます。 別のページでは、このタイプのフィールドを作成します。 このため、「新規レコードの作成」オプションは、 デフォルトのボタンが異なる点を除き「既存レコードの更新」と 同じです。

  4. 「表示するカラム」で、「なし」ボタンをクリックします。 すべてのフィールドが選択解除されます。
  5. 以下のフィールドの横のチェック・ボックスを選択します。
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

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

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

  6. 「終了」をクリックします。 「リスト挿入のコントロール」ウィンドウで 選択した 3 つのフィールドの 3 列を持つデータ・テーブルが作成されます。
  7. ページを保存します。

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

ページの現在の外観

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

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

EGL ライブラリーからの関数呼び出し

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

表示

  1. allcustomers.jsp ファイルのフリー・フォーム・エリアの任意の場所を右 クリックします。
  2. ポップアップ・メニューから、「ページ・コードの編集」 をクリックします。

    allcustomers.egl ファイルがエディターで開きます。 このファイルには、JSF ハンドラー・パーツが含まれています。 次のステップでは、データベースからデータを取得して、そのデータをページに挿入する JSF ハンドラーにコードを追加します。

  3. allcustomers.egl ファイル に、customers Customer[0]; 行が表示されます。

    これは、作成したレコード変数が、 このページに表示されるように定義したコード行です。 また、SQL 呼び出しの成功コードまたは失敗コードを保管するよう、 レコードを定義する必要もあります。

  4. customers Customer[0]; 行のすぐ後のブランク行に、次のコードを表示されているとおりに正確に追加します。
    status StatusRec;
    StatusRec の下に、ハンドラーが認識していないタイプであることを示す赤い波線が引かれていることに注意してください。 StatusRec レコード定義がどこにあるかをハンドラーに通知する import ステートメントを追加する必要があります。 これを自動で行うには、エディター・ウィンドウ内のブランク・スペースを右クリックして、「インポートの編成」をクリックします。
    StatusRec の下に引かれた赤い波線および「インポートの編成」オプションが示されたドロップダウン・メニュー。

    この機能のキーボード・ショートカットは、Ctrl + Shift + O です。EGL は、EGL から可視のすべてのファイルを検査して必要な情報を見つけ、ファイルの先頭に import ステートメントを追加します。

    これで、データベース および SQL ステータス・レコードから、 レコードを取得できるようになりました。 ページにデータを追加する作業の最後のステップは、 これらの 2 つの変数を、 データベースにアクセスする関数に渡すことです。 GetCustomerListAll() という名前のこの関数は、前の演習の 「データ・アクセス・アプリケーション」ウィザードで 作成されました。

    handler 宣言に続く中括弧で囲まれた行に注目してください。 これらの行は、JSF ハンドラーのプロパティー に値を割り当てます。 EGL では、プロパティーはパーツの動作を変更する名前と値のペアです。 ほとんどのタイプの EGL パーツは 1 つ以上のプロパティーを持つことができ、各種類のパーツにはそれぞれ異なるプロパティーを使用できます。 この場合、JSF ハンドラーでは 4 つのプロパティーが定義されています。

    onConstructionFunction = onConstruction
    onConstructionFunction プロパティーは、JSF ハンドラーに関連付けられた Web ページ (JSP) がブラウザーで初めて 表示されたときに実行する JSF ハンドラーの関数を指定します。この場合、プロパティーは onConstruction という 名前の関数を指定します。これは、JSF ハンドラーでデフォルトで作成されます。 このチュートリアルでは、この関数は使用しません。
    onPreRenderFunction = onPreRender
    onPreRenderFunction プロパティーは、 関連付けられた JSP がブラウザーで表示されるたびに 実行する JSF ハンドラーの関数を指定します。これには、ユーザーがページを最新表示したり、別のページを表示した後でそのページに戻った場合も 含まれます。 この場合、プロパティーは onConstruction という 名前の関数を指定します。これは、JSF ハンドラーでデフォルトで作成されます。 次のいくつかのステップでは、この関数にコードを追加して、ページがロードされるたびにデータベースから現行データを取得します。
    view = "allcustomers.jsp"
    view プロパティーは、JSF ハンドラーと関連付けられる Web ページを指定します。 デフォルトでは、Web ページと JSF ハンドラーの名前は、ファイル拡張子を除いて同じです。
    viewRootVar = viewRoot
    viewRoot 変数を使用して、JSF コンポーネント・ツリーにアクセスします。 このチュートリアルでは、viewRoot 変数は使用しません。JSF コンポーネントおよび viewRoot 変数の詳細については、『コンポーネント・ツリーのアクセス』を参照してください。
  5. GetCustomerListAll() ライブラリー関数を呼び出すコードを onPreRender() 関数に追加します。この関数は、データベースから顧客データを取得します。 ここでは、EGL エディターのコンテンツ・アシスト・ツールを使用してみてください。
    1. function onPreRender()end の間のブランク行にカーソルを置きます。
    2. 次のコードを入力します。
      cust
    3. Ctrl+スペース・バーを押します。 「コーディング・コンプリート」ウィンドウが開きます。cust で始まる、 すべての使用可能な EGL コマンドおよびリソースが表示されます。
    4. 「コンテンツ・アシスト」ウィンドウで、CustomerLib ライブラリーを選択します。 キーボードを使用して強調表示してから Enter を押すか、マウスでダブルクリックしてださい。

      これで、コードの新規行に CustomerLib が表示されます。

    5. CustomerLib」の後にピリオドを入力します。
    6. 再度、Ctrl+スペース・バーを押します。 「コーディング・コンプリート」ウィンドウが、 再び開きます。
    7. 「コーディング・コンプリート」ウィンドウで、GetCustomerListAll(customerArray Customer[], status StatusRec) 関数を選択します。強調表示してから Enter を押すか、 マウスでダブルクリックしてください。 GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec) 関数を 選択しないように注意してください。

      これで、コードの新規行に CustomerLib.GetCustomerListAll(customerArray, status) が表示されるようになり、customerArray 引数が強調表示されます。

    8. コードの新規行にあるデフォルト引数 customerArray を、レコード変数 customers の名前に変更します。
    9. コード行の終わりにセミコロンを付けます。
    これで、コードの新規行は次のようになります。
    CustomerLib.GetCustomerListAll(customers, status);
    また、import eglderbydb.access.CustomerLib; という新規の import ステートメントが、ファイル上部付近にあることに注目してください。この行により、ライブラリーがインポートされるため、コード内にライブラリーへの完全なパスを書き込むことなく、ライブラリーを直接参照できます。

    コンテンツ・アシストにより、この import ステートメントは自動的に追加されます。 コンテンツ・アシストも「インポートの編成」機能も使用せずにこの import ステートメントを作成した場合は、ライブラリーのロケーションを明示的に指定する必要があります。その場合、ライブラリー名は eglderbydb.access.CustomerLib という名前で修飾します。

  6. ファイルを保存します。
この時点で、allcustomers.egl ファイルは次の例のようになります。
allcustomers.egl ファイルのコード

エディター内に赤い X 印でマークされたエラーが表示される場合は、そのコードと演習 6 の後の完成した allcustomers.egl ファイル内のコードが一致しているか確認してください。

ページのテスト

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

次に進む前に、以下の予防措置を行います。
  1. allcustomers.egl ファイルおよび allcustomers.jsp ファイルを保存していない場合は両方とも保存し、両方のファイルを閉じます。
  2. アプリケーション・サーバーが始動しており、同期されていることを確認します。
  1. 「エンタープライズ・エクスプローラー」ビューで、「EGLWeb」プロジェクトを右クリックし、「生成」をクリックします。
  2. 「エンタープライズ・エクスプローラー」ビューで、allcustomers.egl ファイルではなく「allcustomers.jsp」ファイルを右クリックします。
  3. ポップアップ・メニューから、 「実行」 > 「サーバーで 実行」とクリックします。

    前の演習と同様に、ワークベンチ内の Web ブラウザーで Web ページが開きます。ここで、ダイナミック・データがページに表示されます。 ダイナミック・データが表示されない場合は、アドレス・バーの隣にある更新アイコンをクリックしてください。 このページは、次のようになります。

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

次の演習では、個別の顧客レコードですべてのフィールドを表示する詳細ページを作成します。
< 前へ | 次へ >

フィードバック