課題 1.2: 関連レコード・リストとデータ・テーブル・コンポーネントを扱う作業

始める前に、『課題 1.1: 必須リソースのインポート』を完了しておく必要があります。

このチュートリアルの Web サイトは、動的 Web ページを使用してデータベースなどのデータ・ソースにアクセスし、データ・ソースからの情報をページ上に表示します。この課題では、all_records.jsp ページをセットアップし、データベースにあるすべての案内広告を表示します。次のいくつかの課題では、その他のページをデータベースに接続して、新しい案内広告を作成したり、古い広告を編集したり、フィルター操作された広告のリストを表示したりできるようにします。

このチュートリアルでは、Java Server Faces を使用してページをデータベースに接続する 2 つのコンポーネント (関連レコードおよび関連レコード・リスト) を使用します。これらのコンポーネントは、データが、データ・テーブルまたは普通の HTML 表の形式でページに表示できるように、データベースのデータを示しています。これらのコンポーネントは、データ・アクセス JavaBeans を使用します。『データ・アクセス Bean についてさらに学習したい方に』、または『JavaServer Faces および Faces コンポーネントについてさらに学習したい方に』を参照してください。

新規関連レコード・リストの作成

デモを見る

以下の手順では、データベースにあるすべての案内広告を表示するための関連レコード・リストを作成します。次に、データベースに接続して、関連レコード・リストの中で必要とする情報を保持しているテーブルを選択します。最後に、この関連レコード・リストを、データ・テーブルのページに表示します。

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

    all_records.jsp ファイルを保管するようにプロンプトが出されることがあります。プロンプトが出された場合は、「OK」をクリックします。

    「関連レコード・リストの追加」ウィンドウが開きます。

  6. 名前」フィールドに all_recordlist と入力する。

    関連レコード・リストおよび関連レコード名は、変数名に関する Java 標準命名規則に準拠している必要があります (例えば、スペースを含むことはできない)。

  7. データ・コントロールの追加」が選択されていることを確認する。

    データ・コントロールの追加」が選択されていれば、ウィザードによりデータ・テーブルが作成され、レコード・リストがページに表示されます。選択されていない場合、ウィザードはレコード・リストを作成するだけで、ページ上にそのデータは表示しません。ここでは、ウィザードにデフォルトのデータ・テーブルを作成させ、ユーザーは後からそれをカスタマイズします。「関連レコード・リストの追加」ウィンドウは下図のようになるはずです。

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

  8. 次へ」をクリックする。
  9. 接続名」フィールドで、「新規」をクリックして、新規データベース接続を作成する。

    新規接続」ダイアログが表示される。「接続名」フィールドには、自動的に ClassifiedsTutorial_Con1 という名前が取り込まれることに注意してください。

  10. 新規 DB 接続の作成」をクリックする。「新規データベース接続」ウィンドウが表示されます。
  11. データベース・マネージャーおよび JDBC ドライバーの選択」が選択されていることを確認し、「次へ」をクリックする。

データベース接続情報の指定

デモを見る

レコード・リストには、表示したいデータを見つけることができる場所を示す必要があります。これは「新規データベース接続」ウィンドウで行います。このケースでは、前の課題でインポートしたファイルに組み込まれていた Cloudscape データベースを指定します。この接続は、いったん作成されると、Web サイト全体で使用されるので、このチュートリアルのためにはこれを 1 回作成するだけで済みます。

  1. 「新規データベース接続」ウィザードでデータベース・マネージャーを指定する。
    1. データベース・マネージャーの選択」の下にある「Cloudscape」を展開する。
    2. V5.1」を選択する。
  2. データベース・ロケーションを指定する。
    1. データベース・ロケーション」の横にある「参照」ボタンをクリックする。
    2. 次のディレクトリーを参照する。

      <workspace>¥ClassifiedsTutorial¥WebContent¥cloudscapesampledata¥database

      ここで、<workspace> は現在作業しているワークスペースがあるディレクトリーです。

    3. データベース」フォルダーを選択して、「OK」をクリックする。

    データベースにアクセスするためのユーザー ID またはパスワードを追加する必要はありません。「新規データベース接続」ウィザードは、次のようになります。

    「新規データベース接続」ウィンドウ
  3. 完了」をクリックして「新規データベース接続」ウィザードを閉じる。
  4. 「新規接続」ウィザードで、「完了」をクリックする。「関連レコード・リストの追加」ウィザードに戻ります。
  5. Cloudscape データベースへの接続を作成したので、表示するテーブルまたはレコード・リストを選択する必要があります。関連レコード・リストの追加」 ウィザードには、データベースのテーブルが表示されます。このチュートリアルの大部分で W5SAMPLE.ADS テーブルが使用されています。

  6. テーブル」フィールドで「W5SAMPLE.ADS テーブル」をクリックする。

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

    このウィザードの残りのページで、ユーザーのレコード・リストから列を除外して、拡張オプション (たとえば、主キーの定義、他のテーブルへの関係の追加、フィルターおよびソート条件の指定) を実行することができます。これらのページについては、後続の課題でさらに学習します。
  7. 完了」をクリックする。

デフォルト・データ・テーブルのチューニング

デモを見る

「ページ・データ」ビューは、現在 ADS テーブルの列リストを表示しています。また、all_records.jsp ファイルにはデータ・テーブルにあるこのデータの視覚化が含まれています。現時点では、デフォルトのデータ・テーブルに含まれている情報が多過ぎます。このチュートリアルで表示すべき項目は、各案内広告のタイトル、説明、カテゴリー、価格、および電話番号のみです。データ・テーブルを切り取って再編成するには、以下のステップに従ってください。

  1. データ・テーブルの任意の場所をクリックする。
  2. 「プロパティー」ビューを開く。

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

  3. 「プロパティー」ビューで、ビューの左側にある HTML タグ・リストから「h:dataTable」をクリックする。
  4. ビューの右側で、「ラベル」の下の「ID」列をクリックして、次に「除去」をクリックする。 ID 列がこのデータ・テーブルから除去されます。
  5. タイトル (TITLE)、説明 (DESCRIPTION)、メイン・カテゴリー (MAINCATEGORY)、価格 (PRICE)、および電話 (PHONE) 以外の列について、同じプロセスを繰り返し、これらの列以外のデータ・テーブルのすべての列を除去する。これで、「プロパティー」ビューは下図のようになるはずです。

    「プロパティー」ビュー

    ユーザーのページは下図のようになるはずです。

    ページの現在の外観

    この列順は案内広告には適切な順序ではありません。順序は、以下のようにすれば、もっと重要な意味を持つようになります。

    1. タイトル (TITLE)
    2. 説明 (DESCRIPTION)
    3. メイン・カテゴリー (MAINCATEGORY)
    4. 価格 (PRICE)
    5. 電話 (PHONE)
  6. 列を再配列するには、「プロパティー」ビューの列リストに戻る。ラベルの「タイトル (TITLE)」をクリックして、これがリストの先頭に来るまで「上に移動」をクリックする。これで、タイトルの列がデータ・テーブルの先頭の列になります。
  7. 同様に、他の列を一度に 1 つずつ選択して、再配列する。これで、「プロパティー」ビューの列セクションは次のようになるはずです。

    「プロパティー」ビューの列

  8. このページを保管する。

    次の課題 (『課題 1.3: Web サイトのテスト』) では、このページが実際の Web サーバーではどのように見えるかを確認します。

    データ・テーブルと JavaServer Faces コンポーネントをフォーマットするには多くのオプションがあります。これらのオプションの一部は、次のモジュールの『モジュール 2: 拡張機能の追加』で取り上げています。ページ上の種々の JavaServer Faces コンポーネント (たとえば、データ・テーブル、および個々の出力コンポーネント) について、独自に「プロパティー」ビューを調べてみることもできます。

課題 1.3: Web サイトのテスト』を始める準備ができました。

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