演習 2.1: データ・テーブルのフォーマット

列ヘッダーの名前変更

このタスクについて

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

「エンタープライズ・エクスプローラー」ビューで、「all_records.jsp」ページをダブルクリックします。
データ・テーブルの「MAINCATEGORY」列ヘッダーをクリックします。
「プロパティー」ビューで「h:outputText」タブをクリックし、「値」の 1 行テキスト領域を「MAINCATEGORY」から「CATEGORY」に変更します。
必要であれば、その他の列も名前変更します。
このページを保管します。

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

このタスクについて

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

ページの {PRICE} 出力コンポーネントをクリックします。
「プロパティー」ビューで「型」ドロップダウン・リストを見つけ、「通貨」を選択します。これで、各品目の価格が、通常の数値ではなく通貨スタイルで表示されるようになります。さまざまな型のデータ (例えば、パーセント、日付、時刻など) には、別のスタイルおよびフォーマットが使用可能です。さらに、出力コンポーネントのフォーマットをカスタマイズして、電話番号のような「プロパティー」ビューにリストされていないデータの型をカスタマイズすることもできます。
このページを保管します。

データのソート

このタスクについて

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

「ページ・データ」ビュー (「ウィンドウ」 > 「ビューの表示」 > 「ページ・データ」) の「all_recordlist (ADS)」を右クリックして、コンテキスト・メニューの「構成」をクリックします。「関連レコード・リストの構成」ウィンドウが開きます。使用するデータベースへの接続が確立できなかったことを示す警告メッセージが表示された場合は、Web サイトのテスト後、サーバーを実行したままにしておいたのです。この警告メッセージが表示された場合は、それぞれのダイアログの「キャンセル」をクリックして、『Web サイトのテスト』にあるセクション『サーバーの停止』の説明に従って、サーバーを停止してください。
「スコープから既存のレコードまたはレコード・リストを取得」と「既存のレコードまたはレコード・リストからメタデータ定義を再利用」を選択し、「次へ」をクリックします。
次のウィンドウで「ADS」をクリックして選択し、「次へ」をクリックします。
次のウィンドウの右側にある「配列結果」をクリックします。その結果、「配列」ウィンドウが開きます。
「使用可能な列」ペインで、「MAINCATEGORY」をクリックします。
「>」ボタンをクリックして、「MAINCATEGORY」列を「配列基準」ペインに移動します。ウィンドウは次のようになります。
「閉じる」をクリックして、「配列」ウィンドウを閉じます。
「終了」をクリックして、変更を適用します。これで、データはカテゴリー順に並び替えられました。データベース内の任意の列でソートを行うことができます。

ページャーの追加

このタスクについて

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

データ・テーブル内の任意の場所をクリックします。
「プロパティー」ビューで、ビューの左側にある HTML タグ・リストから「h:dataTableEx」をクリックします。
「h:dataTableEx」の下の「表示オプション」タブをクリックします。
「ページ当たりの行数」フィールドに「5」を入力します。
「Web スタイル・ページャーの追加」の横のボタンをクリックします。ページャーの外観を示す画像がデータ・テーブルの下部に表示されます。 Page Designer では、ページャーの視覚化は、プレースホルダー・イメージであり、実際に表示されるページ数は反映しません。実際の表示ページ数は、ページがブラウザーにロードされるときにのみ決めることができるからです。
このページを保管します。必要であれば、種々のスタイルのページャーとページ統計コンポーネントをテストして、ページに最も適切なものを見つけることができます。

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

このタスクについて

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

パレットで拡張 Faces コンポーネント・ドロワーをクリックして開きます。「パネル - グループ・ボックス」コンポーネントをデータ・テーブルの「TITLE」列にドラッグします。「データ型の選択」ウィンドウが開きます。
「データ型の選択」ウィンドウで、グループ・ボックス型として「ボックス」を選択して、「OK」をクリックします。このグループ・ボックスは、その中に置かれたコンポーネントを、単一の列または行にレイアウトします。このリストは、垂直または水平のいずれかの向きにすることができます。
「グループ・ボックス」をクリックして選択します。
「プロパティー」ビューを使用して、「向き」を「垂直方向」に変更します。
{TITLE} コンポーネントをリスト・グループ・ボックスにドラッグします。コンポーネントをグループ・ボックスに追加すると、このボックスの説明テキストはなくなります。
「イメージ」コンポーネントを、パレットの拡張 Faces コンポーネント・ドロワーからリスト・グループ・ボックスにドラッグします。この操作は、イメージ・コンポーネントをグループ・ボックスの下辺にドロップして、イメージを確実にタイトル以下に配置するのに役立ちます。
新たに追加したイメージ・コンポーネントをクリックします。
「プロパティー」ビューの「サイズ」エリアを使用して、「幅」を 60 ピクセル、「高さ」を 50 ピクセルに設定します。こうすることで、これらのイメージは、データベースにおけるイメージのサイズに関係なく、常に 60x50 サイズでページに表示されるようになります。
「ページ・データ」ビューから「写真 (PHOTO)」列をイメージ・コンポーネントにドラッグして、このイメージ・コンポーネントを all_recordlist の「写真 (PHOTO)」列にバインドします。これにより、イメージ・コンポーネントは、それぞれのレコードの「写真 (PHOTO)」列で検出されたイメージ・データを表示します。「写真 (PHOTO) (ByteArray)」列がリストされていない場合は、「ページ・データ」ビューの「all_recordlist (ADS)」を右クリックして、メニューの「構成」を選択します。「OK」をクリックして、「URL」ウィンドウが開いている場合は閉じます。「関連レコード・リストの構成」ウィンドウで、「次へ」をクリックします。「ADS」を選択して「次へ」をクリックします。「写真 (PHOTO) (ByteArray)」の隣にあるボックスをクリックしてチェック・マークを付け、「終了」をクリックします。
挿入したグラフィックをクリックします。「プロパティー」ビューの「hx:graphicImageEx」タブで、「型」フィールドの隣にある「ページ・データ・オブジェクトの選択」ボタンをクリックします。「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
「all_recordlist (サービス・データ・オブジェクト)」 > 「all_recordlist (ADS)」をクリックして展開します。
「イメージ・タイプ (ストリング) (IMAGETYPE (string))」をクリックします。
「OK」をクリックして、ページを保管します。

タスクの結果

このページは、次のようになるはずです。

グループ・ボックス・グリッドを使用したレイアウトの調整

このタスクについて

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

パレットの拡張 Faces コンポーネント・ドロワーから、「パネル - グループ・ボックス」コンポーネントをデータ・テーブルの「DESCRIPTION」列にドラッグします。「データ型の選択」ウィンドウが開きます。
追加するコンポーネントの型として「グリッド」をクリックし、「OK」をクリックします。
新規グリッドのグループ・ボックスをクリックする。
「プロパティー」ビューを使用して、このグループ・ボックスの「列」数を「2」に設定します。
パレットの Faces コンポーネント・ドロワーから、「出力」コンポーネントをグリッドの「グループ・ボックス」にドロップします。この出力コンポーネントは販売品目の説明のラベルになります。それぞれの出力コンポーネントには、テーブルの左側のセルで上述のようなラベルが付けられます。
「出力」コンポーネント (Page Designer に「outputText」として表示される) をクリックし、「プロパティー」ビューを使用して、それに「説明:」の「値」を割り当てます。
既存の {DESCRIPTION} コンポーネントをグリッドの「グループ・ボックス」の下辺にドラッグします。コンポーネントをこのグループ・ボックスの正しい場所にドラッグしにくい場合は、マウス・ボタンを押したままにして、カーソルを監視してください。グループ・ボックス内のカーソルの位置は、マウス・ボタンを放したときにコンポーネントが現れる場所を示しています。この演習では、カーソルが直前のコンポーネントの右側に来たときに、マウス・ボタンを放してください。
パレットから別の「出力」コンポーネントをドラッグして、「グループ・ボックス」の右側にドロップします。
「プロパティー」ビューを使用して、それに「価格:」の「値」を割り当てます。
既存の {PRICE} 出力コンポーネントを「価格」出力テキストの右側にドラッグします。
同様の方法で、{PHONE} コンポーネントのラベル用として新しい「出力」コンポーネントをドラッグし、それに「電話:」というラベルを付けます。
既存の {PHONE} コンポーネントを、「電話」出力テキストの右にあるグリッドのグループ・ボックスにドラッグします。このページは、次のようになるはずです。
データ・テーブルの空の「PRICE」と「PHONE」の列を削除します。列を削除するには、該当する列をクリックして、「プロパティー」ビューを開きます。次に、ビューの左側にある HTML タグ・リストから h:dataTable をクリックして、ビューの右側にあるリストから削除したい列を選択し、「除去」をクリックします。
「説明」列のヘッダーをクリックして、「プロパティー」ビューを使用し、その「値」フィールドを「詳細」に変更します。このページは、次のようになるはずです。
このページを保管してテストする。サーバーでのアプリケーション実行の経験が豊富でない場合は、演習 1.3: Web サイトのテストを参照してください。

タスクの結果

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

関連イメージが入っていない広告では、壊れたリンクが表示されます。次の演習では、ファイル・アップロード・コンポーネントをページに追加して、広告のイメージを追加または変更する方法を学習します。

演習のチェックポイント

演習 2.1 が完了しました。この演習では、データ・テーブルをさまざまな方法でフォーマットする方法を学習しました。

次のことを学習しました。

列見出しを変更する。
テーブル内のデータをソートする。
ページャーを追加してデータをさらに小さいいくつかの Web ページに分割する。
さまざまな方法でグループ・ボックスを使用し、Web ページ上のテーブルのレイアウトを変更する。

< 前へ | 次へ >

フィードバック