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