課題 1.4: 新規レコードの作成

始める前に、『課題 1.3: Web サイトのテスト』を完了しておく必要があります。

この課題では、ユーザーが新規案内広告を作成してそれをデータベースに掲載することができるページを作成します。最初に、新規レコードをデータベースに表すための関連レコードを作成し、次に 1 セットの入力フィールドとして、ユーザーのページにレコードを視覚化したものを作成します。

関連レコードの作成

デモを見る
  1. 「プロジェクト・エクスプローラー」ビューの「new_record.jsp」ファイルをダブルクリックして開く。
  2. デフォルトのテキスト「コンテンツをここに置く (Place content here)」を削除する。
  3. 「パレット」ビューで、「データ」ドロワーをクリックしてそれを展開する。
  4. パレットから「関連レコード」コンポーネントをブランクのコンテンツ領域にドラッグする。「関連レコードの追加」ウィンドウが開きます。

    使用するデータベースへの接続が確立できなかったことを示す警告メッセージが表示された場合は、Web サイトのテスト後、サーバーを実行したままにしておいたのです。この警告メッセージが表示された場合は、それぞれのダイアログの「キャンセル」をクリックして、『課題 1.3: Web サイトのテスト』にある『サーバーの停止』の説明に従って、サーバーを停止してください。

  5. 名前」フィールドに create_record と入力する。
  6. コントロールの作成対象」の下の「新規レコードの作成」をクリックする。
  7. レコードを Web ページに表示するための入出力コントロールの追加」が選択されていることを確認する。

    「関連レコードの追加」ウィンドウは下図のようになるはずです。

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

  8. 次へ」をクリックする。
  9. 「テーブル」ボックスで、「W5SAMPLE.ADS」テーブルをクリックする。
  10. 次へ」をクリックする。
  11. 再度、「次へ」をクリックする。「データ・コントロールの構成」ページが開きます。

関連レコード視覚化のカスタマイズ

デモを見る

「データ・コントロールの構成」ページは、ユーザーの関連レコードの視覚化のカスタマイズを支援します。たとえば、ユーザーの入力フォームにある列、フィールド・ラベル、および「実行」ボタンを変更できます。以下の手順を終了すると、全機能の入力フォームがページに作成されます。

  1. 表示するフィールド」セクションで、ユーザーの入力フォームに使用したいフィールド名を除いて、その他すべてのフィールド名の横にあるチェック・ボックスをクリアする。
  2. フィールドを上から下へ次の順序で再配列する。
    1. ID
    2. タイトル (TITLE)
    3. 説明 (DESCRIPTION)
    4. メイン・カテゴリー (MAINCATEGORY)
    5. 価格 (PRICE)
    6. 電話 (PHONE)
    このフィールド順を変更するには、フィールド名をクリックして、次に、上矢印 または 下矢印 をクリックする。
  3. 自分の望みに合わせてラベルを名前変更する。たとえば、「メイン・カテゴリー (Maincategory)」ラベルを短縮して、「カテゴリー (Category)」だけにします。

    入力フィールド用に生成されたラベルを名前変更するには、「ラベル」列からそのラベルを選んでクリックする。マウス・アイコンがカーソルに変わり、新規テキストを入力できるようになります。

  4. オプション」をクリックする。「オプション」ウィンドウが開きます。
  5. 実行ボタン」オプションが選択されていることを確認する。
  6. ラベル」フィールドに「新規リストの掲載 (Post New Listing)」と入力する。
  7. OK」をクリックする。

    これで、「関連レコードの追加」ウィンドウは下図のようになっているはずです。

    「関連レコード・リストの追加」ウィンドウ

  8. 完了」をクリックして、入力フォームを生成する。このフォームは下図のようになるはずです。

    現行ページの外観

    このフォームには「エラー・メッセージ」フィールドがあります。これは、プロジェクトにエラーがあることを意味するものではありません。このフィールドは、ユーザーがフォームを実行したときにエラーがあった場合、そのエラーが表示される場所をマークします。

「実行」ボタンのプログラミング

デモを見る

入力フォームが実行されると、ページは新規レコードをデータベースに自動的に追加します。 all_records.jsp ページへ戻るための「新規リストの掲載 (Post New Listing)」ボタンをプログラミングして、データベース内のその新規レコードを即時に見られるようにすることができます。そのためには、以下の手順を行ってください。

  1. new_record.jsp ファイルで、Web ページのフォームで作成した「新規リストの掲載 (Post New Listing)」ボタンをクリックする。
  2. 「クイック編集」ビューを開く。

    この「クイック編集」ビューは、通常ワークベンチの下部中央、「プロパティー」ビューの横のタブにあります。「クイック編集」ビューを見つけることができない場合は、メニュー・バーの「ウィンドウ」>「ビューの表示」>「クイック編集」と順にクリックします。

    「クイック編集」ビューは、Faces コンポーネントのためのイベントのコード化を支援できる、コンテキスト依存の Java エディターです。「クイック編集」ビューには、以下に示すように、現在では、データベースへの新規レコードの作成を扱う生成済みコードが含まれています。

    コードの例

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

    コードの例

  9. このファイルを保管し、次に必要であれば、テスト・サーバーでこのページを実行する。テスト・サーバーでこのページを実行している間に、新規レコードを追加して all_records.jsp ページに戻り、それらのレコードを表示することができます。

重複キーの防止

ID 列は ADS テーブルの主キーであるので、このテーブルに既存の ID 値を持つレコードはここに追加できません。各新規レコードのために新規の未使用キーを自動的に作成するために自動キー生成を使用する方法については、モジュール 2 で学習します。

その方法を学習するまでは、新規レコードの追加には、未使用 ID 番号をこのページに入力する必要があります。このデータベースが持っているレコードは 1 から 22 までの ID 番号を使用しているので、主キーとしては 22 を超える番号を入力します。複数のレコードを入力する場合は、キーが重複していないことを確認してください。

入力の関連レコードへのバインディング (オプション)

デモを見る

ページの入力フォームとは、作成した関連レコードにバインドされた 1 組の JavaServer Faces 入力フィールドのことです。使用するデータベースの ADS テーブルに新規レコードを表示するために、関連レコードを作成したことを思い出してください。 バインディング とは、JavaServer Faces 入力コンポーネントを関連レコードの列にリンクできる方法のことです。

関連レコードを作成すると、ウィザードはその列のすべてを、ページにある入力フィールドに自動的にバインドします。手動で変更を行いたい場合は、それぞれの列をそれぞれ別の入力フィールドにバインドすることができます。ユーザーの関連レコードの列を入力フィールドにバインドするには、「ページ・データ」ビューから列をこのフィールドにドラッグします。このプロセスは、ユーザーのフォームにある「説明」入力フィールドを削除してから再作成することによって実験してみることができます。『「ページ・データ」ビューについてさらに学習したい方に』を参照してください。

以下の手順は入力フィールドの概念およびバインディングのプロセスを説明するために準備されたものですが、これらの手順をウォークスルーすることは、このチュートリアルではオプションです。ウォークスルーしない場合は、『課題 1.5: 更新ページの作成』に進んでください。

  1. new_record.jsp ファイルで、「説明」入力フィールドをクリックする。
  2. 削除」を押す。
  3. 「パレット」ビューで、「Faces コンポーネント」ドロワーをクリックして展開する。
  4. パレットから「入力」コンポーネントを、削除した「説明」入力フィールドが入っていたセルにドラッグする。

    これで、入力フィールドがこのセルに入りますが、この入力フィールドはいずれの列にもバインドされていないので、その中には {ID} または {TITLE} のようなテキストは入っていません。

  5. 「ページ・データ」ビューで、作成したばかりの「入力」コンポーネントに、説明 (DESCRIPTION) 列をドラッグする。「入力」コンポーネント内のテキストが変更され、それが、説明 (DESCRIPTION) 列にバインドされたことが示されます (下図参照)。

    列を入力フィールドにバインディング

  6. このファイルを保管して、次に必要であれば、ページをテスト・サーバーで実行する。

これで、独自の JavaServer Faces 入力フォームを作成、変更できます。『課題 1.5: 更新ページの作成』を始める準備が完了しました。

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