パネル - グループ・ボックス - グリッド

この複合コンポーネントは、 他のコンポーネントをレイアウトするために使用されます。 このコンポーネント含まれるすべてのコンポーネントが、 指定された列数でテーブル内に位置合わせされます。

設計時のコンポーネント

「グリッ ド」コンポーネントを、ページ上にドラッグ・アンド・ドロップします。

「グリッド」コンポーネントのボタン

「グリッ ド」コンポーネントは、ページ上でこのように表示されます。

デザイン時の「グリッド」

実行時のコンポーネント

追加される コンポーネントによって、「グリッド」コンポーネントは実行時に変化します。

「プロパティー」ビューと「すべての属性」ビュー

コンポーネントの「プロパティー」ビューには、 コンポーネントに設定できる最も一般的な属性のセットが表示されます。 コンポーネントによっては、制御、アクション、 または他のコンポーネントの追加に関するオプションが 表示される場合もあります。 「プロパティー」ビューを開くには、 「ウィンドウ」 > 「ビューの表示」 > 「プロパティー」とクリックします。

「グリッド」コンポーネントの共通属性は、 「プロパティー」ビューの「hx:panelGrid」タブ および「項目」タブに表示されます。 属性の完全なリストについては、「グリッド」のすべての属性 の 表を参照してください。 パネル項目に関する追加の構成オプションは、 「hx:panelGrid>項目」タブにあります。

表 1. 「グリッド」構成オプション

構成オプション

説明

パネル内の項目の順序

「上へ移動」ボタンと「下へ移動」ボタンを使用して、 パネル内のコンポーネントの順序を指定することができます。

「すべての属性」ビューには、コンポーネントで設定できるすべての属性の表が表示されます。 この表には、「プロパティー」ビューからアクセスできる属性も含まれます。 「すべての属性」ビューに切り替えるには、 「プロパティー」ビューの右上隅にある「すべての属性」アイ コン「すべての属性」
アイコンをクリックします。

表 2. 「グリッド」のすべての属性

属性名

「プロパティー」ビューでの表示

説明

bgcolor

背景色

背景色を指定します。 6 桁の 16 進数で RGB 値を入力するか (最初に # 記号を付ける)、 または色の名前を入力します (例えば、black、white、blue)。

border

非表示

表の境界線のサイズを、ピクセル単位で指定します。

binding

非表示

コンポーネントの インスタンス (通常はユーザー・インターフェース・ コンポーネント) を、Bean プロパティー (通常は バッキング・ファイル内にあります) にバインドする式です。

cellpadding

パディング

セルの境界線とセル・コンテンツの間の、スペースを指定します。 この属性の値がピクセル単位の長さである場合、4 つのすべての余白はコンテンツからこの距離になります。

cellspacing

間隔

セル間に残す間隔を、ピクセルで指定します。

columnClasses

非表示

データ・テーブル・コンポーネントの列に、 定義済み CSS スタイルシート・スタイルを割り当てます。 CSS スタイルシート・ファイルを使用するには、 あらかじめコンポーネントの JSP にリンクさせておく必要があります。 これは手動で入力するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

cols

サイズ: 列

グリッド内の列数を指定します。

dir

非表示

実行時にレンダリングされるときのコンポーネントの方向を指定します。 次のいずれかの値にできます。
  • ltr - 左から右
  • rtl - 右から左
方向を指定しない場合は、コンポーネントのエンコード方式に適している方向が使用されます。

footerClass

非表示

データ・テーブル・コンポーネントの列ヘッダーに、 定義済みの CSS スタイルシート・スタイルを割り当てます。 CSS スタイルシート・ファイルを使用するには、 あらかじめコンポーネントの JSP にリンクさせておく必要があります。 これは手動で入力するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

frame

非表示

グリッドを囲むフレームの、どちら側を可視にするかを指定します。

headerClass

非表示

データ・テーブル・コンポーネントの列ヘッダーに、 定義済みの CSS スタイルシート・スタイルを割り当てます。 CSS スタイルシート・ファイルを使用するには、 あらかじめコンポーネントの JSP にリンクさせておく必要があります。 これは手動で入力するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

id

ID

コンポーネントに名前を割り当てます。JSP 内で固有の名前にする必要があります。

lang

非表示

コンポーネントの値およびテキスト・コンテンツの言語。 省略されている場合、言語は含まれているタグ (特にビュー) から継承されます。これは、ISO 規格言語省略コードで指定します。例えば、英語は「en」、米国英語は「en-US」、 フランス語は「fr」、ドイツ語は「de」を使用します。
注: これは、コンポーネント内のテキストを変換するのではなく、検索、ソート、照合などの操作が正しく実行されるようにコンポーネントの言語を識別します。

rendered

非表示

true または false に設定できます。
  • false - コンポーネントは、実行時にブラウザーにレンダリングされません。
  • true - コンポーネントがレンダリングされます。これはデフォルト値です。

rowClasses

非表示

行が表示されるごとに循環するクラスのセット。 これは手動で定義するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

rules

非表示

テーブル内のセルの間で使用される規則を指定します。
  • none
  • groups
  • rows
  • cols
  • all

size

サイズ: 高さ

コンポーネントの高さを指定します (行単位、ピクセル単位、または 画面のパーセント単位)。

style

スタイル: プロパティー

コンポーネントに対して CSS スタイル情報を指定します (例えば、style="font-size : 8pt ; color : red")。 選択されたコンポーネントのプロパティー (例えば、フォントおよび色) を定義します。 これは手動で行うか、またはボタンをクリックして、 ウィンドウ内から必要なプロパティーを選択してください。

styleClass

スタイル: クラス

この要素がレンダリングされるときに適用される、 CSS スタイル・クラスのリスト (スペース区切り)。 この値は、生成されたマークアップの クラス属性として渡されなければなりません。 選択されたコンポーネントのクラス (例えば、スタイルシート) を定義します。 これは手動で行うか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

サマリー

非表示

非ビジュアル・メディアへのレンダリングを行う ユーザー・エージェントの要約詳細ストリングを指定します。

title

非表示

実行時にツールチップとしてブラウザーに表示される、タイトル・テキストを指定します。 コンポーネントの代替テキストが指定されていない場合、 ブラウザーはこのテキストを代替テキストとして使用します。

width

サイズ: 幅

コンポーネントの幅を、ピクセル単位またはパーセント単位で指定します。 パーセントを指定するには、値に % を付加します。


フィードバック