演習 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) してください。

  8. ファイルを閉じる。

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. ファイルを保管する。

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

    updatecustomer.egl ファイルの外観

    以下に、updateCustomerRec() について細かな点をいくつか説明します。

  7. ファイルを閉じる。

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

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

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

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

  4. ページを保管する。

完了したサイトのテスト

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

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

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

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

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

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

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.