演習 9: 更新ページの作成

この演習では、ユーザーが CUSTOMER テーブルを更新できる Web ページを作成します。

updatecustomer.jsp ファイルの作成

  1. プロジェクト・エクスプローラー・ビューで、EGLWeb プロジェクトの WebContent フォルダーをクリックする。
  2. 「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
  3. ファイル名」フィールドに、新規ファイルの名前としてこのテキストを入力する。

    updatecustomer

  4. ページ・テンプレートから作成」チェック・ボックスを選択する。
  5. 次へ」をクリックする。
  6. サムネール」ボックスから、「A_gray.htpl」テンプレートをクリックする。
  7. 終了」をクリックする。新規ページが作成されてエディターで開きます。
  8. デフォルトのテキストを次のテキストに置換する。

    カスタマー情報の更新 (Update Customer Information)

  9. Enter キーを 3 回押してブランク行を 3 行挿入する。
  10. ページを保管する。

    新規 updatecustomer.jsp ページは次のようになります。

    updatecustomer.jsp ページの外観

EGL レコードをページに追加

次のステップでは、EGL データをこのページに追加します。

  1. パレット・ビューで EGL ドロワーを開く。
  2. レコード・アイコンをページ・データ・ビューにドラッグする。「レコード・パーツの選択」 ウィンドウが開きます。
  3. 配列修飾子」の下で、「配列」チェック・ボックスをクリアする。
  4. Web ページに EGL エレメントを表示するためのコントロールを追加する」チェック・ボックスをクリアする。
  5. リストからレコード・パーツを選択するかまたは 1 つ下の名前を入力する」 の下で、「Customer (data/CustomerRecord.egl)」をクリックする。
  6. OK」をクリックする。新規レコードがページ・データ・ビューに表示されます。

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

演習 7 と同様に、次のステップではページ上のデータ・コントロールを作成します。

  1. ページ・データ・ビューで、「customer - Customer」をクリックする。
  2. customer - Customer」をクリックして Web ページにドラッグし、 カーソルが「カスタマー情報の更新 (Update Customer Information)」テキストの下に 来たところでマウス・ボタンをリリースする。「コントロールの挿入」ウィンドウが開きます。
  3. 「コントロールの挿入」ウィンドウで、 「既存レコードの更新」をクリックする。
  4. オプション」をクリックする。「オプション」ダイアログが開きます。
  5. 実行ボタン」チェック・ボックスを選択する。
  6. 削除ボタン」チェック・ボックスをクリアする。
  7. 実行ボタン」の「ラベル」に、以下のテキストを 入力する。

    このレコードの更新 (Update this record)

  8. OK」をクリックする。
  9. 終了」をクリックする。

    レコードを更新するためのデータ・コントロールが Web ページに挿入されます。このページに「{Error Messages}」フィールドがある 点に注意してください。 このフィールドはページにエラーがあることを意味するわけではありません。 {Error Messages} フィールドは、ランタイム・エラー・メッセージが表示される場所を マークするものです。

  10. ページを保管する。

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

    updatecustomer.jsp ページの外観

データベース行を更新するためのライブラリーへの関数の追加

現在、制御が Web ページにあるため、2 つの関数を CustomerLib.egl ライブラリーに 追加する必要があります。

  1. プロジェクト・エクスプローラー・ビューで、EGLSource フォルダーと データ・パッケージを展開し、「CustomerLib.egl」をダブルクリックする。
  2. 2 つの end 文の間にこのコードを挿入する。

     
    Function getCustomer(Customer Customer)
    get Customer usingKeys Customer.Customer_ID;
    end
     

  3. ファイルを保管する。

    CustomerLib.egl ファイルは次のようになります。

    customerlib.egl ファイルの外観

    以下は、getCustomer() についてのいくつかの詳細です。

  4. 演習 6 と同様に、get Customer usingKeys 行を右クリックし、 次に「SQL ステートメント」>「表示」をクリックして このコードによって生成される SQL ステートメントを表示する。SQL ステートメントの表示を 終了したら、「閉じる」をクリックします。

    表示コマンドが表示されない場合は、 コードの get Customer usingKeys 行にカーソルがあることを 確認してください。

    次に、以下の作業を行う関数を追加する。

  5. CustomerLib.egl ファイルで、以下のコードを、ステップ 2 で追加したコード の後でなおかつ最後の end 文の前に追加する。

     
    Function updateCustomerData(CustomerNew Customer)
    CustomerOld Customer;
    CustomerOld.Customer_ID = CustomerNew.Customer_ID;
    get CustomerOld forUpdate;
    move CustomerNew to CustomerOld byName;
    replace CustomerOld;
    end
     

  6. ファイルを保管する。
  7. 出力を生成するには、Ctrl+G を押すか、ファイルの任意の場所を右クリックし、 ポップアップ・メニューから「生成」をクリックする。

    ファイルは次のようになります。

    customerlib.egl ファイルの外観

    以下は、updateCustomerData() についてのいくつかの詳細です。

    ファイルに赤のマークがある場合、それは構文エラーがあることを示しています。表示通り 正確にコードが入力されているか確認してください。 コードを変更した場合は、忘れずにファイルを保管して (Ctrl+S)、 出力を生成 (Ctrl+G) してください。

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

今度は、2 つの新規ライブラリー関数を呼び出すコードを追加します。

  1. updatecustomer.jsp ファイルをダブルクリックして、 プロジェクト・エクスプローラー・ビューで開く。
  2. updatecustomer.jsp に対して表示されている Web ページの任意の場所を 右クリックし、ポップアップ・メニューから「ページ・コードの編集」を クリックする。updatecustomer.egl ファイルが開きます。
  3. そのファイルから以下のコードを除去する。

    Function onPageLoad()
    End

  4. コードを除去したばかりの同じ場所にこのコードを挿入する。

    Function onPageLoad(CID int)
    customer.Customer_ID = CID;
    CustomerLib.getCustomer(customer);
    End

    この時点でコードは次のようになります。

    updatecustomer.egl ファイルの外観

    以下は、onPageLoad() についてのいくつかの詳細です。

  5. 以下のコードを、たった今挿入したコードの下でありなおかつ最後の End 文の前に、ユーザーが入力を実行したとき に応答するページ・ハンドラーの関数を挿入する。

     
    Function updatecustomerRec()
    CustomerLib.updateCustomerData(customer);
    forward to "allcustomers";
    End
     

  6. ファイルを保管する。
  7. 出力を生成するには、Ctrl+G を押すか、ファイルの任意の場所を右クリックし、 ポップアップ・メニューから「生成」をクリックする。

    この時点でコードは次のようになります。

    updatecustomer.egl ファイルの外観

    以下は、updateCustomerRec() についてのいくつかの詳細です。

実行ボタンへの関数のバインド

更新ページの最終ステップでは、 updateCustomerRec() を Web ページの「実行」ボタンにバインドします。

  1. updatecustomer.jsp ファイルを開く。
  2. ページ・データ・ビューで「アクション」フォルダーを開き、 updatecustomerRec() というラベルの付いたアイコンをクリックする。
  3. updatecustomerRec() アイコンを、「このレコードの更新」ボタンに 直接ドラッグ・アンド・ドロップする。

    ページの外観は変化しませんが、 これによりボタンがページ・ハンドラーの updatecustomerRec() 関数に バインドされました。

  4. ページを保管する。

完了したサイトのテスト

これで、サイトをサーバーで稼働する準備ができました。

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

    関連ページが Web ブラウザーで開きます。現在、リスト内の カスタマー ID 番号は updatecustomer.jsp によって表示される Web ページへの ハイパーリンクです。

  3. カスタマー ID 番号の 1 つをクリックする。updatecustomer.jsp に表示される Web ページに送られ、その Web ページはその行に特定の情報を表示します。
  4. そのレコードの新規 FIRST_NAME を入力する。
  5. このページ上の他のフィールドのいくつかの新規情報を入力する。CUSTOMER_ID フィールドは 変更しないでください。
  6. 新規情報の入力が終了したら、「このレコードの更新」 ボタンをクリックする。

    このレコードの更新」ボタンをクリックすると、 allcustomers.jsp によって表示される Web ページに戻ります。ステップ 4 で入力した新規 FIRST_NAME を 表示するようにレコードが変更されている点に注意してください。そのレコードの ID 番号を再び クリックすると、データベースに保管された新規情報を表示できます。

チュートリアルの要約 に進んでください。

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