| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
前 |
次 |
この章では、ADF Facesのいくつかのレイアウト・コンポーネントを使用して、Webページ上のコンテンツを編成する方法を説明します。
この章では、次の項目について説明します。
ADF Facesには、その他のコンポーネントをページに配置する際に使用可能なレイアウト・コンポーネントが多数用意されています。通常、これらのコンポーネントを使用してページの作成を開始します。その後、その他の機能(データやボタンのレンダリングなど)を提供するコンポーネントを、ファセット内またはレイアウト・コンポーネントの子コンポーネントとして追加します。
|
ヒント: アプリケーション内のページのレイアウトを設計できるページ・テンプレートを作成できます。テンプレートは、アプリケーション内のすべてのページで使用できます。詳細は、第19章「フラグメント、ページ、テンプレート、コンポーネントの作成および再利用」を参照してください。 |
コンテナとして機能するレイアウト・コンポーネントに加え、ADF Facesには、コンテンツの表示や非表示、またはセクション、リスト、空白の表示が可能な対話型のレイアウト・コンポーネントもあります。一部のレイアウト・コンポーネントには、ウィンドウのサイズが変更された場合にブラウザ・ウィンドウに合せてコンテンツが拡大する機能や、拡大するコンポーネント内に配置された場合には拡大する機能などのジオメトリ管理機能もあります。レイアウト・コンポーネントの拡大およびジオメトリ管理機能の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
表8-1では、ADF Facesの各レイアウト・コンポーネントを簡単に説明しています。
表8-1ADF Facesのレイアウト・コンポーネント
| コンポーネント | 説明 | 子の拡大 | 拡大 | |
|---|---|---|---|---|
|
ページ管理コンポーネント |
||||
|
|
HTMLページの標準の各ルート要素( |
X |
||
|
|
HTMLの |
|||
|
ページ・レイアウト・コンテナ |
||||
|
|
|
X |
X( |
|
|
|
再配置可能な仕切線を使用してリージョンを2つの部分( |
X |
X( |
|
|
|
子コンポーネント(通常は |
X |
X( |
|
|
|
子コンポーネントを含めることが可能で、その中央に配置され、枠に沿って12個のファセットも含まれます(追加のコンポーネントを配置可能)。これらは中央部分を囲みます。詳細は、8.5項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。 |
|||
|
|
ラベルやフィールドが縦に並ぶように、 |
|||
|
表示/非表示機能のあるコンポーネント |
||||
|
|
ヘッダーの下のコンテンツを表示または非表示にできます。通常、 |
X( |
X( |
|
|
|
|
X(含まれる子コンポーネントが1つのみの場合) |
||
|
|
子コンポーネントを含めることができるタイトル付きのボックス。toolbarファセットがあります。詳細は、8.8項「コンテンツの動的な表示および非表示」を参照してください。 |
X |
||
|
|
|
X( |
||
|
|
タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、かわりにナビゲーション・メニューの |
X( |
||
|
|
トグル・アイコンを介してコンテンツを表示または非表示にします。詳細は、8.8項「コンテンツの動的な表示および非表示」を参照してください。 |
|||
|
その他のコンテナ |
||||
|
|
子コンポーネントが含まれ、メッセージ、ツールバーおよびヘルプ・トピックを含むヘッダーを表示します。詳細は、8.10項「静的ボックスの項目の表示」を参照してください。 |
X( |
X( |
|
|
|
|
X(表、ツリーまたはツリー表が1つのみの場合) |
X |
|
|
|
コンテナ・コンポーネントを作成します(このコンポーネントのファセットは、スタイル・テーマを使用して、その子に枠の外観を適用します)。通常、このコンポーネントは、ページの領域間のルック・アンド・フィールの遷移として機能します。たとえば背景色が暗いテンプレートを持つページは、decorativeBoxを使用して、メイン領域の背景色を白にできます。詳細は、8.10項「静的ボックスの項目の表示」を参照してください。 |
X(中央ファセット内) |
X( |
|
|
|
インライン |
X |
||
|
|
ナビゲーション階層の1レベルを表す一連のナビゲーション・アイテムを作成します。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
X(タブを表示するように構成されている場合) |
||
|
|
各子コンポーネントをリスト項目として出力し、隣に黒丸をレンダリングします。ネストさせて階層リストを作成できます。詳細は、8.11項「1つ以上の列における箇条書きリストの表示」を参照してください。 |
|||
|
|
ポップアップ・ウィンドウ内に子コンポーネントを表示します。詳細は、13.2項「ポップアップ要素の宣言的作成」を参照してください。 |
|||
|
|
子のtoolbarおよびmenuコンポーネントを一緒に表示します。詳細は、14.3項「ツールバーの使用方法」を参照してください。 |
|||
|
グループ化コンテナ |
||||
|
|
子コンポーネントを縦または横にグループ化します。複数のコンポーネントがファセットに含まれる場合にファセットで使用されます。詳細は、8.12項「関連する項目のグループ化」を参照してください。 |
X(レイアウトがscrollまたはverticalに設定されている場合のみ) |
||
|
|
グループの親コンポーネントに管理されている場合を除き、レイアウトに関係なく子コンポーネントをグループ化します。複数のコンポーネントがファセットに含まれる場合にファセットで使用されます。詳細は、8.12項「関連する項目のグループ化」を参照してください。 |
|||
|
間隔調整コンポーネント |
||||
|
|
項目間に水平線を作成します。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
|
|
空白の領域を作成します。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
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要素を作成します。
|
注意: ページに複数のHTMLフォームを含めることができる場合でも、1ページ当たりのADF Faces |
例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項「クイック・スタート・レイアウトの使用」を参照してください。 |
ジオメトリ管理は、ユーザー、親コンポーネントおよび子コンポーネントが、アプリケーション内のコンポーネントの実際のサイズと場所を調整するプロセスです。RCFのジオメトリ管理ソリューションの中核は、サイズ変更通知メカニズムで、ジオメトリ管理に対応しているコンポーネントにブラウザのサイズ変更アクティビティを通知できます。次のシナリオで通知が起動されます。
ロード: ページ・コンテンツが初めてロードされる場合。最初のサイズ設定が行われます。
ブラウザのサイズ変更: ブラウザ・ウィンドウのサイズが変更された場合。
部分的な置換え: 部分的なページのレンダリングでページの一部が更新された場合。新しく挿入されたすべてのコンポーネントが通知され、必要なジオメトリ管理が実行されます。
可視性の変更: 最初は非表示に構成されていたコンポーネントが表示されるようになった場合(最初は非表示であったコンポーネントには通知は送信されません)。
明示的なサイズ変更: サイズ変更可能なコンポーネント(panelSplitterなど)がユーザーによってサイズ変更された場合。
コンポーネントがジオメトリ管理に対応しており、子コンポーネントを拡大できる場合には、ルート・コンポーネントはデフォルトで自動的にブラウザの表示可能領域全体に拡大されます。ジオメトリ管理コンポーネントは、panelStretchLayoutおよびpanelSplitterなどです。
|
注意: フレームワークでは、ポップアップ・ダイアログ、ポップアップ・ウィンドウまたはインラインではないメッセージは、ルート・コンポーネントとみなされません。 |
ユーザーによりブラウザ・ウィンドウのサイズが変更され、documentコンポーネント内でmaximizedに設定されているルート・ビジュアル・コンポーネントが1つの場合、そのビジュアル・ルート・コンポーネントもブラウザ・ウィンドウに合せてサイズ変更されます。ルート・コンポーネントで子コンポーネントの拡大がサポートされている場合(および、子コンポーネントでも拡大がサポートされている場合)、配置レイアウト領域(子コンポーネントの拡大がサポートされていない領域)に達するまで、コンポーネント階層を下がって子コンポーネントのサイズが再計算されます。拡大を有効化するためにコードを記述する必要はありません。
表8-1に示されているように、それ自体とその子コンポーネントも拡大できるコンポーネントはpanelStretchLayout、panelSplitterおよびpanelDashboardコンポーネントです。また、panelAccordionまたはpanelTabbedコンポーネントの直接の子としてshowDetailItemコンポーネントが使用されている場合は、showDetailItemコンポーネントのコンテンツを拡大できます。そのため、ページのコンテンツをブラウザ・ウィンドウに合せる必要がある場合には、showDetailItemコンポーネントを含むpanelStretchLayout、panelSplitter、panelDashboard、panelAccordionコンポーネント、およびshowDetailItemコンポーネントを含むpanelTabbedコンポーネントをルート・コンポーネントとして使用する必要があります。
たとえば、図8-1に、panelStretchLayoutコンポーネントのcenterファセットに配置された表を示します。表はブラウザ領域に収まるように拡大されています。表全体がブラウザ・ウィンドウに収まらない場合は、表のデータ本体部分にスクロールバーが追加されます。
図8-2に、子コンポーネントを拡大できないpanelGroupLayoutコンポーネント内にネストしている同じ表を示します(明確にするために、赤の点線の輪郭をpanelGroupLayoutコンポーネントの周囲に配置しています)。表コンポーネントでは、表のプロパティで設定されている一部の列および行のみが表示されています。
|
パフォーマンスのヒント: ジオメトリ管理のコストは、子コンポーネントの複雑さに直接関係しています。そのため、ジオメトリ管理される親コンポーネントに属する子コンポーネントの数はできるだけ少なくなるようにしてください。 |
子コンポーネントを拡大できるコンポーネントを選択しても、実際に拡大されるのは次のコンポーネントのみです。
inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard(拡大するように構成されている場合)
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-4に示すように、ページが実行されると、panelSplitterコンポーネントに直接配置されているコンポーネントは拡大されているのに対して、panelGroupLayout内のpanelCollectionおよびtableコンポーネントは拡大されません。
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コンポーネントは拡大できますが、子コンポーネントを拡大しないため、拡大を行うレイアウトと配置を行うレイアウトとの移行が可能です。
拡大可能だが、子を拡大しないコンポーネントは、遷移コンポーネントとみなされます。遷移コンポーネントは、子を拡大するコンポーネントと拡大しないコンポーネントの間で常に使用する必要があります。
新規ギャラリ・ウィザードを使用してJSF JSPページ(またはページ・フラグメント)を作成する場合、様々な事前定義済のクイック・スタート・レイアウトから選択できます。それらのレイアウトの1つを選択すると、JDeveloperによって必要なコンポーネントが追加され、ユーザーが希望する外観と動作が得られるようにそれらのコンポーネントの属性が設定されます。1列、2列および3列の形式から選択できます。それらの形式では、各列に表示する独立したペインの数、およびそれらのペインを拡大可能にするか固定サイズのままにするかを選択できます。図8-5に、2列形式で使用可能な様々なレイアウトを示します。
レイアウト・コンポーネントの追加に加えて、テーマを適用してクイック・レイアウトを選択することもできます。これらのテーマにより、クイック・スタート・レイアウトで使用するコンポーネントの一部に色のスタイルが追加されます。色および色の追加場所を確認するには、付録E「クイック・スタート・レイアウト・テーマ」を参照してください。テーマの詳細は、20.3.4項「コンポーネントへのテーマの適用方法」を参照してください。
クイック・レイアウトを使用すると、時間を節約できるのに加え、レイアウト・コンポーネントが正しく連携して使用されるので希望どおりの結果を得ることができます。クイック・レイアウトを使用したページの作成の詳細は、2.4項「ビュー・ページの作成」を参照してください。
ページがすべてのブラウザで予想どおりに表示されるようにするには、ページの作成時にJDeveloperに用意されているクイック・レイアウトの1つを使用します。クイック・レイアウトを使用すると、正しいコンポーネントが使用されて正確に構成されます。詳細は、8.2.3項「クイック・スタート・レイアウトの使用」を参照してください。
|
ベスト・プラクティス: レイアウト表示の問題を回避するには、クイック・スタート・レイアウトを使用します。 |
ただし、自分でレイアウトを作成する場合は、拡大されるコンポーネントと配置されるコンポーネントの両方を含むレイアウトを作成するための次のヒントに従います。
ジオメトリ管理機能のあるルート・コンポーネント内(showDetailItemを含むpanelStretchLayout、panelSplitter、panelAccordion、またはshowDetailItemを含むpanelTabbed)にページ・コンテンツを配置します。
パーセント単位で高さの値を指定しないでください。かわりに、拡大がサポートされているコンポーネントや、子コンポーネントを拡大するコンポーネントの外にコンポーネント構造を作成します。
layout属性がscrollに設定されているpanelGroupLayoutコンポーネントなどの遷移コンポーネントを使用して、拡大可能な構造内に、拡大できないコンポーネントまたは配置が行われるコンポーネントのグループを作成します。このコンポーネントでは拡大がサポートされていますが、子コンポーネントは拡大されないため、拡大されるコンポーネントと配置が行われるコンポーネントの移行が可能です。
どのWebブラウザでも一貫して機能するわけではないため、拡大できないコンテナまたは配置が行われるコンテナ内で、縦方向の拡大を試行しないでください。
親の配置コンポーネントに含まれるコンポーネント(子を拡大しないコンポーネント)の場合は、95%を超える幅を設定しないでください。このようにすると、予期しない結果になることがあります。
親コンポーネントが768ピクセル以上の場合は、コンポーネントのstyleClass属性がAFStretchWidthに拡大されるように設定します。このスタイルにより、異なるブラウザおよび親のパディングまたは枠線を考慮して、コンポーネントが親コンテナのほぼ100%まで拡大されます。
親コンポーネントが768ピクセル以下の場合は、コンポーネントのstyleClass属性がAFAuxiliaryStretchWidthに拡大されるように設定します。このスタイルにより、異なるブラウザおよび親のパディングまたは枠線を考慮して、コンポーネントが親コンテナのほぼ100%まで拡大されます。
|
注意: これら2つの異なるスタイルは、Microsoft Internet Explorer 7によるスクロール・コンテナ内の幅の計算で必要になります(Internet Explorer 8では解決済です)。アプリケーションのアクセスに使用するブラウザのバージョンを管理できない場合は、これらのスタイルを前述ように使用する必要があります。 |
positionスタイルは使用しないでください。
documentタグのmaximized属性がtrueに設定されていることを確認します(これはデフォルトです)。属性の設定の詳細は、8.2.5項「documentタグの構成方法」を参照してください。
この章の残りの部分では、ADF Facesのレイアウト・コンポーネント、およびそれらを使用してページを設計する方法を説明しています。各コンポーネントで拡大が処理される方法の詳細は、それぞれの「ジオメトリ管理について」の項に記載されています。
documentタグには、ページの動作を制御するために構成できる多数の属性が含まれています。たとえば、ページを初めてレンダリングするときに1つのコンポーネントにフォーカスするようにタグを構成できます。また、ユーザーがページから移動しようとしたときにデータがまだ送信されていない場合に、警告メッセージを表示するようにタグを構成することもできます。アプリケーションの他の部分とは異なる状態保存方式をdocumentで使用するように設定することもできます。
documentタグを構成する手順:
構造ウィンドウで、af:documentノードを選択します。
プロパティ・インスペクタで、「共通」セクションを開いて次の設定を行います。
initialFocusId: ドロップダウン・メニューを使用して「編集」を選択します。「プロパティの編集」ダイアログで、ページを初めてレンダリングするときにフォーカスするコンポーネントを選択します。
このフォーカスはクライアントで行われるため、選択するコンポーネントには対応するクライアント・コンポーネントが必要です。詳細は、3.4項「クライアント側コンポーネントのインスタンス化」を参照してください。
maximized: ルート・コンポーネントを拡張して使用可能なすべてのブラウザ領域に合せる場合はtrueに設定します。documentタグのmaximized属性がtrueに設定されていると、フレームワークにより単一のビジュアル・ルート・コンポーネントが検索され、そのコンポーネントが拡大可能な場合は、ブラウザの表示可能領域全体にコンポーネントが拡大されます。これに対応しているコンポーネントは、panelStretchLayoutおよびpanelSplitterです。documentタグのmaximized属性は、デフォルトでtrueに設定されています。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
title: ブラウザのタイトル・バーに表示するテキストを入力します。
「外観」セクションを開き、failedConnectionText属性に、サーバーに接続できない場合に表示するテキストを入力します。
「その他」セクションを開き、次の設定を行います。
uncommitedDataWarning: データがコミットされていないことがアプリケーションによって検出されたときに、ユーザーに警告メッセージを表示する場合は、onに設定します。警告メッセージは、ユーザーがデータをコミットせずにページを終了しようとする場合、またはサーバーにコミットされていないデータがある場合に表示されます。デフォルトでは、offに設定されています。
stateSaving: ページに使用する状態保存のタイプに設定します。
ADF Facesアプリケーションの場合は、トークン付きのクライアント状態保存をアプリケーションで使用することをお薦めします(ページ状態がセッションに保存され、トークンがクライアントで永続します)。この設定はアプリケーションにグローバルに反映し、すべてのページで状態がセッションに保存され、状態に関する情報でトークンが永続化されます。
ただし、ページの状態を別の方法で保存したい場合もあります。たとえば、一定時間を超過した後にユーザーがログイン・ページにポストバックしたときに、セッション・タイムアウト・エラーを表示させたくない場合です。ページのstateSaving属性をclientに変更することで、ユーザーがログイン・ページにポストバックする場合に、タイムアウト・エラーは表示されなくなります。
web.xmlのグローバル設定をページの次のいずれかにオーバーライドできます。
client: トークンを使用せずに、状態がクライアントに完全に保存されます。この設定により、セッションの期限切れのメッセージは表示されなくなります。
default: ページの状態はweb.xmlの設定に基づきます。
server: ページの状態はサーバーに保存されます。
状態保存の詳細は、付録A「web.xmlでの構成」を参照してください。
コンテンツをページの定義済領域に配置し、ブラウザがサイズ変更されたらコンテンツが拡大されるようにする必要がある場合には、panelStretchLayoutコンポーネントを使用します。panelStretchLayoutコンポーネントは、ファセット内に配置されたコンポーネントが拡大されるコンポーネントの1つです。図8-6に、コンポーネントのファセットを示します。
topおよびbottomファセットの高さを設定すると、含まれるコンポーネントはその高さに合うように拡大されます。同様に、startおよびendファセットの幅を設定すると、それらのファセットに含まれるコンポーネントはその幅まで拡大されます。それらのファセットに配置されているコンポーネントがない場合、ファセットはレンダリングされません。つまり、ファセットは領域を占有しません。設定した領域をファセットで占有し、空白のままにする場合は、spacerコンポーネントを挿入します。8.13項「空白または線を使用したコンテンツの分割」を参照してください。centerファセットの子コンポーネントは、残りの領域に合うよう拡大されます。コンポーネント拡大の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
Topまたはbottomのファセットの高さ、あるいはstartまたはendファセットの幅を設定するかわりに、高さまたは幅をautoに設定できます。これにより、ファセットの子コンポーネントに必要な正確な領域を使用するように、ファセット自体がサイズを設定できます。領域は、Webブラウザがファセットのコンテンツの表示に必要だと判断する領域の量に基づいて割り当てられます。
|
パフォーマンスのヒント: 値に |
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ピクセルの場所から開始されます。
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に設定すると、ファセットのコンテンツの表示に必要な領域の量がブラウザにより決定されます。
|
注意: 幅または高さの値として たとえば、子コンポーネントを自動的に拡大できるファセットでは また、 |
値を明示的に指定しない場合、topHeight、bottomHeight、startWidthおよびendWidth属性の値は、それぞれデフォルトで50ピクセルになります。topとbottomファセットの幅、およびstartとendファセットの高さは、panelStretchLayoutの親コンポーネントの幅と高さから導出されます。
|
ヒント: ファセットに子コンポーネントが含まれない場合はレンダリングが行われないため、領域は占有されません。構成した領域を占有するには、ファセットに子コンポーネントを配置する必要があります。 |
デフォルトでは、panelStretchLayoutコンポーネントは、使用可能なブラウザの領域を埋めるために拡大されます。子を拡大しないコンポーネント内部にpanelStretchLayoutコンポーネントを配置する場合は、panelStretchLayoutコンポーネントが拡大しないように構成する必要があります。
dimensionsFrom属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。
children: 拡大するかわりに、panelStretchLayoutコンポーネントが子からディメンションを取得します。
|
注意: この設定を使用する場合は、 また、この設定を使用している場合は、(たとえば、 |
parent: panelStretchLayoutコンポーネントのサイズは、次の順序で決定されます。
inlineStyle属性から。
inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます(panelStretchLayoutコンポーネントが拡大されます)。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto: panelStretchLayoutコンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelStretchLayoutコンポーネントが拡大されます。親が子を拡大しない場合、panelStretchLayoutコンポーネントのサイズは子コンポーネントのサイズに基づきます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントを任意のファセットにドラッグ・アンド・ドロップします。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、8.3.2項「ジオメトリ管理およびpanelStretchLayoutコンポーネントについて」を参照してください。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネント(panelGroupLayoutコンポーネントなど)で子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
panelStretchLayoutコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次に、panelStretchLayoutコンポーネントのファセット内で拡大できるコンポーネントを示します。
inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard(拡大するように構成されている場合)
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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
ユーザーに表示する一意のコンテンツのグループがある場合は、調整可能なスプリッタで区切られた複数のペインを提供できるようにpanelSplitterコンポーネントの使用を検討します。図8-7に示されているように、File ExplorerではpanelSplitterを使用して、ナビゲーション・ツリーとフォルダ・コンテンツを分割しています。ユーザーは、スプリッタをドラッグしてペインのサイズを変更したり、ディレクトリを表示するパネルを閉じることや、元のサイズに戻すこともできます。パネルが閉じている場合は、パネルのコンテンツは表示されず、パネルを元に戻すと、コンテンツが表示されます。
panelSplitterコンポーネントを使用すると、調整可能なスプリッタで分割された2つのペインにコンテンツを編成できます。ペインは、(図8-7に示されているスプリッタのように)横に並べることも、縦に並べることもできます。File Explorerアプリケーションでは、別のpanelSplitterコンポーネントを使用して、ページ本体からアプリケーションのヘッダー・コンテンツが分割されます。図8-8に、ヘッダー・コンテンツを表示するために開かれたpanelSplitterコンポーネントを示します(OracleのロゴとFile Explorerの名前が含まれます)。
スプリッタの矢印ボタンをクリックすると、ヘッダー・コンテンツが表示されているパネルが閉じられ、図8-9に示すように、ロゴと名前が表示されなくなります。
panelSplitterコンポーネントのファセットにコンポーネントを配置します。panelSplitterコンポーネントではジオメトリ管理を使用して、実行時に子コンポーネントを拡大します。つまり、ユーザーがパネルを1つ閉じると、使用可能な領域に合うように別のパネルのコンテンツが明示的にサイズ変更されます。
|
注意: ユーザーは、ペインのサイズを変更したり閉じたりして、 |
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ピクセルの位置に配置されます。
positionedFromEnd属性がtrueに設定されている場合、ADF Facesではスプリッタの初期位置はend(またはorientationの値に応じてbottomパネル)から計測されます。図8-11に、endパネルから200ピクセル計測したスプリッタの位置を示します。
collapsedを設定して、スプリッタを閉じた状態(非表示)にするかどうかを決定します。デフォルトではcollapsed属性はfalseで、どちらのペインも表示されます。ユーザーがスプリッタの矢印ボタンをクリックすると、collapsed属性がtrueに設定され、いずれかのペインが非表示になります。
ADF Facesでは、ユーザーがスプリッタの矢印ボタンをクリックした場合にどちらのパネル(第1パネルまたは第2パネル)を非表示(閉じた状態)にするかを、collapsedおよびpositionedFromEnd属性を使用して決定します。collapsed属性がtrueでpositionedFromEnd属性がfalse,に設定されている場合は、第1パネルが非表示になり、第2パネルが使用可能な領域に合せて拡大されます。collapsed属性がtrueでpositionedFromEnd属性がtrueの場合は、かわりに第2パネルが非表示になります。視覚的には、ボタンの矢印の方向を確認することで、ユーザーはどちらのパネルが閉じるかを判断できます(ユーザーがスプリッタの矢印ボタンをクリックすると、矢印の方向にパネルが閉じます)。
デフォルトでは、panelSplitterコンポーネントは、使用可能なブラウザの領域を埋めるために拡大されます。子を拡大しないコンポーネントにpanelSplitterコンポーネントを配置する場合は、panelSplitterコンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。
children: 拡大するかわりに、panelSplitterコンポーネントが子からディメンションを取得します。
|
注意: この設定を使用し、 また、この設定を使用している場合は、(たとえば、 |
parent: panelSplitterコンポーネントのサイズは、次の順序で決定されます。
inlineStyle属性から。
inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto: panelSplitterコンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelSplitterコンポーネントが拡大されます。親が子を拡大しない場合、panelSplitterコンポーネントのサイズは子コンポーネントのサイズに基づきます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントをfirstファセットおよびsecondファセットにドラッグ・アンド・ドロップします。orientationがhorizontalに設定されている場合、firstファセットがleftファセットになります。orientationがverticalに設定されている場合、firstファセットがtopファセットになります。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、8.4.2項「ジオメトリ管理およびpanelSplitterコンポーネントについて」を参照してください。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネントで子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
3つ以上のペインを作成するには、別のパネル・スプリッタ・コンポーネントをファセットに挿入し、ネストされたスプリッタ・ペインを作成します(図8-12を参照)。
例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章「イベントの処理」を参照してください。
panelSplitterコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次のコンポーネントは、panelSplitterコンポーネントのfirstまたはsecondファセット内で拡大できます。
inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard
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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelBorderLayoutコンポーネントでは、ファセットを使用して、ページの事前定義済領域にコンポーネントを配置します。centerファセットではなく、panelBorderレイアウト・コンポーネントに直接の子コンポーネント(索引付きの子とも呼ばれる)を0～n配置します(連続して中央にレンダリングされます)。子コンポーネントはファセットで囲まれます。
図8-13に、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項「コンテンツをページ全体に拡大するための設定」を参照してください。
JSFページに使用できるpanelBorderLayoutコンポーネントの数に制限はありません。
panelBorderLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「パネル枠線レイアウト」をドラッグ・アンド・ドロップします。
コンポーネント・パレットから、panelBorderLayoutコンポーネントの子コンポーネントとして、ウィンドウ中央へのコンテンツの表示に使用するコンポーネントをドラッグ・アンド・ドロップします。
子コンポーネントは、挿入した順番で連続して表示されます。他のタイプのレイアウトで子コンポーネントを表示する場合は、panelGroupLayoutコンポーネントにそのコンポーネントをラップします。詳細は、8.12項「関連する項目のグループ化」を参照してください。
中央を囲むコンテンツを配置するには、必要なコンポーネントを各ファセットにドラッグ・アンド・ドロップします。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナで子コンポーネントをラップします。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
panelFormLayoutコンポーネントを使用すると、入力フィールドや選択リスト・フィールドなど、複数のフォーム入力コンポーネントを1つ以上の列に配置できます。File Explorerアプリケーションでは、panelFormLayoutコンポーネントを使用してファイル・プロパティが表示されています。図8-14に示されているように、コンポーネントはラベルが右揃えになるように構成されています。
図8-15に、ラベルがフィールドの上に表示されるように構成されているコンポーネントを使用した同じページを示します。
panelFormLayoutコンポーネントを構成して、ラベル付きのフィールドを1列以上表示できます。フォームの各フィールドは、panelFormLayoutコンポーネントの子コンポーネントです。必要な行数を設定し、子コンポーネントが行より多い場合、残りの子コンポーネントは新しい列に配置されます。たとえば、25の子コンポーネントがあり、15行表示されるようにコンポーネントを設定した場合、残りの10のコンポーネントは2列目に表示されます。
ただし、それぞれに表示される行数は、構成された行数によってのみ決定されるわけではありません。panelFormLayoutコンポーネントは、デフォルトで、4列以上レンダリングしないように設定されています(PDAアプリケーションの場合は2列)。この値により、実際に行数が決定されます。たとえば、25の子コンポーネントがあり、5行表示するようにコンポーネントを設定し、デフォルトの最大列数を3に設定したままにした場合、5行表示するように設定しても、実際はコンポーネントにより9行表示されます。これは、最大列数が設定された行数をオーバーライドするためです。最大3列のみに設定されているため、すべての子コンポーネントを表示するには9行使用する必要があります。コンポーネントで5行のみが表示されるようにするには、最大列数を5に設定する必要があります。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用されます。幅は、ピクセル単位の絶対数またはパーセント値を使用して指定します。ラベルの長さが合ない場合は、テキストが折り返されます。
|
ヒント: ページが英語以外の言語で表示される場合は、異なる言語および文字で使用するためにラベルに余分な空白を残す必要があります。 |
ページに1つ以上のpanelFormLayoutコンポーネントを使用して、必要なフォーム・レイアウトを作成できます。
panelFormLayoutを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「パネル・フォーム・レイアウト」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いてラベルの位置を設定します。
デフォルトで、子の入力コンポーネントのフィールド・ラベルはフィールドの横に表示されます。フィールドの上にラベルを配置するには、labelAlignment属性をtopに設定します。
|
注意:
|
rowsおよびmaxColumnsを設定して、フォーム内の行および列の数を指定します。
rows属性の値は、ADF Facesにより、その後から新しい列が開始される行の番号として使用される数値です。デフォルトでは、2147483647(Integer.MAX_VALUE)に設定されています。これは、rendered="true"およびvisible="true"に設定されているすべての子コンポーネントが、単一の列にレンダリングされることを意味します。
フォームに複数の列を含める場合は、rows属性をレンダリングされる子コンポーネントの倍数に設定し、maxColumns属性をフォームに表示する最大列数に設定します。maxColumnsのデフォルト値は3です。(PDAの場合、デフォルトは2です。)
|
注意:
|
たとえば、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行で表示されます。
|
ヒント: レンダリングされた子コンポーネントが参照するのは、フォームの直接の子コンポーネントのみです。そのため、複数の行をレンダリングするコンポーネント( |
必要に応じて、fieldWidthおよびlabelWidthを設定します。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。
panelFormLayoutコンポーネントのlabelWidth属性ではラベルの優先幅を、fieldWidth属性ではフィールドの優先幅を設定できます。
|
注意:
|
フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用され、列ごとに別々の幅を設定することはできません。幅は、CSS単位(em、pxまたは%など)を使用して指定します。使用する単位は、labelWidthおよびfieldWidth属性の両方で同一にする必要があります。
パーセント値を使用する場合は次のようにします。
指定するパーセント幅は、表示される列数に関係なく、panelFormLayoutコンポーネントが占有する幅全体のパーセントです。
labelWidthおよびfieldWidthのパーセントの合計は、100%になる必要があります。合計が100%未満の場合、幅は100%になるように正規化されます。たとえば、labelWidthを10%に、fieldWidthを30%に設定した場合、実行時にlabelWidthは33%に、fieldWidthは67%になります。
一方の幅を明示的に設定してもう一方の幅を指定しない場合(labelWidthのパーセントは指定してfieldWidthは指定しないなど)、指定されていないパーセント幅がADF Facesにより自動的に計算されます。
|
注意: フォームに複数の列とフッターが含まれている場合、パーセントの分数分割がサポートされていないWebブラウザでは、メインのフォーム項目とフッター項目の位置の間にわずかにオフセットが生じることがあります。この影響を最小限にするために、 |
panelFormLayoutコンポーネントの幅が領域の600ピクセルを占有し、labelWidth属性が50%に設定されているとします。1列に表示される場合、ラベル幅もフィールド幅も300ピクセルになります。2列に表示される場合は、各列が300ピクセルであるため、列の各ラベル幅とフィールド幅は150ピクセルになります。
ラベル・テキストの長さが指定されたラベル幅の1行に収まらない場合は、ADF Facesによりラベル・テキストが自動的に折り返されます。指定されたフィールド幅がpanelFormLayoutコンポーネントに配置した子コンテンツの最低サイズより狭い場合は、子コンテンツの最低サイズがフィールド幅として自動的に使用されます。
|
注意: 割り当てられた領域よりフィールドが広い場合、ブラウザはフィールドを切り捨てず、ラベル列の領域を使用します。これが原因で、ラベルが予想以上に折り返される可能性があります。この場合は、フィールド・コンテンツの幅を狭くすることを検討してください( |
必要な子コンポーネントを挿入します。
通常は、入力テキストやチェック・ボックスを複数選択などのラベル付きのフォーム入力コンポーネント、およびユーザーの入力を可能にするその他の類似のコンポーネントを挿入します。
|
ヒント: 通常は |
例8-4に、図8-14に表示されている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>
|
ヒント: 入力以外のコンポーネント( |
フォーム・レイアウトに意味的に関連する入力コンポーネントをグループ化するには、groupコンポーネントを使用してグループに属するコンポーネントをラップします。groupにコンポーネントを配置すると、panelFormLayoutコンポーネントによりグループの上下に区切り線が引かれます。
groupコンポーネントの使用方法の詳細は、8.6.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>
groupコンポーネント自体は何もレンダリングしませんが、panelFormLayoutコンポーネントの子として使用すると、各groupコンポーネントの子コンポーネントの周辺にセパレータが表示されます。たとえば、panelFormLayoutコンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例8-15に、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-16に示されているように、例8-15のサンプル・コードでは、実行時にpanelFormLayoutコンポーネントにより子コンポーネントの1つ目のgroupの前後に点線のセパレータがレンダリングされます。
8.6項「フォームでのコンテンツの配置」に説明されているように、panelFormLayoutコンポーネントでは特定のコンポーネント属性を使用して、列および行に子コンポーネント(グループ化された子およびグループ化されていない子)を表示する方法を決定します。子コンポーネントを複数列に表示するpanelFormLayoutコンポーネントの関連するコンポーネントをgroupコンポーネントを使用してグループ化すると、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-17に示されているように、panelFormLayoutコンポーネントのグループ化された子コンポーネントと同じように、panelFormLayoutコンポーネントにより、実行時にfooterファセットの各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>
panelDashboardコンポーネントでは、panelFormコンポーネントと同様に、行および列にその子コンポーネントを配置できます。ただし、図8-18に示されているように、panelDashboardの子は、テキスト・コンポーネントではなく、コンテンツを含むpanelBoxコンポーネントです。
panelDashboardコンポーネントを追加する場合、コンポーネントに含まれる列数および各行の高さを構成します。ダッシュボードは、子を拡大して構成済の領域を埋めます。すべての子コンポーネントが、指定した列数と行の高さ内に収まらない場合、panelDashboardコンポーネントにスクロールバーが表示されます。
子を拡大するコンポーネントに配置すると、子の数に関係なく、デフォルトでpanelDashboardが親コンテナを埋めるために拡大されます。つまり、ブラウザのサイズがダッシュボードで必要なサイズより大きくなると、ダッシュボードに空白の領域ができる場合があります。
たとえば、dimensionsFrom属性をparentに設定して、サイズを親から継承するようにpanelDashboardを設定したとします。columnsを1に設定し、rowHeightを50pxに設定します。次に、panelBoxコンポーネントを2つ追加します。columnsは1に設定されているため、2行になります。親コンポーネントはpanelStretchLayoutのため、ボックスの高さに関係なく、panelDashboardはpanelStretchLayoutを埋めるために拡大され、図8-19に示すように、余分な領域ができます(境界をわかりやすくするために、ダッシュボードの色をピンクに変更しています)。
かわりに、ダッシュボードを拡大しない場合は、子を拡大しないコンポーネントに配置し、その子に基づいてサイズを決定できるようにpanelDashboardを構成できます(dimensionsFrom属性をchildrenに設定)。これにより、子を表示するのに必要な行数と同じ高さになります(rowHeight属性を乗算)。
前述の例で、scrollに設定されたpanelGroupLayoutにダッシュボードをかわりに配置する場合は、rowHeightが50に設定されているため、図8-20に示すように、ブラウザ・ウィンドウのサイズに関係なく、panelDashboardは常に100pxより少し高くなります。
panelDashboardコンポーネントでは、宣言的なドラッグ・アンド・ドロップ動作もサポートされており、ユーザーは子コンポーネントを再配置できます。図8-21に示されているように、ユーザーは、たとえばpanelBox 10をpanelBox 4とpanelBox 5の間に移動できます。ボックスをドロップできる場所にはシャドウが表示されます。
|
注意:
|
panelDashboardコンポーネントには、子コンポーネントを移動できる機能に加え、APIも用意されており、このAPIにアクセスして、ユーザーが子コンポーネントをレンダリングするかレンダリングしないかを切り替えられるようにし、挿入または削除されているpanelBoxesの外観を提供できます。ダッシュボードでは、部分ページ・レンダリングによって新しい一連の子コンポーネントが再描画されるため、ページ全体を再描画する必要がありません。
panelDashboardBehaviorタグを使用して、コンポーネントのレンダリングの応答性を向上させることができます。このタグを使用すると、コマンド・コンポーネントをアクティブ化し、視覚的な変更をダッシュボードに適用してから、アプリケーション・コードでサーバーのコンポーネント・ツリーを変更できます。アクション・イベントがサーバーに送信される前に、この領域の拡大が行われるため、コマンド・コンポーネントのアクション・リスナーがコンポーネント・ツリーを変更し、ダッシュボードでの挿入の最適化されたエンコーディングを準備している間に、ユーザーはすぐにフィードバックを確認できます。
たとえば、図8-22は、panelSplitterコンポーネントの右パネルで使用されるpanelDashboardコンポーネントを示しています。左パネルにリンクとして表示されているリスト項目は、panelDashboardの各panelBoxコンポーネントを表しています。すべてのpanelBoxコンポーネントが表示されている場合、リンクはすべて非アクティブです。ただし、ユーザーがpanelBoxコンポーネントの1つを削除すると、対応するリンクがアクティブになります。ユーザーはそのリンクをクリックして、panelBoxを再挿入できます。panelDashboardBehaviorタグをcommandLinkコンポーネントとともに使用することで、ユーザーは挿入済ボックスの描画を確認できます。
このタグを使用しない場合、アクション・リスナーが処理している間、ユーザーがダッシュボード構造に対する変更を確認できるまで多少の遅延があります。
図8-23は、panelDashboardコンポーネントを使用した実際的な例を示しています。ページの上部にあるリンクの1つを選択すると、ダッシュボードに表示されるpanelBoxesが変わります。ページの左側にある関連リンクをクリックして、panelBoxを追加することもできます。
panelDashboardをページに追加すると、ダッシュボードが拡大するかどうかを構成できます。その後、子コンポーネントを追加し、コンポーネントを再配置できるようにする場合は、子コンポーネントにもcomponentDragSourceタグを追加します。コンポーネントの挿入および削除を許可する場合は、アクションを処理するためのリスナーを実装します。panelDashboardBehaviorタグを使用して、panelDashboardコンポーネントでの挿入への応答性を向上させることもできます。
panelDashboardコンポーネントを使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、ページに「パネル・ダッシュボード」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
columnsを、子コンポーネントを表示するために使用する列数に設定します。子コンポーネントは各列に合せて拡大されます。
rowHeightを、各行の高さのピクセル数に設定します。子コンポーネントは、この高さまで拡大されます。
デフォルトでは、panelDashboardコンポーネントは、使用可能なブラウザの領域を埋めるために拡大されます。子を拡大しないコンポーネントの子としてpanelDashboardコンポーネントをかわりに使用する場合は、panelSplitterコンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。
children: panelDashboardコンポーネントが子からディメンションを取得します。
|
注意: この設定を使用している場合は、(たとえば、 |
parent: panelDashboardコンポーネントのサイズは、次の順序で決定されます。
inlineStyle属性から。
inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto: panelDashboardコンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelDashboardコンポーネントが拡大されます。親が子を拡大しない場合、panelDashboardコンポーネントのサイズは子コンポーネントのサイズに基づきます。
コンポーネント・パレットから、panelBox子コンポーネントをドラッグ・アンド・ドロップします。
|
ヒント:
|
ユーザーが子コンポーネントを並べ替えられるようにするには、コンポーネント・パレットの「操作」パネルから、「コンポーネント・ドラッグ元」を各子コンポーネントの子としてドラッグ・アンド・ドロップします。
コンポーネントを追加および削除できるようにする場合は、マネージドBeanを作成し、子の追加またはドロップ時に子の並替えを行うハンドラ・メソッドを実装します。このイベントはドロップ・イベントとみなされるため、ドラッグ・アンド・ドロップ・フレームワークを使用する必要があります。ドロップ・イベントのハンドラの作成の詳細は、第32章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
最適化されたライフサイクルを使用するには、ハンドラにpanelDashboardコンポーネントのprepareOptimizedEncodingOfInsertedChild()メソッドをコールさせます。これにより、挿入された子コンポーネントのみがレンダリングのためにダッシュボードから送信されます。
|
注意:
|
手順7でcomponentDragSourceタグを追加した場合、panelDashboardのDropEventハンドラも実装する必要があります。panelDashboardコンポーネントを選択している状態で、「動作」セクションを開き、DropListener属性をハンドラ・メソッドにバインドします。
panelDashboardBehaviorタグを使用する場合は、挿入を開始するために使用するコマンド・コンポーネントをドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、コンポーネント・ツリーに対する変更を処理するマネージドBeanのハンドラに、コマンド・コンポーネントのactionListenerをバインドします。ハンドラに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ツリーに挿入され、このツリーで、実際のコンポーネントがサーバーから戻されるとレンダリングされます。サーバーで挿入が行われる前に挿入のプレースホルダが追加されるため、ユーザーがページをリロードしても、子が継続的に同じ順序で表示されるように、子コンポーネントの挿入場所を指定する必要があります。
このコンポーネントでは、列数およびrowHeight属性に基づき、子がグリッドに編成されます。panelDashboard内で拡大可能な子コンポーネントは次のとおりです。
inputText(rows属性が1より大きい数値に設定されており、simple属性がtrueに設定されている場合)
panelBox
region
table(拡大するように構成されている場合)
その他のコンポーネントを子コンポーネントとしてpanelDashboardコンポーネントに配置しようとすると、コンポーネントの階層は無効になります。
ユーザーがコンテンツの表示または非表示を選択できるようにすることが必要な場合があります。ユーザー・インタフェースのすべての機能を一度に表示する必要がなければ、ユーザーの意志でインタフェースの一部を表示および非表示にできるコンポーネントを使用して領域を節約できます。
showDetailコンポーネントを使用すると、ユーザーがラベルの下のコンテンツを開いた状態(表示)または閉じた状態(非表示)にすることが可能な切替えアイコン付きのラベルを作成できます。コンテンツが閉じた状態(非表示)の場合、デフォルトのラベルは「表示」で、切替えアイコンにはボックスの中にプラス記号が表示されます。コンテンツが開いた状態(表示)の場合、デフォルトのラベルは「非表示」で、切替えアイコンにはマイナス記号に変わります。
たとえば、File ExplorerアプリケーションのnewFileItemページでは、showDetailコンポーネントを使用してファイル・プロパティを表示および非表示にしています。図8-24に示すように、コンポーネントは、ページが表示されたらプロパティが非表示になるように構成されています。
ユーザーが切替えアイコンをクリックすると、図8-25に示されているようにプロパティが表示されます。
表示されているテキストおよび非表示のテキストを表示するために、outputTextコンポーネントより複雑なものを使用する場合は、コンポーネントをshowDetailコンポーネントのpromptファセットに追加できます。表示に設定すると、promptファセットのコンテンツが、表示されているテキストおよび非表示のテキストの値と置き換えられます。showDetailコンポーネントの使用方法は、8.8.1項「showDetailコンポーネントの使用方法」を参照してください。
showDetailコンポーネントと同じように、showDetailHeaderコンポーネントでもコンテンツの表示を切り替えられますが、showDetailHeaderコンポーネントにはヘッダーにラベルと切替えアイコンがあり、メニュー・バー、ツールバーおよびテキスト用のファセットも用意されています。
|
ヒント:
|
タイトル行のすべてのファセットにすべてを表示する十分な領域がない場合、showDetailHeaderテキストは切り捨てられ、省略記号が表示されます。切り捨てられたテキストの上にマウスを置くと、図8-26に示すように、完全なテキストがツールチップに表示されます。
コンテンツの表示に十分な領域がある場合は、図8-27に示すように、余分な領域がcontextファセットとツールバーの間に配置されます。
また、showDetailHeaderコンポーネントは、エラー、警告、情報または確認のメッセージとして使用するように構成できます。コンテンツは、ヘッダーの下で表示または非表示になります。たとえば、File ExplorerアプリケーションのnewFileItemページでは、showDetailHeaderコンポーネントを使用して、新しいファイルを作成するためのヘルプを表示しています。図8-25に示されているように、デフォルトではヘルプは表示されません。ユーザーがヘッダーの切替えアイコンをクリックすると、図8-28に示されているようにコンテンツが表示されます。
showDetailHeaderコンポーネントは、panelHeaderコンポーネントとともに使用して、ページをセクションおよびサブセクションに分割することもできます(コンテンツの一部を非表示にできます)。showDetailHeaderコンポーネントには、ツールバーやメニュー・バー・ファセットなど、多数のファセットが含まれます。これらのファセットは、panelHeaderコンポーネントのものと同じです。panelHeaderコンポーネントの詳細は、8.10項「静的ボックスの項目の表示」を参照してください。
showDetailHeaderコンポーネントをネストさせて、コンテンツの階層を作成できます。ネストされた各コンポーネントのヘッダーは、階層を示すために異なるスタイルになります。図8-29に、ネストした3つのshowDetailHeaderコンポーネントおよびその異なるスタイルを示します。
各ヘッダー・レベルで使用されているスタイルは、showDetailHeaderコンポーネントにスキンを適用することで変更できます。ADF Facesコンポーネントのスキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
|
注意: サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、 |
panelBoxコンポーネントは、ヘッダーの下に情報を表示または非表示にできるようにする場合、およびページのその他の情報と分けるためのボックスが必要な場合に使用します。File Explorerアプリケーションでは、図8-30に示すように、properties.jspxページに2つのpanelBoxコンポーネントを使用して、属性およびファイルの履歴を表示します。
図8-31に、「履歴」panelBoxコンポーネントが非表示の状態になっている同じページを示します。
panelBoxコンポーネントに背景色を設定して、コンテンツをページの残りの部分とさらに区別することができます。2色の組合せ(ランプと呼ばれる)が用意されており、各組合せにはnone、light、mediumおよびdarkの4つの色のレベルがあります。図8-32に図8-30と同じパネル・ボックスを示しますが、下のpanelBoxコンポーネントはcoreランプの中間色が表示されるように構成されています。
panelBoxコンポーネントのサイズは、ピクセル・サイズを明示的に割り当てて設定することも、親に対する割合で設定することもできます。また、タイトルの位置を設定することも、アイコンを追加することもできます。また、panelBoxコンポーネントには、ボックスにツールバーおよびツールバー・ボタンを追加できるtoolbarファセットがあります。
コンテンツの複数の大きな領域を表示および非表示にする必要がある場合は、panelAccordionおよびpanelTabbedコンポーネントの使用を検討してください。詳細は、8.9項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
コンテンツの1セットを表示および非表示にするには、showDetailコンポーネントを使用します。
showDetailコンポーネントを作成および使用する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「詳細の表示」をドラッグ・アンド・ドロップします。
|
ヒント: このコンポーネントは、コンポーネント・パレットの「レイアウト」パネルではなく、「共通コンポーネント」パネルに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。
コンポーネントの子コンポーネントを表示する場合は、disclosedをtrueに設定します。
|
注意: コンテンツを表示および非表示にすることで、ユーザーは |
disclosedTextを、コンテンツが開いた状態(表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「非表示」になります。
undisclosedTextを、コンテンツが閉じた状態(非表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「表示」になります。
|
注意:
|
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListenerをdisclosureListenerメソッドに設定します。
表示イベントおよびリスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
コンテンツを追加するには、必要な子コンポーネントをshowDetailコンポーネントに挿入します。
showDetailHeaderコンポーネントは、ヘッダーの下にコンテンツを1セット表示する必要がある場合や、表示または非表示にできるメッセージとしてコンテンツを使用する場合に使用します。showDetailHeaderコンポーネントは、コンテンツを非表示にできるようにする場合に、ヘッダーおよびコンテンツの階層を作成する際にも使用できます。
showDetailHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「ディテール・ヘッダーの表示」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。textを、セクション・ヘッダーのラベルにするテキスト文字列に設定します。
iconを、セクション・ヘッダーのアイコンに使用するイメージ・ファイルのURIに設定します。アイコン・イメージはヘッダー・ラベルの前に表示されます。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、messageTypeを次のいずれかの値に設定します。
confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
none: デフォルト。icon属性に指定されていないかぎり、アイコンは表示されません。
図8-33に、メッセージ・タイプに使用される各アイコンを示します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
コンポーネントの子コンポーネントを表示する場合は、disclosedをtrueに設定します。
|
注意: コンテンツを表示および非表示にすることで、ユーザーは |
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListenerをdisclosureListenerメソッドに設定します。
表示イベントおよびリスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
showDetailHeaderコンポーネントによるジオメトリ管理の処理方法を制御するには、「その他」セクションを開き、「タイプ」を設定します。コンポーネントまたは子を拡大しない場合は、flowに設定します。showDetailHeaderコンポーネントの高さは、その子によってのみ決定されます。それ自体とその子を拡大する場合は(1つの子コンポーネントのみ拡大)場合は、stretchに設定します。showDetailHeaderコンポーネントの親コンポーネントでジオメトリ管理を決定する場合は、デフォルトのままにします。ジオメトリ管理の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
ヘッダーにボタンまたはアイコンを追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、toolbarファセットにtoolbarをドラッグ・アンド・ドロップします。その後、新しく挿入されたtoolbarコンポーネントに、任意の数のcommandToolbarButtonまたはcommandButtonコンポーネントを追加します。toolbarコンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
注意:
|
ヘッダーにメニューを追加するには、menuBarファセットにmenuコンポーネントを挿入します。メニュー作成の詳細は、14.2項「メニュー・バーでのメニューの使用方法」を参照してください。
|
ヒント:
|
コンポーネントの見出しレベルをオーバーライドするには、headerLevelを目的のレベル(H1、H2などからH6)に設定します。
見出しレベルは、特にスクリーン・リーダー・アプリケーションで使用する場合に、正しいページ構造を決定するのに使用されます。デフォルトで、headerLevelは-1に設定されており、ページの物理的位置に基づいて、ヘッダーでサイズを決定できます。つまり、最初のヘッダー・コンポーネントはH1に設定されます。そのH1コンポーネントにネストされるヘッダー・コンポーネントはH2などに設定されます。
|
注意: スクリーン・リーダー・アプリケーションでは、HTMLヘッダー・レベルの割当てを利用して、ページの基本構造を識別します。ヘッダー・コンポーネントおよびヘッダー・レベルの割当てがページで意味をなすようにしてください。 オーバーライド値を使用する場合は、ページの公開可能なセクション内にヘッダーを含めた場合の影響について考慮してください。たとえば、ページに縮小可能な領域がある場合は、領域が縮小および表示されるときに、オーバーライドされた構造が意味を持つようにする必要があります。 |
見出し階層の構造ではなく、ヘッダー・テキストのサイズのみを変更する場合は、size属性を設定します。
size属性では、ヘッダー・テキストに使用する数値を指定し、スキンをオーバーライドします。最大数値は0で、H1ヘッダー・レベルに対応し、最小数値は5で、H6ヘッダーに対応します。
デフォルトで、size属性は-1です。これは、ADF Facesにより、使用するヘッダー・レベルのスタイルが最上位の親コンポーネントから自動的に計算されることを意味します。ネストされているコンポーネントを使用する場合は、size属性を明示的に設定して、表示する適切なヘッダー・スタイルを取得する必要はありません。
|
注意: テキストのスタイルは |
ADF Facesにより使用されるデフォルトのスキンでは、サイズ3以上に使用されるスタイルがサイズ2と同じように表示されます。つまり、サイズ3、4または5のスタイルには違いがなく、すべてサイズ2と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
セクションまたはサブセクションにコンテンツを追加するには、必要な子コンポーネントをshowDetailHeaderコンポーネントに挿入します。
ページには、任意の数のpanelBoxコンポーネントを挿入できます。
panelBoxコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「パネル・ボックス」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開き、rampに使用するランプを選択します。
coreランプでは様々な青が使用され、highlightランプでは様々な黄色が使用されます。使用する色は、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
backgroundをlight、medium、darkまたはdefaultのいずれかの値に設定します。デフォルトの背景色は透明です。
textを、コンテナのヘッダー部分のタイトルとして表示するテキスト文字列に設定します。
iconを、ヘッダー・テキストの前に表示するアイコン・イメージのURIに設定します。
|
注意:
|
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
titleHalignをcenter、start、end、leftまたはrightのいずれかの値に設定します。この値により、コンテナのヘッダー部分のタイトルの横位置(アイコン・イメージを含む)が決定されます。
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListenerをdisclosureListenerメソッドに設定します。
表示イベントおよびリスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
ツールバー・ボタンを追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、toolbarファセットにtoolbarをドラッグ・アンド・ドロップします。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarおよびcommandToolbarButtonコンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
表示するコンテナにコンテンツを追加するには、必要なコンポーネントをpanelBoxコンポーネントの子コンポーネントとして挿入します。
通常、panelBoxコンポーネントに子コンポーネントを1つ挿入し、その子コンポーネントに表示するコンテンツを挿入します。この子コンポーネントでコンテンツの表示方法を制御できますが、親のpanelBoxコンポーネントは制御できません。
panelBoxコンポーネントの幅を変更するには、inlineStyle属性を希望する正確なピクセル・サイズに設定します。または、inlineStyle属性を、panelBoxコンポーネントが含まれる外側の要素の割合に設定します。例8-11に、幅を変更するために使用するコードを示します。
showDetail、showDetailHeaderおよびpanelBoxコンポーネントなどのように、組込みのイベント機能のあるADF Facesコンポーネントは、formコンポーネントで囲む必要があります。
これらのコンポーネントのdisclosed属性では、ヘッダーの下のコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed属性はtrueで、コンテンツが表示されます。この属性がfalseに設定されていると、コンテンツは非表示になります。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
disclosed属性の値は実行時に永続可能であるため、ユーザーがコンテンツを表示または非表示にした場合、ADF Facesでは属性値を変更して保持できるので、その値はユーザーのセッション中その状態のままになります。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
ユーザーが切替えアイコンをクリックしてコンテンツを表示または非表示にすると、コンポーネントからサーバーにorg.apache.myfaces.trinidad.event.DisclosureEventイベントが送信されます。DisclosureEventイベントには、ソース・コンポーネントおよびその状態、つまり表示(開いている)または非表示(閉じている)に関する情報が含まれています。isExpanded()メソッドは、ノードを開く(表示)か閉じる(非表示)かを決定するブール値を返します。コンポーネントにそのコンテンツの表示および非表示のみを行わせる場合は、コードを記述する必要はありません。
ただし、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章「イベントの処理」を参照してください。
非表示および表示できるコンテンツの複数の領域を表示する必要がある場合は、panelAccordionまたはpanelTabbedコンポーネントを使用できます。どちらのコンポーネントでも、showDetailItemコンポーネントを使用して実際のコンテンツを表示します。
panelAccordionコンポーネントを使用すると、開くことのできる一連のペインを作成できます。ユーザーがいつでも複数のパネルを開いたり、一度に1つのパネルのみを開けるようにできます。複数のパネルを開いている場合は、showDetailItemコンポーネントのヘッダーをドラッグして、パネルの高さを調整できます。
パネルが閉じている場合は、パネル・ヘッダーのみが表示され、パネルが開いている場合は、パネル・ヘッダーの下にパネル・コンテンツが表示されます(panelAccordionコンポーネントのヘッダーまたは展開アイコンをクリックしてペインを開くことができます)。図8-34に示されているように、File ExplorerアプリケーションではpanelAccordionコンポーネントを使用して、「フォルダ」および「検索」ペインを表示しています。
実行時、使用可能なブラウザの領域が、開かれたパネルのコンテンツの表示に必要な領域より少ない場合、表示されていないペインをユーザーが選択して移動できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。図8-35に、「検索」パネルを表示する十分な領域がない場合に、File Explorerアプリケーションの「フォルダ」パネルに表示されるオーバーフロー・アイコン(丸で囲まれている右下のアイコン)を示します。
ユーザーがオーバーフロー・アイコンをクリックすると、ユーザーが選択してナビゲートするためのオーバーフロー・ポップアップ・メニューが表示されます(図8-36を参照)。
図8-37に示すように、ドラッグ・アンド・ドロップしてペインを再配置できるように、panelAccordionを構成することもできます。
順序を変更すると、showDetailItemコンポーネントのdisplayIndex属性も変更され、新しい順序が反映されます。
|
注意: オーバーフローの項目を並べ替えることはできません。 |
panelAccordionコンポーネントの使用方法は、8.9.1項「panelAccordionコンポーネントの使用方法」を参照してください。
panelTabbedコンポーネントを使用すると、タブ付きの一連のペインを作成できます。panelAccordionペインとは異なり、panelTabbedペインは閉じることも開くこともできません。かわりに、ユーザーがタブを選択すると、選択したタブのコンテンツが表示されます。タブは表示領域の上か、表示領域の下、あるいはその両方に表示されます。個々のタブを閉じられるようにpanelTabbedコンポーネントを構成できます。このコンポーネントは、すべてのタブを閉じる、最後のタブを除いてすべて閉じる、またはタブを閉じないように構成できます。タブが閉じられるように構成されている場合、タブの最後にXが表示されます。無効なX(閉じることはできるが、現在無効になっている)が表示されるようにタブを構成することもできます。
各タブのコンテンツを含むshowDetailItemコンポーネントが作成されるタイミングを構成できます。タブの数が少ない場合は、現在表示されているタブに関係なく、panelTabbedコンポーネントが最初に作成されたときに、すべてのshowDetailItemコンポーネントを作成できます。ただし、panelTabbedコンポーネントに多数のshowDetailItemコンポーネントが含まれていると、ページのレンダリングが遅くなる場合があります。パフォーマンスを上げるには、対応するタブが選択された場合にのみshowDetailItemコンポーネントが作成されるように、panelTabbedコンポーネントをかわりに構成します。さらに、ユーザーが異なるタブを選択した場合にshowDetailItemを破棄するか、アクセスするたびに再作成する必要がないように、選択したshowDetailItemコンポーネントをコンポーネント・ツリーに保持するように配信メソッドを構成できます。
File ExplorerアプリケーションではpanelTabbedコンポーネントを使用して、図8-38に示されているように、メインのパネルにコンテンツを表示しています。
panelTabbedコンポーネントの使用方法は、8.9.2項「panelTabbedコンポーネントの使用方法」を参照してください。
|
ヒント: タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、ナビゲーション・パネル・コンポーネントを使用してナビゲーション・メニューを作成できます。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
panelAccordionおよびpanelTabbedコンポーネントのどちらの場合でも、showDetailItemコンポーネントを1つ使用して各パネルにコンテンツを配置します。たとえば、4つのペインを使用する場合、panelAccordionまたはpanelTabbedコンポーネントのそれぞれにshowDetailItemコンポーネントを4つ挿入します。showDetailItemコンポーネントを使用するには、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。showDetailItemコンポーネントのtoolbarファセットにツールバーを追加でき、そのツールバーはパネルまたはタブが開かれている場合に表示されます。図8-38に、File ExplorerアプリケーションのshowDetailItemコンポーネントで使用されているツールバーを示します。
すべてのタブを表示できない場合、panelTabbedコンポーネントでもオーバーフロー・アイコンがサポートされています。図8-39に、File Explorerアプリケーションのオーバーフロー・アイコンを示します。
|
パフォーマンスのヒント:
|
panelAccordionおよびpanelTabbedコンポーネントのどちらも拡大できるように構成できますが、現在表示されているshowDetailItem子からディメンションをかわりに取得するように構成することもできます。
panelAccordionまたはpanelTabbedコンポーネントを拡大するように構成すると、showDetailItemコンポーネントの子が1つのみである場合は、showDetailItemコンポーネントで1つの子を拡大するように構成することもできます。
panelAccordionコンポーネントは、ページ内(一般的にはページの異なる領域)に複数使用したり、ネストさせることができます。panelAccordionコンポーネントを追加したら、各ペインにshowDetailItemを1つ使用して、一連のshowDetailItemコンポーネントを挿入してペインを作成します。次に、各showDetailItemにコンポーネントを挿入して、パネル・コンテンツを配置します。showDetailItemコンポーネントの使用手順は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelAccordionコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「パネル・アコーディオン」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
ユーザーが同時に複数のパネルのコンテンツを開いて参照できるようにする場合は、discloseManyをtrueに設定します。
デフォルト値はfalseです。これは、一度に開くことのできるパネルが1つのみであることを意味します。たとえば、最初にページがロードされた際に、開いているパネルAと閉じているパネルBが1つずつあるとします。一度に開くことのできるパネルは1つのみであるため、ユーザーがパネルBを開くとパネルAが閉じます。
ユーザーがすべてのペインを閉じることができるようにする場合は、discloseNoneをtrueに設定します。
デフォルト値はfalseです。これは、必ず1つのパネルが開かれたままになることを意味します。
ユーザーがドラッグ・アンド・ドロップしてペインを再配置できるようにする場合は、「その他」セクションを開き、「並替え」をenabledに設定します。デフォルトはdisabledです。
|
注意:
|
デフォルトでは、panelAccordionコンポーネントは、使用可能なブラウザの領域を埋めるために拡大されます。子を拡大しないコンポーネントの子としてpanelAccordionコンポーネントをかわりに使用する場合は、panelAccordionコンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。
children: panelAccordionコンポーネントが、現在表示されているshowDetailItemコンポーネントからディメンションを取得します。
|
注意: この設定を使用している場合は、(たとえば、 同様に、 |
parent: panelAccordionコンポーネントのサイズは、次の順序で決定されます。
inlineStyle属性から。
inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto: panelAccordionコンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelAccordionコンポーネントが拡大されます。親が子を拡大しない場合、panelAccordionコンポーネントのサイズは子コンポーネントのサイズに基づきます。
|
注意:
|
デフォルトでは、panelTabbedコンポーネントが作成されると、すべてのshowDetailItem子コンポーネントが作成されます。子が多数の場合は、パフォーマンスを向上するために、タブが選択された場合にのみshowDetailItem子コンポーネントを作成するか、タブが最初に選択された場合にのみshowDetailItem子コンポーネントを作成し、その時点以降、作成されたままになるように、panelTabbedを構成できます。
childCreation属性を使用して、子コンポーネントが作成されるタイミングを構成します。これを行うには、「その他」セクションを開き、childCreationを次のいずれかに設定します。
immediate: panelTabbedコンポーネントが作成されると、すべてのshowDetailItemコンポーネントが作成されます。
lazy: showDetailItemコンポーネントは、関連付けられたタブが選択された場合にのみ作成されます。タブが選択されると、showDetailItemコンポーネントはコンポーネント・ツリーで作成されたままになります。
lazyUncached: showDetailItemコンポーネントは、関連付けられたタブが選択された場合にのみ作成されます。別のタブが選択されると、showDetailItemコンポーネントは破棄されます。
デフォルトで、panelAccordionコンポーネントの子コンポーネントとしてshowDetailItemコンポーネントを使用すると、パネルが1つ追加されます。さらにペインを追加するには、panelAccordionコンポーネントにshowDetailItemコンポーネントを挿入します。必要な数だけペインを追加できます。
|
ヒント: 通常はアコーディオン・パネルの直接の子コンポーネントである子コンポーネントを |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。手順は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelTabbedコンポーネントを使用してタブ付きのペインを作成する方法は、panelAccordionコンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelTabbedコンポーネントを追加した後に、一連のshowDetailItemコンポーネントを挿入して、表示するタブ付きのパネル・コンテンツを配置します。
panelTabbedコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「タブ付きパネル」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
表示領域のコンテンツの下にタブをレンダリングする場合は、positionをbelowに設定します。
デフォルトでは、値はaboveです。これは、タブが表示領域のコンテンツの上にレンダリングされることを意味します。使用できるその他の値はbothで、この場合、タブは表示領域の上と下にレンダリングされます。
ユーザーがタブを閉じられる(削除できる)ようにするには、tabRemovalを設定します。この属性を設定して、すべてのタブの削除、または最後のタブを除くすべてのタブの削除を許可できます。実際に削除するにはハンドラを実装し、関連するshowDetailItemコンポーネントのリスナーを構成する必要があります。これは各showDetailItemコンポーネントでオーバーライドできるため、各タブを削除できないか(閉じるアイコンは表示されません)、閉じるアイコンは無効になります。詳細は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
デフォルトでは、panelTabbedコンポーネントは、使用可能なブラウザの領域を埋めるために拡大されます。子を拡大しないコンポーネントの子としてpanelTabbedコンポーネントをかわりに使用する場合は、panelTabbedコンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。
disclosedChild: panelTabbedコンポーネントが、現在表示されているshowDetailItemコンポーネントからディメンションを取得します。
|
注意: この設定を使用している場合は、(たとえば、 |
parent: panelTabbedコンポーネントのサイズは、次の順序で決定されます。
inlineStyle属性から。
inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto: panelTabbedコンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelTabbedコンポーネントが拡大されます。親が子を拡大しない場合、panelTabbedコンポーネントのサイズは子コンポーネントのサイズに基づきます。
panelTabbedコンポーネントの子としてshowDetailItemコンポーネントを使用すると、デフォルトでタブ付きパネルが1つ追加されます。さらにペインを追加するには、panelTabbedコンポーネントにshowDetailItemコンポーネントを挿入します。必要な数だけタブ付きのペインを追加できます。
|
ヒント: 通常は |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。showDetailItemの使用方法の詳細は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
showDetailItemコンポーネントは、panelAccordionまたはpanelTabbedコンポーネントにのみ挿入します。各showDetailItemコンポーネントは、各アコーディオン・パネルまたはタブ付きパネルに対応します。一般的に、親コンポーネントに2つ以上のshowDetailItemコンポーネントを挿入します。表示する子コンポーネントをshowDetailItemコンポーネントに挿入します。
showDetailItemコンポーネントのdisclosed属性では、対応するアコーディオン・パネルまたはタブのコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed属性はfalseで、コンテンツは非表示(閉じた状態)になります。この属性がtrueに設定されていると、コンテンツは表示(開いた状態)されます。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
次の手順では、8.9.1項「panelAccordionコンポーネントの使用方法」および8.9.2項「panelTabbedコンポーネントの使用方法」の説明に従って、JSFページにpanelAccordionまたはpanelTabbedコンポーネントをそれぞれ追加済であると仮定しています。
showDetailItemコンポーネントを使用してアコーディオン・パネルまたはタブ付きパネルのコンテンツを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、「詳細アイテムの表示」コンポーネントをドラッグ・アンド・ドロップし、panelAccordionまたはpanelTabbedなどの親コンポーネント内に、showDetailItemコンポーネントを1つ以上挿入します。
プロパティ・インスペクタで、「外観」セクションを開きます。
textを、このパネルまたはタブに表示するラベルに設定します。
ラベルの前にアイコンを追加するには、iconを、使用するイメージ・ファイルのURIに設定します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
拡大するように構成されたpanelAccordionコンポーネント内にshowDetailItemコンポーネントが使用されている場合は、showDetailItemを拡大してから、そのコンテンツを拡大するように構成できますが、showDetailItemコンポーネントの子コンポーネントは1つのみにする必要があります。各showDetailItemコンポーネントにflexおよびsretchChildrenを設定する必要があります。
|
注意:
|
各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-36を参照)。また、パネルのflex値がゼロ以外の場合は、その値が、その他のペインがオーバーフロー・メニューに移動する前に、パネルが縮小される最低の高さになります。
stretchChildren: firstに設定されている場合、単一の子コンポーネントが拡大されます。ただし、拡大できる子コンポーネントであることが必要です。詳細は、8.9.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
たとえば、File Explorerアプリケーションでは、showDetailItemコンポーネントを使用してナビゲータ・パネルにコンテンツが表示されています。両方のナビゲータが開かれている場合「検索」ナビゲータにはより多くの領域が必要なため、flex属性は2に設定され、「フォルダ」ナビゲータのshowDetailItemコンポーネントにはデフォルトのflex値1が使用されています。この設定により、「検索」ナビゲータが開かれている場合は、「フォルダ」ナビゲータより大きくなります。
|
注意: File Explorerアプリケーションでは、 |
ユーザーは実行時にパネルの高さを変更できるため、flex属性およびinflexibleHeight属性の値が変更されます。それらの値は、ユーザーのセッション中に変わらないように永続させることができます。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
フレキシブルなアコーディオン・パネル・コンテンツに関する次の追加情報に注意してください。
ADF Facesでフレキシブルなコンテンツを有効にするには、flex値が0より大きいペイン(showDetailItemコンポーネント)が2つ以上必要です。これは、ADF Facesでは、パネル・コンテンツにどのくらいの領域を割り当てるかの決定に、2つのコンポーネントのflexの割合が使用されているためです。実行時、フレキシブルなコンテンツの表示の結果を確認するには、2つ以上のペインが開かれている必要があります。
showDetailItemコンポーネントの子コンポーネントが1つのみでflex値がゼロ以外の場合、かつstretchChildren属性がfirstに設定されている場合、ADF Facesにより、panelAccordionコンポーネントのdiscloseMany属性の値にかかわらずその子コンポーネントが拡大されます。
showDetailItemコンポーネントのflex値がすべて0(ゼロ)で、そのパネル・コンテンツが開かれている場合、開かれているコンテンツがinflexibleに設定されていても、最後に開かれたshowDetailItemコンポーネントのコンテンツは、flex値が1に設定されているかのようにADF Facesによって拡大されますが、これが行われるのはshowDetailItemコンポーネントの子が1つのみで、stretchChildren属性がfirstに設定されている場合のみです。最後に開かれたパネルに複数の子コンポーネントがあるか、stretchChildren属性がnoneに設定されている場合、コンテンツは拡大されません。
flex属性が設定されていても、ジオメトリ管理に関する制限事項があります。詳細は、8.9.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
「動作」セクションを開きます。disclosureListenerを、ユーザーがこのパネルまたはタブを選択した場合に実行するバッキングBeanのdisclosureListenerメソッドに設定します。
サーバーの表示イベントおよびイベント・リスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
このパネルまたはタブを無効(ユーザーがペインまたはタブを選択できない状態)にする場合は、disabledをtrueに設定します。
このパネルまたはタブの子コンポーネントを表示する場合は、disclosedをtrueに設定します。
disclosed属性は、デフォルトでfalseに設定されています。これは、このパネルまたはタブのコンテンツが非表示になることを意味します。
|
注意:
|
disclosed属性がtrueに設定されているshowDetailItemコンポーネントがない場合は、ADF Facesにより、最初に有効にされたshowDetailItemコンポーネントのコンテンツが自動的に表示されます(panelAccordionコンポーネントの子で、表示されないペインの設定が行われている場合を除きます)。
|
注意: コンテンツを表示または非表示にすることで、ユーザーは |
panelAccordionコンポーネントで使用されるshowDetailItemコンポーネントの場合は、「その他」セクションを開き、displayIndexを設定して、showDetailItemコンポーネントが表示される順序が反映されるようにします。ページのコードの順に表示する場合は、デフォルトの-1のままにします。
|
ヒント: ある |
|
ヒント: 並べ替えできるように |
panelTabbedコンポーネントのタブを削除できるようにする場合は、「その他」セクションを開き、「削除」を次のいずれかに設定します。
inherit: 削除できるようにpanelTabbed親コンポーネントが構成されている場合は、対応するタブを削除できます。これはデフォルト設定です。
no: 対応するタブは削除できず、閉じるアイコンも表示されません。
disabled: 対応するタブに無効な閉じるアイコンが表示されます。
itemListenerを、コンポーネントの実際の削除を処理するハンドラ・メソッドに解決されるEL式に設定します。
ツールバー・ボタンをパネル(panelAccordionのみでサポート)に追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、そのパネルを定義するshowDetailItemコンポーネントのtoolbarファセットに、toolbarを挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarファセットがshowDetailItemコンポーネントにある場合でも、ツールバーおよびボタンをレンダリングするのはpanelAccordionコンポーネントです。toolbarおよびcommandToolbarButtonの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
注意: アコーディオン・パネルが閉じている場合、ADF Facesにはツールバーおよびそのボタンは表示されません。ツールバーおよびそのボタンは、パネルが開かれている場合にのみ、パネル・ヘッダーに表示されます。 |
パネルにコンテンツを追加するには、必要な子コンポーネントを各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(拡大するように構成されている場合)
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項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
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.8.4項「表示イベントについて」を参照してください。
panelHeaderコンポーネントは、メッセージの表示や関連するヘルプ・トピックなどのヘッダー・タイプ機能が必要な場合に使用できますが、コンテンツの表示および非表示機能を指定する必要はありません。
ページの異なるルック・アンド・フィールに遷移する必要がある場合は、decorativeBoxコンポーネントを使用できます。decorativeBoxコンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、使用しているスキンに応じて、デフォルトのテーマを使用する場合、decorativeBoxコンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。テーマおよびスキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeaderコンポーネントには、特定タイプのコンポーネント用のファセットや、ヘッダーからヘルプ・トピックを起動する機能があります。次に、panelHeaderコンポーネントでサポートされているファセットを示します。
context: ヘッダーのヘッダー・テキストの横に情報を表示します。
help: ヘルプ情報を表示します。下位互換性が必要な場合にのみ使用します。かわりに、panelHeaderコンポーネントではhelpTopicId属性を使用します。
info: ヘッダー・テキストの下に情報を表示します。右揃えになります。
legend: ヘルプ・テキストが存在する場合は、ヘルプ・コンテンツの左側でinfoファセットのコンテンツの下に情報が表示されます。ヘルプ・テキストが存在しない場合、legendコンテンツはヘッダーの下に直接レンダリングされます。
toolbar: メニュー・バーの前にツールバーを表示します。
menuBar: ツールバーの後ろにメニュー・バーを表示します。
図8-40に、panelHeaderコンポーネントの様々なファセットを示します。
タイトル行のすべてのファセットにすべてを表示する十分な領域がない場合、panelHeaderテキストは切り捨てられ、省略記号が表示されます。切り捨てられたテキストの上にマウスを置くと、図8-41に示すように、完全なテキストがツールチップに表示されます。
コンテンツの表示に十分な領域がある場合は、図8-42に示すように、余分な領域がcontextファセットとツールバーの間に配置されます。
セクションの階層を表すようにpanelHeadersコンポーネントを構成できます。たとえば、図8-43に示されているように、サブヘッダーのあるメイン・ヘッダーおよびサブヘッダーのあるヘッダー・レベル1を表示できます。
それぞれにpanelHeaderコンポーネントをネストさせてサブセクションを作成します。panelHeaderコンポーネントをネストさせると、階層に応じてヘッダー・テキストが自動的にサイズ調整され、一番外側のpanelHeaderコンポーネントのテキストが最も大きくなります。
|
注意: サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、 |
panelHeaderコンポーネントの使用方法の詳細は、8.10.1項「panelHeaderコンポーネントの使用方法」を参照してください。
decorativeBoxコンポーネントには、テーマを使用したスタイル機能が用意されています。topとcenterの2つのファセットがあります。topファセットには色なしの領域が提供され、centerファセットは実際のボックスです。topファセットの高さは、コンポーネントがtopファセットに配置されているかどうかに依存します。ファセットが設定されていると、topHeight属性を使用して、コンテンツが占めるサイズが指定されます。
centerファセットのボックスの色は、使用されているテーマとスキンによって決まります。図8-44に、デフォルトで使用可能な様々なテーマを示します。
デフォルトでは、decorativeBoxコンポーネントは、親コンポーネントを埋めるために拡大されます。decorativeボックス・コンポーネントが子コンポーネントからディメンションを継承するように構成することもできます。たとえば、図8-45は、親を埋めるために拡大するように構成されたミディアム・テーマのdecorativeBoxと、outputText子コンポーネントのみと同じサイズになるように構成されたdarkテーマのdecorativeBoxを示しています。
スキンを使用して、decorativeBoxコンポーネントのスタイルをさらに制御できます。コンポーネントの次の領域には、スキニング・キーを定義できます。
top-start
top
top-end
start
end
bottom-start
bottom
bottom-end
スキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeaderコンポーネントを1つ使用して特定の情報を指定することも、一連のpanelHeaderコンポーネントをネストさせてコンテンツの階層組織を作成することもできます。コンテンツを表示および非表示にできるようにする場合は、かわりにshowDetailHeaderコンポーネントを使用します。詳細は、8.8.2項「showDetailHeaderコンポーネントの使用方法」を参照してください。
panelHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、ページに「パネル・ヘッダー」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開きます。
textを、このパネルに表示するラベルに設定します。
ラベルの前にアイコンを追加するには、iconを、使用するイメージ・ファイルのURIに設定します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、messageTypeを次のいずれかの値に設定します。
confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
none: デフォルト。アイコンは表示されません。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
図8-46に、様々なメッセージ・タイプに使用されるアイコンを示します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
ヘッダーにヘルプを表示するには、HelpTopicIdにトピックIDを入力します。ヘルプ・トピックの作成および使用方法の詳細は、17.5項「コンポーネントへのヘルプの表示」を参照してください。
コンポーネントの見出しレベルをオーバーライドするには、headerLevelを目的のレベル(H1、H2などからH6)に設定します。
見出しレベルは、特にスクリーン・リーダー・アプリケーションで使用する場合に、正しいページ構造を決定するのに使用されます。デフォルトで、headerLevelは-1に設定されており、ページの物理的位置に基づいて、ヘッダーでサイズを決定できます。つまり、最初のヘッダー・コンポーネントはH1に設定されます。そのH1コンポーネントにネストされるヘッダー・コンポーネントはH2などに設定されます。
|
注意: スクリーン・リーダー・アプリケーションでは、HTMLヘッダー・レベルの割当てを利用して、ページの基本構造を識別します。ヘッダー・コンポーネントおよびヘッダー・レベルの割当てがページで意味をなすようにしてください。 オーバーライド値を使用する場合は、ページの公開可能なセクション内にヘッダーを含めた場合の影響について考慮してください。たとえば、ページに縮小可能な領域がある場合は、領域が縮小および表示されるときに、オーバーライドされた構造が意味を持つようにする必要があります。 |
見出し階層の構造ではなく、ヘッダー・テキストのサイズのみを変更する場合は、size属性を設定します。
size属性では、ヘッダー・テキストに使用する数値を指定し、スキンをオーバーライドします。最大数値は0で、H1ヘッダー・レベルに対応し、最小数値は5で、H6ヘッダーに対応します。
デフォルトで、size属性は-1です。これは、ADF Facesにより、使用するヘッダー・レベルのスタイルが最上位の親コンポーネントから自動的に計算されることを意味します。ネストされているコンポーネントを使用する場合は、size属性を明示的に設定して、表示する適切なヘッダー・スタイルを取得する必要はありません。
|
注意: テキストのスタイルは |
ADF Facesにより使用されるデフォルトのスキンでは、サイズ3以上に使用されるスタイルがサイズ2と同じように表示されます。つまり、サイズ3、4または5のスタイルには違いがなく、すべてサイズ2と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeaderコンポーネントによるジオメトリ管理の処理方法を制御するには、「その他」セクションを開き、「タイプ」を次のいずれかに設定します。ジオメトリ管理の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
flow: コンポーネントは拡大されず、子も拡大しません。panelHeaderコンポーネントの高さは、その子によってのみ決定されます。
stretch: コンポーネントは拡大され、子コンポーネントも拡大します(拡大される子コンポーネントは1つのみです)。
default: panelHeaderコンポーネントの親コンポーネントでジオメトリ管理を決定する場合。
パネルにツールバー・ボタンを追加するには、toolbarコンポーネントをtoolbarファセットに挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarおよびcommandToolbarButtonの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
注意:
|
パネルにメニューを追加するには、menuBarファセットにmenuコンポーネントを挿入します。メニュー・バーへのメニュー作成の詳細は、14.2項「メニュー・バーでのメニューの使用方法」を参照してください。
|
ヒント:
|
必要に応じて、その他のファセットにコンテンツを追加します。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
パネルにコンテンツを追加するには、必要な子コンポーネントをpanelHeaderコンポーネントに挿入します。
ページに色付き領域またはボックスを表示するには、decorativeBoxコンポーネントを使用します。このコンポーネントは、タブを表示するように構成されているnavigationPaneコンポーネントのコンテナとして一般に使用されます。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
decorativeBoxコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、ページに「装飾ボックス」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開き、高さの頂点をtopファセットの高さに設定します。
テーマを変更するには、「スタイルおよびテーマ」セクションを開き、異なるテーマを選択します。
デフォルトでは、decorativeBoxコンポーネントは、使用可能なブラウザの領域を埋めるために拡大されます。子を拡大しないコンポーネントの子としてdecorativeBoxコンポーネントをかわりに使用する場合は、decorativeBoxコンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「その他」セクションを開き、dimensionsFromを次のいずれかに設定します。
children: decorativeBoxコンポーネントが子からディメンションを取得します。
|
注意: この設定を使用する場合は、 同様に、(たとえば、 |
parent: decorativeBoxコンポーネントのサイズは、次の順序で決定されます。
inlineStyle属性から。
inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto: decorativeBoxコンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてdecorativeBoxコンポーネントが拡大されます。親が子を拡大しない場合、decorativeBoxコンポーネントのサイズは子コンポーネントのサイズに基づきます。
詳細は、8.10.3項「ジオメトリ管理およびdecorativeBoxコンポーネントについて」を参照してください。
decorativeBoxコンポーネントは、centerファセットの子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次のコンポーネントは、decorativeBoxコンポーネントのcenterファセット内で拡大できます。
inputText(拡大するように構成されている場合)
decorativeBox(拡大するように構成されている場合)
panelAccordion(拡大するように構成されている場合)
panelBox
panelCollection
panelDashboard
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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelListコンポーネントは、図8-47に示されているように、それぞれの隣に黒丸が付いた子コンポーネントの垂直のリストを表示するためのレイアウト要素です。rendered属性がtrueに設定されている子コンポーネント、およびvisible属性がtrueに設定されている子コンポーネントのみが、リストの順で表示の対象となります。
|
注意: 動的データ(JSFバインディングによって実行時に決定されたデータのリストなど)を表示する場合は、9.6項「選択コンポーネントの使用」の説明に従って、選択コンポーネントを使用します。モデル・レイヤーを変更するリストを作成する必要がある場合は、第11章「値リスト・コンポーネントの使用方法」を参照してください。 |
デフォルトで、黒丸は子コンポーネントのスタイルの設定に使用されます。四角や白丸など、使用できるスタイルは他にもあります。表示する項目のリストが非常に長い場合は、リストを列に分割することもできます。
項目のリストを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-13に、リストのスタイルをcircleに設定するコードを示します。
panelListコンポーネントに(箇条書き項目として表示する)必要な数の子コンポーネントを挿入します。
|
ヒント: 通常はパネル・リストの直接の子コンポーネントである子コンポーネントを |
たとえば、一連のcommandLinkコンポーネントまたはoutputFormattedコンポーネントを挿入できます。
|
注意: ADF Facesでは、デフォルトで、 |
panelListコンポーネントをネストさせて、リスト階層を作成できます。図8-48に示されているように、リスト階層には外部項目と内部項目があり、外部項目に属する内部項目は外部項目の下にインデント表示されます。内部項目の各グループは、ネストした単一のpanelListコンポーネントによって作成されます。
図8-48のようなリスト階層を作成するには、groupコンポーネントを使用して、外部項目とその内部項目の各グループを構成するコンポーネントをラップします。例8-14に、4つの内部項目を持つ外部項目が1つと、2つの内部項目を持つ別の外部項目があるリスト階層の作成方法に関するコードを示します。
例8-14 ネストした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.12項「関連する項目のグループ化」を参照してください。
親コンポーネント内で類似の項目をまとめる必要がある場合は、groupまたはpanelGroupLayoutコンポーネントを使用します。groupコンポーネントは、意味的に関連する子コンポーネントを集約またはグループ化します。panelGroupLayoutコンポーネントとは異なり、groupコンポーネントでは子コンポーネントをレイアウトできません。単独で使用した場合、groupコンポーネントでは何もレンダリングされず、groupコンポーネント内の子コンポーネントのみが実行時にレンダリングされます。
関連するコンポーネントのグループ化には、任意の数のgroupコンポーネントを使用できます。たとえば、panelFormLayoutコンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例8-15に、panelFormLayoutコンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。
例8-15 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-49に示すように、折り返さずに一連の子コンポーネントを縦または横に配置することも、折り返して続けて配置することもできます。layout属性の値により子コンポーネントの配置が決定されます。
すべての配置において、panelGroupLayoutコンポーネントのseparatorファセットを使用して、隣接する子コンポーネントの各ペアを線または空白で区切ることができます。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。
横のレイアウトを使用する場合は、子コンポーネントを縦または横に並べることもできます。図8-50に示すように、上部の位置を合せて、高いコンポーネントの隣に低いコンポーネントを作成できます。
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-51に示すようにスクロールバーがレンダリングされます。
panelGroupLayoutコンポーネントは、必要なレイアウトにするためにいくつでもネストさせることができます。
panelGroupLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「パネル・グループ・レイアウト」をドラッグ・アンド・ドロップします。
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-52に示されているように、文字が配置されている架空の線に沿ってテキストの文字が並べられます。そのようなテキスト・コンポーネントでvalignをbottomに設定した場合、bottomの縦の配列ではすべての文字の一番下の部分が同じ架空の線上に配置されるため、結果は見栄えのよい外観にはなりません。
|
注意: layoutがhorizontalではない場合、 |
scroll: 縦のレイアウトになり、子コンポーネントは縦に並べられ、必要な場合には縦のスクロールバーが表示されます。
vertical: 縦のレイアウトになり、子コンポーネントは縦に並べられます。
コンポーネント間に一定の間隔を設けるために、ページに空白を組み込むことができるため、すべてのコンポーネントが互いに前後左右に近接しているよりも、ページは乱雑に見えなくなります。spacerコンポーネントは、特にこの目的のために用意されたADF Facesコンポーネントです。
heightおよびwidth属性を使用して、縦または横、あるいはその両方の空白をページに組み込むことができます。
height: ページに組み込む縦の空白の量を決定する属性。例8-16に、縦の空白を使用して、2つの長いoutputTextコンポーネントの間に一定の間隔を設けるよう設定されたページを示します。
例8-16 縦の空白
<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-53に、ブラウザで表示した場合に、spacerコンポーネントがページ出力に及ぼす影響を示します。
width属性は、コンポーネント間に組み込む横の空白の量を決定します。例8-17に、2つのコンポーネントの間に横方向の間隔を設けるよう設定されたページのソースの一部を示します。
例8-17 横の空白
<af:outputLabel value="Your credit rating is currently:"/> <af:spacer width="10"/> <af:outputText value="Level 8"/>
図8-54に、ブラウザで表示した場合の、横方向の間隔調整コンポーネントの影響を示します。
separatorコンポーネントを使用すると横線を作成できます。図8-55に、2つのpanelBoxコンポーネント間にseparatorコンポーネントを挿入した場合のproperties.jspxファイルの外観を示します。
通常、spacerおよびseparatorコンポーネントは、その他のレイアウト・コンポーネントのファセットに使用します。これにより、分割するコンポーネントに空白または線が表示されます。
ページには、必要な数だけspacerコンポーネントを使用できます。
spacerコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「スペーサ」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。必要に応じて幅と高さを設定します。
|
注意: 高さが指定されていて幅が指定されていない場合、ブロック・レベルのHTML要素がレンダリングされ、その近くに新しい行が表示されます。幅が指定されている場合、指定されている高さの値に関係なく、HTML標準を厳密にサポートするユーザー・エージェントに適用可能な行の高さより低くなりません。 |
