2.2.2 Panel

Panelは、タイトル部とボディ部でできている画面情報(コンテナ)を指定する部品です。

表示例

記述形式

<div rcf:type="Panel" ... >
    HTML要素
</div>

ポイント

子要素には、HTML要素およびUI部品を指定できます。子要素に定義されたHTML要素は、ボディ部の内容になります。

プロパティ

表の項目の意味は、「Text」の「プロパティ」を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
label	String	タイトル部のラベルテキストを指定します。	可	""	値、バインド	可	不可

部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。

スタイルプロパティ

パーツ名	プレフィックス	クラス名	使用可能なスタイル
部品全体	なし	rcf-Panel	サイズ(注) カラーボーダーパディング
タイトル部	title	rcf-Panel-title	サイズ(widthを除く) カラーフォントテキスト(white-spaceを除く) ボーダーパディングマージン
ボディ部	body	rcf-Panel-body	カラーフォントテキストボーダーパディングオーバーフロー

注) widthのデフォルトは300pxです。

詳細は、「2.9 スタイルプロパティ」を参照してください。

イベントリスナ

部品全体のイベントリスナ

部品共通のイベントリスナを利用できます。部品共通のイベントリスナは、「2.8.2 画面部品共通イベントリスナ」を参照してください。

タイトル部のイベントリスナ

名前	説明	イベントオブジェクト
onClickTitle	タイトル部でマウスによりクリックされたときに呼ばれます。	ActionEvent
onDblClickTitle	タイトル部でマウスによりダブルクリックされたときに呼ばれます。
onMouseDownTitle	タイトル部でマウスボタンが押し下げられたときに呼ばれます。
onMouseUpTitle	タイトル部でマウスボタンが離されたときに呼ばれます。
onMouseOverTitle	マウスがタイトル部の上に重ねられたときに呼ばれます。
onMouseOutTitle	マウスがタイトル部の上から離れたときに呼ばれます。
onMouseMoveTitle	マウスがタイトル部の上で動かされたときに呼ばれます。

ボディ部のイベントリスナ

名前	説明	イベントオブジェクト
onClickBody	ボディ部でマウスによりクリックされたときに呼ばれます。	ActionEvent
onDblClickBody	ボディ部でマウスによりダブルクリックされたときに呼ばれます。
onMouseDownBody	ボディ部でマウスボタンが押し下げられたときに呼ばれます。
onMouseUpBody	ボディ部でマウスボタンが離されたときに呼ばれます。
onMouseOverBody	マウスがボディ部の上に重ねられたときに呼ばれます。
onMouseOutBody	マウスがボディ部の上から離れたときに呼ばれます。
onMouseMoveBody	マウスがボディ部の上で動かされたときに呼ばれます。
onKeyPressBody	ボディ部内のHTML要素上でキーが押されて離されたときに呼ばれます。
onKeyDownBody	ボディ部内のHTML要素上でキーが押し下げされたときに呼ばれます。
onKeyUpBody	ボディ部内のHTML要素上でキーが離されたときに呼ばれます。

マウスでのダブルクリックによるイベントについては、「5.2.1 マウスのダブルクリックによるイベントでの注意事項」を参照してください。

JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。

補足事項

Panelのサイズ
Panelのサイズについては、以下の注意事項があります。

幅(width)と高さ(height)は、スタイルプロパティで指定してください。CSSで指定した場合、表示が崩れる可能性があります。
幅(width)と高さ(height)を設定する際の単位は、「px」にだけ対応しています。そのほかの単位による指定およびパーセント値(%)による指定をした場合、表示が崩れる可能性があります。
ボディ部に100px×100pxの要素を配置できるサイズがPanelの最小サイズとなります。これより小さいサイズに変更しようとした場合、最小サイズに設定されます。

フォーカスの設定

Firefoxの場合
部品にフォーカスを当てることはできません。
Internet Explorerの場合
部品、またはボディ部をクリックすることにより、部品全体やボディ部にフォーカスが設定されます。フォーカスが設定されている状態でキーを入力すると、対応するキーイベントが発生します。

その他

Firefoxの場合
ボディ部のoverflowに「auto」を指定し、Panelのサイズを指定しなかった場合、ボディ部に不要なスクロールバーが表示されることがあります。Panelのサイズを指定することにより、回避してください。