< 前へ | 次へ >

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

この演習では、ユーザーが CUSTOMER テーブルを更新するための Web ページを作成します。このページで、他のページから渡されたパラメーターを受け取り、そのパラメーターによって示されるレコードのみを表示し、レコードの更新情報を受け入れます。

updatecustomer.jsp ファイルの作成

  1. 「エンタープライズ・エクスプローラー」ビューで、EGLWeb プロジェクトの WebContent フォルダーを右クリックします。
  2. 「新規作成」 > 「Web ページ」とクリックします。
  3. 「ファイル名」フィールドに、新規ファイルの名前としてこのテキストを入力します。
    updatecustomer.jsp
  4. 「フォルダー」 フィールドに、/EGLWeb/WebContent フォルダーがリストされたことを確認します。
  5. 「テンプレート」リストで、 「マイ・テンプレート」をクリックします。
  6. 「プレビュー」ボックスで、「A_gray.htpl」テンプレートをクリックします。
  7. 「終了」をクリックします。 新規ページが作成されてエディターで開きます。
  8. デフォルトのテキストを次のテキストに置換します。
    Update customer information
  9. Enter キーを 3 回押してブランク行を 3 行挿入します。
  10. ページを保存します。
新規 updatecustomer.jsp ページは次のようになります。

updatecustomer.jsp ページの外観

EGL レコードの追加とページ上での表示

次のステップでは、このページに EGL データを追加します。 allcustomers.jsp ファイルを作成したときは、 最初のステップでデータをページに追加して、 次のステップで、 「ページ・データ」ビューからデータをドラッグして、 ページ上で表示しました。 今回は、「Web ページに EGL 要素を 表示するためのコントロールを追加する」 チェック・ボックスを選択することで、データをページに追加して、 ページ上に表示するまでを、一度のステップで行えるようにします。
  1. 「パレット」ビューで EGL ドロワーを開きます。
  2. 「新規変数」アイコンを、 「カスタマー情報の更新 (Update Customer Information)」テキストの下のページにドラッグします。 「新規 EGL データ変数の作成」ウィンドウが開きます。
  3. 「型の選択」に おいて、「レコード」をクリックします。
  4. 「レコード・タイプ」において、 「カスタマー (Customer)」をクリックします。
  5. 「フィールドの名前を入力」フィールドに、 以下のテキストを入力します。
    customer
  6. 「配列プロパティー」に おいて、「配列」チェック・ボックスをクリアします。
  7. 「Web ページに EGL 要素を表示するためのコントロールを追加する」チェック・ボックスを選択します。
  8. 「OK」をクリックします。 新規レコードが「ページ・データ」ビューに表示され、 「挿入のコントロール」ウィンドウが開きます。
  9. 「挿入のコントロール」ウィンドウで、「既存レコードの更新」をクリックします。
  10. 「オプション」をクリックする。 「オプション」ウィンドウ が開きます。
  11. 「実行ボタン」チェック・ボックスを選択します。
  12. 「削除ボタン」チェック・ボックスをクリアします。
  13. 「実行ボタン」「ラベル」に、次のテキストを入力します。
    Update this record
  14. 「OK」をクリックします。
  15. 「終了」をクリックします。
  16. ページを保存します。

レコードを更新するためのデータ・コントロールが Web ページに挿入されます。このページには、{Error Messages} コントロールがあります。{Error Messages} コントロールは、 ページにエラーがあることを意味するのではなく、 ランタイム・エラー・メッセージを表示する場所を示すものです。

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

updatecustomer.jsp ページの外観

データの取得

このページには、データ用のフィールドが存在するため、 データベースからデータを取得するコードを追加する必要があります。 前の演習では、CID という名前のパラメーターに、 カスタマーの ID 番号を渡すリンクを追加しました。 このステップでは、新しい Web ページのハンドラーをセットアップし、このパラメーターを受け入れ、該当するレコードをデータベースから取得して、ページ上に表示します。
  1. updatecustomer.jsp ファイルのフリー・フォーム領域において、任意の場所を右クリックします。
  2. ポップアップ・メニューから、「ページ・コードの編集」 をクリックします。 updatecustomer.egl ファイルが、エディターで開きます。
  3. 前に JSF ハンドラーを編集したときと同様、SQL 呼び出しの成功コードまたは失敗コードを保管するためのレコードを追加する必要があります。customer Customer; 行のすぐ後に、次のコードを表示されているとおりに正確に追加します。
    status StatusRec;
    ページにデータを追加する作業における 次のステップは、リンクによって受け渡される CID パラメーターを受け入れる ように、JSF ハンドラーを構成することです。
  4. function onPreRender() 行を、次に表示されているとおりの 行に正確に変更します。
    function onPreRender(CID INT)
    これで、JSF ハンドラーは、CID という名前の 整数パラメーターを受け入れるように構成されました。
  5. function onPreRender(CID INT) のすぐ後のブランク行に、以下のコードを示されているとおりに正確に追加します。
    customer.customerId = CID;
    これで、ID 番号が カスタマー・レコードに割り当てられました。次のステップでは、 データベースからこの ID 番号を持つレコードを検索します。
  6. 次の行に、以下のコードを、表示されているとおりに正確に追加します。 演習 6: ページへのデータの追加で学習した、コーディング・コンプリート機能を使用することもできます。
    CustomerLib.GetCustomer(customer, status);
    GetCustomer 関数は、 前に使用した GetCustomerAll 関数と同じ働きをします。 ただし、GetCustomerAll 関数がレコード配列を取得するのに 対して、GetCustomer 関数は 1 つのレコードを取得します。 これで、カスタマー・レコードに、 この JSF ハンドラーに渡される ID を持つレコードが組み込まれました。
    新規の 関数は次のようになります。
    	function onPreRender(CID INT)
    		customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. インポートを最適化して、ファイルを保存します。
JSF ハンドラーは、次のようになります。
updatecustomer.egl ファイルの外観

ここで、allcustomers.jsp ページの リンクをクリックすると、updatecustomer.jsp ページが、 カスタマー・レコードに関する詳細と共にロードされます。 現在のところ、Web ページのフィールドにある情報を 変更することはできますが、 その更新情報をデータベースに送信する関数はありません。 次のセクションでは、UpdateCustomer 関数を使用して、これらの更新情報をデータベースに渡します。

データベースでのレコードの更新

このセクションでは、updateRecord という名前の 新しい EGL 関数を JSF ハンドラーに追加します。 その後、この関数を Web ページで作成したボタンにバインドします。これによって、Web ページ上でボタンを クリックすれば、updateRecord 関数が 実行されて、UpdateCustomer 関数が呼び出され、 データベース・レコードが更新されるようになります。 最後に、updateRecord 関数によって、 ブラウザーが allcustomers.jsp ページに転送されて、 レコードに行った変更が表示されるようになります。
  1. updatecustomer.egl ファイルにおいて、 最後の End ステートメントの直前に、 次の関数を表示されているとおりに正確に追加します。 コーディング・コンプリート機能を使用するか、このページから関数を貼り付けることで、関数を正しく入力することができます。
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. ファイルを保存して閉じます。

    次のステップでは、この関数を Web ページ上のボタンにバインドします。

  3. updatecustomer.jsp ページを、エディターで開きます。 このページは、エディター・タブで開くこともできます。 ページがない場合は、「プロジェクト・エクスプローラー」ビューで、EGLWeb/WebContent フォルダーにある updatecustomer.jsp ファイルをダブルクリックします。
  4. 「ページ・データ」ビューで、「JSF ハンドラー」 > 「アクション」と展開します。 このフォルダーには、onPreRender() および onConstruction() 関数を除く、 すべての JSF ハンドラーの関数がリストされています。 この場合、作成したばかりの updateRecord() 関数が、 このフォルダーに表示されています。
  5. updateRecord() 関数を、Web ページの「このレコードの更新」というラベルのボタンに、直接ドラッグします。 ページの外観は変わりませんが、 関数がボタンにバインドされ、 ボタンを押すと関数が実行されるようになります。
  6. ページを保存します。

これは、updatecustomer.egl ファイルの完全なコードです。ファイル内に 赤い X 印がマークされたエラーが表示される場合は、ご使用のコードが、 このファイルのコードと一致するか確認してください (演習 8 の後の完成した updatecustomer.egl ファイル)。

updatecustomer.egl ファイルの外観

完了したサイトのテスト

これで、サイトをテストする準備が整いました。 データベースのカスタマー・テーブルにあるすべてのレコードを更新して表示することができます。
  1. 「エンタープライズ・エクスプローラー」ビューで、allcustomers.jsp ファイルを右クリックし、「実行」 > 「サーバーで 実行」をクリックします。 関連ページが Web ブラウザーで開きます。現在、リスト内のカスタマーの姓が、updatecustomer.jsp によって 表示される Web ページへのハイパーリンクになっています。
  2. カスタマーの姓のいずれかをクリックします。 updatecustomer.jsp に表示される Web ページに送られ、その Web ページはその行に特定の情報を表示します。
  3. レコードに新規の FIRST_NAME を入力します。
  4. このページ上の他のフィールドのいくつかの新規情報を入力します。CUSTOMER_ID フィールドは 変更しないでください。
  5. 新規情報の入力が終了したら、「このレコードの更新」 ボタンをクリックします。
「このレコードの更新」ボタンを クリックすると、allcustomers.jsp のページに戻ります。 入力した新規 FIRST_NAME が表示されるように、レコードが変更されました。 レコードの姓をもう一度クリックすると、データベースに保存された新規情報を表示することができます。

チュートリアルの完了

このチュートリアルでは、サンプル Derby データベースを使用して、カスタマー・ファイル用の実際に機能するファイル保守ユーティリティーを作成しました。 EGL を使った JSF 検索ページの作成チュートリアルを実行することにより、この知識を深めることができます。
< 前へ | 次へ >

フィードバック