課題 1.5: 更新ページの作成

始める前に、『課題 1.4: 新規レコードの作成』を完了しておく必要があります。

ここまでで、Web サイトのために、リストを表示し、作成するページが作成できています。この課題では、ユーザーがリストを更新したり、削除したりすることを可能にするページを作成します。更新ページは、ほとんど寸分たがわず作成ページと同じように見えます。ただし、更新ページでは、ユーザーが変更できるように、入力フィールドに既存のレコードからのデータが表示される点が異なります。

最初に、データベースからの既存のレコードを表示する関連レコードを作成します。次に、この関連レコードのための JavaServer Faces 更新フォームを作成して一部を変更すると、このページはテストの準備が整います。

更新関連レコードの作成

デモを見る
  1. 「プロジェクト・エクスプローラー」ビューで、「update_record.jsp」ファイルをダブルクリックして開く。
  2. デフォルトのテキスト「コンテンツをここに置く (Place content here)」を削除する。
  3. 「パレット」ビューで、「データ」ドロワーをクリックして展開する。
  4. パレットから「関連レコード」コンポーネントをブランクのコンテンツ領域にドラッグする。「関連レコードの追加」ウィンドウが開きます。
  5. 名前」フィールドに update_record と入力する。
  6. コントロールの作成対象」の下の「既存レコードの更新」をクリックする。
  7. 関連レコードを Web ページに表示するための入出力コントロールの追加」が選択されていることを確認する。
  8. 次へ」をクリックする。
  9. テーブル」ボックスで、「W5SAMPLE.ADS」テーブルをクリックする。
  10. 次へ」をクリックする。「列の選択およびその他のタスク」ページが開きます。

結果のフィルター操作

デモを見る

関連レコードはデータベースから 1 レコードのみ表示できます。したがって、ユーザーの編集用に 1 レコードのみが表示されるようにデータベース・テーブルをフィルター操作する必要があります。 (前の課題ではデータベースのフィルター操作をする必要はありませんでした。それは、新規レコードは 1 つしか作成しなかったので、データベースにはフィルター操作すべき結果がなかったからです。) データベースのそれぞれのレコードには固有 ID 番号が付けられているので、結果をフィルター操作して、特定の ID 番号を持つレコードを得ることができます。

  1. タスク」の下の「フィルター結果」をクリックする。「フィルター」ウィンドウが開くので、デフォルトのフィルター条件 ID = #{param.ID} を「フィルター」列に挿入する。

    「フィルター」ウィンドウは、以下のようになります。

    「フィルター」ウィンドウ

    このコードは、データベースのレコードをフィルター操作します。したがって、指定済み ID 番号を持つレコードのみが関連レコードに表示されます。この条件に関する詳細は、この課題の後半にある『ハイパーリンクの挿入』セクションで学習します。

  2. 閉じる」をクリックする。
  3. 次へ」をクリックする。「データ・コントロールの構成」ページが開きます。
  4. 表示するフィールド」セクションで、対象の入力フォームに表示したいフィールドを除くすべてのフィールド名の横にあるチェック・ボックスをクリアする。
  5. 上へ」または「下へ」をクリックして、フィールド名を以下のように上から下へと再配列する。
    1. ID
    2. タイトル (TITLE)
    3. 説明 (DESCRIPTION)
    4. メイン・カテゴリー (MAINCATEGORY)
    5. 価格 (PRICE)
    6. 電話 (PHONE)
  6. ID フィールドについて、「コントロール・タイプ」列のドロップダウン・リストから「出力フィールド」を選択する。

    レコードの ID 番号は、ユーザーが表示できるようにしますが、ユーザーが更新できるようにはしたくありません。 ID フィールドを出力フィールドにすると、重複 ID の問題を回避するのに役立ちます。

  7. オプション」をクリックする。「オプション」ウィンドウが開きます。
  8. 実行ボタン」オプションが選択されていることを確認する。
  9. ラベル」フィールドに「更新」と入力する。
  10. OK」をクリックする。
  11. 関連レコードの追加」ウィンドウは下図のようになるはずです。

    「関連レコードの追加」ウィンドウ

  12. 完了」をクリックして、下図のように、ページに更新フォームを生成する。

    現行ページの外観

「更新」ボタンのプログラミング

デモを見る

ここでもう一度、ユーザーが all_records.jsp ページを参照し、その他のレコードとともに変更したレコードを表示するためのコードを追加します。

  1. Web ページに今作成した「更新」ボタンをクリックする。
  2. 「クイック編集」ビューを開く。
  3. 「クイック編集」ビューで、カーソルを直接 return ""; コードの前に位置付けるようにクリックする。
  4. Enter」を押す。新しい行が return ""; の前に表示されます。
  5. この新規ブランク行を右マウス・ボタンでクリックして、次にコンテキスト・メニューから「断片の挿入」 > 「ページへジャンプ」と順に選択する。「GotoPage アクションの編集」ウィンドウが開きます。
  6. ドロップダウン・リストから、ターゲット・ページとして「all_records.jsp」を選択する。
  7. OK」をクリックする。
  8. ユーザーのボタンのイベント・コードは以下のようになっているはずです。

    コードの例

    これで、ユーザーがレコードを更新すると、そのページはブラウザーを all_records.jsp ページに送るので、レコードが更新されたことが確認できます。「削除」ボタンによっても、ユーザーが all_records.jsp page を再び参照できるようにする必要があります。

  9. Web ページ上の「削除」ボタンのために、ステップ 1 から 7 を繰り返して、同じようにコードを編集します。
  10. このページを保管する。

ハイパーリンクの挿入

デモを見る

ここで、更新するデータベース・レコードをユーザーが選択できるように、all_records.jsp ページにリンクを作成します。 #{param.ID} は、更新ページが更新するレコードの ID 番号を表します。ユーザーがレコードのリンクをクリックすると、そのレコードの ID 番号は #{param.ID} パラメーターとして update_record.jsp ページに送られます。そこで、update_record.jsp ページに挿入されたばかりのフィルター済み関連レコードは、更新用のそのレコードのみを表示します。

  1. 「プロジェクト・エクスプローラー」ビューで、「all_records.jsp」ファイルをダブルクリックして、エディターを開く。
  2. データ・テーブル内の任意の場所をクリックする。
  3. 「プロパティー」ビューを開く。
  4. 「プロパティー」ビューで、ビューの左側にある HTML タグ・リストから「h:dataTable」をクリックする。
  5. 「プロパティー」ビューの右端にある「追加」をクリックして、新しい列を追加する。
  6. 新しい列の「ラベル」フィールドに「更新 (Update)」と入力して、「Enter」を押す。「更新 (Update)」という名前の列がデータ・テーブルに生成されます。
  7. 「プロパティー」ビューで選択した新しい列に関して、この「更新 (Update)」列がデータ・テーブルの右端に移るまで、「下に移動」をクリックする。
  8. 「パレット」ビューで、「Faces コンポーネント」ドロワーをクリックして展開する。
  9. パレットから「リンク」コンポーネントを、今作成した「更新 (Update)」列にドラッグする。「URL の構成」ウィンドウが開きます。
  10. URL」フィールドに、ターゲット・リンクとして update_record.jsp と入力し、「ラベル」フィールドに「リストの更新 (Update Listing) 」と入力する。
  11. OK」をクリックする。「リストの更新 Update Listing)」ハイパーリンクが「更新 (Update)」列に表示されます。
  12. 「更新 (Update)」列の「リストの更新 (Update Listing)」ハイパーリンクの横にあるリンク・アイコン  リンク・アイコンをクリックする。
  13. 「プロパティー」ビューで、このビューの左側の「hx:outputLinkEx」タグのすぐ下にある「パラメーター」タブをクリックする。
  14. パラメーターの追加」をクリックし、次に「名前」フィールドに ID と入力する。

    この ID パラメーターを入力フォームの ID 列にバインドする必要があります。このハイパーリンク・パラメーターをデータ・リストの ID 列にバインドすることは、ハイパーリンクがクリックされるときに、要求パラメーターがリストのレコード ID になることを意味します。

  15. 」フィールドを選択し、次にこのフィールドにある「ページ・データ・オブジェクトの選択」ボタン をクリックする。「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
  16. 以下に示すように、「データ・オブジェクト」の下にある「all_recordlist(ADS)」レコード・リストから ID 列をクリックする。

    「ページ・データ・オブジェクトの選択 (Select Page Data Object)」ウィンドウ

  17. OK」をクリックする。

    これで、ユーザーは、「リストの更新 (Update Listing)」リンクをクリックすると、Web サイトで案内広告に関する情報を更新できるようになります。

  18. このファイルを保管し、必要であればページをテストする。最初に all_records.jsp を開いておくことを忘れないでください。この JSP が update_record.jsp にリンクするページだからです。

この課題では、データベースのレコードを更新する Web ページの作成方法を学習しました。これで、『課題 1.6: 関連レコード・リストのフィルター操作』を始める準備が完了しました。

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