課題 2.2: データ・テーブルのフォーマット

『データ・テーブルのフォーマット』を始める前に、 『モジュール 1: データ接続を扱う Web ページの作成』のすべて、 あるいは『課題 2.1: 必須リソースのインポート』のいずれかを完了しておく必要があります。

all_records.jsp ページにあるデータ・テーブルは、実用的な外観を持っています。 これはデータベースのすべてのレコードを表示して、意図されたとおりに他のページにリンクします。 ただし、見栄えがするものとはいえません。 この課題では、このデータ・テーブルにページャー、スタイル規則、 および販売品目の写真のようなものを追加することによってデータ・テーブルを改善します。

列ヘッダーの名前変更

デモを見る

多くの場合、 ユーザーのデータ・テーブルの列ヘッダーをデータベースの列名と全く同じにしたいとは思わないでしょう。 以下の手順で、データ・テーブルの列ヘッダーをより適切なものに名前変更する方法を示します。

  1. 「プロジェクト・エクスプローラー」ビューで all_records.jsp ページをダブルクリックする。
  2. データ・テーブルの「メイン・カテゴリー (MAINCATEGORY)」列ヘッダーをクリックする。
  3. 「プロパティー」ビューで、「」の 1 行テキスト領域を「メイン・カテゴリー (MAINCATEGORY)」から「カテゴリー (CATEGORY)」に変更する。
  4. 必要であれば、その他の列も名前変更する。
  5. このページを保管する。

JSF 出力コンポーネントのフォーマット

デモを見る

出力コンポーネントもフォーマットできます。 以下の手順では、{PRICE} 出力コンポーネントを、 通常の数値としてではなく通貨として表現されるようにフォーマットします。

  1. ページの {PRICE} 出力コンポーネントをクリックする。
  2. 「プロパティー」ビューで、「」を「10 進数」から「通貨」に変更する。
  3. これで、各品目の価格が、通常の数値ではなく通貨スタイルで表示されるようになる。

    さまざまな型のデータ (たとえば、パーセント、日付、時刻など) には、 別のスタイルおよびフォーマットが使用可能です。 さらに、出力コンポーネントのフォーマットをカスタマイズして、 電話番号のような「プロパティー」ビューにリストされていないデータの型をカスタマイズすることもできます。

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

データの順序付け

デモを見る

この時点では、データのリストはどのような順序にも並んでいません。 より整理された広告のリストをユーザーに提供するには、 類似品目がグループ化されるようにカテゴリー別にレコード・リストを順序付けます。

  1. 「ページ・データ」ビューの all_recordlist を右クリックして、 コンテキスト・メニューの「構成」をクリックする。 「データ・リストの構成」ウィンドウが開きます。

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

  2. このウィンドウの「条件」タブで、「配列基準」タブをクリックする。
  3. 「使用可能なカラム」ペインで、「メイン・カテゴリー (MAINCATEGORY)」をクリックする。
  4. >」ボタンをクリックして、「メイン・カテゴリー (MAINCATEGORY)」 列を「配列基準」ペインに移動する。

    このウィンドウは下図のようになるはずです。

    「データ・リストの構成」ウィンドウ

  5. 閉じる」をクリックして、この配列の変更を適用する。

    これで、データはカテゴリー順に並び替えられました。 データベース内の任意の列でソートを行えます。

ページャーの追加

デモを見る

対象のデータ・テーブルにレコードすべてを一度に表示するのではなく、 ページャーを使用することができます。 ページャーは、プロジェクト内で新規 JSP ファイルを作成せずに、 ページに表示するレコードを特定のサイズに自動的に分割します。

  1. データ・テーブル内の任意の場所をクリックする。
  2. 「プロパティー」ビューで、ビューの左側にある「HTML タグ・リスト」から「h:dataTable」をクリックする。
  3. 「プロパティー」ビューで、左側にあるタグ・リストから「表示オプション」をクリックする。
  4. ページ当たりの行数」フィールドに 5 を入力する。
  5. Web スタイル・ページャーの追加」をクリックする。 ページャーの外観を示す写真がデータ・テーブルの下部に表示されます。

    Page Designer では、ページャーの視覚化は、プレースホルダー・イメージであり、 実際に表示されるページ数は反映しません。実際の表示ページ数は、 ページがブラウザーにロードされるときにのみ決めることができるからです。

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

    必要であれば、種々のスタイルのページャーとページ統計コンポーネントをテストして、 ページに最も適切なものを見つけることができます。

リストとしてグループ・ボックスにコンポーネントをレイアウト

デモを見る

データ・テーブルのそれぞれの列が常に 1 つだけ出力コンポーネントを持つのではなく、 複数の列内のエレメントを結合して、より見栄え良くレイアウトすることが可能です。 コンポーネントは、非表示 HTML 表を使用する場合と同じようにグループ・ボックスを使用して配置します。 具体的には、サイトを視覚的に充実させるためにイメージ・コンポーネントを追加した後、 それぞれの広告に関するほとんどのテキスト情報を取り込んで、 それらを単一のデータ・テーブル列に置きます。 この列は、その後、「詳細 (DETAILS)」というラベルを付けられます。

  1. パレットの Faces コンポーネント・ドロワーから、 「パネル - グループ・ボックス」コンポーネントをデータ・テーブルの「タイトル (TITLE)」列にドラッグする。 「データ型の選択」ウィンドウが開きます。
  2. 「データ型の選択」ウィンドウで、グループ・ボックス型として「リスト」を選択して、「OK」をクリックする。

    リスト・グループ・ボックスは、その中に置かれたコンポーネントを、 単一の列または行にレイアウトします。 このリストは、垂直または水平のいずれかの向きにすることができます。

  3. 「グループ・ボックス」をクリックして、これを選択する。
  4. 「プロパティー」ビューを使用して、「向き」を「垂直方向」に変更する。
  5. {TITLE} コンポーネントをリスト・グループ・ボックスにドラッグする。 コンポーネントをグループ・ボックスに追加すると、このボックスの説明テキストはなくなります。
  6. イメージ」コンポーネントを、パレットの Faces コンポーネント・ドロワーからリスト・グループ・ボックスにドラッグする。 この操作は、イメージをタイトルの下に確実に置くために、 イメージ・コンポーネントをグループ・ボックスのボトム・エッジにドロップするのに役立ちます。
  7. 今追加したイメージ・コンポーネントをクリックする。
  8. 「プロパティー」ビューの「サイズ」エリアを使用して、 「」を 60 ピクセル、「高さ」を 50 ピクセルに設定する。 これによって、データベースではイメージはどのようなサイズであっても、 このイメージは常に確実に 60x50 でページに表示されます。
  9. 「ページ・データ」ビューから 「写真 (PHOTO)」列をイメージ・コンポーネントにドラッグして、 このイメージ・コンポーネントを all_recordlist の 写真 (PHOTO) 列にバインドする。 これにより、イメージ・コンポーネントは、それぞれのレコードの写真 (PHOTO) 列で検出されたイメージ・データを表示します。
  10. 「プロパティー」ビューの「基本」タブで、「」フィールドの横にある 「ページ・データ・オブジェクトの選択」ボタン をクリックする。 「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
  11. + 記号をクリックして、all_recordlist 関連レコード・リストを展開する。
  12. イメージ・タイプ (ストリング) (IMAGETYPE (string))」をクリックする。
  13. OK」をクリックする。
  14. このページを保管する。

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

    現行ページの外観

グリッドとしてグループ・ボックスにコンポーネントをレイアウト

デモを見る

グループ・ボックスは、テーブルのようなフォーマットでコンポーネントを編成することもできます。 リスト型のグループ・ボックスは行または列を 1 つだけ持つことができますが、 グリッド型のグループ・ボックスは任意の数の行および列を持つことができます。 以下の手順で、{PRICE} および {PHONE} コンポーネントをデータ・テーブルの「説明 (DESCRIPTION)」列に移動し、 それらのためのラベルを組み込みます。

  1. パレットの Faces コンポーネント・ドロワーから、 「パネル - グループ・ボックス」コンポーネントをデータ・テーブルの「説明 (DESCRIPTION)」列にドラッグする。 「データ型の選択」ウィンドウが開きます。
  2. コンポーネントの型として「グリッド」をクリックし、「OK」をクリックする。
  3. 新規グリッドのグループ・ボックスをクリックする。
  4. 「プロパティー」ビューを使用して、このグループ・ボックスの「」数を 2 に設定する。
  5. パレットの Faces コンポーネント・ドロワーから、 「出力」コンポーネントをグリッドの「グループ・ボックス」にドロップする。

    この出力コンポーネントは販売品目の説明のラベルになります。 それぞれの出力コンポーネントには、テーブルの左側のセルで上述のようなラベルが付けられます。

  6. 出力」コンポーネント (Page Designer に「outputText」として表示される) をクリックし、 「プロパティー」ビューを使用して、それに「説明:」の「」を割り当てる。
  7. ページの既存の {DESCRIPTION} コンポーネントをグリッドの「グループ・ボックス」の下部のエッジにドラッグする。

    コンポーネントをこのグループ・ボックスの正しい場所にドラッグしにくい場合は、 マウス・ボタンを押したままにして、カーソルを監視してください。 グループ・ボックス内のカーソルの位置は、 マウス・ボタンを放したときにコンポーネントが現れる場所を示しています。 この課題では、カーソルが直前のコンポーネントの右側に来たときに、 マウス・ボタンを放してください。

  8. パレットから別の「出力」コンポーネントをドラッグして、 「グループ・ボックス」の右側にドロップする。
  9. 「プロパティー」ビューを使用して、それに「価格:」の「」を割り当てる。
  10. 既存の {PRICE} 出力コンポーネントを「価格」出力テキストの右側にドラッグする。
  11. 同じ方法で、{PHONE} コンポーネントのためのラベル用に、 新しい「出力」コンポーネントをドラッグし、それに「電話:」とラベルを付ける。
  12. 既存の {PHONE} コンポーネントを、 「電話」出力テキストの右のグリッドのグループ・ボックスにドラッグする。 この時点で、このページは下図のようになるはずです。

    現行ページの外観

  13. 既存の「リストの更新」ハイパーリンクをドラッグして、「説明 (DESCRIPTION)」列の中、ただし、グリッドのグループ・ボックスの内側ではない ところにドロップします。

    これを行うための最良の方法は、リンク・アイコン そのものをクリックし、 そのアイコンを抑えて、グリッドのグループ・ボックスの下に直接ドラッグすることです。 こうすると、 テキスト・ラベルとリンク・アイコンの両方が移動し、リンクの機能し続けます。 リンクのみ、またはテキストのみを移動すると、このリンクはもはや機能しません。 このようになった場合は、 メニュー・バーから「編集」>「元に戻す」と順にクリックして、再度試みてください。

  14. データ・テーブルの空の「価格 (PRICE)」、「電話 (PHONE)」、および「更新 (UPDATE)」の列を削除する。

    列を削除するには、該当する列をクリックして、「プロパティー」ビューを開きます。 次に、 ビューの左側にある HTML タグ・リストから h:dataTable をクリックして、 ビューの右側にあるリストから削除したい列を選択し、「除去」をクリックします。

  15. 「説明」列のヘッダーをクリックして、「プロパティー」ビューを使用し、 その「」フィールドを「詳細」に変更する。

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

    現行ページの外観

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

スタイル・シート規則の適用

デモを見る

Cascading Style Sheet (CSS) は、Web サイトのルック・アンド・フィールをコントロールする最良の方法の 1 つであるばかりでなく、 個々の JavaServer Faces コンポーネントのルック・アンド・フィールをコントロールする方法でもあります。 次のセクションでは、このプロジェクトで提供されている CSS ファイルを使用して、このページの外観を変更します。 具体的に言えば、列ヘッダーに 1 つの規則を適用し、行には 2 つの規則を適用して、 データ・テーブルの各行を見分けやすくする交互色効果を作成します。

  1. 列ヘッダーの 1 つをクリックしてデータ・テーブルを選択する。
  2. 「プロパティー」ビューで「h:dataTable」をクリックする。
  3. 「プロパティー」・ビューの右上部にある「すべての属性」ボタン をクリックする。
  4. 属性名」の下で、「ヘッダー・クラス」項目をクリックする。 この設定はデータ・テーブルのヘッダー行の外観をコントロールします。
  5. 次に、ヘッダー・クラスの「」フィールドに表示されている「クラスの選択」ボタン をクリックする。

    これで、「クラスの選択」ウィンドウが開き、 このプロジェクトのスタイル・シートで使用可能なすべてのスタイルが表示されます。 この時点では、プロジェクトにはスタイル・シートが 1 つだけあります。

  6. スタイル・シートを展開して、.columnHeaderClass をクリックする。
  7. OK」をクリックする。

    「クラスの選択」ウィンドウ

  8. 次に、「属性名」の下の「行クラス」項目をクリックし、 さらに、「」フィールドの「クラスの選択」ボタン をクリックして、再度、「クラスの選択」ウィンドウを開く。 「rowClasses」オプションは、データ・テーブルの行の表示方法をコントロールします。
  9. スタイル・シートを展開し、今度は、クリックするときに Ctrl キーを押したままで .rowClass1.rowClass2 の両方の規則を選択する。 これらの 2 つの規則は異なるカラー・スキームを持っており、 両方を選択すると、行の色が交互に変わります。
  10. OK」をクリックする。
  11. 最後に、このページを保管して、テスト・サーバーで実行する。

    サーバーでのアプリケーション実行の経験が豊富でない場合は、 『課題 1.3: Web サイトのテスト』を参照してください。

    このページをテストするときの外観は、以下のようになるはずです。

    現行ページの外観

これで、 データ・テーブルをより素晴らしいものに変換するために使用できるいくつかの要領を習得できました。

課題 2.3: ファイル・アップロード・コンポーネントの使用』を始める準備が完了しました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2004. All Rights Reserved.