課題 1.5: 更新ページの作成
始める前に、『課題 1.4: 新規レコードの作成』を完了しておく必要があります。
ここまでで、Web サイトのために、リストを表示し、作成するページが作成できています。
この課題では、ユーザーがリストを更新したり、削除したりすることを可能にするページを作成します。
更新ページは、ほとんど寸分たがわず作成ページと同じように見えます。
ただし、更新ページでは、ユーザーが変更できるように、
入力フィールドに既存のレコードからのデータが表示される点が異なります。
最初に、データベースからの既存のレコードを表示する関連レコードを作成します。
次に、この関連レコードのための JavaServer
Faces 更新フォームを作成して一部を変更すると、このページはテストの準備が整います。
更新関連レコードの作成
- 「プロジェクト・エクスプローラー」ビューで、「update_record.jsp」ファイルをダブルクリックして開く。
- デフォルトのテキスト「コンテンツをここに置く (Place content here)」を削除する。
- 「パレット」ビューで、「データ」ドロワーをクリックして展開する。
- パレットから「関連レコード」コンポーネントをブランクのコンテンツ領域にドラッグする。
「関連レコードの追加」ウィンドウが開きます。
- 「名前」フィールドに update_record と入力する。
- 「コントロールの作成対象」の下の「既存レコードの更新」をクリックする。
- 「関連レコードを Web ページに表示するための入出力コントロールの追加」が選択されていることを確認する。
- 「次へ」をクリックする。
- 「テーブル」ボックスで、「W5SAMPLE.ADS」テーブルをクリックする。
- 「次へ」をクリックする。
「列の選択およびその他のタスク」ページが開きます。
結果のフィルター操作
関連レコードはデータベースから 1 レコードのみ表示できます。
したがって、
ユーザーの編集用に 1 レコードのみが表示されるようにデータベース・テーブルをフィルター操作する必要があります。
(前の課題ではデータベースのフィルター操作をする必要はありませんでした。
それは、新規レコードは 1 つしか作成しなかったので、
データベースにはフィルター操作すべき結果がなかったからです。)
データベースのそれぞれのレコードには固有 ID 番号が付けられているので、
結果をフィルター操作して、特定の ID 番号を持つレコードを得ることができます。
- 「タスク」の下の「フィルター結果」をクリックする。
「フィルター」ウィンドウが開くので、デフォルトのフィルター条件
ID = #{param.ID} を「フィルター」列に挿入する。
「フィルター」ウィンドウは、以下のようになります。
このコードは、データベースのレコードをフィルター操作します。
したがって、指定済み ID 番号を持つレコードのみが関連レコードに表示されます。
この条件に関する詳細は、
この課題の後半にある『ハイパーリンクの挿入』セクションで学習します。
- 「閉じる」をクリックする。
- 「次へ」をクリックする。「データ・コントロールの構成」ページが開きます。
- 「表示するフィールド」セクションで、
対象の入力フォームに表示したいフィールドを除くすべてのフィールド名の横にあるチェック・ボックスをクリアする。
- ID
- タイトル (TITLE)
- 説明 (DESCRIPTION)
- メイン・カテゴリー (MAINCATEGORY)
- 価格 (PRICE)
- 電話 (PHONE)
- 「上へ」または「下へ」をクリックして、フィールド名を以下のように上から下へと再配列する。
- ID
- タイトル (TITLE)
- 説明 (DESCRIPTION)
- メイン・カテゴリー (MAINCATEGORY)
- 価格 (PRICE)
- 電話 (PHONE)
- ID フィールドについて、
「コントロール・タイプ」列のドロップダウン・リストから「出力フィールド」を選択する。
レコードの ID 番号は、ユーザーが表示できるようにしますが、
ユーザーが更新できるようにはしたくありません。
ID フィールドを出力フィールドにすると、重複 ID の問題を回避するのに役立ちます。
- 「オプション」をクリックする。
「オプション」ウィンドウが開きます。
- 「実行ボタン」オプションが選択されていることを確認する。
- 「ラベル」フィールドに「更新」と入力する。
- 「OK」をクリックする。
- 「関連レコードの追加」ウィンドウは下図のようになるはずです。

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

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

これで、ユーザーがレコードを更新すると、そのページはブラウザーを
all_records.jsp ページに送るので、レコードが更新されたことが確認できます。
「削除」ボタンによっても、
ユーザーが all_records.jsp page を再び参照できるようにする必要があります。
- Web ページ上の「削除」ボタンのために、ステップ 1 から
7 を繰り返して、同じようにコードを編集します。
- このページを保管する。
ここで、更新するデータベース・レコードをユーザーが選択できるように、all_records.jsp
ページにリンクを作成します。
#{param.ID} は、更新ページが更新するレコードの ID 番号を表します。
ユーザーがレコードのリンクをクリックすると、そのレコードの ID 番号は
#{param.ID} パラメーターとして update_record.jsp ページに送られます。
そこで、update_record.jsp ページに挿入されたばかりのフィルター済み関連レコードは、
更新用のそのレコードのみを表示します。
- 「プロジェクト・エクスプローラー」ビューで、「all_records.jsp」
ファイルをダブルクリックして、エディターを開く。
- データ・テーブル内の任意の場所をクリックする。
- 「プロパティー」ビューを開く。
- 「プロパティー」ビューで、ビューの左側にある
HTML タグ・リストから「h:dataTable」をクリックする。
- 「プロパティー」ビューの右端にある「追加」をクリックして、新しい列を追加する。
- 新しい列の「ラベル」フィールドに「更新 (Update)」と入力して、「Enter」を押す。
「更新 (Update)」という名前の列がデータ・テーブルに生成されます。
- 「プロパティー」ビューで選択した新しい列に関して、
この「更新 (Update)」列がデータ・テーブルの右端に移るまで、「下に移動」をクリックする。
- 「パレット」ビューで、「Faces コンポーネント」ドロワーをクリックして展開する。
- パレットから「リンク」コンポーネントを、今作成した「更新 (Update)」列にドラッグする。
「URL の構成」ウィンドウが開きます。
- 「URL」フィールドに、ターゲット・リンクとして update_record.jsp
と入力し、「ラベル」フィールドに「リストの更新 (Update Listing) 」と入力する。
- 「OK」をクリックする。
「リストの更新 Update Listing)」ハイパーリンクが「更新 (Update)」列に表示されます。
- 「更新 (Update)」列の「リストの更新
(Update Listing)」ハイパーリンクの横にあるリンク・アイコン
をクリックする。
- 「プロパティー」ビューで、このビューの左側の「hx:outputLinkEx」
タグのすぐ下にある「パラメーター」タブをクリックする。
- 「パラメーターの追加」をクリックし、次に「名前」フィールドに ID と入力する。
この ID パラメーターを入力フォームの ID 列にバインドする必要があります。
このハイパーリンク・パラメーターをデータ・リストの ID 列にバインドすることは、
ハイパーリンクがクリックされるときに、要求パラメーターがリストのレコード ID になることを意味します。
- 「値」フィールドを選択し、次にこのフィールドにある「ページ・データ・オブジェクトの選択」ボタン
をクリックする。
「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
- 以下に示すように、「データ・オブジェクト」の下にある
「all_recordlist(ADS)」レコード・リストから ID 列をクリックする。

- 「OK」をクリックする。
これで、ユーザーは、「リストの更新 (Update Listing)」リンクをクリックすると、Web
サイトで案内広告に関する情報を更新できるようになります。
- このファイルを保管し、必要であればページをテストする。
最初に all_records.jsp を開いておくことを忘れないでください。
この JSP が update_record.jsp にリンクするページだからです。
この課題では、データベースのレコードを更新する Web ページの作成方法を学習しました。
これで、『課題 1.6: 関連レコード・リストのフィルター操作』を始める準備が完了しました。