課題 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, 2004. All Rights Reserved.