課題 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. 次へ」をクリックする。

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

デモを見る

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

  1. 新規データベース接続」ウィンドウで、 「データベース・マネージャーの選択」の下にある Cloudscape を展開して、「V5.1」をクリックする。
  2. 上部の「参照」ボタンをクリックする。 これは、「データベース・ロケーション」の隣にある「参照」ボタンです。 「フォルダーの参照」ウィンドウが開きます。
  3. データベース・ディレクトリーの選択」の下で、ディレクトリー <workspace-folder>¥ClassifiedsTutorial¥WebContent¥cloudscapesampledata¥database にナビゲートする。 ここで、<workspace-folder> は、現在作業しているワークスペースがあるディレクトリーです。
  4. database」フォルダーをクリックして、次に「OK」をクリックする。
  5. データベースにアクセスするためのユーザー ID またはパスワードを追加する必要はありません。 「新規データベース接続」ウィンドウは下図のようになるはずです。

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

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

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

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

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

デモを見る

「ページ・データ」ビューは、現在 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, 2004. All Rights Reserved.