8 Webページ上のコンテンツの編成

この章では、ADF Facesのいくつかのレイアウト・コンポーネントを使用して、Webページ上のコンテンツを編成する方法を説明します。

この章では、次の項目について説明します。

8.1項「Webページ上のコンテンツの編成の概要」
8.2項「ページ・レイアウトの開始」
8.3項「コンテンツをページ全体に拡大するための設定」
8.4項「スプリッタを使用したサイズ変更可能なペインの作成」
8.5項「グリッドでのコンテンツの配置」
8.6項「事前定義済固定領域へのページ・コンテンツの配置」
8.7項「フォームでのコンテンツの配置」
8.8項「ダッシュボードでのコンテンツの配置」
8.9項「コンテンツの動的な表示および非表示」
8.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」
8.11項「静的ボックスの項目の表示」
8.12項「1つ以上の列における箇条書きリストの表示」
8.13項「関連する項目のグループ化」
8.14項「空白または線を使用したコンテンツの分割」

8.1 Webページ上のコンテンツの編成の概要

ADF Facesには、その他のコンポーネントをページに配置する際に使用可能なレイアウト・コンポーネントが多数用意されています。通常、これらのコンポーネントを使用してページの作成を開始します。その後、その他の機能(データやボタンのレンダリングなど)を提供するコンポーネントを、ファセット内またはレイアウト・コンポーネントの子コンポーネントとして追加します。

ヒント:

アプリケーション内のページのレイアウトを設計できるページ・テンプレートを作成できます。テンプレートはアプリケーションのすべてのページで使用できます。詳細は、第19章「フラグメント、ページ・テンプレート、コンポーネントの作成および再利用」を参照してください。

コンテナとして機能するレイアウト・コンポーネントに加え、ADF Facesには、コンテンツの表示や非表示、またはセクション、リスト、空白の表示が可能な対話型のレイアウト・コンポーネントもあります。一部のレイアウト・コンポーネントには、ウィンドウのサイズが変更された場合にブラウザ・ウィンドウに合せてコンテンツが拡大する機能や、拡大するコンポーネント内に配置された場合には拡大する機能などのジオメトリ管理機能もあります。レイアウト・コンポーネントの拡大およびジオメトリ管理機能の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

表8-1では、ADF Facesの各レイアウト・コンポーネントを簡単に説明しています。

表8-1 ADF Facesのレイアウト・コンポーネント

コンポーネント		説明	子の拡大	拡大
ページ管理コンポーネント
	`document`	HTMLページの標準の各ルート要素(`<html>`、`<body>`および`<head>`)を作成します。すべてのページにこのコンポーネントを使用する必要があります。詳細は、8.2項「ページ・レイアウトの開始」を参照してください。	X
	`form`	HTMLの`<form>`要素を作成します。詳細は、8.2項「ページ・レイアウトの開始」を参照してください。
ページ・レイアウト・コンテナ
	`panelStretchLayout`	他のコンポーネントを配置できる`top`、`bottom`、`start`、`center`および`end`ファセットを含みます。詳細は、8.3項「コンテンツをページ全体に拡大するための設定」を参照してください。	X	X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`panelSplitter`	再配置可能な仕切線を使用してリージョンを2つの部分(`first`ファセットおよび`second`ファセット)に分割します。このファセットには別のコンポーネントを配置できます。詳細は、8.4項「スプリッタを使用したサイズ変更可能なペインの作成」を参照してください。	X	X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`panelGridLayout`	`gridRow`および`gridCell`コンポーネントとともに使用され、HTML表に類似したレイアウトを提供します。ここで行とセルを定義し、他のコンポーネントをセルの子として配置します。詳細は、8.5項「グリッドでのコンテンツの配置」を参照してください。	X (`gridRow`および`gridCell`コンポーネントが拡大するように構成されている場合)	X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`panelDashboard`	子コンポーネント(通常は`panelBox`コンポーネント)の縦表示を提供します。詳細は、8.8項「ダッシュボードでのコンテンツの配置」を参照してください。	X	X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`panelBorderLayout`	中心に配置できる子コンポーネントを持つことができ、12のファセットと追加コンポーネントを配置できる枠線も含みます。これらは中心を囲みます。詳細は、8.6項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。
	`panelFormLayout`	ラベルやフィールドが縦に並ぶように、`inputText`コンポーネントなどの入力フォーム・コントロールを配置します。複数の列をサポートしており、footerファセットが含まれます。詳細は、8.7項「フォームでのコンテンツの配置」を参照してください。
表示/非表示機能のあるコンポーネント
	`showDetailHeader`	ヘッダーの下のコンテンツを表示または非表示にできます。通常、`panelHeader`コンポーネントの子として使用されます。詳細は、8.9項「コンテンツの動的な表示および非表示」を参照してください。	X (`type`属性が`stretch`に設定されている場合)	X (`type`属性が`stretch`に設定されている場合)
	`showDetailItem`	`panelAccordion`の各ペイン、または`panelTabbed`コンポーネントの各タブのコンテンツを保持するために使用されます。詳細は、8.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。	X(含まれる子コンポーネントが1つのみの場合)
	`panelBox`	子コンポーネントを含むことのできるタイトル付きのボックス。toolbarファセットがあります。詳細は、8.9項「コンテンツの動的な表示および非表示」を参照してください。		X
	`panelAccordion`	`showDetailItem`コンポーネントとともに使用され、開閉が可能なパネルとして表示されます。詳細は、8.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。		X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`panelTabbed`	`showDetailItem`コンポーネントとともに使用され、タブ付きの一連のパネルとして表示されます。詳細は、8.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、かわりにナビゲーション・メニューの`navigationPane`コンポーネントを使用できます。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。		X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`showDetail`	トグル・アイコンを介してコンテンツを表示または非表示にします。詳細は、8.9項「コンテンツの動的な表示および非表示」を参照してください。
その他のコンテナ
	`panelHeader`	子コンポーネントが含まれ、メッセージ、ツールバーおよびヘルプ・トピックを含むヘッダーを表示します。詳細は、8.11項「静的ボックスの項目の表示」を参照してください。	X (`type`属性が`stretch`に設定されている場合)	X (`type`属性が`stretch`に設定されている場合)
	`panelCollection`	`table`、`tree`および`treeTable`などの収集コンポーネントとともに使用され、これらのコンポーネントのメニュー、ツールバーおよびステータス・バーを表示します。詳細は、10.7項「表メニュー、ツールバーおよびステータス・バーの表示」を参照してください。	X(表、ツリーまたはツリー表が1つのみの場合)	X
	`decorativeBox`	ファセットでスタイル・テーマを使用してその子に枠線付きの外観を適用するコンテナ・コンポーネントを作成します。通常、このコンポーネントは、ページの領域間のルック・アンド・フィールの遷移として機能します。たとえば背景色が暗いテンプレートを持つページは、decorativeBoxを使用して、メイン領域の背景色を白にできます。詳細は、8.11項「静的ボックスの項目の表示」を参照してください。	X(中央ファセット内)	X (`dimensionsFrom`属性が`parent`に設定されている場合)
	`inlineFrame`	インライン`iframe`タグを作成します。		X
	`navigationPane`	ナビゲーション階層の1レベルを表す一連のナビゲーション・アイテムを作成します。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。		X(タブを表示するように構成されている場合)
	`panelList`	各子コンポーネントをリスト項目として出力し、隣に黒丸をレンダリングします。ネストさせて階層リストを作成できます。詳細は、8.12項「1つ以上の列における箇条書きリストの表示」を参照してください。
	`panelWindow`	ポップアップ・ウィンドウ内に子コンポーネントを表示します。詳細は、13.2項「ポップアップ要素の宣言的作成」を参照してください。
	`toolbox`	子のtoolbarおよびmenuコンポーネントを一緒に表示します。詳細は、14.3項「ツールバーの使用方法」を参照してください。
グループ化コンテナ
	`panelGroupLayout`	子コンポーネントを縦または横にグループ化します。複数のコンポーネントをファセットに含める場合にファセットで使用されます。詳細は、8.13項「関連する項目のグループ化」を参照してください。		X(レイアウトがscrollまたはverticalに設定されている場合のみ)
	`group`	グループの親コンポーネントに管理されている場合を除き、レイアウトに関係なく子コンポーネントをグループ化します。複数のコンポーネントをファセットに含める場合にファセットで使用されます。詳細は、8.13項「関連する項目のグループ化」を参照してください。
間隔調整コンポーネント
	`separator`	項目間に水平線を作成します。詳細は、8.14項「空白または線を使用したコンテンツの分割」を参照してください。
	`spacer`	空白の領域を作成します。詳細は、8.14項「空白または線を使用したコンテンツの分割」を参照してください。

8.2 ページ・レイアウトの開始

ADF Facesコンポーネントを使用するJSFページには、viewタグで囲まれたdocumentタグが必要です。ページを構成するその他すべてのコンポーネントが、<af:document>と</af:document>の間に入ります。documentタグは、ページ内のその他のコンポーネントを表示できる非表示のページ・インフラストラクチャや、ブラウザのタイトル・テキストをレンダリングします。たとえば、実行時に、documentタグによりクライアント・ページのルート要素が作成されます。HTML出力では、<html>、<head>、<body>などのHTMLページの標準のルート要素が生成されます。

デフォルトでは、documentタグは、拡大可能なコンポーネントを使用可能なブラウザ領域に合せて拡大できるように構成されます。ページがレンダリングされるときに特定のコンポーネントがフォーカスを持つようにしたり、データが送信される前に失敗した接続に関するメッセージやナビゲートに関する警告を提供したりするように、タグをさらに構成できます。詳細は、8.2.5項「documentタグの構成方法」を参照してください。

通常、次に使用されるコンポーネントは、ADF Faces formコンポーネントです。このコンポーネントは、ユーザーによるページ・データの操作を可能にするコントロールを含むことができるHTMLのform要素を作成します。

注意:

1ページで複数のHTMLフォームを使用できますが、ページ当たり使用できるADF Faces formタグは1つだけです。詳細は、8.7項「フォームでのコンテンツの配置」を参照してください。

例8-1に示すように、JDeveloperでは、view、documentおよびformタグを自動的に挿入します。詳細は、2.4項「ビュー・ページの作成」を参照してください。

例8-1 JDeveloperのウィザードで作成された最初のJSFページ

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document>
      <af:form/>
    </af:document>
  </f:view>
</jsp:root>

これらのタグがページに配置されたら、レイアウト・コンポーネントを使用して、ページ上のその他のコンポーネントをレンダリングする方法と場所を制御できます。その他すべてのコンポーネントを保持するコンポーネントは、ルート・コンポーネントとみなされます。ルート・コンポーネントとして使用するコンポーネントの選択は、含まれているコンポーネントのコンテンツをブラウザ・ウィンドウに合せて拡大されるように表示するか、ウィンドウに収まらないコンテンツにアクセスするためにスクロールバーを使用してコンテンツを移動できるようにするかによって異なります。拡大および配置の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

ヒント:

レイアウトを自身で作成するかわりに、目的のレイアウトでページを表示する適切に構成されたコンポーネントを提供するJDeveloperのクイック・レイアウト・テンプレートを使用できます。詳細は、8.2.3項「クイック・スタート・レイアウトの使用」を参照してください。

8.2.1 ジオメトリ管理およびコンポーネントの拡大

ジオメトリ管理は、ユーザー、親コンポーネントおよび子コンポーネントがアプリケーションのコンポーネントの実際のサイズと場所をネゴシエーションするプロセスです。RCFのジオメトリ管理ソリューションの中核は、サイズ変更通知メカニズムで、ジオメトリ管理に対応しているコンポーネントにブラウザのサイズ変更アクティビティを通知できます。次のシナリオで通知が起動されます。

ロード: ページ・コンテンツが初めてロードされる場合。最初のサイズ設定が行われます。
ブラウザのサイズ変更: ブラウザ・ウィンドウのサイズが変更された場合。
部分的な置換え: 部分的なページのレンダリングでページの一部が更新された場合。新しく挿入されたすべてのコンポーネントが通知され、必要なジオメトリ管理が実行されます。
可視性の変更: 最初は非表示に構成されていたコンポーネントが表示されるようになった場合(最初は非表示であったコンポーネントには通知は送信されません)。
明示的なサイズ変更: サイズ変更可能なコンポーネント(panelSplitterなど)がユーザーによってサイズ変更された場合。

コンポーネントがジオメトリ管理に対応しており、子コンポーネントを拡大できる場合には、ルート・コンポーネントはデフォルトで自動的にブラウザの表示可能領域全体に拡大されます。ジオメトリ管理コンポーネントは、panelStretchLayoutおよびpanelSplitterなどです。

注意:

フレームワークでは、ポップアップ・ダイアログ、ポップアップ・ウィンドウまたはインラインではないメッセージは、ルート・コンポーネントとみなされません。formコンポーネントがdocumentコンポーネントの直接の子コンポーネントである場合には、フレームワークにより、formタグ内のビジュアル・ルートの有無が確認されます。ポップアップのサイズ変更の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

ユーザーによりブラウザ・ウィンドウのサイズが変更され、documentコンポーネント内でmaximizedに設定されているルート・ビジュアル・コンポーネントが1つの場合、そのビジュアル・ルート・コンポーネントもブラウザ・ウィンドウに合せてサイズ変更されます。ルート・コンポーネントで子コンポーネントの拡大がサポートされている場合(および、子コンポーネントでも拡大がサポートされている場合)、配置レイアウト領域(子コンポーネントの拡大がサポートされていない領域)に達するまで、コンポーネント階層を下がって子コンポーネントのサイズが再計算されます。拡大を有効化するためにコードを記述する必要はありません。

表8-1に示されているように、それ自体とその子コンポーネントも拡大できるコンポーネントはpanelStretchLayout、panelSplitterおよびpanelDashboardコンポーネントです。また、panelAccordionまたはpanelTabbedコンポーネントの直接の子としてshowDetailItemコンポーネントが使用されている場合は、showDetailItemコンポーネントのコンテンツを拡大できます。そのため、ページのコンテンツをブラウザ・ウィンドウに合せる必要がある場合には、showDetailItemコンポーネントを含むpanelStretchLayout、panelSplitter、panelDashboard、panelAccordionコンポーネント、およびshowDetailItemコンポーネントを含むpanelTabbedコンポーネントをルート・コンポーネントとして使用する必要があります。

たとえば、図8-1に、panelStretchLayoutコンポーネントのcenterファセットに配置された表を示します。表はブラウザ領域に合せて拡大されます。表全体がブラウザ・ウィンドウに収まらない場合は、表のデータ本体部分にスクロールバーが追加されます。

図8-1 子コンポーネントが拡大されるコンポーネント内の表

図8-2に、子コンポーネントを拡大できないpanelGroupLayoutコンポーネント内にネストしている同じ表を示します(明確化のために、panelGroupLayoutコンポーネントが赤い点線で囲まれています)。表コンポーネントでは、表のプロパティで設定されている一部の列および行のみが表示されています。

図8-2 子コンポーネントが拡大されないコンポーネント内の表

パフォーマンスのヒント:

ジオメトリ管理のコストは、子コンポーネントの複雑さに直接関係しています。そのため、ジオメトリ管理される親コンポーネントに属する子コンポーネントの数はできるだけ少なくなるようにしてください。

8.2.2 拡大可能なコンポーネントへのコンポーネントのネスト

子コンポーネントを拡大できるコンポーネントを選択しても、実際に拡大されるのは次のコンポーネントのみです。

inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard(拡大するように構成されている場合)
panelGridLayout (gridRowおよびgridCellコンポーネントが拡大するように構成されている場合)
panelGroupLayout (layout属性がscrollまたはverticalに設定されている場合)
panelSplitter(拡大するように構成されている場合)
panelStretchLayout(拡大するように構成されている場合)
panelTabbed(拡大するように構成されている場合)
region
table(拡大するように構成されている場合)
tree(拡大するように構成されている場合)
treeTable(拡大するように構成されている場合)

次のレイアウト・コンポーネントは、子コンポーネントを拡大するコンポーネントのファセット内に配置しても拡大されません。

panelBorderLayout
panelFormLayout
panelGroupLayout (layout属性がdefaultまたはhorizontalに設定されている場合)
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout (MyFaces Trinidadコンポーネント)

これらのコンポーネントは拡大されないため、子コンポーネントを拡大するコンポーネントのファセットには配置できません。そのため、子コンポーネントを拡大するコンポーネントのファセット内でこれらのコンポーネントのいずれかを使用する場合は、拡大可能で、子コンポーネントを拡大しないコンポーネントでラップする必要があります。ラップしないと、コンポーネントのレンダリング時に予期しない結果になる場合があります。

たとえば、ページの最初のコンポーネントとしてpanelStretchLayoutがあるとします。次に、拡大するように構成されているpanelSplitterコンポーネントを追加します。さらに、panelSplitterコンポーネントの最初のファセットに、layout属性がscroll(拡大可能)に設定されているpanelGroupLayoutコンポーネントを追加し、その中にpanelCollectionコンポーネント、最後にtableコンポーネントを追加するとします。

panelSplitterの2番目のファセットには、図8-3に示すように、panelCollectionおよびtableコンポーネントのみを追加するとします。子を拡大できるコンポーネントは緑で、拡大できるコンポーネント(子は拡大できない)は青です。

図8-3 ジオメトリ管理コンポーネントを使用したレイアウト

図8-4に示すように、ページが実行されると、panelSplitterコンポーネントに直接配置されているコンポーネントは拡大されているのに対して、panelGroupLayout内のpanelCollectionおよびtableコンポーネントは拡大されません。

図8-4 ページのレイアウトに影響するジオメトリ管理コンポーネント

panelStretchLayoutコンポーネントは子コンポーネントを拡大可能で、panelSplitterコンポーネントも拡大できるように構成されているため、両方が使用可能なブラウザの領域全体に拡大されます。panelSplitterコンポーネントは子コンポーネントを拡大でき、layout属性がscrollに設定された左側のpanelGroupLayoutコンポーネントも、右側のpanelCollectionコンポーネントも拡大可能であるため、両方が使用可能なブラウザの領域全体に拡大されます。ただし、panelCollectionコンポーネントは単一の表を拡大できるのに対し、panelGroupLayoutコンポーネントは子コンポーネントを拡大できません。そのため、親は拡大されていても、左側のpanelCollectionコンポーネントは拡大されません。

ヒント:

拡大できないコンポーネントのリストにあるコンポーネントを、幅を100%に設定して拡大しないでください。予期しない結果になる場合があります。かわりに、拡大されるコンポーネントを、拡大できるコンポーネントで囲みます。拡大可能なコンポーネントは、表8-1を参照してください。

左側にtableコンポーネントではなく、panelListコンポーネントを追加するとします。panelCollectionコンポーネント(表のみに使用)は不要なため、panelListコンポーネントを別のコンポーネントでグループ化する場合に、panelGroupLayoutコンポーネントを使用する必要はないとも考えられます。ただし、panelListコンポーネントはpanelSplitterコンポーネントの直接の子になり、また、panelSplitterコンポーネントは子コンポーネントを拡大し、panelListコンポーネントは拡大できないため、(scrollに設定されている)panelGroupLayoutはそのままにして、panelListコンポーネントをpanelGroupLayoutコンポーネントの子として配置する必要があります。

このようにすると、panelSplitterコンポーネント内のpanelGroupLayoutコンポーネントは拡大されますが、panelGroupLayoutコンポーネントはpanelListコンポーネントの拡大を試行しません。panelGroupLayoutコンポーネントは拡大できますが、子コンポーネントを拡大しないため、拡大を行うレイアウトと配置を行うレイアウトとの移行が可能です。

拡大可能だが、子を拡大しないコンポーネントは、遷移コンポーネントとみなされます。遷移コンポーネントは、常に、子を拡大するコンポーネントと拡大されないコンポーネントの間で使用する必要があります。

ヒント:

コンポーネントが拡大されるかされないかが常に親の設定に基づいて決まることがわかっている場合は、oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONSパラメータをautoに設定することを検討してください。詳細は、第A.2.3.25項「レイアウトと表コンポーネントの形状管理」を参照してください。

8.2.3 クイック・スタート・レイアウトの使用

「新規ギャラリ」ウィザードを使用してJSF JSPページ(またはページ・フラグメント)を作成する場合、様々な事前定義済のクイック・スタート・レイアウトから選択できます。それらのレイアウトの1つを選択すると、JDeveloperによって必要なコンポーネントが追加され、ユーザーが希望する外観と動作が得られるようにそれらのコンポーネントの属性が設定されます。1列、2列および3列の形式から選択できます。それらの形式では、各列に表示する独立したペインの数、およびそれらのペインを拡大可能にするか固定サイズのままにするかを選択できます。図8-5に、2列形式で使用可能な様々なレイアウトを示します。

図8-5 クイック・レイアウト

レイアウト・コンポーネントの追加とともに、選択したクイック・レイアウトにテーマを適用することも選択できます。これらのテーマは、クイック・スタート・レイアウトで使用されるコンポーネントの一部に色のスタイルを追加します。色および色の追加場所を確認するには、付録E「クイック・スタート・レイアウト・テーマ」を参照してください。テーマの詳細は、20.3.4項「コンポーネントへのテーマの適用方法」を参照してください。

クイック・レイアウトを使用すると、時間を節約できるのに加え、レイアウト・コンポーネントが正しく連携して使用されるので希望どおりの結果を得ることができます。クイック・レイアウトを使用したページの作成の詳細は、2.4項「ビュー・ページの作成」を参照してください。

8.2.4 ジオメトリ管理コンポーネント使用のヒント

すべてのブラウザでページが期待どおりに表示されるようにするには、ページの作成時に、JDeveloperで提供されるクイック・レイアウトの1つを使用します。クイック・レイアウトを使用すると、正しいコンポーネントが使用されて正確に構成されます。詳細は、8.2.3項「クイック・スタート・レイアウトの使用」を参照してください。

ベスト・プラクティス:

クイック・スタート・レイアウトを使用して、レイアウト表示の問題を回避します。

ただし、自分でレイアウトを作成する場合のために、拡大されるコンポーネントと配置されるコンポーネントの両方を含むレイアウトを作成する際のヒントを次に示します。

ジオメトリ管理機能のあるルート・コンポーネント内(gridRowとgridCellコンポーネントを含むpanelStretchLayout、panelGridLayout、panelSplitter、showDetailItemを含むpanelAccordion、およびshowDetailItemを含むpanelTabbed)にページ・コンテンツを配置します。
パーセント単位で高さの値を指定しないでください。かわりに、拡大がサポートされているコンポーネントや、子コンポーネントを拡大するコンポーネントの外にコンポーネント構造を作成します。
layout属性がscrollに設定されているpanelGroupLayoutコンポーネントなどの遷移コンポーネントを使用して、この拡大可能な構造内に、拡大できないコンポーネントまたは配置が行われるコンポーネントのグループを作成します。このコンポーネントでは拡大がサポートされていますが、子コンポーネントは拡大されないため、拡大されるコンポーネントと配置が行われるコンポーネントの遷移が可能です。
どのWebブラウザでも一貫して機能するわけではないため、拡大できないコンテナまたは配置が行われるコンテナ内で、縦方向の拡大を試行しないでください。

親の配置されるコンポーネント(つまり、子を拡大しないコンポーネント)に含まれるコンポーネントの場合は、幅を95%より大きく設定しないでください。このような設定を行うと、予期しない結果になることがあります。

親コンポーネントが768ピクセル以上の場合は、拡大されるコンポーネントのstyleClass属性をAFStretchWidthに設定します。このスタイルは、様々なブラウザと親のパディングまたは枠線を考慮して、親コンテナの100%となるようにコンポーネントを拡大します。

親コンポーネントが768ピクセル以下の場合は、拡大されるコンポーネントのstyleClass属性をAFAuxiliaryStretchWidthに設定します。このスタイルは、様々なブラウザと親のパディングまたは枠線を考慮して、親コンテナの100%となるようにコンポーネントを拡大します。

注意:

Microsoft Internet Explorer 7がスクロール・コンテナ内の幅を計算する方法により、2つの異なるスタイルが必要です(これはInternet Explorer 8で解決されました)。アプリケーションへのアクセスに使用されるブラウザのバージョンを管理できない場合は、説明に従ってこれらのスタイルを使用する必要があります。

positionスタイルは使用しないでください。
documentタグのmaximized属性がtrueに設定されていることを確認します(これはデフォルトです)。属性の設定の詳細は、8.2.5項「documentタグの構成方法」を参照してください。

この章の残りの部分では、ADF Facesのレイアウト・コンポーネント、およびそれらを使用してページを設計する方法を説明しています。各コンポーネントで拡大が処理される方法の詳細は、それぞれの「ジオメトリ管理に関する必知事項」の項に記載されています。

8.2.5 documentタグの構成方法

documentタグには、ページの動作を制御するために構成できる多数の属性が含まれています。たとえば、ページを初めてレンダリングするときに1つのコンポーネントにフォーカスするようにタグを構成できます。また、ユーザーがページから移動しようとしたときにデータがまだ送信されていない場合に、警告メッセージを表示するようにタグを構成することもできます。アプリケーションの他の部分とは異なる状態保存方式をdocumentで使用するように設定することもできます。

documentタグを構成する手順:

構造ウィンドウで、af:documentノードを選択します。
プロパティ・インスペクタで、「共通」セクションを開いて次の設定を行います。
- InitialFocusId: ドロップダウン・メニューを使用して「編集」を選択します。「プロパティの編集」ダイアログで、ページを初めてレンダリングするときにフォーカスするコンポーネントを選択します。
  
  このフォーカスはクライアントで行われるため、選択するコンポーネントには対応するクライアント・コンポーネントが必要です。詳細は、3.4項「クライアント側コンポーネントのインスタンス化」を参照してください。
- Maximized: ルート・コンポーネントを拡張して使用可能なすべてのブラウザ領域に合せる場合はtrueに設定します。documentタグのmaximized属性がtrueに設定されていると、フレームワークにより単一のビジュアル・ルート・コンポーネントが検索され、そのコンポーネントが拡大可能な場合は、ブラウザの表示可能領域全体にコンポーネントが拡大されます。これに対応しているコンポーネントは、panelStretchLayoutおよびpanelSplitterです。documentタグのmaximized属性は、デフォルトでtrueに設定されています。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
- Title: ブラウザのタイトル・バーに表示するテキストを入力します。
「外観」セクションを開き、failedConnectionText属性に、サーバーに接続できない場合に表示するテキストを入力します。
「その他」セクションを開き、次の設定を行います。
- UncommittedDataWarning: データがコミットされていないことがアプリケーションによって検出されたときに、ユーザーに警告メッセージを表示する場合は、onに設定します。警告メッセージは、ユーザーがデータをコミットせずにページを終了しようとする場合、またはサーバーにコミットされていないデータがある場合に表示されます。デフォルトでは、offに設定されています。
- stateSaving: ページに使用する状態保存のタイプに設定します。
  
  ADF Facesアプリケーションの場合は、アプリケーションで、ページ状態をセッションに保存し、トークンをクライアントに永続化する、トークンによるクライアント状態保存を使用することをお薦めします。この設定はアプリケーションにグローバルに影響し、すべてのページの状態がセッションに保存され、トークンと情報が状態にかかわらず永続化されます。
  
  web.xmlのグローバル設定をページで次のいずれかにオーバーライドできます。
  - client: 状態は、トークンを使用せずにクライアントに完全に保存されます。この設定は、セッション失効メッセージが表示されないようにします。
  - default: ページの状態はweb.xmlの設定に基づきます。
  - server: ページの状態はサーバーに保存されます。
  状態保存の詳細は、付録A「web.xmlでの構成」を参照してください。

8.3 コンテンツをページ全体に拡大するための設定

コンテンツをページの定義済領域に配置し、ブラウザがサイズ変更されたらコンテンツが拡大されるようにする必要がある場合には、panelStretchLayoutコンポーネントを使用します。panelStretchLayoutコンポーネントは、ファセット内に配置されたコンポーネントが拡大されるコンポーネントの1つです。図8-6に、コンポーネントのファセットを示します。

図8-6 panelStretchLayoutコンポーネントのファセット

注意:

図8-6は、アプリケーションにおける言語の読み方向が左から右に構成されている場合のファセットを示しています。言語の方向が右から左の場合は、startおよびendファセットが入れ替ります。

topおよびbottomファセットの高さを設定すると、含まれるコンポーネントはその高さに合うように拡大されます。同様に、startおよびendファセットの幅を設定すると、それらのファセットに含まれるコンポーネントはその幅まで拡大されます。それらのファセットに配置されているコンポーネントがない場合、ファセットはレンダリングされません。つまり、ファセットは領域を占有しません。設定した領域をファセットで占有し、空白のままにする場合は、spacerコンポーネントを挿入します。8.14項「空白または線を使用したコンテンツの分割」を参照してください。centerファセットの子コンポーネントは、残りの領域に合うよう拡大されます。コンポーネント拡大の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

Topまたはbottomのファセットの高さ、あるいはstartまたはendファセットの幅を設定するかわりに、高さまたは幅をautoに設定できます。これにより、ファセットの子コンポーネントに必要な正確な領域を使用するように、ファセット自体がサイズを設定できます。領域は、Webブラウザがファセットのコンテンツの表示に必要だと判断する領域の量に基づいて割り当てられます。

パフォーマンスのヒント:

値としてautoを使用すると、ページのパフォーマンスが低下します。最初に高さまたは幅を設定し、auto属性の使用は控えるようにしてください。

File Explorerアプリケーションでは、テンプレートのルート・コンポーネントとしてpanelStretchLayoutコンポーネントが使用されています。子コンポーネントは、centerおよびbottomファセットにのみ配置されています。そのため、centerファセット内のすべてのコンポーネントは、ウィンドウの幅全体、およびウィンドウの上部から、高さがbottomHeight属性で指定されているbottomファセットの上部までの大きさに合うように拡大されます。例8-2に、fileExplorerTemplateファイルの省略形のコードを示します。

例8-2 File Explorerのテンプレート・ファイルのpanelStretchLayout

<af:panelStretchLayout
    bottomHeight="#{attrs.footerGlobalSize}">
  <f:facet name="center">
    <af:panelSplitter orientation="vertical" ...>
.
.
.
    </af:panelSplitter
  </f:facet>
  <f:facet name="bottom">
    <af:panelGroupLayout layout="vertical">
. 
.
.
    </af:panelGroupLayout>
  </f:facet>
</af:panelStretchLayout>

テンプレートではEL式を使用して、bottomHeight属性の値が指定されています。この式により、テンプレートに定義されたfooterGlobalSize属性の値(デフォルトは0)に解決されます。テンプレートが使用されているページでは、この値がオーバーライドされます。たとえば、index.jspxページではこのテンプレートを使用して、値が30に設定されています。そのため、File Explorerアプリケーションによりレンダリングされると、panelStretchLayoutコンポーネントのコンテンツはページの上部30ピクセルの場所から開始されます。

8.3.1 panelStretchLayoutコンポーネントの使用方法

panelStretchLayoutコンポーネントには、直接の子コンポーネントを配置できません。かわりに、ファセット内にコンポーネントを配置します。panelStretchLayoutは、ファセット内のコンポーネントをブラウザに合せて拡大するように構成できるコンポーネントの1つです。panelStretchLayoutコンポーネントはネスト可能です。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。

panelStretchLayoutコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・ストレッチ・レイアウト」をJSFページにドラッグ・アンド・ドロップします。

プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。

top、bottom、startおよびendファセットに子コンポーネントが存在する場合は、それらのコンポーネントにより、topHeight、bottomHeight、startWidthおよびendWidth属性で定義されている領域が占有されます。たとえば、topHeight属性はtopファセットの高さを、startWidth属性はstartファセットの幅を指定します。topおよびbottomファセットの子コンポーネントは、topHeightとbottomHeight属性で設定されている高さまでそれぞれ拡大され、startおよびendファセットの子コンポーネントは、startWidthとendWidth属性で設定されている幅までそれぞれ拡大されます。数値で大きさを設定するかわりに、topHeight、bottomHeight、startWidthおよびendWidth属性をautoに設定すると、ファセットのコンテンツの表示に必要な領域の量がブラウザにより決定されます。

注意:

ファセットの幅または高さの値としてautoを使用するようにそのファセットを設定した場合、子コンポーネントは拡大できる必要がありません。実際には、ファセットの幅に依存しない安定した単独の幅を使用する必要があります。

たとえば、子コンポーネントが子を自動的に拡大できるファセットではautoを使用しないでください。これらのコンポーネントは、不安定なoffsetWidth値をレポートする原因となる独自の組込み拡大幅をデフォルトで持ち、この値は領域の量を判断するためにブラウザによって使用されます。

また、autoは、幅にパーセント長を使用する子コンポーネントと一緒に使用しないでください。ファセットのコンテンツは、パーセント幅に依存することも、周囲のコンテナの幅全体を使用するコンポーネントにすることもできません。

値を明示的に指定しない場合、topHeight、bottomHeight、startWidthおよびendWidth属性の値は、それぞれデフォルトで50ピクセルになります。topとbottomファセットの幅、およびstartとendファセットの高さは、panelStretchLayoutの親コンポーネントの幅と高さから導出されます。

ヒント:

ファセットに子コンポーネントが含まれない場合はレンダリングが行われないため、領域は占有されません。構成した領域を占有するには、ファセットに子コンポーネントを配置する必要があります。

panelStretchLayoutコンポーネントは、使用可能なブラウザの領域全体に拡大するように構成できます。また、子を拡大しないコンポーネントの内部にpanelStretchLayoutコンポーネントを配置する場合は、panelStretchLayoutコンポーネントを拡大しないように構成することもできます。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。

注意:

dimensionsFrom属性のデフォルト値は、DEFAULT_DIMENSIONS web.xmlパラメータによって決まります。ジオメトリ管理がdimensionsFrom属性によって決定されるコンポーネントを、親コンポーネントが子の拡大を許可していれば必ず拡大するようにする場合は、dimensionsFrom属性を設定するのではなく、DEFAULT_DIMENSIONSパラメータをautoに設定してください。dimensionsFrom属性は、グローバル設定をオーバーライドする場合に設定します。

デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、dimensionsFromの値はコンポーネントのデフォルト値に基づくものになります。詳細は、第A.2.3.25項「レイアウトと表コンポーネントの形状管理」を参照してください。

dimensionsFrom属性を設定するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。

children: 拡大するかわりに、panelStretchLayoutコンポーネントは子コンポーネントからディメンションを取得します。

注意:

この設定を使用する場合は、topおよびbottomファセットの高さの設定に割合を使用できません。使用すると、それらのファセットはこのpanelStretchLayoutコンポーネントのサイズからディメンションを取得しようとしますが、panelStretchLayoutコンポーネントはそのコンテンツから高さを取得するため取得できず、循環依存関係が発生します。いずれかのファセットに割合が使用されている場合、それは無視され、デフォルトの50pxがかわりに使用されます。

また、この設定を使用している場合は、panelStretchLayoutコンポーネントの高さを(たとえば、inlineStyleまたはstyleClass属性を通じて)設定することはできません。設定すると、panelStretchLayoutの高さと子コンポーネントの高さが競合する原因となります。

parent: panelStretchLayoutコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます(つまり、panelStretchLayoutコンポーネントは拡大されます)。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
これがデフォルトの設定です。
auto: panelStretchLayoutコンポーネントの親コンポーネントがその子の拡大を許可する場合、panelStretchLayoutコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelStretchLayoutコンポーネントはその子コンポーネントのサイズに基づきます。

コンポーネントにコンテンツを配置するには、必要なコンポーネントを任意のファセットにドラッグ・アンド・ドロップします。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、8.3.2項「ジオメトリ管理およびpanelStretchLayoutコンポーネントに関する必知事項」を参照してください。

ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネント(panelGroupLayoutコンポーネントなど)で子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。

ヒント:

ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。

構造ウィンドウで、panelStretchLayoutコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - パネル・ストレッチ・レイアウト」→「facet name」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

8.3.2 ジオメトリ管理およびpanelStretchLayoutコンポーネントに関する必知事項

panelStretchLayoutコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次に、panelStretchLayoutコンポーネントのファセット内で拡大できるコンポーネントを示します。

inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard(拡大するように構成されている場合)
panelGridLayout (gridRowおよびgridCellコンポーネントが拡大するように構成されている場合)
panelGroupLayout (layout属性がscrollまたはverticalに設定されている場合のみ)
panelSplitter(拡大するように構成されている場合)
panelStretchLayout(拡大するように構成されている場合)
panelTabbed(拡大するように構成されている場合)
region
table(拡大するように構成されている場合)
tree(拡大するように構成されている場合)
treeTable(拡大するように構成されている場合)

panelStretchLayoutコンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。

panelBorderLayout
panelFormLayout
panelGroupLayout (layout属性がdefaultまたはhorizontalに設定されている場合のみ)
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout (MyFaces Trinidadコンポーネント)

拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、panelStretchLayoutコンポーネントのファセットに拡大できないコンポーネントに配置する必要がある場合は、拡大できる遷移コンポーネントでそのコンポーネントをラップします。

たとえば、panelStretchLayoutコンポーネントのファセット内のpanelBoxコンポーネント(拡大しない)にコンテンツを配置する場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをpanelStretchLayoutコンポーネントのファセットに配置し、panelBoxコンポーネントをそのpanelGroupLayoutコンポーネントに配置します。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。

8.4 スプリッタを使用したサイズ変更可能なペインの作成

ユーザーに表示する一意のコンテンツのグループがある場合は、panelSplitterコンポーネントを使用して、調整可能なスプリッタによって分離された複数のペインを提供することを検討します。図8-7に示されているように、File ExplorerではpanelSplitterを使用して、ナビゲーション・ツリーとフォルダ・コンテンツを分割しています。ユーザーは、スプリッタをドラッグしてペインのサイズを変更したり、ディレクトリを表示するパネルを閉じることや、元のサイズに戻すこともできます。パネルが縮小されると、パネルのコンテンツが非表示になります。パネルが復元されると、コンテンツが表示されます。

図8-7 panelSplitterを使用してコンテンツを分割しているFile Explorer

panelSplitterコンポーネントでは、調整可能なスプリッタで分離された2つのペインにコンテンツを編成できます。ペインは、(図8-7に示されているスプリッタのように)水平に並べるか、垂直に並べることができます。File Explorerアプリケーションでは、別のpanelSplitterコンポーネントを使用して、ページ本体からアプリケーションのヘッダー・コンテンツが分割されます。図8-8に、ヘッダー・コンテンツを表示するために開かれたpanelSplitterコンポーネントを示します(OracleのロゴとFile Explorerの名前が含まれます)。

図8-8 縦に分割されて開かれたpanelSplitter

スプリッタの矢印ボタンをクリックすると、ヘッダー・コンテンツが表示されているパネルが閉じられ、図8-9に示すように、ロゴと名前が表示されなくなります。

図8-9 縦に分割されるpanelSplitterを使用しているFile Explorer

panelSplitterコンポーネントのファセットにコンポーネントを配置します。panelSplitterコンポーネントではジオメトリ管理を使用して、実行時に子コンポーネントを拡大します。つまり、ユーザーがパネルを1つ閉じると、使用可能な領域に合うように別のパネルのコンテンツが明示的にサイズ変更されます。

注意:

ユーザーはペインをサイズ変更または縮小することでsplitterPositionおよびcollapsed属性の値を変更できますが、アプリケーションが変更の永続性を使用するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。変更の永続性の有効化および使用方法の詳細は、第33章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

8.4.1 panelSplitterコンポーネントの使用方法

panelSplitterコンポーネントを使用すると、スプリッタで分割された2つのペインを作成できます。それぞれのスプリッタ・コンポーネントには、firstおよびsecondという2つのファセットがあり、それぞれ第1パネルと第2パネルに対応します。子コンポーネントが存在できるのはファセット内のみです。3つ以上のペインを作成するには、panelSplitterコンポーネントをネストします。

panelSplitterコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・スプリッタ」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
「向き」をverticalに設定して、縦のペインを2つ作成します(一方をもう一方の上に配置)。デフォルトでは値はhorizontalで、この場合、横方向のペインは左から右(または言語の読み方向によっては右から左)に配置されます。
SplitterPositionおよびPositionedFromEndを設定して、スプリッタの最初の配置位置を決定します。デフォルトで、splitterPosition属性の値は200ピクセルで、positionedFromEnd属性はfalseです。この設定は、ADF Facesでは調整可能なスプリッタの初期位置が、(orientation属性の値に応じて)startまたはtopパネルから計測されることを意味します。たとえば、orientation属性がhorizontalで、splitterPosition属性が200、positionedFromEnd属性がfalse(すべてデフォルト値)に設定されている場合、図8-10に示されているように、ADF Facesによりスプリッタはstartパネルから200ピクセルの位置に配置されます。

図8-10 startパネルから計測されたスプリッタの位置

positionedFromEnd属性がtrueに設定されている場合、ADF Facesではスプリッタの初期位置はend(またはorientationの値に応じてbottomパネル)から計測されます。図8-11に、endパネルから200ピクセル計測したスプリッタの位置を示します。

図8-11 endパネルから計測されたスプリッタの位置
collapsedを設定して、スプリッタを閉じた状態(非表示)にするかどうかを決定します。デフォルトではcollapsed属性はfalseで、どちらのペインも表示されます。ユーザーがスプリッタの矢印ボタンをクリックすると、collapsed属性がtrueに設定され、いずれかのペインが非表示になります。

ADF Facesは、collapsedおよびpositionedFromEnd属性を使用して、ユーザーがスプリッタ上の矢印ボタンをクリックしたときに非表示に(縮小)するパネル(第1または第2パネル)を決定します。collapsed属性がtrueに設定され、positionedFromEnd属性がfalseに設定されている場合は、第1パネルが非表示になり、第2パネルは使用可能な領域に合せて拡大されます。collapsed属性がtrueに設定され、positionedFromEnd属性がtrueに設定されている場合は、第2パネルがかわりに非表示になります。視覚的には、ユーザーは、ボタン上の矢印の方向を参照することで、縮小されるパネルを知ることができます。ユーザーがスプリッタ上の矢印ボタンをクリックすると、矢印の方向にパネルが縮小します。

panelSplitterコンポーネントは使用可能なブラウザ領域に合せて拡大できます。子を拡大しないコンポーネントにpanelSplitterを配置する場合は、panelSplitterコンポーネントが拡大を処理する方法を変更する必要があります。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。

注意:

dimensionsFrom属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。

children: 拡大するかわりに、panelSplitterコンポーネントは子コンポーネントからディメンションを取得します。

注意:

この設定を使用し、orientation属性をverticalに設定した場合、collapsibleパネルのコンテンツは子コンポーネントによって決定されずに、splitterPosition属性の値によって決定されます。他のペインのサイズは、その子コンポーネントによって決定されます。

また、この設定を使用している場合は、panelSplitterコンポーネントの高さを(たとえば、inlineStyleまたはstyleClass属性を通じて)設定することはできません。設定すると、panelSplitterの高さと子コンポーネントの高さが競合する原因となります。

parent: panelSplitterコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto: panelSplitterコンポーネントの親コンポーネントがその子の拡大を許可する場合、panelSplitterコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelSplitterコンポーネントはその子コンポーネントのサイズに基づきます。

コンポーネントにコンテンツを配置するには、必要なコンポーネントをfirstファセットおよびsecondファセットにドラッグ・アンド・ドロップします。orientationがhorizontalに設定されている場合、firstファセットがleftファセットになります。orientationがverticalに設定されている場合、firstファセットがtopファセットになります。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、8.4.2項「ジオメトリ管理およびpanelSplitterコンポーネントに関する必知事項」を参照してください。

ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネントで子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。

ヒント:

ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。

構造ウィンドウで、panelSplitterコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - パネル・スプリッタ」→「facet name」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

3つ以上のペインを作成するには、別のパネル・スプリッタ・コンポーネントをファセットに挿入し、ネストされたスプリッタ・ペインを作成します(図8-12を参照)。

図8-12 ネストしたpanelSplitterコンポーネント

例8-3に、スプリッタ・コンポーネントをネストする際に、JDeveloperによって生成されるコードを示します。

例8-3 ネストしたpanelSplitterコンポーネント

<af:panelSplitter ...>
  <f:facet name="first">
    <!-- first panel child components components here -->
  </f:facet>
  <f:facet name="second">
    <!-- Contains nested splitter component -->
    <af:panelSplitter orientation="vertical" ...>
      <f:facet name="first">
        <!-- first panel child components components here -->
      </f:facet>
      <f:facet name="second">
        <!-- second panel child components components here -->
      </f:facet>
    </af:panelSplitter>
  </f:facet>
</af:panelSplitter>

ユーザーがパネルを開閉する際にいくつかの操作を実行する必要がある場合は、clientListenerタグを使用して、collapsed属性およびpropertyChangeイベント・タイプにクライアント・サイドのJavaScriptスクリプトをアタッチします。クライアント側のイベントの詳細は、第5章「イベントの処理」を参照してください。

8.4.2 ジオメトリ管理およびpanelSplitterコンポーネントに関する必知事項

panelSplitterコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次のコンポーネントは、panelSplitterコンポーネントのfirstまたはsecondファセットの内部で拡大できます。

inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard
panelGridLayout (gridRowおよびgridCellコンポーネントが拡大するように構成されている場合)
panelGroupLayout (layout属性がscrollまたはverticalに設定されている場合のみ)
panelSplitter(拡大するように構成されている場合)
panelStretchLayout(拡大するように構成されている場合)
panelTabbed(拡大するように構成されている場合)
region
table(拡大するように構成されている場合)
tree(拡大するように構成されている場合)
treeTable(拡大するように構成されている場合)

panelSplitterコンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。

panelBorderLayout
panelFormLayout
panelGroupLayout (layout属性がdefaultまたはhorizontalに設定されている場合のみ)
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout (MyFaces Trinidadコンポーネント)

拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、panelSplitterコンポーネントのファセットに拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない遷移コンポーネントでそのコンポーネントをラップします。

たとえば、panelBoxコンポーネントにコンテンツを配置し、panelSplitterコンポーネントのファセットに配置するように設定する場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをpanelSplitterコンポーネントのファセットに配置し、panelBoxコンポーネントをそのpanelGroupLayoutコンポーネントに配置します。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。

8.5 グリッドでのコンテンツの配置

panelGridLayoutコンポーネントは子のgridRowコンポーネントを使用して行を作成し、その行の中でgridCellコンポーネントを使用して、HTML表に類似した列を構成します。gridCellコンポーネントにコンポーネントを配置して、データ、イメージまたは他のコンテンツを表示します。

図8-13に、2つのgridRowコンポーネントが含まれているpanelGridLayoutコンポーネントを示します。各gridRowコンポーネントには、2つのgridCellコンポーネントが含まれています。各gridCellコンポーネントには、1つのchooseDateコンポーネントが含まれています。

図8-13 それぞれ2つのセルを持つ2つの行の簡単なグリッド・レイアウト

panelGridLayoutコンポーネントはネスト可能です。図8-14に、親panelGridLayoutコンポーネントを使用して作成された複雑なレイアウト(背景をピンクに設定)を示します。

図8-14 panelGridLayout、gridRowおよびgridCellコンポーネントを使用して作成されたグリッド・レイアウト

このpanelGridLayoutの最初のgridRowコンポーネントには、1つのgridCellコンポーネントが含まれています。このgridCellコンポーネントには、ヘッダー用に別のpanelGridLayoutコンポーネントが含まれています。このヘッダー・グリッドには2つのgridRowコンポーネントが含まれており、それぞれ2つのgridCellコンポーネントが含まれています。右上部のgridCellには、検索機能のためのコンポーネントが含まれ、左下部のgridCellには、Oracleロゴが含まれています。

親panelGridLayoutコンポーネントの次の4つのgridRowsには、gridCellコンポーネントが1つだけ含まれています。それぞれに、formコンポーネントとボタンがあります。最後のgridRowコンポーネントには、1つのgridCellコンポーネントが含まれており、フッター用に別のpanelGridLayoutコンポーネントが含まれています。このフッターは、gridRowコンポーネントと4つのgridCellコンポーネントから構成され、それぞれinputTextコンポーネントが含まれています。

子を拡大するコンポーネントに配置した場合、デフォルトで、panelGridLayoutはその親コンテナに合せて拡大されます。ただし、グリッド内のコンテンツが領域に合せるように拡大されるかどうかは、gridRowおよびgridCellコンポーネントによって決定されます。

デフォルトでは、子コンテンツは拡大されません。gridRowコンポーネントによって、高さが決定されます。デフォルトでは、高さは行のセルにある最も高い子コンポーネントの高さによって決まります。gridCellコンポーネントによって、幅が決定されます。デフォルトでは、セルの幅は列にある他のセルの幅によって決定されます。したがって、列内で少なくとも1つのセルを決定済の幅に設定する必要があります。これを固定のCSS長やグリッド内の残りの空白のパーセンテージに設定すると、セル内のコンポーネントに基づいた幅を決定できます。

かわりに、使用可能なブラウザ領域が完全に埋まるようにグリッドのコンテンツを拡大するには、次の条件を満たす必要があります。

gridCellの中にコンポーネントが1つしかない。
セルのhalignおよびvalign属性がstretchに設定されている。
セルの有効な幅と高さが、他のセルや行によって自動的に決まるように設定されていない(設定されていると、循環依存関係が発生する)。

各セルは、子コンポーネントをセルのすべての辺に固定しようとします。固定できない場合(子コンポーネントを拡大できない場合など)、子コンポーネントは開始時にセルの上部に配置されます。

8.5.1 panelGridLayout、gridRowおよびgridCellコンポーネントを使用してグリッドベースのレイアウトを作成する方法

一定数のgridRowコンポーネントをpanelGridLayoutコンポーネントに配置して、グリッドを作成します。次に、gridCellコンポーネントをgridRowコンポーネントに追加し、gridCellコンポーネントに実際のコンテンツを含むコンポーネントを配置します。panelGridLayoutコンポーネントをネストさせる場合、子panelGridLayoutコンポーネントをgridCellコンポーネントに配置します。

panelGridLayout、gridRowおよびgridCellコンポーネントを作成して使用する手順:

コンポーネント・パレットの「レイアウト」パネルから、「パネル・グリッド・レイアウト」をJSFページにドラッグ・アンド・ドロップします。

「パネル・グリッド・レイアウトの作成」ダイアログで、グリッドの列数と行数を入力し、グリッドの内側マージンと外側マージンを設定して、「次」をクリックします。

グリッドの内側マージンと外側マージンを設定する際、次の点に留意してください。

グリッドの内側マージン: 固定されたCSSサイズ(例: 2px)に設定します。
- 列: marginStartプロパティの値を、最初のもの(これは「グリッドの外側マージン」の設定により処理)を除くすべてのgridCellコンポーネントに設定します。
- 行: marginTopプロパティの値を、最初のもの(これは「グリッドの外側マージン」の設定により処理)を除くすべてのgridRowコンポーネントに設定します。

グリッドの外側マージン: 固定されたCSSサイズ(例: 2px)に設定します。

一番上: marginTopプロパティを一番上のgridRowコンポーネントのみに設定します。
一番下: marginBottomプロパティを最後のgridRowコンポーネントのみに設定します。
左: marginStartプロパティを最初のgridCellコンポーネントのみに設定します。
右: marginEndプロパティを最後のgridCellコンポーネントのみに設定します。

注意:

marginBottomおよびmarginTopの場合、競合する単位タイプは無視されます。たとえば、RowAのmarginTopが2pxに設定され、RowBのmarginTopが5emに設定されている場合、これが発生した最初の単位タイプになるため、マージンは2pxになります。

「パネル・グリッド・レイアウトの作成」ダイアログを使用する場合、marginTopおよびmarginBottomプロパティが設定され、競合が回避されます。

注意:

panelGridLayoutコンポーネントで子を拡大する必要がある場合は、行の高さをauto以外の値に、セル幅をauto以外の値に設定してください。さらに、「プロパティ・インスペクタ」を使用して、他のプロパティを拡大が許可されるように設定する必要があります。詳細は、手順5を参照してください。

このダイアログの2ページ目で、セル幅と行の高さを個別に設定します。

グリッドの幅: widthプロパティを各gridCellコンポーネントに設定します。各列を次のいずれかに設定します。

dontCare: セルの幅は列内の他のセルによって決定されます。これがデフォルトです。
auto: セルの幅は対応する列内のコンポーネントによって決定されます。ブラウザは最初にこれらのコンポーネントをすべて描画し、これに合せて行の高さを調整します。
パーセンテージ: セルの対応する列の幅を、他の列が使用していない残りの領域の正規化されたパーセンテージにする場合、パーセンテージを入力します。たとえば、25%などです。
固定のCSSサイズ: 幅を固定の幅に制限する場合、固定のCSSサイズを入力します。たとえば、20pxや20emなどです。

注意:

次の点に注意してください。

セルが複数行にまたがるようにする場合、widthはdontCareに設定する必要があります。
列内のセルの幅がそれぞれ異なる値に設定されている場合(たとえば、autoに設定されているものや固定の幅に設定されているものがある場合)、列の幅は発生した最初の単位タイプの最大値になります。
列内のすべてのセルがdontCareに設定されている場合、子コンポーネントに基づいた最も幅の広いセルによって列の幅が決定されます(セルがすべてautoに設定されている場合と類似しています)。

グリッドの高さ: heightプロパティを各gridRowコンポーネントに設定します。各行を次のいずれかに設定します。
- auto: 行の高さは行のコンポーネントによって決定されます。ブラウザは最初に子コンポーネントを描画し、これに合せて行の高さを調整します。これがデフォルトです。
- パーセンテージ: panelGridLayoutコンポーネント自体の高さが固定の場合、または親コンポーネントによって拡大されている場合、パーセンテージを入力します。たとえば、25%などです。行の高さは、他の行が使用していない残りの領域の正規化されたパーセンテージとなります。
- 固定のCSS長: 高さを固定の高さに制限する場合、固定のCSS長を入力します。たとえば、10pxや20emなどです。

「終了」をクリックします。

デフォルトでは、panelGridLayoutコンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelGridLayoutコンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelGridLayoutコンポーネントが拡大を処理する方法を変更する必要があります。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。これを行うには、「プロパティ・インスペクタ」で、DimensionsFromを次のいずれかに設定します。

children: panelGridLayoutコンポーネントは、子コンポーネントからディメンションを取得します。

注意:

この設定を使用する場合、子の行コンポーネントの高さをパーセンテージとして設定できません。panelGridLayout内の領域は可用性に基づいて分割されないためです。「プロパティ・インスペクタ」を使用して、ダイアログ終了時に設定した行の高さを変更できます。

parent: panelGridLayoutコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
注意:

この設定を使用する場合、子の行コンポーネントの高さをパーセンテージとして設定できません。
auto: panelGridLayoutコンポーネントの親コンポーネントがその子の拡大を許可する場合、panelGridLayoutコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelGridLayoutコンポーネントのサイズはその子コンポーネントのサイズに基づきます。これがデフォルトです。

panelGridLayoutコンポーネントで子を拡大する必要がある場合は、次のように設定してください。
- 行のheightをauto以外の値に設定します。
- セルのwidthをauto以外の値に設定します。
- gridCellコンポーネントのhalignをstretchに設定します。
- gridCellコンポーネントのvalignをstretchに設定します。
- 子コンポーネントのみをgridCellコンポーネントに配置します。
セルが複数の列で構成されるようにする場合、ColumnSpanを、含める列数に設定します。デフォルト値は1です。

注意:

1を超える値にcolumnSpanを設定する場合、width属性の値をdontCareに設定する必要があります。
セルが複数の行で構成されるようにする場合、RowSpanを、含める行数に設定します。デフォルト値は1です。
Halignを設定して、セルのコンテンツの横の配置を決定します。コンテンツをセルの開始位置に合せる場合(LTRロケールでは左)、これをstart(デフォルト)に設定します。centerまたはendに設定することもできます。panelGridLayoutを拡大する場合、Halignをstretchに設定します(panelGridLayoutコンポーネントの拡大の詳細は、手順5を参照してください)。
Valignを設定して、セルのコンテンツの縦の配置を決定します。コンテンツをセルの上部に合せる場合、これをtop(デフォルト)に設定します。これをmiddleまたはbottomに設定することもできます。panelGridLayoutを拡大する場合、Valignをstretchに設定します(panelGridLayoutコンポーネントの拡大の詳細は、手順5を参照してください)。

8.5.2 ジオメトリ管理およびpanelGridLayoutコンポーネントに関する必知事項

panelGridLayoutコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次に、panelGridLayoutコンポーネント内で拡大可能なコンポーネントを示します。

decorativeBox(拡大するように構成されている場合)
calendar
inputText(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox(拡大するように構成されている場合)
panelCollection
panelDashboard(拡大するように構成されている場合)
panelGridLayout (gridRowおよびgridCellコンポーネントが拡大するように構成されている場合)
panelGroupLayout (layout属性がscrollまたはverticalに設定されている場合のみ)
panelHeader(拡大するように構成されている場合)
panelSplitter(拡大するように構成されている場合)
panelStretchLayout(拡大するように構成されている場合)
panelTabbed(拡大するように構成されている場合)
region
showDetailHeader(拡大するように構成されている場合)
table(拡大するように構成されている場合)
tree(拡大するように構成されている場合)
treeTable(拡大するように構成されている場合)

次に、panelGridLayoutコンポーネント内に配置された場合、拡大できないコンポーネントを示します。

panelBorderLayout
panelFormLayout
panelGroupLayout (layout属性がdefaultまたはhorizontalに設定されている場合のみ)
panelLabelAndMessage
panelList
showDetail
tableLayout (MyFaces Trinidadコンポーネント)

拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントに配置することはできません。したがって、拡大できないコンポーネントをpanelGridLayoutコンポーネントのgridCellに配置する必要がある場合は、子を拡大しないようにpanelGridLayout、gridRowおよびgridCellコンポーネントを構成する必要があります。

8.6 事前定義済固定領域へのページ・コンテンツの配置

panelBorderLayoutコンポーネントは、ファセットを使用してコンポーネントをページの事前定義済領域に含めます。centerファセットのかわりに、panelBorderレイアウト・コンポーネントは0からn個の直接子コンポーネント(索引付きの子とも呼ばれます)を受け取り、それらが中央に連続的にレンダリングされます。ファセットは子コンポーネントを囲みます。

図8-15に、panelBorderLayoutコンポーネントのファセットを示します。

図8-15 panelBorderLayoutのファセット

panelBorderLayoutコンポーネントのサポートされている12のファセットは次のとおりです。

top: 中央領域の上に子コンポーネントがレンダリングされます。
bottom: 中央領域の下に子コンポーネントがレンダリングされます。
start: 複数の読み方向がサポートされます。クライアント・ブラウザの読み方向が左から右の場合、このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の左側に子コンポーネントをレンダリングします。読み方向が右から左の場合、子コンポーネントは中央領域の右側にレンダリングされます。アプリケーションで両方の読み方向をサポートする必要がある場合は、このファセットを使用すると、方向が変更されてもコンテンツが適切な場所に表示されます。両方の方向をサポートする必要がない場合は、leftまたはrightファセットを使用します。
end: 複数の読み方向がサポートされます。クライアント・ブラウザの読み方向が左から右の場合、このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の右側に子コンポーネントをレンダリングします。読み方向が右から左の場合、子コンポーネントは中央領域の左側にレンダリングされます。アプリケーションで両方の読み方向をサポートする必要がある場合は、このファセットを使用すると、方向が変更されてもコンテンツが適切な場所に表示されます。両方の方向をサポートする必要がない場合は、leftまたはrightファセットを使用します。
left: 1つの読み方向のみがサポートされます。このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の左側に子コンポーネントをレンダリングします。読み方向が左から右で、leftおよびstartファセットの両方が使用されている場合には、leftファセットがstartファセットより優先されます(つまり、startファセットのコンテンツは表示されません)。読み方向が右から左で、leftおよびendファセットの両方が使用されている場合にも、leftファセットがendファセットより優先されます。
right: 1つの読み方向のみがサポートされます。このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の右側に子コンポーネントをレンダリングします。読み方向が左から右で、rightおよびendファセットの両方が使用されている場合は、rightファセットがendファセットより優先されます。読み方向が右から左で、rightおよびstartファセットの両方が使用されている場合は、rightファセットがstartファセットより優先されます。
innerTop: 中央領域の上でtopファセットの子コンポーネントの下に子コンポーネントがレンダリングされます。
innerBottom: 中央領域の下でbottomファセットの子コンポーネントの上に子コンポーネントがレンダリングされます。
innerLeft: leftファセットと同じように子コンポーネントをレンダリングしますが、innerTopとinnerBottomファセット、およびleftファセットと中央領域の間にレンダリングします。
innerRight: rightファセットと同じように子コンポーネントをレンダリングしますが、innerTopファセットとinnerBottomファセット、およびrightファセットと中央領域の間にレンダリングします。
innerStart: 読み方向が左から右の場合は、innerLeftファセットと同じように子コンポーネントをレンダリングします。読み方向が右から左の場合は、innerRightファセットと同じように子コンポーネントをレンダリングします。
innerEnd: 読み方向が左から右の場合は、innerRightファセットと同じように子コンポーネントをレンダリングします。読み方向が右から左の場合は、innerLeftファセットと同じように子コンポーネントをレンダリングします。

panelBorderLayoutコンポーネントでは子コンポーネントの拡大がサポートされておらず、子コンポーネントが拡大されるコンポーネント内に配置されても拡大しません。そのため、各ファセットのサイズは、このコンポーネントに含まれているコンポーネントのサイズで決定されます。コンテンツをブラウザ・ウィンドウに合せて拡大する場合は、かわりにpanelStretchLayoutコンポーネントを使用することを検討してください。詳細は、8.3項「コンテンツをページ全体に拡大するための設定」を参照してください。

8.6.1 panelBorderLayoutコンポーネントの使用方法

JSFページに使用できるpanelBorderLayoutコンポーネントの数に制限はありません。

panelBorderLayoutコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル枠線レイアウト」をJSFページにドラッグ・アンド・ドロップします。
コンポーネント・パレットから、panelBorderLayoutコンポーネントの子コンポーネントとして、ウィンドウ中央へのコンテンツの表示に使用するコンポーネントをドラッグ・アンド・ドロップします。

子コンポーネントは、挿入した順番で連続して表示されます。他のタイプのレイアウトで子コンポーネントを表示する場合は、panelGroupLayoutコンポーネントにそのコンポーネントをラップします。詳細は、8.13項「関連する項目のグループ化」を参照してください。

中央を囲むコンテンツを配置するには、必要なコンポーネントを各ファセットにドラッグ・アンド・ドロップします。

ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナで子コンポーネントをラップします。

ヒント:

ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。

構造ウィンドウで、panelBorderLayoutコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - パネル枠線レイアウト」→「facet name」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

8.7 フォームでのコンテンツの配置

panelFormLayoutコンポーネントを使用すると、入力フィールドや選択リスト・フィールドなど、複数のフォーム入力コンポーネントを1つ以上の列に配置できます。File Explorerアプリケーションでは、panelFormLayoutコンポーネントを使用してファイル・プロパティが表示されています。図8-16に示されているように、コンポーネントはラベルが右揃えになるように構成されています。

図8-16 フォーム内の右揃えのラベルおよび左揃えのフィールド

図8-17に、ラベルがフィールドの上に表示されるように構成されているコンポーネントを使用した同じページを示します。

図8-17 フォーム内でフィールドの上に表示されているラベル

1つ以上の列にラベル付きのフィールドを表示するようにpanelFormLayoutコンポーネントを構成できます。フォームの各フィールドは、panelFormLayoutコンポーネントの子コンポーネントです。目的の行数を設定し、行より多くの子コンポーネントがある場合は、残りの子コンポーネントが新しい列に配置されます。たとえば、25の子コンポーネントがあり、15行表示されるようにコンポーネントを設定した場合、残りの10のコンポーネントは2列目に表示されます。

ただし、それぞれに表示される行数は、構成された行数によってのみ決定されるわけではありません。panelFormLayoutコンポーネントは、デフォルトで、4列以上レンダリングしないように設定されています(PDAアプリケーションの場合は2列)。この値により、実際に行数が決定されます。たとえば、25の子コンポーネントがあり、5行表示するようにコンポーネントを設定し、デフォルトの最大列数を3に設定したままにした場合、5行表示するように設定しても、実際はコンポーネントにより9行表示されます。これは、最大列数が設定された行数をオーバーライドするためです。最大3列のみに設定されているため、すべての子コンポーネントを表示するには9行使用する必要があります。コンポーネントで5行のみが表示されるようにするには、最大列数を5に設定する必要があります。

ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用されます。幅は、ピクセル単位の絶対数またはパーセント値を使用して指定します。ラベルの長さが合わない場合は、テキストが折り返されます。

ヒント:

ページが英語以外の言語で表示される場合は、異なる言語および文字で使用するためにラベルに余分な空白を残す必要があります。

8.7.1 panelFormLayoutコンポーネントの使用方法

ページに1つ以上のpanelFormLayoutコンポーネントを使用して、必要なフォーム・レイアウトを作成できます。

panelFormLayoutを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・フォーム・レイアウト」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いてラベルの位置を設定します。

デフォルトで、子の入力コンポーネントのフィールド・ラベルはフィールドの横に表示されます。フィールドの上にラベルを配置するには、labelAlignment属性をtopに設定します。

注意:

panelFormLayoutコンポーネントを別のpanelFormLayoutコンポーネントにネストすると、ネストされたレイアウトのラベルの位置はtopになります。

rowsおよびmaxColumnsを設定して、フォーム内の行および列の数を指定します。

rows属性の値は、ADF Facesにより、その後から新しい列が開始される行の番号として使用される数値です。デフォルトでは、2147483647 (Integer.MAX_VALUE)に設定されています。これは、rendered="true"およびvisible="true"に設定されているすべての子コンポーネントが、単一の列にレンダリングされることを意味します。

フォームに複数の列を含める場合は、rows属性をレンダリングされる子コンポーネントの倍数に設定し、maxColumns属性をフォームに表示する最大列数に設定します。maxColumnsのデフォルト値は3です。(PDAの場合、デフォルトは2です。)

注意:

panelFormLayoutコンポーネントが別のpanelFormLayoutコンポーネント内に存在している場合、内側のpanelFormLayoutコンポーネントのmaxColumns値は常に1です。

たとえば、rows属性が6に設定されていて、レンダリングされた子が1から6ある場合、リストは1列に表示されます。レンダリングされた子コンポーネントが7から12ある場合、リストは2列に表示されます。子コンポーネントが13以上ある場合、リストは3列に表示されます。レンダリングされたすべての子コンポーネントを1列に表示するには、rows属性をデフォルトの値に設定しなおします。

レンダリングされた子コンポーネントの数に、maxColumn属性で許可されている数を超える列が必要な場合には、rows属性の値がオーバーライドされます。たとえば、レンダリングされた子コンポーネントが100あり、rows属性が30に設定されていて、maxColumns属性が3(デフォルト)の場合、リストは3列34行で表示されます。maxColumns属性が2に設定されている場合、リストは2列51行で表示されます。

ヒント:

レンダリングされた子コンポーネントが参照するのは、フォームの直接の子コンポーネントのみです。そのため、複数の行をレンダリングするコンポーネント(selectManyCheckboxなど)が子の場合は、そのすべての行がレンダリングされた単一の子とみなされ、別々の列に分割できません。

必要に応じてfieldWidthおよびlabelWidthを設定します。

ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。

panelFormLayoutコンポーネントのlabelWidth属性ではラベルの優先幅を、fieldWidth属性ではフィールドの優先幅を設定できます。

注意:

labelWidthコンポーネントに指定する値は、labelAlignment属性がtopに設定されていて、ラベルがフィールドの上に表示されるレイアウトでは無視されます。

フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用され、異なる列に異なる幅を設定することはできません。em、px、%などの任意のCSS単位を使用して幅を指定します。使用される単位は、labelWidth属性とfieldWidth属性の両方で同じである必要があります。

パーセント値を使用する場合は次のようにします。

指定するパーセント幅は、表示される列数に関係なく、panelFormLayoutコンポーネントが占有する幅全体のパーセントです。
labelWidthおよびfieldWidthのパーセントの合計は、100%になる必要があります。合計が100%未満の場合、幅は100%になるように正規化されます。たとえば、labelWidthを10%に、fieldWidthを30%に設定した場合、実行時にlabelWidthは33%に、fieldWidthは67%になります。
一方の幅を明示的に設定してもう一方の幅を指定しない場合(labelWidthのパーセントは指定してfieldWidthは指定しないなど)、指定されていないパーセント幅がADF Facesにより自動的に計算されます。

注意:

フォームに複数の列とフッターが含まれている場合、パーセントの分数分割がサポートされていないWebブラウザでは、メインのフォーム項目とフッター項目の位置の間にわずかにオフセットが生じることがあります。この影響を最小限にするために、labelWidthのパーセントは、列数で均等に分割できるようにしてください。

panelFormLayoutコンポーネントの幅が領域の600ピクセルを占有し、labelWidth属性が50%に設定されているとします。1列に表示される場合、ラベル幅もフィールド幅も300ピクセルになります。2列に表示される場合は、各列が300ピクセルであるため、列の各ラベル幅とフィールド幅は150ピクセルになります。

ラベル・テキストの長さが指定されたラベル幅の1行に収まらない場合は、ADF Facesによりラベル・テキストが自動的に折り返されます。指定されたフィールド幅がpanelFormLayoutコンポーネントに配置した子コンテンツの最低サイズより狭い場合は、子コンテンツの最低サイズがフィールド幅として自動的に使用されます。

注意:

割り当てられた領域よりフィールドが広い場合、ブラウザはフィールドを切り捨てず、ラベル列の領域を使用します。これが原因で、ラベルが予想以上に折り返される可能性があります。この場合は、フィールド・コンテンツの幅を狭くすることを検討してください(inputTextコンポーネントに、幅がより狭いcontentStyleを使用するなど)。

必要な子コンポーネントを挿入します。

通常は、入力テキストやチェック・ボックスを複数選択などのラベル付きのフォーム入力コンポーネント、およびユーザーの入力を可能にするその他の類似のコンポーネントを挿入します。

ヒント:

通常はpanelFormLayoutコンポーネントの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、panelFormLayoutコンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。

例8-4に、図8-16に表示されているFile Explorerアプリケーションのproperties.jspxページで使用されているpanelFormLayoutコンポーネントを示します。

例8-4 panelFormLayoutコンポーネント

<af:panelFormLayout rows="5" labelAlignment="top">
  <af:inputText value="#{fileItemProperties.type}"
                label="#{explorerBundle['fileproperties.type']}"
                readOnly="true"/>  <af:inputText value="#{fileItemProperties.location}"
                label="#{explorerBundle['fileproperties.currentpath']}"
                readOnly="true"/>
  <af:inputText value="#{fileItemProperties.size}"
                label="#{explorerBundle['fileproperties.size']}"
                readOnly="true"/>
  <af:inputText value="#{fileItemProperties.contains}"
                label="#{explorerBundle['fileproperties.contains']}"
                readOnly="true"/>
</af:panelFormLayout>

ヒント:

入力以外のコンポーネント(label属性がない)を使用する場合、またはpanelFormLayoutコンポーネント内の単一のラベルで複数の入力コンポーネントをグループ化する場合は、まずpanelLabelAndMessageコンポーネントにコンポーネントをラップします。panelLabelAndMessageコンポーネントの使用方法の詳細は、17.4項「単一のラベルおよびメッセージを使用したコンポーネントのグループ化」を参照してください。

フォーム・レイアウトに意味的に関連する入力コンポーネントをグループ化するには、groupコンポーネントを使用してグループに属するコンポーネントをラップします。groupにコンポーネントを配置すると、panelFormLayoutコンポーネントによりグループの上下に区切り線が引かれます。

groupコンポーネントの使用方法の詳細は、8.7.2項「groupコンポーネントをpanelFormLayoutコンポーネントとともに使用する方法に関する必知事項」を参照してください。
子の入力コンポーネントの下にコンテンツを追加するには、必要なコンポーネントをfooterファセットに挿入します。

ファセットに使用できる子コンポーネントは1つのみです。footerファセットに複数のコンポーネントを挿入する必要がある場合は、panelGroupLayoutコンポーネントまたはgroupコンポーネントを使用してfooterの子コンポーネントをラップします。例8-5に、panelFormLayoutコンポーネントにpanelGroupLayoutコンポーネントを使用してfooterの子コンポーネントを配置するサンプル・コードを示します。
例8-5 水平に配置されたpanelFormLayoutのfooterの子コンポーネント
```
<af:panelFormLayout>
  <f:facet name="footer">
    <af:panelGroupLayout layout="horizontal">
      <af:commandButton text="Save"/>
      <af:commandButton text="Cancel"/>
      <f:facet name="separator">
        <af:spacer width="3" height="3"/>
      </f:facet>
    </af:panelGroupLayout>
  </f:facet>
  .
  .
  .
</af:panelFormLayout>
```

8.7.2 groupコンポーネントをpanelFormLayoutコンポーネントとともに使用する方法に関する必知事項

groupコンポーネント自体は何もレンダリングしませんが、panelFormLayoutコンポーネントの子として使用すると、各groupコンポーネントの子コンポーネントの周辺にセパレータが表示されます。たとえば、panelFormLayoutコンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例8-17に、panelFormLayoutコンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。

例8-6 panelFormLayoutの子コンポーネントのグループ化

<af:panelFormLayout binding="#{editor.component}" rows="10" labelWidth="33%"
                    fieldWidth="67%" testId="panelFormLayout1">
  <af:inputText columns="5" label="label 1"/>
  <af:group>
    <af:inputText columns="5" label="grouped 1" shortDesc="This one is secret!"
         secret="true"/>
    <af:inputText columns="5" label="grouped 2"/>
    <af:inputText columns="5" label="grouped 3"/>
   </af:group>
   <af:inputDate id="df1" label="label 2"/>
   <af:panelLabelAndMessage label="label 3" labelStyle="vertical-align: middle;">
     <af:commandButton text="Submit"/>
   </af:panelLabelAndMessage>
   <af:selectOneListbox id="sol" label="label 4" shortDesc="Select One Option">
     <af:selectItem label="option 1"/>
     <af:selectItem label="option 2"/>
     <af:selectItem label="option 3"/>
     <af:selectItem label="option 4"/>
   </af:selectOneListbox>
   <af:selectManyListbox id="rs" label="label 5" shortDesc="Select Option">
     <af:selectItem label="option 1"/>
     <af:selectItem label="option 2"/>
     <af:selectItem label="option 3"/>
     <af:selectItem label="option 4"/>oiiiik,
     </af:selectManyListbox>
</af:panelFormLayout>

図8-18に示されているように、例8-17のサンプル・コードでは、実行時にpanelFormLayoutコンポーネントにより子コンポーネントの1つ目のgroupの前後に点線のセパレータがレンダリングされます。

図8-18 panelFormLayoutのグループ化されたコンポーネント

8.7項「フォームでのコンテンツの配置」で説明したように、panelFormLayoutコンポーネントは特定のコンポーネント属性を使用して、列と行にその子コンポーネントを表示する方法(グループ化および非グループ化)を決定します。groupコンポーネントを使用して、子コンポーネントを複数の列に表示するpanelFormLayoutコンポーネントに関連コンポーネントをグループ化する場合、groupコンポーネントの子コンポーネントは常に同じ列に表示されるため、groupコンポーネントの内部の子コンポーネントは列をまたがって分割されません。

groupコンポーネントで子コンポーネントのレイアウトを設定することはできませんが、基礎となるHTML要素で、groupコンポーネント内の子コンポーネントを必要なレイアウトに設定できます。たとえば、groupコンポーネントの子のボタン・コンポーネントをフォーム・レイアウト内に水平に配置する場合は、panelGroupLayoutコンポーネントを使用してボタンをラップし、panelGroupLayoutコンポーネントのlayout属性をhorizontalに設定します。その後、例8-7に示すように、groupコンポーネントにpanelGroupLayoutコンポーネントを挿入します。

例8-7 groupコンポーネント内のpanelGroupLayout

<af:group>
  <af:panelGroupLayout layout="horizontal">
    <af:commandButton text="Save" ../>
    <af:commandButton text="Cancel" ../>
    <f:facet name="separator">
      <af:spacer width="3"/>
    </f:facet>
  </af:panelGroupLayout>
</af:group>

panelFormLayoutコンポーネントのfooterファセットの子コンポーネントをgroupコンポーネントを使用してグループ化する場合は、例8-8に示すように、すべてのgroupコンポーネントおよびグループ化されていないその他の子コンポーネントを、1つのルートgroupコンポーネントに配置する必要があります。

例8-8 ルートgroupコンポーネントが1つ含まれるpanelFormLayoutのfooterファセット

<af:panelFormLayout ...>
  <f:facet name="footer">
    <!-- One root group component needed -->
    <af:group>
      <af:outputText value="Footer item 1"/>
      <!-- One group -->
      <af:group>
        <af:outputText value="Group 1 item 1"/>
        <af:outputText value="Group 1 item 2"/>
      </af:group>
      <af:panelGroupLayout layout="horizontal">
        <af:commandButton text="Save"/>
        <af:commandButton text="Cancel"/>
        <f:facet name="separator">
          <af:spacer width="3"/>
        </f:facet>
      </af:panelGroupLayout>
    </af:group>
  </f:facet>
  .
  .
  .
</af:panelFormLayout>

図8-19に示されているように、panelFormLayoutコンポーネントのグループ化された子コンポーネントと同じように、panelFormLayoutコンポーネントにより、実行時にfooterファセットの各groupコンポーネントの子コンポーネントの周辺に点線のセパレータがレンダリングされます。

図8-19 グループ化されたコンポーネントを含むpanelGroupLayoutのfooter

注意:

panelFormLayoutコンポーネントのfooterファセットでサポートされているのは、2レベルのグループ化されたコンポーネントのみで、footerファセットに3レベル以上ネストしたgroupコンポーネントを配置することはできません。たとえば、次のコードは無効です。

<f:facet name="footer">
  <!-- Only one root group -->
  <af:group>
    <af:outputText value="Footer item 1"/>
    <!-- Any number of groups at this level -->
    <af:group>
      <af:outputText value="Group 1 item 1"/>
      <af:outputText value="Group 1 item 2"/>
      <!-- But not another nested group. This is illegal. -->
      <af:group>
        <af:outputText value="Nested Group 1 item 1"/>
        <af:outputText value="Nested Group 1 item 2"/>
      </af:group>
    </af:group>
    <af:outputText value="Another footer item"/>
  </af:group>
</f:facet>

panelFormLayoutコンポーネントのfooterファセットと本体のどちらにコンポーネントをグループ化しているかにかかわらず、panelFormLayoutコンポーネントかfooterファセットの最初または最後の子がgroupコンポーネントの場合、そのgroupの子コンポーネントの周辺にはセパレータは表示されません。たとえば、例8-9のどちらのコード例でも、実行時に生成される外観は同じです。

例8-9 同じ外観を生成するコード

<!-- Example 1: Group of buttons is last child in root group -->
<f:facet name="footer">
  <af:group>
    <af:outputText value="Footer text item 1"/>
    <af:outputText value="Footer text item 2"/>
    <af:group>
      <af:inputText label="Nested group item 1"/>
      <af:inputText label="Nested group item 2"/>
    </af:group>
    <af:group>
      <af:panelGroupLayout layout="horizontal">
        <af:commandButton text="Cancel"/>
        <af:commandButton text="Save"/>
      </af:panelGroupLayout>
    </af:group>
  </af:group>
</f:facet>

<!-- Example 2: panelGroupLayout of buttons is last child in root group-->
<f:facet name="footer">
  <af:group>
    <af:outputText value="Footer text item 1"/>
    <af:outputText value="Footer text item 2"/>
    <af:group>
      <af:inputText label="Nested group item 1"/>
      <af:inputText label="Nested group item 2"/>
    </af:group>
    <af:panelGroupLayout layout="horizontal">
      <af:commandButton text="Cancel"/>
      <af:commandButton text="Save"/>
    </af:panelGroupLayout>
  </af:group>
</f:facet>

8.8 ダッシュボードでのコンテンツの配置

panelDashboardコンポーネントでは、panelFormコンポーネントと同様に、行および列にその子コンポーネントを配置できます。ただし、図8-20に示されているように、panelDashboardの子は、テキスト・コンポーネントではなく、コンテンツを含むpanelBoxコンポーネントです。

図8-20 panelBoxの子コンポーネントを含むpanelDashboard

panelDashboardコンポーネントを追加する場合、コンポーネントに含まれる列数および各行の高さを構成します。ダッシュボードは、子を拡大して構成済の領域を埋めます。すべての子コンポーネントが、指定した列数と行の高さ内に収まらない場合、panelDashboardコンポーネントにスクロールバーが表示されます。

子を拡大するコンポーネントに配置した場合は、panelDashboardを子の数に関係なく親コンテナに合せて拡大するように構成できます。これは、ブラウザがダッシュボードのニーズを超えてサイズ変更された場合に、ダッシュボードに空白の領域があることを意味する場合があります。

たとえば、dimensionsFrom属性をparentに設定することでpanelDashboardがその親からサイズを継承するように設定したとします。列を1に、rowHeightを50pxに設定します。次に、2つのpanelBoxコンポーネントを追加します。columnsは1に設定されているため、行は2つになります。親コンポーネントはpanelStretchLayoutであるため、panelDashboardはボックスの高さにかかわらずpanelStretchLayoutに合せて拡大され、図8-21に示すように最終的に余分な領域ができます(ダッシュボードの色が紫紅に変わり、境界が見やすくなります)。

図8-21 領域に合せて拡大されたpanelDashboard

ダッシュボードを拡大しない場合は、子を拡大しないコンポーネントに配置し、(dimensionsFrom属性をchildrenに設定することで)子に基づいてサイズを決定するようにpanelDashboardを構成します。これは、rowHeight属性を乗算することで、子の表示に必要な行数と同じ高さになります。

前述の例で、scrollに設定されたpanelGroupLayoutにダッシュボードをかわりに配置する場合は、rowHeightが50に設定されているため、図8-22に示すように、ブラウザ・ウィンドウのサイズに関係なく、panelDashboardは常に100pxより少し高くなります。

図8-22 拡大されないpanelDashboard

注意:

panelDashboardコンポーネントでは、宣言的なドラッグ・アンド・ドロップ動作もサポートされており、ユーザーは子コンポーネントを再配置できます。図8-23に示されているように、ユーザーは、たとえばpanelBox 10をpanelBox 4とpanelBox 5の間に移動できます。ボックスをドロップできる場所にはシャドウが表示されます。

図8-23 panelDashboardのドラッグ・アンド・ドロップ機能

注意:

ユーザーがコンポーネントをpanelDashboardコンポーネントの内外にドラッグできるドラッグ・アンド・ドロップ機能を構成することもできます。詳細は、34.6項「panelDashboardコンポーネントでのドラッグ・アンド・ドロップ機能の追加」を参照してください。

子コンポーネントを移動する機能とともに、panelDashboardコンポーネントは、ユーザーが子コンポーネントをレンダリングから非レンダリングに切り替えられるようにし、挿入または削除されるpanelBoxesの外観を与えるAPIも提供します。ダッシュボードは、部分ページ・レンダリングを使用して、ページ全体を再描画することなく子コンポーネントの新しいセットを再描画します。

panelDashboardBehaviorタグを使用して、コンポーネントのレンダリングの応答性を向上させることができます。このタグを使用すると、コマンド・コンポーネントをアクティブ化し、視覚的な変更をダッシュボードに適用してから、アプリケーション・コードでサーバーのコンポーネント・ツリーを変更できます。アクション・イベントがサーバーに送信される前に、この領域の拡大が行われるため、コマンド・コンポーネントのアクション・リスナーがコンポーネント・ツリーを変更し、ダッシュボードでの挿入の最適化されたエンコーディングを準備している間に、ユーザーはすぐにフィードバックを確認できます。

たとえば、図8-24は、panelSplitterコンポーネントの右パネルで使用されるpanelDashboardコンポーネントを示しています。左パネルにリンクとして表示されているリスト項目は、panelDashboardの各panelBoxコンポーネントを表しています。すべてのpanelBoxコンポーネントが表示されている場合、リンクはすべて非アクティブです。ただし、ユーザーがpanelBoxコンポーネントの1つを削除すると、対応するリンクがアクティブになります。ユーザーはそのリンクをクリックして、panelBoxを再挿入できます。panelDashboardBehaviorタグをcommandLinkコンポーネントとともに使用することで、ユーザーは挿入済ボックスの描画を確認できます。

図8-24 panelDashboardBehaviorタグを使用するcommandLinkコンポーネント

このタグを使用しない場合、アクション・リスナーが処理している間、ユーザーがダッシュボード構造に対する変更を確認できるまで多少の遅延があります。

図8-25は、panelDashboardコンポーネントを使用した実際的な例を示しています。ページの上部にあるリンクの1つを選択すると、ダッシュボードに表示されるpanelBoxesが変わります。ページの左側にある関連リンクをクリックして、panelBoxを追加することもできます。

図8-25 panelDashboardの実際的な例

8.8.1 panelDashboardコンポーネントの使用方法

panelDashboardをページに追加した後で、ダッシュボードを構成して、拡大するかどうかを決定できます。その後、子コンポーネントを追加し、コンポーネントを再配置できるようにする場合は、子コンポーネントにもcomponentDragSourceタグを追加します。コンポーネントの挿入および削除を許可する場合は、アクションを処理するためのリスナーを実装します。panelDashboardBehaviorタグを使用して、panelDashboardコンポーネントでの挿入への応答性を向上させることもできます。

panelDashboardコンポーネントを使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・ダッシュボード」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
columnsを、子コンポーネントを表示するために使用する列数に設定します。子コンポーネントは各列に合せて拡大されます。
RowHeightを、各行の高さのピクセル数に設定します。子コンポーネントは、この高さまで拡大されます。

panelDashboardコンポーネントは使用可能なブラウザ領域に合せて拡大できます。かわりに、panelDashboardコンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelDashboardコンポーネントが拡大を処理する方法を変更する必要があります。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。

注意:

dimensionsFrom属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。

children: panelDashboardコンポーネントは、子コンポーネントからディメンションを取得します。

注意:

この設定を使用する場合は、panelDashboardコンポーネントの高さを(たとえばinlineStyleまたはstyleClass属性を通じて)設定できません。設定すると、panelDashboardの高さと子コンポーネントの高さが競合する原因となります。

parent: panelDashboardコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto: panelDashboardコンポーネントの親コンポーネントがその子の拡大を許可する場合、panelDashboardコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelDashboardコンポーネントはその子コンポーネントのサイズに基づきます。

コンポーネント・パレットから、子panelBoxコンポーネントをドラッグ・アンド・ドロップします。

ヒント:

panelDashboardコンポーネントでは、regionコンポーネントも子コンポーネントとしてサポートされています。
ユーザーが子コンポーネントを並べ替えられるようにするには、コンポーネント・パレットの「操作」パネルから、「コンポーネント・ドラッグ元」を各子コンポーネントの子としてドラッグ・アンド・ドロップします。

コンポーネントを追加および削除できるようにする場合は、マネージドBeanを作成し、子の追加またはドロップ時に子の並替えを行うハンドラ・メソッドを実装します。このイベントはドロップ・イベントとみなされるため、ドラッグ・アンド・ドロップ・フレームワークを使用する必要があります。ドロップ・イベントのハンドラの作成の詳細は、第34章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。

最適化されたライフサイクルを使用するには、ハンドラにpanelDashboardコンポーネントのprepareOptimizedEncodingOfInsertedChild()メソッドをコールさせます。これにより、挿入された子コンポーネントのみがレンダリングのためにダッシュボードから送信されます。

注意:

panelDashboardBehaviorタグを使用する予定の場合は、関連付けられているコマンド・コンポーネントのactionListenerハンドラからこのAPIをコールする必要があります。

手順7でcomponentDragSourceタグを追加した場合、panelDashboardのDropEventハンドラも実装する必要があります。panelDashboardコンポーネントを選択している状態で、「動作」セクションを開き、DropListener属性をハンドラ・メソッドにバインドします。
panelDashboardBehaviorタグを使用する場合は、挿入を開始するために使用するコマンド・コンポーネントをドラッグ・アンド・ドロップします。

プロパティ・インスペクタで、コマンド・コンポーネントのActionListenerを、コンポーネント・ツリーの変更を処理するマネージドBeanのハンドラにバインドします。ハンドラでpanelDashboardコンポーネントのprepareOptimizedEncodingOfInsertedChild()メソッドをコールします。これにより、挿入されたレンダリング対象の子コンポーネントのみがダッシュボードから送信されます。例8-10に、子コンポーネントの挿入を処理するマネージドBeanのコードを示します。

例8-10 「挿入」ボタンのアクション・リスナー・コード

public void handleInsert(ActionEvent e)
{
  UIComponent eventComponent = e.getComponent();
  String panelBoxId = eventComponent.getAttributes().get("panelBoxId").toString();
  UIComponent panelBox = _dashboard.findComponent(panelBoxId);

  // Make this panelBox rendered:
  panelBox.setRendered(true);

  // Becaue the dashboard is already shown, perform an optimized 
  // render so the whole dashboard does not have to be re-encoded:
  int insertIndex = 0;
  List<UIComponent> children = _dashboard.getChildren();
  for (UIComponent child : children)
  {
    if (child.equals(panelBox))
    {
      // Let the dashboard know that only the one child component should be 
      // encoded during the render phase:
      _dashboard.prepareOptimizedEncodingOfInsertedChild(
        FacesContext.getCurrentInstance(),
        insertIndex);
      break;
    }
 
    if (child.isRendered())
    {
      // Count only rendered children because that is all that the 
      // panelDashboard can see:
      insertIndex++;
    }
  }
  // Add the side bar as a partial target because we need to 
  // redraw the state of the side bar item that corresponds to the inserted item:
  RequestContext rc = RequestContext.getCurrentInstance();
  rc.addPartialTarget(_sideBar);
}

コンポーネント・パレットの「操作」パネルから、「パネル・ダッシュボード動作」タグをコマンド・コンポーネントの子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで次の入力を行います。
- for: 関連するpanelDashboardコンポーネントのIDを入力します。
- index: 挿入するコンポーネントの索引を決定するメソッドに解決されるEL式を入力します。panelDashboardBehaviorタグを使用する場合、プレースホルダ要素は、サーバーから戻った後で実際のコンポーネントがレンダリングされるDOMツリーに挿入されます。サーバーで挿入が行われる前に挿入のプレースホルダが追加されるため、ユーザーがページをリロードしても、子コンポーネントが継続的に同じ順序で表示されるように、子の挿入場所を指定する必要があります。

8.8.2 ジオメトリ管理およびpanelDashboardコンポーネントに関する必知事項

このコンポーネントでは、列数およびrowHeight属性に基づき、子がグリッドに編成されます。panelDashboard内で拡大可能な子コンポーネントは次のとおりです。

inputText (rows属性が1より大きく設定され、simple属性がtrueに設定されている場合)
panelBox
region
table(拡大するように構成されている場合)

その他のコンポーネントを子コンポーネントとしてpanelDashboardコンポーネントに配置しようとすると、コンポーネントの階層は無効になります。

8.9 コンテンツの動的な表示および非表示

ユーザーがコンテンツの表示または非表示を選択できるようにすることが必要な場合があります。ユーザー・インタフェースのすべての機能を一度に表示する必要がなければ、ユーザーの意志でインタフェースの一部を表示および非表示にできるコンポーネントを使用して領域を節約できます。

showDetailコンポーネントを使用すると、ユーザーがラベルの下のコンテンツを開いた状態(表示)または閉じた状態(非表示)にすることが可能な切替えアイコン付きのラベルを作成できます。コンテンツが閉じた状態(非表示)の場合、デフォルトのラベルは「表示」で、切替えアイコンにはボックスの中にプラス記号が表示されます。コンテンツが開いた状態(表示)の場合、デフォルトのラベルは「非表示」で、切替えアイコンにはマイナス記号に変わります。

たとえば、File ExplorerアプリケーションのnewFileItemページでは、showDetailコンポーネントを使用してファイル・プロパティを表示および非表示にしています。図8-26に示すように、コンポーネントは、ページが表示されたらプロパティが非表示になるように構成されています。

図8-26 閉じた状態のshowDetail

ユーザーが切替えアイコンをクリックすると、図8-27に示されているようにプロパティが表示されます。

図8-27 開いた状態のshowDetail

表示されているテキストおよび非表示のテキストを表示するために、outputTextコンポーネントより複雑なコンポーネントを使用する場合は、コンポーネントをshowDetailコンポーネントのpromptファセットに追加できます。表示に設定すると、promptファセットのコンテンツが、表示されているテキストおよび非表示のテキストの値と置き換えられます。showDetailコンポーネントの使用方法は、8.9.1項「showDetailコンポーネントの使用方法」を参照してください。

ヒント:

デフォルトで、showDetailコンポーネントの子コンポーネントはインデントされます。child-containerスキニング・キーを使用してインデントを制御できます。次に例を示します。

af|showDetail {  -tr-layout: flush;}
af|showDetail::child-container {
  padding-left: 10px;
}

詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

showDetailコンポーネントと同じように、showDetailHeaderコンポーネントでもコンテンツの表示を切り替えられますが、showDetailHeaderコンポーネントにはヘッダーにラベルと切替えアイコンがあり、メニュー・バー、ツールバーおよびテキスト用のファセットも用意されています。

ヒント:

showDetailHeaderコンポーネントは、表示イベントを処理することを除き、panelHeaderコンポーネントと同じです。panelHeaderコンポーネントの詳細は、8.11項「静的ボックスの項目の表示」を参照してください。

タイトル行のすべてのファセットにすべてを表示するのに十分な領域がない場合、showDetailHeaderテキストが切り捨てられ、省略記号が表示されます。ユーザーが切り捨てられたテキスト上にカーソルを起動すると、図8-28に示すように、ツールチップに完全なテキストが表示されます。

図8-28 showDetailHeaderが切り捨てられた場合のテキスト

コンテンツを表示するのに十分な領域がある場合は、図8-29に示すように、contextファセットとツールバーの間に追加の領域が配置されます。

図8-29 ツールバーの前に追加された領域

また、showDetailHeaderコンポーネントをエラー、警告、情報または確認のメッセージとして使用するように構成できます。コンテンツは、ヘッダーの下で表示または非表示になります。たとえば、File ExplorerアプリケーションのnewFileItemページはshowDetailHeaderコンポーネントを使用して、新規ファイルの作成のヘルプを表示します。図8-27に示されているように、デフォルトではヘルプは表示されません。ユーザーがヘッダーの切替えアイコンをクリックすると、図8-30に示されているようにコンテンツが表示されます。

図8-30 ヘルプの表示に使用されているshowDetailHeaderコンポーネント

showDetailHeaderコンポーネントをpanelHeaderコンポーネントとともに使用してページをセクションとサブセクションに分割し、一部のコンテンツを非表示にできます。showDetailHeaderコンポーネントには、ツールバー・ファセットやメニュー・バー・ファセットなど、いくつかのファセットが含まれます。これらのファセットは、panelHeaderコンポーネントの場合と同じです。panelHeaderコンポーネントの詳細は、8.11項「静的ボックスの項目の表示」を参照してください。

showDetailHeaderコンポーネントをネストさせて、コンテンツの階層を作成できます。ネストされた各コンポーネントの見出しは、階層を示すために異なるスタイルになります。図8-31に、ネストした3つのshowDetailHeaderコンポーネントおよびその異なるスタイルを示します。

図8-31 ネストしたshowDetailHeaderコンポーネントにより作成された階層

各ヘッダー・レベルで使用されているスタイルは、showDetailHeaderコンポーネントにスキンを適用することで変更できます。ADF Facesコンポーネントのスキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

注意:

サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、headerLevel属性を使用して手動でオーバーライドできます。

panelBoxコンポーネントは、ヘッダーの下に情報を表示または非表示にできるようにする場合、およびページのその他の情報と分けるためのボックスが必要な場合に使用します。File Explorerアプリケーションでは、図8-32に示すように、properties.jspxページに2つのpanelBoxコンポーネントを使用して、属性およびファイルの履歴を表示します。

図8-32 2つのpanelBoxコンポーネント

図8-33に、「履歴」panelBoxコンポーネントが非表示の状態になっている同じページを示します。

図8-33 非表示のpanelBoxコンポーネント

panelBoxコンポーネントに背景色を設定して、コンテンツをページの残りの部分とさらに区別することができます。2色の組合せ(ランプと呼ばれる)が用意されており、各組合せにはnone、light、mediumおよびdarkの4つの色のレベルがあります。図8-34に図8-32と同じパネル・ボックスを示しますが、下のpanelBoxコンポーネントはcoreランプの暗い色が表示されるように構成されています。

図8-34 背景色を使用したパネル・ボックス

panelBoxコンポーネントのサイズは、ピクセル・サイズを明示的に割り当てて設定することも、親に対する割合で設定することもできます。また、タイトルの位置を設定することも、アイコンを追加することもできます。また、panelBoxコンポーネントには、ボックスにツールバーおよびツールバー・ボタンを追加できるtoolbarファセットがあります。

contentDelivery属性を使用して、非表示のコンポーネントをクライアントに送信してレンダリングするタイミングを制御できます。即時配信に設定すると、非表示のコンテンツはすべて初期リクエスト時にフェッチされます。遅延配信では、ページでは最初は標準のライフサイクルが実行されます。ただし、その初期リクエスト時に非表示のコンテンツをフェッチするかわりに、特殊な部分ページ・レンダリング(PPR)リクエストが実行され、非表示のコンテンツが戻されます。ページのレンダリング直後であるため、レンダー・レスポンス・フェーズのみが非表示のコンテンツに対して実行され、対応するデータのフェッチおよび表示が可能になります。最初のコンテンツ表示リクエストが発行されるまでコンテンツがクライアントに対してレンダリングされずにキャッシュに残るように(lazy)構成するか、表示リクエストが発行されるたびにコンテンツがレンダリングされるように(lazyUncached)構成できます。

これらの3つのコンポーネントすべてに、childCreation属性を使用できます。この属性は、UIComponentの子が実際に作成されるタイミングを決定する際に、JSPタグに影響します。デフォルトでは、すべての子コンポーネントは、親コンポーネントが作成される際に作成されます。lazyまたはlazyUncachedを使用するようにコンポーネントを構成した場合、コンポーネントのレンダリングされたインスタンスが作成されるように親タグが設定されているときは、子コンポーネントは作成されません。多数の子が存在する場合、パフォーマンスを向上するために、表示される場合にのみ子コンポーネントを作成するか、最初に表示される際にのみ子コンポーネントを作成し、それ以降は作成されたままにするように、これらのコンポーネントを構成できます。

showDetailHeaderおよびpanelBoxコンポーネントは両方とも最大化して、ブラウザ・ウィンドウ全体で表示できます。アイコンを、コンポーネントを最大化してから標準サイズに戻せる表示に構成することもできます。図8-35に、panelBoxコンポーネントが標準サイズのデモ・アプリケーションを示します。ヘッダーに最大化アイコンがあります。

図8-35 panelBoxが標準サイズのpanelBoxデモ

最大化アイコンをクリックすると、panelBoxが再描画され、図8-36に示すようにブラウザ・ウィンドウ全体が表示されます。リストア・アイコンをクリックすると、コンポーネントを標準サイズに戻すことができます。

図8-36 最大化されたpanelBoxコンポーネント

デフォルトでは、コンポーネントはタブレット・デバイスでのみ最大化アイコンを表示するように構成されています。デスクトップでは、アイコンは何も表示されません。アイコンを常に表示するように、または表示しないようにコンポーネントを構成することもできます。さらに、コンポーネントを最大化するタイミングを決定するためのリスナーを作成できます。

コンテンツの複数の大きな領域を表示および非表示にする必要がある場合は、panelAccordionおよびpanelTabbedコンポーネントの使用を検討してください。詳細は、8.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。

8.9.1 showDetailコンポーネントの使用方法

showDetailコンポーネントを使用して、コンテンツの1セットを表示および非表示にできます。

showDetailコンポーネントを作成および使用する手順:

コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「詳細の表示」をドラッグ・アンド・ドロップします。

ヒント:

このコンポーネントは、コンポーネント・パレットの「レイアウト」パネルではなく、「共通コンポーネント」パネルに表示されます。

プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。

コンポーネントの子コンポーネントを表示する場合は、Disclosedをtrueに設定します。

注意:

コンテンツを表示および非表示にすることで、ユーザーはdisclosed属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第33章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

DisclosedTextを、コンテンツが開いた状態(表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「非表示」になります。

UndisclosedTextを、コンテンツが閉じた状態(非表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「表示」になります。

注意:

disclosedTextには値を指定してundisclosedTextには指定しない場合、ADF Facesにより、開いた状態および閉じた状態の両方にdisclosedTextの値が自動的に使用されます。同様に、undisclosedTextには値を指定してdisclosedTextには指定しない場合、コンテンツが非表示または表示されると、undisclosedTextの値が使用されます。

disclosedTextおよびundisclosedTextに指定されたテキストを使用するかわりに、promptファセットを使用して、切替えアイコンの隣にレンダリングされるコンポーネントを追加できます。

「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをDisclosureListenerメソッドに設定します。

表示イベントおよびリスナーの詳細は、8.9.4項「表示イベントに関する必知事項」を参照してください。
childCreation属性を使用して、子コンポーネントが作成されるタイミングを構成できます。これを行うには、「その他」セクションを開き、childCreationを次のいずれかに設定します。
- immediate: showDetailコンポーネントが作成されるとすべての子コンポーネントが作成されます。
- lazy: 子コンポーネントは、表示される場合にのみ作成されます。表示され、関連する子コンポーネントがレンダリングされると、コンポーネントはコンポーネント・ツリーに作成されたままになります。
- lazyUncached: 子コンポーネントは、表示される場合にのみ作成されます。コンポーネントは、非表示になると破棄されます。
contentDelivery属性を使用して、非表示の子のコンテンツをクライアントに送信するタイミングを構成できます。これを行うには、「その他」セクションを開き、ContentDeliveryを次のいずれかに設定します。
- immediate: showDetailコンポーネントが作成されると、すべての非表示のコンテンツが送信されます。
- lazy: 非表示のコンテンツは、コンテンツが初めて表示されるときにのみ送信されます。表示されてコンテンツがレンダリングされると、メモリーに残ります。
- lazyUncached: 非表示のコンテンツは、表示されるたびに作成されます。その後非表示になると、コンテンツは破棄されます。
コンテンツを追加するには、必要な子コンポーネントをshowDetailコンポーネントに挿入します。

8.9.2 showDetailHeaderコンポーネントの使用方法

showDetailHeaderコンポーネントは、ヘッダーの下にコンテンツを1セット表示する必要がある場合や、表示または非表示にできるメッセージとしてコンテンツを使用する場合に使用します。showDetailHeaderコンポーネントは、コンテンツを非表示にできるようにする場合に、ヘッダーおよびコンテンツの階層を作成する際にも使用できます。

showDetailHeaderコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「ディテール・ヘッダーの表示」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。Textをセクション・ヘッダーのラベルにするテキスト文字列に設定します。

Iconを、セクション・ヘッダーのアイコンに使用するイメージ・ファイルのURIに設定します。アイコン・イメージはヘッダー・ラベルの前に表示されます。

注意:

このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。

特定のメッセージ情報の表示にヘッダーを使用している場合は、MessageTypeを次のいずれかの値に設定します。

confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
none: デフォルト。icon属性に指定されていないかぎり、アイコンは表示されません。

図8-37に、メッセージ・タイプに使用される各アイコンを示します。

図8-37 メッセージ・タイプに使用されるアイコン

注意:

コンポーネントの子コンポーネントを表示する場合は、Disclosedをtrueに設定します。

注意:

「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをdisclosureListenerメソッドに設定します。

表示イベントおよびリスナーの詳細は、8.9.4項「表示イベントに関する必知事項」を参照してください。
showDetailHeaderコンポーネントによるジオメトリ管理の処理方法を制御するには、「その他」セクションを開き、「タイプ」を設定します。コンポーネントの拡大またはその子の拡大を行わない場合は、これをflowに設定します。showDetailHeaderコンポーネントの高さは、その子によってのみ決定されます。コンポーネントの拡大およびその子の拡大を行う場合は、stretchに設定します(単一の子コンポーネントのみ拡大されます)。showDetailHeaderコンポーネントの親コンポーネントでジオメトリ管理を決定する場合は、デフォルトに設定したままにします。ジオメトリ管理の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
ヘッダーにボタンまたはアイコンを追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、toolbarファセットにtoolbarをドラッグ・アンド・ドロップします。その後、新しく挿入されたtoolbarコンポーネントに、任意の数のcommandToolbarButtonまたはcommandButtonコンポーネントを追加します。toolbarコンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。

注意:

panelHeaderコンポーネントでは、ツールバーのオーバーフローはサポートされていません。

ヘッダーにメニューを追加するには、menuBarファセットにmenuコンポーネントを挿入します。メニュー作成の詳細は、14.2項「メニュー・バーでのメニューの使用方法」を参照してください。

ヒント:

toolbarファセットにメニューを配置することも、menuファセットにツールバー(およびツールボックス)を配置することも可能です。これらのファセットの主な違いは場所です。toolbarファセットはmenuファセットの前に配置されます。

コンポーネントの見出しレベルをオーバーライドするには、headerLevelを目的のレベル(H1、H2などからH6)に設定します。

見出しレベルは、特にスクリーン・リーダー・アプリケーションで使用する場合に、正しいページ構造を決定するのに使用されます。デフォルトで、headerLevelは-1に設定されており、ページの物理的位置に基づいて、ヘッダーでサイズを決定できます。つまり、最初のヘッダー・コンポーネントはH1に設定されます。そのH1コンポーネントにネストされるヘッダー・コンポーネントはH2などに設定されます。

注意:

スクリーン・リーダー・アプリケーションでは、HTMLヘッダー・レベルの割当てを利用して、ページの基本構造を識別します。ヘッダー・コンポーネントおよびヘッダー・レベルの割当てがページで意味をなすようにしてください。

オーバーライド値を使用する場合は、ページの公開可能なセクション内にヘッダーを含めた場合の影響について考慮してください。たとえば、ページに縮小可能な領域がある場合は、領域が縮小および表示されるときに、オーバーライドされた構造が意味を持つようにする必要があります。

見出し階層の構造ではなく、ヘッダー・テキストのサイズのみを変更する場合は、size属性を設定します。

size属性では、ヘッダー・テキストに使用する数値を指定し、スキンをオーバーライドします。最大の数字は0で、これはH1ヘッダー・レベルに対応します。最小は5で、H6ヘッダーに対応します。

デフォルトで、size属性は-1です。これは、ADF Facesにより、使用するヘッダー・レベルのスタイルが最上位の親コンポーネントから自動的に計算されることを意味します。ネストされているコンポーネントを使用する場合は、size属性を明示的に設定して、表示する適切なヘッダー・スタイルを取得する必要はありません。

注意:

テキストのスタイルはsize属性を使用して強制できますが(最大のテキストが0の場合)、size属性の値は階層には影響しません。影響を受けるのはテキストのスタイルのみです。

ADF Facesにより使用されるデフォルトのスキンでは、サイズ3以上に使用されるスタイルがサイズ2と同じように表示されます。つまり、サイズ3、4または5のスタイルには違いがなく、すべてサイズ2と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

childCreation属性を使用して、子コンポーネントが作成されるタイミングを構成できます。これを行うには、「その他」セクションを開き、childCreationを次のいずれかに設定します。
- immediate: showDetailHeaderコンポーネントが作成されると、すべての子コンポーネントが作成されます。
- lazy: 子コンポーネントは、表示される場合にのみ作成されます。表示され、関連する子コンポーネントがレンダリングされると、コンポーネントはコンポーネント・ツリーに作成されたままになります。
- lazyUncached: 子コンポーネントは、表示される場合にのみ作成されます。コンポーネントは、非表示になると破棄されます。
contentDelivery属性を使用して、非表示の子のコンテンツをクライアントに送信するタイミングを構成できます。これを行うには、「その他」セクションを開き、ContentDeliveryを次のいずれかに設定します。
- immediate: showDetailHeaderコンポーネントが作成されると、すべての非表示のコンテンツが送信されます。
- lazy: 非表示のコンテンツは、コンテンツが初めて表示されるときにのみ送信されます。表示されてコンテンツがレンダリングされると、メモリーに残ります。
- lazyUncached: 非表示のコンテンツは、表示されるたびに作成されます。その後非表示になると、コンテンツは破棄されます。
showDetailHeaderコンポーネントを最大化してブラウザ・ウィンドウ全体でレンダリングできるようにするには、「その他」セクションでShowMaximizedを次のいずれかに設定します。
- 常時: 最大化アイコンが常に表示されます。
- なし: 最大化アイコンは表示されません。
- 自動: 最大化アイコンはモバイル・デバイス上にのみ表示されます。これがデフォルトです。
showDetailHeaderコンポーネントを最大化するようにプログラムで設定することもできます。EL式をmaximized属性の値として使用してtrueに解決したり、この属性を設定してmaximizeListener属性を使用してリスニングするリスナー・メソッドを作成することもできます。
セクションまたはサブセクションにコンテンツを追加するには、必要な子コンポーネントをshowDetailHeaderコンポーネントに挿入します。

8.9.3 panelBoxコンポーネントの使用方法

ページには、任意の数のpanelBoxコンポーネントを挿入できます。

panelBoxコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・ボックス」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開き、使用するランプをRampで選択します。

coreランプでは様々な青が使用され、highlightランプでは様々な黄色が使用されます。使用する色は、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
Backgroundをlight、medium、darkまたはdefaultのいずれかの値に設定します。デフォルトの背景色は透明です。
Textを、コンテナのヘッダー部分のタイトルとして表示するテキスト文字列に設定します。

Iconを、ヘッダー・テキストの前に表示するアイコン・イメージのURIに設定します。

注意:

textおよびicon属性の両方が設定されていない場合、panelBoxコンポーネントのヘッダー部分は表示されません。

注意:

TitleHalignをcenter、start、end、leftまたはrightのいずれかの値に設定します。この値により、コンテナのヘッダー部分のタイトルの横位置(アイコン・イメージを含む)が決定されます。
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをdisclosureListenerメソッドに設定します。

表示イベントおよびリスナーの詳細は、8.9.4項「表示イベントに関する必知事項」を参照してください。
panelBoxコンポーネントの幅を変更するには、inlineStyle属性を希望する正確なピクセル・サイズに設定します。または、inlineStyle属性を、panelBoxコンポーネントが含まれる外側の要素の割合に設定します。例8-11に、幅を変更するために使用するコードを示します。
例8-11 inlineStyle属性が設定されたpanelBoxコンポーネント
```
<af:panelBox inlineStyle="width:50%;" ...>
  
</af:panelBox>
```

ツールバー・ボタンを追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、toolbarファセットにtoolbarをドラッグ・アンド・ドロップします。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarおよびcommandToolbarButtonコンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。

ヒント:

ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。

構造ウィンドウで、panelBoxコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - パネル・ボックス」→「ツールバー」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

childCreation属性を使用して、子コンポーネントが作成されるタイミングを構成できます。これを行うには、「その他」セクションを開き、childCreationを次のいずれかに設定します。
- immediate: panelBoxコンポーネントが作成されると、すべての子コンポーネントが作成されます。
- lazy: 子コンポーネントは、表示される場合にのみ作成されます。表示され、関連する子コンポーネントがレンダリングされると、コンポーネントはコンポーネント・ツリーに作成されたままになります。
- lazyUncached: 子コンポーネントは、表示される場合にのみ作成されます。コンポーネントは、非表示になると破棄されます。
contentDelivery属性を使用して、非表示の子のコンテンツをクライアントに送信するタイミングを構成できます。これを行うには、「その他」セクションを開き、ContentDeliveryを次のいずれかに設定します。
- immediate: panelBoxコンポーネントが作成されると、すべての非表示のコンテンツが送信されます。
- lazy: 非表示のコンテンツは、コンテンツが初めて表示されるときにのみ送信されます。表示されてコンテンツがレンダリングされると、メモリーに残ります。
- lazyUncached: 非表示のコンテンツは、表示されるたびに作成されます。その後非表示になると、コンテンツは破棄されます。
panelBoxコンポーネントを最大化してブラウザ・ウィンドウ全体でレンダリングできるようにするには、「その他」セクションでShowMaximizedを次のいずれかに設定します。
- 常時: 最大化アイコンが常に表示されます。
- なし: 最大化アイコンは表示されません。
- 自動: 最大化アイコンはモバイル・デバイス上にのみ表示されます。これがデフォルトです。
panelBoxコンポーネントを最大化するようにプログラムで設定することもできます。EL式をmaximized属性の値として使用してtrueに解決したり、この属性を設定してmaximizeListener属性を使用してリスニングするリスナー・メソッドを作成することもできます。
表示するコンテナにコンテンツを追加するには、必要なコンポーネントをpanelBoxコンポーネントの子コンポーネントとして挿入します。

通常、panelBoxコンポーネントに子コンポーネントを1つ挿入し、その子コンポーネントに表示するコンテンツを挿入します。この子コンポーネントでコンテンツの表示方法を制御できますが、親のpanelBoxコンポーネントは制御できません。

8.9.4 表示イベントに関する必知事項

showDetail、showDetailHeader、panelBoxコンポーネントなどのように、組込みのイベント機能のあるADF Facesコンポーネントは、formコンポーネントで囲む必要があります。

これらのコンポーネントのdisclosed属性では、ヘッダーの下のコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed属性はtrueで、コンテンツが表示されます。この属性がfalseに設定されていると、コンテンツは非表示になります。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。

disclosed属性の値は実行時に永続可能であるため、ユーザーがコンテンツを表示または非表示にした場合、ADF Facesでは属性値を変更して保持できるので、その値はユーザーのセッション中その状態のままになります。詳細は、第33章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

ユーザーが切替えアイコンをクリックしてコンテンツを表示または非表示にすると、コンポーネントからサーバーにorg.apache.myfaces.trinidad.event.DisclosureEventイベントが送信されます。DisclosureEventイベントには、ソース・コンポーネントおよびその状態、つまり表示(開いている)または非表示(閉じている)に関する情報が含まれています。isExpanded()メソッドは、ノードを開く(表示)か閉じる(非表示)かを決定するboolean値を返します。コンポーネントにそのコンテンツの表示および非表示のみを行わせる場合は、コードを記述する必要はありません。

ただし、DisclosureEventイベントの特別な処理を実行する場合は、コンポーネントのdisclosureListener属性をバッキングBeanのdisclosureListenerメソッドにバインドできます。ユーザーが表示されているまたは非表示のアイコンをクリックするたびに、DisclosureEventイベントへのレスポンスとしてdisclosureListenerメソッドが起動されます。

例8-12に示されているように、disclosureListenerメソッドは、単一のdisclosureEventイベント・オブジェクトを持つpublicメソッドで、戻りタイプがvoidである必要があります。

例8-12 disclosureListenerメソッド

public void some_disclosureListener(DisclosureEvent disclosureEvent) {
// Add event handling code here
}

コンポーネントのimmediate属性がtrueに設定されている場合以外、DisclosureEventイベントはデフォルトでは、アプリケーションの起動フェーズに送信されます。immediate属性がtrueに設定されている場合、イベントは可能なかぎり早期のフェーズ(通常はリクエスト値の適用フェーズ)で送信されます。

クライアント側のコンポーネントでは、AdfDisclosureEventイベントが起動されます。クライアントのAdfDisclosureEventイベントのイベント・ルートは、イベントのソース・コンポーネントに設定されており、disclosed属性がtrueのパネルに対するイベントのみがサーバーに送信されます。クライアント側のイベントおよびイベント・ルートの詳細は、第5章「イベントの処理」を参照してください。

8.10 アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示

非表示および表示できるコンテンツの複数の領域を表示する必要がある場合は、panelAccordionまたはpanelTabbedコンポーネントを使用できます。どちらのコンポーネントでも、showDetailItemコンポーネントを使用して実際のコンテンツを表示します。

panelAccordionコンポーネントを使用すると、開くことのできる一連のペインを作成できます。ユーザーが一度に複数のパネルを開くことや、一度に1つのパネルのみを開くことができるように設定可能です。複数のパネルを開いている場合は、showDetailItemコンポーネントのヘッダーをドラッグして、パネルの高さを調整できます。

パネルが縮小されている場合は、パネル・ヘッダーのみ表示されます。パネルが展開されている場合は、パネル・コンテンツがパネル・ヘッダーの下に表示されます(ユーザーは、panelAccordionコンポーネントのヘッダーまたは展開アイコンをクリックしてペインを展開できます)。図8-38に示されているように、File ExplorerアプリケーションではpanelAccordionコンポーネントを使用して、「フォルダ」および「検索」ペインを表示しています。

図8-38 panelAccordionペイン

実行時、使用可能なブラウザの領域が、開かれたパネルのコンテンツの表示に必要な領域より少ない場合、表示されていないパネルをユーザーが選択して移動できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。図8-39に、「検索」パネルを表示する十分な領域がない場合に、File Explorerアプリケーションの「フォルダ」パネルに表示されるオーバーフロー・アイコンを示します。

図8-39 panelAccordionのオーバーフロー・アイコン

ユーザーがオーバーフロー・アイコンをクリックすると、ユーザーが選択してナビゲートするためのオーバーフロー・ポップアップ・メニューが表示されます(図8-40を参照)。

図8-40 panelAccordionのオーバーフロー・ポップアップ・メニュー

図8-41に示すように、ペインをドラッグ・アンド・ドロップで再配置できるようにpanelAccordionを構成することもできます。

図8-41 ドラッグ・アンド・ドロップで並替えできるペイン

順序が変更されると、showDetailItemコンポーネントのdisplayIndex属性も変更されて新しい順序を反映します。

注意:

オーバーフローしている項目は並替えできません。

panelAccordionコンポーネントの使用方法は、8.10.1項「panelAccordionコンポーネントの使用方法」を参照してください。

panelTabbedコンポーネントを使用すると、タブ付きの一連のペインを作成できます。panelAccordionペインとは異なり、panelTabbedペインは閉じることも開くこともできません。かわりに、ユーザーがタブを選択すると、選択したタブのコンテンツが表示されます。タブは表示領域の上か、表示領域の下、あるいはその両方に表示されます。個々のタブを閉じられるようにpanelTabbedコンポーネントを構成できます。このコンポーネントは、すべてのタブを閉じる、最後のタブを除いてすべて閉じる、またはタブを閉じないように構成できます。タブが閉じられるように構成されている場合、タブの最後にXが表示されます。無効なX(閉じることはできるが、現在無効になっている)が表示されるようにタブを構成することもできます。

各タブのコンテンツを含むshowDetailItemがいつ作成されるかを構成できます。タブが少数の場合は、現在表示されているタブに関係なく、panelTabbedコンポーネントが初めて作成されるときにすべてのshowDetailItemコンポーネントを作成できます。ただし、panelTabbedコンポーネントに多数のshowDetailItemコンポーネントが含まれる場合は、ページのレンダリングが低速になることがあります。パフォーマンスを向上させるには、かわりに対応するタブが選択されたときにのみshowDetailItemコンポーネントを作成するようpanelTabbedコンポーネントを構成できます。さらに、アクセスされるたびに再作成する必要がないように、ユーザーが別のタブを選択した後でshowDetailItemを破棄するか、コンポーネント・ツリーで選択されているshowDetailItemコンポーネントを保持するように、配信メソッドを構成できます。

File ExplorerアプリケーションではpanelTabbedコンポーネントを使用して、図8-42に示されているように、メインのパネルにコンテンツを表示しています。

図8-42 panelTabbedペイン

panelTabbedコンポーネントの使用方法は、8.10.2項「panelTabbedコンポーネントの使用方法」を参照してください。

ヒント:

タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、ナビゲーション・パネル・コンポーネントを使用してナビゲーション・メニューを作成できます。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。

panelAccordionおよびpanelTabbedコンポーネントのどちらの場合でも、showDetailItemコンポーネントを1つ使用して各パネルにコンテンツを配置します。たとえば、4つのペインを使用する場合、panelAccordionまたはpanelTabbedコンポーネントのそれぞれにshowDetailItemコンポーネントを4つ挿入します。showDetailItemコンポーネントを使用するには、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。ツールバーをshowDetailItemコンポーネントのtoolbarファセットに追加でき、ツールバーはパネルまたはタブが表示されると表示されます。図8-42に、File ExplorerアプリケーションのshowDetailItemコンポーネントで使用されているツールバーを示します。

すべてのタブを表示できない場合、panelTabbedコンポーネントでもオーバーフローがサポートされます。オーバーフローの処理方法は、-tr-layout-typeスキニング・キーがどのように構成されているかによって決まります。詳細は、第8.10.6項「スキニングとpanelTabbedコンポーネントに関する必知事項」を参照してください。

パフォーマンスのヒント:

panelAccordionまたはpanelTabbedコンポーネント内の子コンポーネントの数、および子コンポーネントの複雑さが、オーバーフローのパフォーマンスに影響します。可能な場合は、オーバーフローしないように、panelAccordionまたはpanelTabbedコンポーネントのサイズを設定します。

panelAccordionおよびpanelTabbedコンポーネントを拡大するように構成することも、現在表示されているshowDetailItemの子からディメンションを取得するように構成することもできます。

panelAccordionまたはpanelTabbedコンポーネントを拡大するように構成した場合は、単一の子がshowDetailItemコンポーネントの唯一の子であるかぎり、その単一の子を拡大するようにshowDetailItemコンポーネントを構成できます。

8.10.1 panelAccordionコンポーネントの使用方法

1つのページで、通常はページの異なる領域にあるかネストされている複数のpanelAccordionコンポーネントを使用できます。panelAccordionコンポーネントを追加した後に、一連のshowDetailItemコンポーネントを挿入して、1つのパネルに1つのshowDetailItemを使用してペインを配置します。次に、各showDetailItemにコンポーネントを挿入してパネル・コンテンツを配置します。showDetailItemの使用手順は、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。

panelAccordionコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・アコーディオン」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
ユーザーが同時に複数のパネルのコンテンツを開いて参照できるようにする場合は、DiscloseManyをtrueに設定します。

デフォルト値はfalseです。これは、一度に開くことのできるパネルが1つのみであることを意味します。たとえば、最初にページがロードされた際に、開いているパネルAと閉じているパネルBが1つずつあるとします。一度に開くことのできるパネルは1つのみであるため、ユーザーがパネルBを開くとパネルAが閉じます。
ユーザーがすべてのペインを閉じることができるようにする場合は、DiscloseNoneをtrueに設定します。

デフォルト値はfalseです。これは、必ず1つのパネルが開かれたままになることを意味します。

ユーザーがドラッグ・アンド・ドロップしてペインを再配置できるようにする場合は、「その他」セクションを開き、「並替え」をenabledに設定します。デフォルトはdisabledです。

注意:

panelAccordionにshowDetailItemコンポーネント以外のコンポーネントがある場合(手順8のヒントを参照)、それらのコンポーネントはクライアントでのみ並べ替えることができます。したがって、新しい順序は保持されません。

panelAccordionコンポーネントは使用可能なブラウザ領域に合せて拡大できます。かわりに、panelAccordionコンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelAccordionコンポーネントが拡大を処理する方法を変更する必要があります。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。

注意:

これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。

children: panelAccordionコンポーネントは、現在表示されているshowDetailItemコンポーネントからそのディメンションを取得します。

注意:

この設定を使用する場合は、panelAccordionコンポーネントの高さを(たとえばinlineStyleまたはstyleClass属性を通じて)設定できません。設定すると、panelAccordionの高さと子コンポーネントの高さが競合する原因となります。

同様に、showDetailItemコンポーネントのstretchChildren、flexおよびinflexibleHeight属性を設定すると、サイズを決定するためにpanelAccordionへの循環参照が発生するため、これらの属性は設定できません。

parent: panelAccordionコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto: panelAccordionコンポーネントの親コンポーネントがその子の拡大を許可する場合、panelAccordionコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelAccordionコンポーネントはその子コンポーネントのサイズに基づきます。

注意:

panelAccordionを拡大し、showDetailItemのコンテンツも拡大する場合は、特定の方法でshowDetailItemを構成する必要があります。詳細は、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。

デフォルトでは、panelTabbedコンポーネントが作成されると、すべてのshowDetailItem子コンポーネントが作成されます。子が多数の場合は、パフォーマンスを向上するために、タブが選択された場合にのみshowDetailItem子コンポーネントを作成するか、タブが最初に選択された場合にのみshowDetailItem子コンポーネントを作成し、その時点以降、作成されたままになるように、panelTabbedを構成できます。

childCreation属性を使用して、子コンポーネントをいつ作成するかを構成します。これを行うには、「その他」セクションを開き、childCreationを次のいずれかに設定します。
- immediate: panelTabbedコンポーネントが作成されるとすべてのshowDetailItemコンポーネントが作成されます。
- lazy: 関連付けられたタブが選択されたときにのみshowDetailItemコンポーネントが作成されます。タブが選択されると、showDetailItemコンポーネントはコンポーネント・ツリーに作成されたままになります。
- lazyUncached: 関連付けられたタブが選択されたときにのみshowDetailItemコンポーネントが作成されます。別のタブが選択されると、showDetailItemコンポーネントは破棄されます。

デフォルトで、panelAccordionコンポーネントの子コンポーネントとしてshowDetailItemコンポーネントを使用すると、パネルが1つ追加されます。さらにペインを追加するには、panelAccordionコンポーネントにshowDetailItemコンポーネントを挿入します。必要な数だけペインを追加できます。

ヒント:

通常はアコーディオン・パネルの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、アコーディオン・パネルにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。

パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。手順は、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。

8.10.2 panelTabbedコンポーネントの使用方法

panelTabbedコンポーネントを使用してタブ付きのペインを作成する方法は、panelAccordionコンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelTabbedコンポーネントを追加した後で、一連のshowDetailItemコンポーネントを挿入して、表示するタブ付きのパネル・コンテンツを配置します。

panelTabbedコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「タブ付きパネル」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
表示領域のコンテンツの下にタブをレンダリングする場合は、「Position」をbelowに設定します。

デフォルトでは、値はaboveです。これは、タブが表示領域のコンテンツの上にレンダリングされることを意味します。使用できるその他の値はbothで、この場合、タブは表示領域の上と下にレンダリングされます。
ユーザーがタブを閉じられる(削除できる)ようにするには、tabRemovalを設定します。この属性を設定して、すべてのタブの削除、または最後のタブを除くすべてのタブの削除を許可できます。実際に削除するにはハンドラを実装し、関連するshowDetailItemコンポーネントのリスナーを構成する必要があります。個々のタブを削除できない(閉じるアイコンが表示されない)ように、または閉じたアイコンが無効になるように、個々のshowDetailコンポーネントでこれをオーバーライドできます。詳細は、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。

panelTabbedコンポーネントは使用可能なブラウザ領域に合せて拡大できます。かわりに、panelTabbedコンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelTabbedコンポーネントが拡大を処理する方法を変更する必要があります。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。

注意:

dimensionsFrom属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。

disclosedChild: panelTabbedコンポーネントは、現在表示されているshowDetailItemコンポーネントからそのディメンションを取得します。

注意:

この設定を使用する場合は、panelTabbedコンポーネントの高さを(たとえばinlineStyleまたはstyleClass属性を通じて)設定できません。設定すると、panelTabbedの高さと子コンポーネントの高さが競合する原因となります。

parent: panelTabbedコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto: panelTabbedコンポーネントの親コンポーネントがその子の拡大を許可する場合、panelTabbedコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelTabbedコンポーネントはその子コンポーネントのサイズに基づきます。

デフォルトで、panelTabbedコンポーネントの子としてshowDetailItemコンポーネントを使用すると、タブ付きパネルが1つ作成されます。さらにペインを追加するには、panelTabbedコンポーネントにshowDetailItemコンポーネントを挿入します。必要な数だけタブ付きのペインを追加できます。

ヒント:

通常はpanelTabbedコンポーネントの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、panelTabbedコンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。

パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。showDetailItemの使用方法の詳細は、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。

8.10.3 panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法

showDetailItemコンポーネントは、panelAccordionまたはpanelTabbedコンポーネントにのみ挿入します。各showDetailItemコンポーネントは、各アコーディオン・パネルまたはタブ付きパネルに対応します。一般的に、親コンポーネントに2つ以上のshowDetailItemコンポーネントを挿入します。表示する子コンポーネントをshowDetailItemコンポーネントに挿入します。

showDetailItemコンポーネントのdisclosed属性では、対応するアコーディオン・パネルまたはタブのコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed属性はfalseで、コンテンツは非表示(閉じた状態)になります。この属性がtrueに設定されていると、コンテンツは表示(開いた状態)されます。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。

次の手順では、8.10.1項「panelAccordionコンポーネントの使用方法」および8.10.2項「panelTabbedコンポーネントの使用方法」の説明に従って、JSFページにpanelAccordionまたはpanelTabbedコンポーネントをそれぞれ追加済であると仮定しています。

showDetailItemコンポーネントを使用してアコーディオン・パネルまたはタブ付きパネルのコンテンツを追加する手順:

コンポーネント・パレットの「共通コンポーネント」パネルから、「詳細アイテムの表示」コンポーネントをドラッグ・アンド・ドロップし、panelAccordionまたはpanelTabbedなどの親コンポーネント内に、showDetailItemコンポーネントを1つ以上挿入します。
プロパティ・インスペクタで、「外観」セクションを開きます。
Textを、このパネルまたはタブに表示するラベルに設定します。

ラベルの前にアイコンを追加するには、Iconを、使用するイメージ・ファイルのURIに設定します。

注意:

showDetailItemコンポーネントが、拡大されるように構成されたpanelAccordionコンポーネント内で使用されている場合は、showDetailItemとそのコンテンツを拡大するように構成できますが、showDetailItemコンポーネントには1つの子コンポーネントのみ含まれている必要があります。各showDetailItemコンポーネントのFlexおよびStretchChildrenを設定する必要があります。

注意:

panelAccordionを拡大しないように設定(dimensionsFromをchildrenに設定)した場合は、サイズを求めるのに循環参照がpanelAccordionに戻されるため、flexおよびstretchChildren属性の値を設定できません。

各showDetailItemコンポーネントに次の属性を使用して、パネル・コンテンツの柔軟性を制御します。

Flex: 1つのpanelAccordionコンポーネントのshowDetailItemコンポーネントにどのくらいの領域が配分されるかを決定する負でない整数を指定します。デフォルトではflex属性の値は0(ゼロ)で、各showDetailItemコンポーネントのパネル・コンテンツはフレキシブルではありません。パネルのフレキシブルなコンテンツを有効にするには、1または2など、flexに0より大きい数値を指定します。flex値が大きいと、コンテンツは、flex値の小さいコンポーネントより大きくなります。フレキシブルなコンテンツが2つの場合、その高さは割り当てられたflex値に正確に比例します。コンポーネントAではflexが2に設定されていて、コンポーネントBではflexが1に設定されている場合、コンポーネントAの高さはコンポーネントBの2倍です。
InflexibleHeight: パネルで使用するピクセル数を指定します。デフォルトは100ピクセルです。パネルのflex値が0(ゼロ)の場合、ADF Facesによりそのパネルに100ピクセルが使用され、ゼロ以外のパネルに残りの領域が配分されます。指定されたinflexibleHeight値を考慮した場合に、パネルのコンテンツがpanelAccordionコンテナ内に収まらない際には、ADF Facesにより近くのコンテンツが自動的にオーバーフロー・メニューに移動されます(図8-40を参照)。また、パネルのflex値がゼロ以外の場合は、その値が、その他のパネルがオーバーフロー・メニューに移動する前に、パネルが縮小される最低の高さになります。
StretchChildren: firstに設定されている場合、単一の子コンポーネントが拡大されます。ただし、拡大できる子コンポーネントであることが必要です。詳細は、8.10.4項「ジオメトリ管理およびshowDetailItemコンポーネントに関する必知事項」を参照してください。

たとえば、File Explorerアプリケーションでは、showDetailItemコンポーネントを使用してナビゲータ・パネルにコンテンツが表示されています。両方のナビゲータが開かれている場合「検索」ナビゲータにはより多くの領域が必要なため、flex属性は2に設定され、「フォルダ」ナビゲータのshowDetailItemコンポーネントにはデフォルトのflex値1が使用されています。この設定により、「検索」ナビゲータが開かれている場合は、「フォルダ」ナビゲータより大きくなります。

注意:

File Explorerアプリケーションでは、flex属性に直接値を設定するかわりに、値の決定に使用されるメソッドに解決されるEL式が使用されています。EL式を使用すると、メタデータを使用してモデル情報を指定することを後から決めた場合に、プログラムで値を変更できます。

ユーザーは、実行時にパネルの高さを変更して、flexおよびinflexibleHeight属性の値を変更できます。これらの値は、ユーザーのセッション中に変わらないように永続化できます。詳細は、第33章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

フレキシブルなアコーディオン・パネル・コンテンツに関する次の追加情報に注意してください。

ADF Facesでフレキシブルなコンテンツを有効にするには、flex値が0より大きいペイン(showDetailItemコンポーネント)が2つ以上必要です。これは、ADF Facesでは、パネル・コンテンツにどのくらいの領域を割り当てるかの決定に、2つのコンポーネントのflexの割合が使用されているためです。実行時、フレキシブルなコンテンツの表示の結果を確認するには、2つ以上のペインが開かれている必要があります。
showDetailItemコンポーネントの子コンポーネントが1つのみでflex値がゼロ以外の場合、かつstretchChildren属性がfirstに設定されている場合、ADF Facesにより、panelAccordionコンポーネントのdiscloseMany属性の値にかかわらずその子コンポーネントが拡大されます。
すべてのshowDetailItemコンポーネントに0(ゼロ)のflex値があり、それらのパネル・コンテンツが表示されている場合、表示されるコンテンツが非フレキシブルに設定されていても、ADF Facesは最後に表示されたshowDetailItemコンポーネントのコンテンツを、コンポーネントのflex値が1であるかのように拡大しますが、それはshowDetailItemコンポーネントの子が1つのみであり、stretchChildren属性がfirstに設定されている場合だけです。最後に表示されたパネルに複数の子コンポーネントがあるか、stretchChildren属性がnoneに設定されている場合、コンテンツは拡大されません。

flex属性が設定されていても、ジオメトリ管理に関する制限事項があります。詳細は、8.10.4項「ジオメトリ管理およびshowDetailItemコンポーネントに関する必知事項」を参照してください。

「動作」セクションを開きます。DisclosureListenerを、ユーザーがこのパネルまたはタブを選択した場合に実行するバッキングBeanのdisclosureListenerメソッドに設定します。

サーバーの表示イベントおよびイベント・リスナーの詳細は、8.9.4項「表示イベントに関する必知事項」を参照してください。
このパネルまたはタブを無効(ユーザーがパネルまたはタブを選択できない状態)にする場合は、Disabledをtrueに設定します。

このパネルまたはタブの子コンポーネントを表示する場合は、Disclosedをtrueに設定します。

disclosed属性は、デフォルトでfalseに設定されています。これは、このパネルまたはタブのコンテンツが非表示になることを意味します。

注意:

disclosedとrendered属性の違いに注意してください。rendered属性の値がfalseの場合、ユーザーはそのアコーディオン・ヘッダー・バーまたはタブ・リンク、およびその対応するコンテンツを使用できません。ただし、disclosed属性がfalseに設定されている場合は、その項目のコンテンツが現在は非表示でも、アコーディオン・ヘッダー・バーまたはタブ・リンクが表示されているため、ユーザーは表示することが可能です。

disclosed属性がtrueに設定されているshowDetailItemコンポーネントがない場合は、ADF Facesにより、最初に有効にされたshowDetailItemコンポーネントのコンテンツが自動的に表示されます(panelAccordionコンポーネントの子で、表示されないペインの設定が行われている場合を除きます)。

注意:

コンテンツを表示または非表示にすることで、ユーザーはdisclosed属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第33章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

panelAccordionコンポーネントで使用されるshowDetailItemコンポーネントの場合は、「その他」セクションを開き、displayIndexを設定して、showDetailItemコンポーネントが表示される順序が反映されるようにします。単純にページのコード内での順序で表示する場合は、デフォルトの-1のままにします。

ヒント:

一部のshowDetailItemコンポーネントのdisplayIndexの値が-1で、他のコンポーネントでは正の数である場合、-1の値のコンポーネントは、正の数を持つコンポーネントより後に、ページのコードに出現する順序で表示されます。

ヒント:

親panelAccordionコンポーネントが並替えを許可するように構成されている場合は、この値を実行時に変更できます。

panelTabbedコンポーネントのタブを削除できるようにする場合は、「その他」セクションを開き、「削除」を次のいずれかに設定します。
- inherit: 対応するタブは、親panelTabbedコンポーネントで許可されている場合に削除できます。これがデフォルトです。
- no: 対応するタブは削除できず、閉じるアイコンは表示されません。
- disabled: 対応するタブには無効な閉じるアイコンが表示されます。
ItemListenerを、コンポーネントの実際の削除を処理するハンドラ・メソッドに解決されるEL式に設定します。

ツールバー・ボタンをパネル(panelAccordionのみでサポート)に追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、そのパネルを定義するshowDetailItemコンポーネントのtoolbarファセットに、toolbarを挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarファセットがshowDetailItemコンポーネントにある場合でも、ツールバーおよびボタンをレンダリングするのはpanelAccordionコンポーネントです。toolbarおよびcommandToolbarButtonの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。

注意:

アコーディオン・パネルが閉じている場合、ツールバーおよびそのボタンは表示されません。ツールバーおよびそのボタンは、パネルが開かれている場合にのみ、パネル・ヘッダーに表示されます。

パネルにコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。

8.10.4 ジオメトリ管理およびshowDetailItemコンポーネントに関する必知事項

panelAccordionまたはpanelTabbedコンポーネントは、子コンポーネントの拡大にジオメトリ管理を使用するコンポーネントに配置された場合、どちらも拡大されるように構成できます。ただし、panelAccordionコンポーネントでは、showDetailItemコンポーネントが拡大されるのは、panelAccordionコンポーネントのdiscloseMany属性がtrueに設定されている場合(つまり、フレキシブルでないコンテンツまたはフレキシブルなコンテンツを表示するために複数のペインが開かれる場合)、showDetailItemコンポーネントに含まれる子コンポーネントが1つのみの場合、およびshowDetailItemコンポーネントのstretchChildren属性がfirstに設定されている場合のみです。デフォルトでは、パネル・コンテンツは拡大されません。

次のような場合にはshowDetailItemコンポーネントが拡大されます。

含まれる子が1つのみの場合
stretchChildren属性がfirstに設定されている場合
子に幅、高さ、境界およびパディングが設定されていない場合
子が拡大可能である場合

前述の項目がすべてtrueの場合、showDetailItemコンポーネントは子コンポーネントを拡大できます。次に、showDetailItemコンポーネント内で拡大可能なコンポーネントを示します。

inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard(拡大するように構成されている場合)
panelGridLayout (gridRowおよびgridCellコンポーネントが拡大するように構成されている場合)
panelGroupLayout (layout属性がscrollまたはverticalに設定されている場合のみ)
panelSplitter(拡大するように構成されている場合)
panelStretchLayout(拡大するように構成されている場合)
panelTabbed(拡大するように構成されている場合)
region
table(拡大するように構成されている場合)
tree(拡大するように構成されている場合)
treeTable(拡大するように構成されている場合)

showDetailItemコンポーネント内に配置した場合、次のコンポーネントは拡大されません。

panelBorderLayout
panelFormLayout
panelGroupLayout (layout属性がdefaultまたはhorizontalに設定されている場合のみ)
panelHeader
panelLabelAndMessage
panelList
tableLayout (MyFaces Trinidadコンポーネント)

拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントの子として配置することはできません。そのため、showDetailItemコンポーネントの子として拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない別のコンポーネントでそのコンポーネントをラップする必要があります。

たとえば、panelListコンポーネントにコンテンツを配置し、showDetailItemコンポーネント内に表示されるようにする場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをshowDetailItemコンポーネントの子として配置し、panelListコンポーネントをそのコンポーネントに配置します。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

8.10.5 showDetailItem表示イベントに関する必知事項

panelAccordionおよびpanelTabbedコンポーネント内のshowDetailItemコンポーネントでは表示イベントのキューイングがサポートされるため、サーバーおよびクライアントで検証が適切に処理されます。

一般に、disclosed属性を持つコンポーネントの場合、デフォルトで、クライアントのAdfDisclosureEventのイベント・ルートはイベントのソース・コンポーネントに設定されており、disclosed属性がtrueのパネルに対するイベントのみがサーバーに送信されます。ただし、panelTabbedまたはpanelAccordionコンポーネント内に使用されているshowDetailItemコンポーネントの場合、イベント・ルートはpanelTabbedまたはpanelAccordionコンポーネントです(つまり、イベント・ソースの親コンポーネントではなく、イベント・ソース・コンポーネントです)。このため、前に開かれたパネルの値はサーバーに送信されません。

たとえば、panelTabbedまたはpanelAccordionコンポーネント内にshowDetailItemコンポーネントが2つあり、discloseMany属性がfalseに、discloseNone属性がfalseに設定されているとします。showDetailItem 1コンポーネントは開かれ、showDetailItem 2は開かれていないとします。このシナリオでは次のようになります。

クライアント:
- ユーザーがshowDetailItem 2をクリックして表示すると、クライアントのみの表示イベントが発生して、showDetailItem 1コンポーネントのdisclosed属性がfalseに設定されます。この最初のイベントが取り消されない場合、別のクライアントの表示イベントが発生し、showDetailItem 2コンポーネントのdisclosed属性がtrueに設定されます。この2番目のイベントが取り消されない場合、イベントはサーバーに送信されます。それ以外の場合、表示はそれ以上変更されません。
サーバー:
- サーバーの表示イベントが発生して、showDetailItem 2コンポーネントのdisclosed属性がtrueに設定されます。この最初のサーバー・イベントが取り消されない場合、別のサーバーの表示イベントが発生し、showDetailItem 1コンポーネントのdisclosed属性がfalseに設定されます。どちらのサーバー・イベントも取り消されない場合は、その新規状態がレンダリングされ、ユーザーはクライアントで新しく公開した状態を確認できます。それ以外の場合、クライアントは以前と同じように見えます。

discloseMany属性がfalseに、discloseNone属性がtrueに設定されているpanelAccordionコンポーネントの場合、この情報が当てはまるのは、表示の変更が両方の変更を強制する場合(2つの表示状態が関連する場合)のみです。表示の変更が片方のみの場合、クライアントとサーバーの表示イベントは1つずつです。

discloseMany属性がtrue(および任意のdiscloseNone設定)に設定されているpanelAccordionの場合、実行される表示の変更は1つのみで、クライアントとサーバーの表示イベントは1つずつです。

表示イベントの詳細は、8.9.4項「表示イベントに関する必知事項」を参照してください。

8.10.6 スキニングとpanelTabbedコンポーネントに関する必知事項

-tr-layout-typeスキニング・キーを使用すると、親コンテナが小さすぎてすべてのタブを表示できない場合のpanelTabbedコンポーネントでのオーバーフローの処理方法を構成できます。この圧縮レイアウトでは、1つ以上のオーバーフロー・ボタンを表示するか、コンベア・ベルトのように、非表示になっているタブを順に広げて表示できます。

図8-43にオーバーフローの圧縮レイアウトを示します。ユーザーがオーバーフロー・アイコンをクリックすると、非表示になっているアイテムがポップアップに表示されます。

図8-43 オーバーフローの圧縮レイアウト

例8-13に、スキニング・キーを使用してオーバーフローのレイアウトを表示する方法を示します。

例8-13 スキニング・キーを使用して圧縮レイアウトをオーバーフローにする設定

af|panelTabbed {
  -tr-layout-type: overflow;
}

図8-44にコンベアによる圧縮レイアウトを示します。ユーザーがオーバーフロー・アイコンをクリックすると、コンベア・ベルトの場合のように、非表示になっていたタブが順に表示域に移動してきます。その結果、反対側にあるタブは非表示になります。

図8-44 コンベア・ベルトによる圧縮レイアウト

例8-14に、スキニング・キーを使用してコンベア・ベルトによるレイアウトを使用する方法を示します。

例8-14 スキニング・キーを使用して圧縮レイアウトをコンベア・ベルトにする設定

af|panelTabbed {
  -tr-layout-type: conveyor;
}

注意:

panelTabbedコンポーネントで圧縮レイアウトをサポートするには、親コンポーネントが子を拡大するようになっているか、親コンポーネントに特定の幅が設定されている必要があります。

したがって、次のレイアウト構成はサポートされません。

子を拡大しない親コンテナを使用する。
それぞれの子に明示的なサイズを指定せず、複数の子を水平に表示する親コンテナを使用する。たとえば、layout='horizontal'の場合、panelGroupLayoutは無効ですが、panelSplitterであれば明示的にスプリッタ位置が指定されているので有効になります。
幅の値をパーセンテージで割り当てるstyleClassまたはinlineStyleを持つ圧縮レイアウト・コンポーネントを設定する。圧縮レイアウト・コンポーネントにstyleClass='AFStretchWidth'を割り当てる場合もこれに該当します。

スキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

8.11 静的ボックスの項目の表示

panelHeaderコンポーネントは、メッセージの表示や関連するヘルプ・トピックなどのヘッダー・タイプ機能が必要な場合に使用できますが、コンテンツの表示および非表示機能を指定する必要はありません。

ページの別のルック・アンド・フィールに遷移する必要がある場合は、decorativeBoxコンポーネントを使用できます。decorativeBoxコンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、使用しているスキンに応じて、デフォルトのテーマを使用する場合、decorativeBoxコンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。テーマおよびスキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

panelHeaderコンポーネントには、特定タイプのコンポーネント用のファセットや、ヘッダーからヘルプ・トピックを起動する機能があります。次に、panelHeaderコンポーネントでサポートされているファセットを示します。

context: ヘッダーのヘッダー・テキストの横に情報を表示します。
help: ヘルプ情報を表示します。後方互換性が必要な場合にのみ使用します。かわりに、panelHeaderコンポーネントではhelpTopicId属性を使用します。
info: ヘッダー・テキストの下に情報を表示します。右揃えになります。
legend: ヘルプ・テキストが存在する場合は、ヘルプ・コンテンツの左側でinfoファセットのコンテンツの下に情報が表示されます。ヘルプ・テキストが存在しない場合、legendコンテンツはヘッダーの下に直接レンダリングされます。
toolbar: メニュー・バーの前にツールバーを表示します。
menuBar: ツールバーの後ろにメニュー・バーを表示します。

図8-45に、panelHeaderコンポーネントの様々なファセットを示します。

図8-45 panelHeaderおよびそのファセット

タイトル行のすべてのファセットにすべてを表示するのに十分な領域がない場合、panelHeaderテキストが切り捨てられ、省略記号が表示されます。ユーザーが切り捨てられたテキスト上にカーソルを起動すると、図8-46に示すように、ツールチップに完全なテキストが表示されます。

図8-46 panelHeaderが切り捨てられた場合のテキスト

コンテンツを表示するのに十分な領域がある場合は、図8-47に示すように、contextファセットとツールバーの間に追加の領域が配置されます。

図8-47 ツールバーの前に追加された領域

セクションの階層を表すようにpanelHeaderコンポーネントを構成できます。たとえば、図8-48に示されているように、サブヘッダーのあるメイン・ヘッダーおよびサブヘッダーのあるヘッダー・レベル1を表示できます。

図8-48 panelHeaderコンポーネントを使用したサブセクションの作成

それぞれにpanelHeaderコンポーネントをネストさせてサブセクションを作成します。panelHeaderコンポーネントをネストさせると、階層に応じてヘッダー・テキストが自動的にサイズ調整され、一番外側のpanelHeaderコンポーネントのテキストが最も大きくなります。

注意:

panelHeaderコンポーネントの使用の詳細は、8.11.1項「panelHeaderコンポーネントの使用方法」を参照してください。

decorativeBoxコンポーネントには、テーマを使用したスタイル設定機能が用意されています。これには、topとcenterの2つのファセットがあります。topファセットは色のない領域を提供し、centerファセットは実際のボックスです。topファセットの高さは、コンポーネントがtopファセットに配置されているかどうかに依存します。ファセットが設定されていると、topHeight属性を使用して、コンテンツが占めるサイズが指定されます。

centerファセットのボックスの色は、使用されるテーマとスキンによって決まります。図8-49に、デフォルトで使用できる様々なテーマを示します。

図8-49 decorativeBoxコンポーネントで使用されているテーマ

decorativeBoxコンポーネントは親コンポーネントに合せて拡大できます。子コンポーネントからディメンションを継承するようにdecorativeBoxコンポーネントを構成することもできます。たとえば、図8-50は、親に合せて拡大されるように構成された暗いテーマのdecorativeBoxコンポーネントを示していますが、標準テーマのdecorativeBoxは、最大で子outputTextコンポーネントと同じ大きさになるように構成されています。

図8-50 拡大できる、または拡大できないdecorativeBox

スキンを使用して、decorativeBoxコンポーネントのスタイルをさらに制御できます。スキニング・キーは、次のコンポーネント領域に対して定義できます。

top-start
top
top-end
start
end
bottom-start
bottom
bottom-end

スキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

8.11.1 panelHeaderコンポーネントの使用方法

panelHeaderコンポーネントを1つ使用して特定の情報を指定することも、一連のpanelHeaderコンポーネントをネストさせてコンテンツの階層組織を作成することもできます。コンテンツを表示および非表示にできるようにする場合は、かわりにshowDetailHeaderコンポーネントを使用します。詳細は、8.9.2項「showDetailHeaderコンポーネントの使用方法」を参照してください。

panelHeaderコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・ヘッダー」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開きます。
Textを、このパネルに表示するラベルに設定します。

ラベルの前にアイコンを追加するには、Iconを、使用するイメージ・ファイルのURIに設定します。

注意:

特定のメッセージ情報の表示にヘッダーを使用している場合は、MessageTypeを次のいずれかの値に設定します。

confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
none: デフォルト。アイコンは表示されません。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。

図8-51に、様々なメッセージ・タイプに使用されるアイコンを示します。

図8-51 メッセージ・タイプのアイコン

注意:

ヘッダーにヘルプを表示するには、HelpTopicIdにトピックIDを入力します。ヘルプ・トピックの作成および使用方法の詳細は、17.5項「コンポーネントへのヘルプの表示」を参照してください。

コンポーネントの見出しレベルをオーバーライドするには、headerLevelを目的のレベル(H1、H2などからH6)に設定します。

見出しレベルは、特にスクリーン・リーダー・アプリケーションで使用する場合に、正しいページ構造を決定するのに使用されます。デフォルトで、headerLevelは-1に設定されており、ページの物理的位置に基づいて、ヘッダーでサイズを決定できます。つまり、最初のヘッダー・コンポーネントはH1に設定されます。そのH1コンポーネントにネストされるヘッダー・コンポーネントはH2などに設定されます。

注意:

見出し階層の構造ではなく、ヘッダー・テキストのサイズのみを変更する場合は、size属性を設定します。

注意:

panelHeaderコンポーネントによるジオメトリ管理の処理方法を制御するには、「その他」セクションを開き、「タイプ」を次のいずれかに設定します。ジオメトリ管理の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
- flow: コンポーネントは拡大されないか、子を拡大しません。panelHeaderコンポーネントの高さは、その子によってのみ決定されます。
- stretch: コンポーネントは拡大され、その子を拡大します(単一の子コンポーネントのみ拡大します)。
- default: panelHeaderコンポーネントの親コンポーネントでジオメトリ管理を決定する場合。
パネルにツールバー・ボタンを追加するには、toolbarコンポーネントをtoolbarファセットに挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarおよびcommandToolbarButtonの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。

注意:

panelHeaderコンポーネントでは、ツールバーのオーバーフローはサポートされていません。

パネルにメニューを追加するには、menuBarファセットにmenuコンポーネントを挿入します。メニュー・バーへのメニュー作成の詳細は、14.2項「メニュー・バーでのメニューの使用方法」を参照してください。

ヒント:

必要に応じて、その他のファセットにコンテンツを追加します。

ヒント:

ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。

構造ウィンドウで、panelHeaderコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - パネル・ヘッダー」→「facet name」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

パネルにコンテンツを追加するには、必要な子コンポーネントをpanelHeaderコンポーネントに挿入します。

8.11.2 decorativeBoxコンポーネントの使用方法

decorativeBoxコンポーネントを使用して、ページに色付きの領域またはボックスを配置します。このコンポーネントは、通常、タブを表示するように構成されているnavigationPaneコンポーネントのコンテナとして使用されます。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。

decorativeBoxコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「装飾ボックス」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開き、Top Heightをtopファセットの高さに設定します。
テーマを変更するには、「スタイルおよびテーマ」セクションを開き、別のテーマを選択します。

decorativeBoxコンポーネントは使用可能なブラウザ領域に合せて拡大できます。かわりに、decorativeBoxコンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、decorativeBoxコンポーネントが拡大を処理する方法を変更する必要があります。

dimensionsFrom属性を使用して、コンポーネントが拡大されるかどうかを構成します。

注意:

dimensionsFrom属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。

children: decorativeBoxコンポーネントは、子コンポーネントからディメンションを取得します。

注意:

この設定を使用する場合は、topファセットの高さの設定に割合を使用できません。使用すると、topファセットはこのdecorativeBoxコンポーネントのサイズからディメンションを取得しようとしますが、decorativeBoxコンポーネントはそのコンテンツから高さを取得するため取得できず、循環依存関係が発生します。割合が使用される場合、それは無視され、デフォルトの50pxがかわりに使用されます。

同様に、decorativeBoxの高さを(たとえばinlineStyleまたはstyleClass属性を通じて)設定することはできません。設定すると、decorativeBoxの高さと子コンポーネントの高さが競合する原因となります。

parent: decorativeBoxコンポーネントのサイズは、次の順序で決定されます。
- inlineStyle属性から。
- inlineStyleの値が存在しない場合、親コンテナによってサイズが決定されます。
- 親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto: decorativeBoxコンポーネントの親コンポーネントがその子の拡大を許可する場合、decorativeBoxコンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、decorativeBoxコンポーネントはその子コンポーネントのサイズに基づきます。

詳細は、8.11.3項「ジオメトリ管理およびdecorativeBoxコンポーネントに関する必知事項」を参照してください。

8.11.3 ジオメトリ管理およびdecorativeBoxコンポーネントに関する必知事項

decorativeBoxコンポーネントは、そのcenterファセット内の子コンポーネントを拡大でき、このコンポーネント自体も拡大できます。次のコンポーネントは、decorativeBoxコンポーネントのcenterファセット内で拡大できます。

inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard
panelGridLayout (gridRowおよびgridCellコンポーネントが拡大するように構成されている場合)
panelGroupLayout (layout属性がscrollまたはverticalに設定されている場合のみ)
panelSplitter(拡大するように構成されている場合)
panelStretchLayout(拡大するように構成されている場合)
panelTabbed(拡大するように構成されている場合)
region
table(拡大するように構成されている場合)
tree(拡大するように構成されている場合)
treeTable(拡大するように構成されている場合)

decorativeBoxコンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。

panelBorderLayout
panelFormLayout
panelGroupLayout (layout属性がdefaultまたはhorizontalに設定されている場合のみ)
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout (MyFaces Trinidadコンポーネント)

拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、decorativeBoxコンポーネントのファセットに拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない遷移コンポーネントでそのコンポーネントをラップします。

たとえば、panelBoxコンポーネントにコンテンツを配置し、decorativeBoxコンポーネントのファセットに配置するように設定する場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをdecorativeBoxコンポーネントのファセットに配置し、panelBoxコンポーネントをそのpanelGroupLayoutコンポーネントに配置します。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。

8.12 1つ以上の列における箇条書きリストの表示

panelListコンポーネントは、図8-52に示されているように、それぞれの隣に黒丸が付いた子コンポーネントの垂直のリストを表示するためのレイアウト要素です。rendered属性がtrueに設定されている子コンポーネント、およびvisible属性がtrueに設定されている子コンポーネントのみが、リストの順で表示の対象となります。

注意:

動的データ(JSFバインディングによって実行時に決定されるデータのリストなど)を表示するには、9.6項「選択コンポーネントの使用方法」で説明されているように選択コンポーネントを使用します。モデル・レイヤーを変更するリストを作成する必要がある場合は、第11章「値リスト・コンポーネントの使用方法」を参照してください。

図8-52 デフォルトの黒丸が付いたpanelListコンポーネント

デフォルトで、黒丸は子コンポーネントのスタイルの設定に使用されます。四角や白丸など、使用できるスタイルは他にもあります。表示する項目のリストが非常に長い場合は、リストを列に分割することもできます。

8.12.1 panelListコンポーネントの使用方法

項目のリストを1つ作成するには、panelListコンポーネントを1つ使用します。

panelListコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・リスト」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開き、listStyle属性を、次のような有効なCSS 2.1のリスト・スタイル値のいずれかに設定します。
- list-style-type: disc
- list-style-type: square
- list-style-type: circle
- list-style-type: decimal
- list-style-type: lower-alpha
- list-style-type: upper-alpha
たとえば、list-style-type: disc属性の値は黒丸に対応し、list-style-type: circle値は白丸に対応します。

使用する有効なスタイル値の完全なリストは、次のサイトにある生成されたリストに関するCSS 2.1の仕様を参照してください。

http://www.w3.org/TR/CSS21/generate.html

例8-15に、リストのスタイルをcircleに設定するコードを示します。
例8-15 listStyle属性が設定されたpanelListコンポーネント
```
<af:panelList listStyle="list-style-type: circle" ...>
  
</af:panelList>
```

panelListコンポーネントに(箇条書き項目として表示する)必要な数の子コンポーネントを挿入します。

ヒント:

通常はパネル・リストの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、パネル・リストにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。

たとえば、一連のcommandLinkコンポーネントまたはoutputFormattedコンポーネントを挿入できます。

注意:

ADF Facesでは、デフォルトで、panelListコンポーネントのレンダリングされたすべての子コンポーネントは単一の列に表示されます。リストを2列以上に分割する方法、およびrowsおよびmaxColumns属性の使用方法の詳細は、8.7項「フォームでのコンテンツの配置」を参照してください。panelListおよびpanelFormLayoutコンポーネントでの列表示に対するrowsおよびmaxColumns属性の使用の概念も同じです。

8.12.2 リスト階層の作成に関する必知事項

panelListコンポーネントをネストさせて、リスト階層を作成できます。図8-53に示されているように、リスト階層には外部項目と内部項目があり、外部項目に属する内部項目は外部項目の下にインデント表示されます。内部項目の各グループは、ネストした単一のpanelListコンポーネントによって作成されます。

図8-53 ネストしたpanelListコンポーネントを使用して作成された階層リスト

図8-53のようなリスト階層を作成するには、groupコンポーネントを使用して、外部項目とその内部項目の各グループを構成するコンポーネントをラップします。例8-16に、4つの内部項目を持つ外部項目が1つと、2つの内部項目を持つ別の外部項目があるリスト階層の作成方法に関するコードを示します。

例8-16 ネストしたpanelListコンポーネント

<af:panelList>
  <!-- First outer item and its four inner items -->
  <af:group>
    <af:commandLink text="item 1"/>
    <af:panelList>
      <af:commandLink text="item 1.1"/>
      <af:commandLink text="item 1.2"/>
      <af:commandLink text="item 1.3"/>
      <af:commandLink text="item 1.4"/>
    </af:panelList>
   </af:group>
  <!-- Second outer item and its two inner items -->
  <af:group>
    <af:commandLink text="item 2"/>
    <af:panelList>
      <af:commandLink text="item 2.1"/>
      <af:commandLink text="item 2.2"/>
    </af:panelList>
   </af:group>
</af:panelList>

デフォルトで、外部リスト項目(item 1およびitem 2など)は黒丸の箇条書きスタイルで、内部リスト項目(item 1.1およびitem 2.1など)は白丸の箇条書きスタイルで表示されます。

panelGroupLayoutコンポーネントの詳細は、8.13項「関連する項目のグループ化」を参照してください。

8.13 関連する項目のグループ化

類似する項目を親コンポーネント内に保持するには、groupまたはpanelGroupLayoutコンポーネントを使用します。groupコンポーネントは、意味的に関連のある子コンポーネントを集約またはグループ化します。panelGroupLayoutコンポーネントとは異なり、groupコンポーネントはその子コンポーネントのレイアウトを提供しません。単独で使用される場合、groupコンポーネントは何もレンダリングしません。実行時にgroupコンポーネントの内部の子コンポーネントのみレンダリングされます。

関連するコンポーネントのグループ化には、任意の数のgroupコンポーネントを使用できます。たとえば、panelFormLayoutコンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例8-17に、panelFormLayoutコンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。

例8-17 panelFormLayoutの子コンポーネントのグループ化

<af:panelFormLayout>
  <af:inputDate label="Pick a date"/>
  <!-- first group -->
  <af:group>
    <af:selectManyCheckbox label="Select all that apply">
      <af:selectItem label="Coffee" value="1"/>
      <af:selectItem label="Cream" value="1"/>
      <af:selectItem label="Low-fat Milk" value="1"/>
      <af:selectItem label="Sugar" value="1"/>
      <af:selectItem label="Sweetener"/>
    </af:selectManyCheckbox>
    <af:inputText label="Special instructions" rows="3"/>
  </af:group>
  <!-- Second group -->
  <af:group>
    <af:inputFile label="File to upload"/>
    <af:inputText label="Enter passcode"/>
  </af:group>
  <af:inputText label="Comments" rows="3"/>
  <af:spacer width="10" height="15"/>
  <f:facet name="footer"/>
</af:panelFormLayout>

panelGroupLayoutコンポーネントを使用すると、図8-54に示すように、折り返さずに一連の子コンポーネントを縦または横に配置することも、折り返して続けて配置することもできます。layout属性の値により子コンポーネントの配置が決定されます。

図8-54 panelGroupLayoutの配置

すべての配置において、panelGroupLayoutコンポーネントのseparatorファセットを使用して、隣接する子コンポーネントの各ペアを線または空白で区切ることができます。詳細は、8.14項「空白または線を使用したコンテンツの分割」を参照してください。

横のレイアウトを使用する場合は、子コンポーネントを縦または横に並べることもできます。図8-55に示すように、上部の位置を合せて、高いコンポーネントの隣に低いコンポーネントを作成できます。

図8-55 上部の位置を合せた水平レイアウトのpanelGroupLayout

panelSplitterまたはpanelStretchLayoutコンポーネントとは異なり、panelGroupLayoutコンポーネントでは子コンポーネントは拡大されません。ページのルート・コンポーネントとしてpanelSplitterまたはpanelStretchLayoutコンポーネントを使用し、配置するが拡大しない子コンポーネントが多数あるとします。子コンポーネントを配置する際にスクロールバーを表示するには、layout属性がscrollに設定されたpanelGroupLayoutコンポーネントで子コンポーネントをラップし、そのpanelGroupLayoutコンポーネントをpanelSplitterまたはpanelStretchLayoutコンポーネントのファセットに配置します。

panelGroupLayoutコンポーネントでlayout属性がscrollに設定されていて、panelGroupLayoutコンポーネントに含まれているコンテンツがpanelGroupLayoutコンポーネント自体より大きい場合、ADF Facesでは、実行時に自動的にスクロールバーが表示されます。スクロールバーを有効にするコードを記述する必要も、オーバーフローを制御するインライン・スタイルを設定する必要もありません。

たとえば、ユーザーによる子コンポーネントのコンテンツの表示や非表示を可能にするpanelSplitterコンポーネントなどのレイアウト・コンポーネントを使用する際には、コンテンツが表示された場合にスクロールバーを表示するためのコードや、コンテンツが非表示にされた場合にスクロールバーを非表示にするためのコードを記述する必要はありません。表示するコンテンツを単純にpanelGroupLayoutコンポーネントにラップし、layout属性をscrollに設定します。

File Explorerアプリケーションには、検索条件を表示および非表示にするために使用されるpanelSplitterコンポーネントが含まれています。検索条件が非表示で、検索結果が領域に収まらない場合は、図8-56に示すようにスクロールバーがレンダリングされます。

図8-56 panelGroupLayoutを使用してレンダリングされたスクロールバー

8.13.1 panelGroupLayoutコンポーネントの使用方法

panelGroupLayoutコンポーネントは、必要なレイアウトにするためにいくつでもネストさせることができます。

panelGroupLayoutコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「パネル・グループ・レイアウト」をJSFページにドラッグ・アンド・ドロップします。

panelGroupLayoutコンポーネントに必要な子コンポーネントを挿入します。

ヒント:

通常はpanelGroupLayoutコンポーネントの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、panelGroupLayoutコンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。

隣接する子コンポーネントの間に間隔または区切り線を追加するには、separatorファセットにspacerまたはseparatorコンポーネントを挿入します。

プロパティ・インスペクタで、「外観」セクションを開きます。子コンポーネントを希望のレイアウトに配置するには、Layoutを次のいずれかの値に設定します。

default: 折り返された連続のレイアウトです。

実行時、コンテンツがブラウザの使用可能な領域を超えると(子コンポーネントが親コンテナであるpanelGrouplayoutの幅より大きい場合)、すべての子コンポーネントが表示されるよう、ブラウザによりコンテンツが次の行に配置されます。

注意:

ADF Facesでは、コンテンツの配置時に双方向のアルゴリズムが使用されます。右から左のコンテンツおよび左から右のコンテンツが混在し、コンテンツが連続して配置されない場合があります。

horizontal: 横のレイアウトになり、子コンポーネントは横に並べられます。コンテンツがブラウザの使用可能な領域を超えても折り返されません。

横のレイアウトでは、子コンポーネントを縦に並べることも横に並べることもできます。デフォルトで、horizontalの子コンポーネントは架空の水平線と垂直線を基準にしてそれぞれの中央に配置されます。horizontalコンポーネントの横および縦の配置を変更するには、次の属性を使用します。
- halign: 横の配置を設定します。デフォルトは、centerです。使用できるその他の値はstart、end、left、rightです。
  
  たとえば、言語の読み方向が左から右の場合にhorizontalの子コンポーネントを常に左揃えにし、読み方向が右から左の場合には右揃えにするには、halignをstartに設定します。
- valign: 縦の配置を設定します。デフォルトはmiddleです。使用できるその他の値はtop、bottom、baselineです。
  
  テキストのフォント・サイズを変更した出力テキスト・コンポーネント(outputTextなど)で、valignをbaselineに設定すると、図8-57に示されているように、文字が配置されている架空の線に沿ってテキストの文字が並べられます。そのようなテキスト・コンポーネントでvalignをbottomに設定した場合、bottomの縦の配列ではすべての文字の一番下の部分が同じ架空の線上に配置されるため、結果は見栄えのよい外観にはなりません。
  
  図8-57 テキストのbottomおよびbaselineの縦の位置
注意:

layoutがhorizontalではない場合、halignおよびvalign属性は無視されます。
scroll: 縦のレイアウトになり、子コンポーネントは縦に並べられ、必要な場合には縦のスクロールバーが表示されます。
vertical: 縦のレイアウトになり、子コンポーネントは縦に並べられます。

8.13.2 ジオメトリ管理およびpanelGroupLayoutコンポーネントに関する必知事項

panelGroupLayoutコンポーネントは子コンポーネントを拡大できませんが、panelSplitterまたはpanelStretchLayoutコンポーネントの子で、layout属性がscrollまたはverticalに設定されている場合には拡大できます。

8.14 空白または線を使用したコンテンツの分割

ページ内に空白の部分を配置して、コンポーネントの間に間隔を設け、すべてのコンポーネントを互いのすぐ隣やすぐ下に詰めて配置した場合よりも見やすくすることができます。この目的で提供されているADF Facesコンポーネントは、spacerコンポーネントです。

heightおよびwidth属性を使用して、縦または横、あるいはその両方の空白をページに組み込むことができます。

height: ページに組み込む縦の空白の量を決定する属性。例8-18に、縦の空白を使用して、2つの長いoutputTextコンポーネントの間に一定の間隔を設けるよう設定されたページを示します。

例8-18 縦の空白

<af:panelGroupLayout layout="vertical">
  <af:outputText value="This is a long piece of text for this page..."/>
  <af:spacer height="10"/>
  <af:outputText value="This is some more lengthy text ..."/>
</af:panelGroupLayout>

図8-58に、ブラウザで表示した場合に、spacerコンポーネントがページ出力に及ぼす影響を示します。

図8-58 ブラウザで表示した縦の空白

width属性は、コンポーネント間に組み込む横の空白の量を決定します。例8-19に、2つのコンポーネントの間に横方向の間隔を設けるよう設定されたページのソースの一部を示します。

例8-19 横の空白

<af:outputLabel value="Your credit rating is currently:"/>
<af:spacer width="10"/>
<af:outputText value="Level 8"/>

図8-59に、ブラウザで表示した場合の、横方向の間隔調整コンポーネントの影響を示します。

図8-59 ブラウザで表示した横の空白

separatorコンポーネントを使用すると横線を作成できます。図8-60に、2つのpanelBoxコンポーネント間にseparatorコンポーネントを挿入した場合のproperties.jspxファイルの外観を示します。

図8-60 線を作成するためのseparatorコンポーネントの使用

通常、spacerおよびseparatorコンポーネントは、その他のレイアウト・コンポーネントのファセットに使用します。これにより、分割するコンポーネントに空白または線が表示されます。

8.14.1 spacerコンポーネントの使用方法

ページには、必要な数だけspacerコンポーネントを使用できます。

spacerコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「スペーサ」をJSFページにドラッグ・アンド・ドロップします。

プロパティ・インスペクタで、「共通」セクションを開きます。必要に応じて幅と高さを設定します。

注意:

高さが指定されていて幅が指定されていない場合、ブロック・レベルのHTML要素がレンダリングされ、その近くに新しい行が表示されます。幅が指定されている場合、指定されている高さの値に関係なく、HTML標準を厳密にサポートするユーザー・エージェントに適用可能な行の高さより低くなりません。

8.14.2 separatorコンポーネントの使用方法

ページには、必要な数だけseparatorコンポーネントを使用できます。

separatorコンポーネントを作成および使用する手順:

コンポーネント・パレットで、「レイアウト」パネルから「セパレータ」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、必要に応じてプロパティを設定します。