Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、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( |
|
|
子コンポーネント(通常は |
X |
X( |
|
|
子コンポーネントを含めることが可能で、その中央に配置され、枠に沿って12個のファセットも含まれます(追加のコンポーネントを配置可能)。これらは中央部分を囲みます。詳細は、8.6項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。 |
|||
|
ラベルやフィールドが縦に並ぶように、 |
|||
表示/非表示機能のあるコンポーネント |
||||
|
ヘッダーの下のコンテンツを表示または非表示にできます。通常、 |
X( |
X( |
|
|
|
X(含まれる子コンポーネントが1つのみの場合) |
||
|
子コンポーネントを含めることができるタイトル付きのボックス。toolbarファセットがあります。詳細は、8.9項「コンテンツの動的な表示および非表示」を参照してください。 |
X |
||
|
|
X( |
||
|
タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、かわりにナビゲーション・メニューの |
X( |
||
|
トグル・アイコンを介してコンテンツを表示または非表示にします。詳細は、8.9項「コンテンツの動的な表示および非表示」を参照してください。 |
|||
その他のコンテナ |
||||
|
子コンポーネントが含まれ、メッセージ、ツールバーおよびヘルプ・トピックを含むヘッダーを表示します。詳細は、8.11項「静的ボックスの項目の表示」を参照してください。 |
X( |
X( |
|
|
|
X(表、ツリーまたはツリー表が1つのみの場合) |
X |
|
|
コンテナ・コンポーネントを作成します(このコンポーネントのファセットは、スタイル・テーマを使用して、その子に枠の外観を適用します)。通常、このコンポーネントは、ページの領域間のルック・アンド・フィールの遷移として機能します。たとえば背景色が暗いテンプレートを持つページは、decorativeBoxを使用して、メイン領域の背景色を白にできます。詳細は、8.11項「静的ボックスの項目の表示」を参照してください。 |
X(中央ファセット内) |
X( |
|
|
インライン |
X |
||
|
ナビゲーション階層の1レベルを表す一連のナビゲーション・アイテムを作成します。詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
X(タブを表示するように構成されている場合) |
||
|
各子コンポーネントをリスト項目として出力し、隣に黒丸をレンダリングします。ネストさせて階層リストを作成できます。詳細は、8.12項「1つ以上の列における箇条書きリストの表示」を参照してください。 |
|||
|
ポップアップ・ウィンドウ内に子コンポーネントを表示します。詳細は、13.2項「ポップアップ要素の宣言的作成」を参照してください。 |
|||
|
子のtoolbarおよびmenuコンポーネントを一緒に表示します。詳細は、14.3項「ツールバーの使用方法」を参照してください。 |
|||
グループ化コンテナ |
||||
|
子コンポーネントを縦または横にグループ化します。複数のコンポーネントがファセットに含まれる場合にファセットで使用されます。詳細は、8.13項「関連する項目のグループ化」を参照してください。 |
X(レイアウトがscrollまたはverticalに設定されている場合のみ) |
||
|
グループの親コンポーネントに管理されている場合を除き、レイアウトに関係なく子コンポーネントをグループ化します。複数のコンポーネントがファセットに含まれる場合にファセットで使用されます。詳細は、8.13項「関連する項目のグループ化」を参照してください。 |
|||
間隔調整コンポーネント |
||||
|
項目間に水平線を作成します。詳細は、8.14項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
|
空白の領域を作成します。詳細は、8.14項「空白または線を使用したコンテンツの分割」を参照してください。 |
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
コンポーネントが使用されている場合は、showDetail
Item
コンポーネントのコンテンツを拡大できます。そのため、ページのコンテンツをブラウザ・ウィンドウに合せる必要がある場合には、showDetailItem
コンポーネントを含むpanelStretchLayout
、panelSplitter
、panelDashboard
、panelAccordion
コンポーネント、およびshowDetailItem
コンポーネントを含むpanelTabbed
コンポーネントをルート・コンポーネントとして使用する必要があります。
たとえば、図8-1に、panelStretchLayout
コンポーネントのcenter
ファセットに配置された表を示します。表はブラウザ領域に収まるように拡大されています。表全体がブラウザ・ウィンドウに収まらない場合は、表のデータ本体部分にスクロールバーが追加されます。
図8-2に、子コンポーネントを拡大できないpanelGroupLayout
コンポーネント内にネストしている同じ表を示します(明確にするために、赤の点線の輪郭をpanelGroupLayout
コンポーネントの周囲に配置しています)。表コンポーネントでは、表のプロパティで設定されている一部の列および行のみが表示されています。
パフォーマンスのヒント: ジオメトリ管理のコストは、子コンポーネントの複雑さに直接関係しています。そのため、ジオメトリ管理される親コンポーネントに属する子コンポーネントの数はできるだけ少なくなるようにしてください。 |
子コンポーネントを拡大できるコンポーネントを選択しても、実際に拡大されるのは次のコンポーネントのみです。
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-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項「クイック・スタート・レイアウトの使用」を参照してください。
ベスト・プラクティス: レイアウト表示の問題を回避するには、クイック・スタート・レイアウトを使用します。 |
ただし、自分でレイアウトを作成する場合は、拡大されるコンポーネントと配置されるコンポーネントの両方を含むレイアウトを作成するための次のヒントに従います。
ジオメトリ管理機能のあるルート・コンポーネント内(gridRow
とgridCell
コンポーネントを含むpanelStretchLayout
、panelGridLayout
、panelSplitter
、showDetailItem
を含む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属性に、サーバーに接続できない場合に表示するテキストを入力します。
「その他」セクションを開き、次の設定を行います。
UncommittedDataWarning: データがコミットされていないことがアプリケーションによって検出されたときに、ユーザーに警告メッセージを表示する場合は、on
に設定します。警告メッセージは、ユーザーがデータをコミットせずにページを終了しようとする場合、またはサーバーにコミットされていないデータがある場合に表示されます。デフォルトでは、off
に設定されています。
stateSaving: ページに使用する状態保存のタイプに設定します。
ADF Facesアプリケーションの場合は、トークン付きのクライアント状態保存をアプリケーションで使用することをお薦めします(ページ状態がセッションに保存され、トークンがクライアントで永続します)。この設定はアプリケーションにグローバルに反映し、すべてのページで状態がセッションに保存され、状態に関する情報でトークンが永続化されます。
web.xml
のグローバル設定をページの次のいずれかにオーバーライドできます。
client: トークンを使用せずに、状態がクライアントに完全に保存されます。この設定により、セッションの期限切れのメッセージは表示されなくなります。
default: ページの状態はweb.xml
の設定に基づきます。
server: ページの状態はサーバーに保存されます。
状態保存の詳細は、付録A「web.xmlでの構成」を参照してください。
コンテンツをページの定義済領域に配置し、ブラウザがサイズ変更されたらコンテンツが拡大されるようにする必要がある場合には、panelStretchLayout
コンポーネントを使用します。panelStretchLayout
コンポーネントは、ファセット内に配置されたコンポーネントが拡大されるコンポーネントの1つです。図8-6に、コンポーネントのファセットを示します。
top
およびbottom
ファセットの高さを設定すると、含まれるコンポーネントはその高さに合うように拡大されます。同様に、start
およびend
ファセットの幅を設定すると、それらのファセットに含まれるコンポーネントはその幅まで拡大されます。それらのファセットに配置されているコンポーネントがない場合、ファセットはレンダリングされません。つまり、ファセットは領域を占有しません。設定した領域をファセットで占有し、空白のままにする場合は、spacerコンポーネントを挿入します。8.14項「空白または線を使用したコンテンツの分割」を参照してください。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
属性を使用して、コンポーネントを拡大するかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
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
(拡大するように構成されている場合)
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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
ユーザーに表示する一意のコンテンツのグループがある場合は、調整可能なスプリッタで区切られた複数のペインを提供できるように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
属性を使用して、コンポーネントを拡大するかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
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
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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelGridLayout
コンポーネントは子のgridRow
コンポーネントを使用して行を作成し、その行の中でgridCell
コンポーネントを使用して、HTML表に類似した列を構成します。gridCell
コンポーネントにコンポーネントを配置して、データ、イメージまたは他のコンテンツを表示します。
図8-13に、2つのgridRow
コンポーネントが含まれているpanelGridLayout
コンポーネントを示します。各gridRow
コンポーネントには、2つのgridCell
コンポーネントが含まれています。各gridCell
コンポーネントには、1つのchooseDate
コンポーネントが含まれています。
panelGridLayout
コンポーネントはネスト可能です。図8-14に、親panelGridLayout
コンポーネントを使用して作成された複雑なレイアウト(背景をピンクに設定)を示します。
この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
に設定されている。
セルの有効な幅と高さが、他のセルや行によって自動的に決まるように設定されていない(設定されていると、循環依存関係が発生する)。
各セルは、子コンポーネントをセルのすべての辺に固定しようとします。固定できない場合(子コンポーネントを拡大できない場合など)、子コンポーネントは開始時にセルの上部に配置されます。
一定数の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
コンポーネントのみに設定します。
注意:
「パネル・グリッド・レイアウトの作成」ダイアログを使用する場合、 |
注意:
|
このダイアログの2ページ目で、セル幅と行の高さを個別に設定します。
グリッドの幅: width
プロパティを各gridCell
コンポーネントに設定します。各列を次のいずれかに設定します。
dontCare
: セルの幅は列内の他のセルによって決定されます。これはデフォルト設定です。
auto
: セルの幅は対応する列内のコンポーネントによって決定されます。ブラウザは最初にこれらのコンポーネントをすべて描画し、これに合せて行の高さを調整します。
パーセンテージ: セルの対応する列の幅を、他の列が使用していない残りの領域の正規化されたパーセンテージにする場合、パーセンテージを入力します。たとえば、25%
などです。
固定のCSSサイズ: 幅を固定の幅に制限する場合、固定のCSSサイズを入力します。たとえば、20px
や20em
などです。
注意: 次の点に注意してください。
|
グリッドの高さ: height
プロパティを各gridRow
コンポーネントに設定します。各行を次のいずれかに設定します。
auto
: 行の高さは行のコンポーネントによって決定されます。ブラウザは最初に子コンポーネントを描画し、これに合せて行の高さを調整します。これはデフォルト設定です。
パーセンテージ: panelGridLayout
コンポーネント自体の高さが固定の場合、または親コンポーネントによって拡大されている場合、パーセンテージを入力します。たとえば、25%
などです。行の高さは、他の行が使用していない残りの領域の正規化されたパーセンテージとなります。
固定のCSS長: 高さを固定の高さに制限する場合、固定のCSS長を入力します。たとえば、10px
や20em
などです。
「終了」をクリックします。
デフォルトでは、panelGridLayout
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelGridLayout
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelGridLayout
コンポーネントが拡大を処理する方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントを拡大するかどうかを構成します。これを行うには、「プロパティ・インスペクタ」で、DimensionsFromを次のいずれかに設定します。
children
: panelGridLayout
コンポーネントは、子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合、子の行コンポーネントの高さをパーセンテージとして設定できません。 |
parent
: panelGridLayout
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
に値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
注意: この設定を使用する場合、子の行コンポーネントの高さをパーセンテージとして設定できません。 |
auto
: panelGridLayout
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelGridLayout
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelGridLayout
コンポーネントのサイズはその子コンポーネントのサイズに基づきます。これはデフォルト設定です。
panelGridLayout
コンポーネントで子を拡大する必要がある場合は、次のように設定してください。
行のheightをauto
以外の値に設定します。
セルのwidthをauto
以外の値に設定します。
gridCell
コンポーネントのhalignをstretch
に設定します。
gridCell
コンポーネントのvalignをstretch
に設定します。
子コンポーネントのみをgridCell
コンポーネントに配置します。
セルが複数の列で構成されるようにする場合、ColumnSpanを、含める列数に設定します。デフォルト値は1
です。
注意:
|
セルが複数の行で構成されるようにする場合、RowSpanを、含める行数に設定します。デフォルト値は1
です。
Halignを設定して、セルのコンテンツの横の配置を決定します。コンテンツをセルの開始位置に合せる場合(LTRロケールでは左)、これをstart
(デフォルト)に設定します。center
またはend
に設定することもできます。panelGridLayout
を拡大する場合、Halignをstretch
に設定します(panelGridLayout
コンポーネントの拡大の詳細は、手順5を参照してください)。
Valignを設定して、セルのコンテンツの縦の配置を決定します。コンテンツをセルの上部に合せる場合、これをtop
(デフォルト)に設定します。これをmiddle
またはbottom
に設定することもできます。panelGridLayout
を拡大する場合、Valignをstretch
に設定します(panelGridLayout
コンポーネントの拡大の詳細は、手順5を参照してください)。
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
コンポーネントを構成する必要があります。
panelBorderLayout
コンポーネントでは、ファセットを使用して、ページの事前定義済領域にコンポーネントを配置します。center
ファセットではなく、panelBorder
レイアウト・コンポーネントに直接の子コンポーネント(索引付きの子とも呼ばれる)を0
~n
配置します(連続して中央にレンダリングされます)。子コンポーネントはファセットで囲まれます。
図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項「コンテンツをページ全体に拡大するための設定」を参照してください。
JSFページに使用できるpanelBorderLayout
コンポーネントの数に制限はありません。
panelBorderLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「パネル枠線レイアウト」をドラッグ・アンド・ドロップします。
コンポーネント・パレットから、panelBorderLayout
コンポーネントの子コンポーネントとして、ウィンドウ中央へのコンテンツの表示に使用するコンポーネントをドラッグ・アンド・ドロップします。
子コンポーネントは、挿入した順番で連続して表示されます。他のタイプのレイアウトで子コンポーネントを表示する場合は、panelGroupLayout
コンポーネントにそのコンポーネントをラップします。詳細は、8.13項「関連する項目のグループ化」を参照してください。
中央を囲むコンテンツを配置するには、必要なコンポーネントを各ファセットにドラッグ・アンド・ドロップします。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナで子コンポーネントをラップします。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
panelFormLayout
コンポーネントを使用すると、入力フィールドや選択リスト・フィールドなど、複数のフォーム入力コンポーネントを1つ以上の列に配置できます。File Explorerアプリケーションでは、panelFormLayout
コンポーネントを使用してファイル・プロパティが表示されています。図8-16に示されているように、コンポーネントはラベルが右揃えになるように構成されています。
図8-17に、ラベルがフィールドの上に表示されるように構成されているコンポーネントを使用した同じページを示します。
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-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>
ヒント: 入力以外のコンポーネント( |
フォーム・レイアウトに意味的に関連する入力コンポーネントをグループ化するには、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>
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.7項「フォームでのコンテンツの配置」に説明されているように、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-19に示されているように、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-20に示されているように、panelDashboard
の子は、テキスト・コンポーネントではなく、コンテンツを含むpanelBox
コンポーネントです。
panelDashboard
コンポーネントを追加する場合、コンポーネントに含まれる列数および各行の高さを構成します。ダッシュボードは、子を拡大して構成済の領域を埋めます。すべての子コンポーネントが、指定した列数と行の高さ内に収まらない場合、panelDashboard
コンポーネントにスクロールバーが表示されます。
子を拡大するコンポーネントに配置した場合は、panelDashboard
を子の数に関係なく親コンテナに合せて拡大するように構成できます。つまり、ブラウザのサイズがダッシュボードで必要なサイズより大きくなると、ダッシュボードに空白の領域ができる場合があります。
たとえば、dimensionsFrom
属性をparent
に設定して、サイズを親から継承するようにpanelDashboard
を設定したとします。columnsを1に設定し、rowHeight
を50px
に設定します。次に、panelBox
コンポーネントを2つ追加します。columns
は1に設定されているため、2行になります。親コンポーネントはpanelStretchLayout
のため、ボックスの高さに関係なく、panelDashboard
はpanelStretchLayout
を埋めるために拡大され、図8-21に示すように、余分な領域ができます(境界をわかりやすくするために、ダッシュボードの色をピンクに変更しています)。
かわりに、ダッシュボードを拡大しない場合は、子を拡大しないコンポーネントに配置し、その子に基づいてサイズを決定できるようにpanelDashboard
を構成できます(dimensionsFrom
属性をchildren
に設定)。これにより、子を表示するのに必要な行数と同じ高さになります(rowHeight
属性を乗算)。
前述の例で、scroll
に設定されたpanelGroupLayout
にダッシュボードをかわりに配置する場合は、rowHeight
が50
に設定されているため、図8-22に示すように、ブラウザ・ウィンドウのサイズに関係なく、panelDashboard
は常に100pxより少し高くなります。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
panelDashboard
コンポーネントでは、宣言的なドラッグ・アンド・ドロップ動作もサポートされており、ユーザーは子コンポーネントを再配置できます。図8-23に示されているように、ユーザーは、たとえばpanelBox 10
をpanelBox 4
とpanelBox
5
の間に移動できます。ボックスをドロップできる場所にはシャドウが表示されます。
注意:
|
panelDashboard
コンポーネントには、子コンポーネントを移動できる機能に加え、APIも用意されており、このAPIにアクセスして、ユーザーが子コンポーネントをレンダリングするかレンダリングしないかを切り替えられるようにし、挿入または削除されているpanelBoxes
の外観を提供できます。ダッシュボードでは、部分ページ・レンダリングによって新しい一連の子コンポーネントが再描画されるため、ページ全体を再描画する必要がありません。
panelDashboardBehavior
タグを使用して、コンポーネントのレンダリングの応答性を向上させることができます。このタグを使用すると、コマンド・コンポーネントをアクティブ化し、視覚的な変更をダッシュボードに適用してから、アプリケーション・コードでサーバーのコンポーネント・ツリーを変更できます。アクション・イベントがサーバーに送信される前に、この領域の拡大が行われるため、コマンド・コンポーネントのアクション・リスナーがコンポーネント・ツリーを変更し、ダッシュボードでの挿入の最適化されたエンコーディングを準備している間に、ユーザーはすぐにフィードバックを確認できます。
たとえば、図8-24は、panelSplitter
コンポーネントの右パネルで使用されるpanelDashboard
コンポーネントを示しています。左パネルにリンクとして表示されているリスト項目は、panelDashboard
の各panelBox
コンポーネントを表しています。すべてのpanelBox
コンポーネントが表示されている場合、リンクはすべて非アクティブです。ただし、ユーザーがpanelBox
コンポーネントの1つを削除すると、対応するリンクがアクティブになります。ユーザーはそのリンクをクリックして、panelBox
を再挿入できます。panelDashboardBehavior
タグをcommandLink
コンポーネントとともに使用することで、ユーザーは挿入済ボックスの描画を確認できます。
このタグを使用しない場合、アクション・リスナーが処理している間、ユーザーがダッシュボード構造に対する変更を確認できるまで多少の遅延があります。
図8-25は、panelDashboard
コンポーネントを使用した実際的な例を示しています。ページの上部にあるリンクの1つを選択すると、ダッシュボードに表示されるpanelBoxes
が変わります。ページの左側にある関連リンクをクリックして、panelBox
を追加することもできます。
panelDashboard
をページに追加すると、ダッシュボードが拡大するかどうかを構成できます。その後、子コンポーネントを追加し、コンポーネントを再配置できるようにする場合は、子コンポーネントにもcomponentDragSource
タグを追加します。コンポーネントの挿入および削除を許可する場合は、アクションを処理するためのリスナーを実装します。panelDashboardBehavior
タグを使用して、panelDashboard
コンポーネントでの挿入への応答性を向上させることもできます。
panelDashboardコンポーネントを使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、ページに「パネル・ダッシュボード」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
columnsを、子コンポーネントを表示するために使用する列数に設定します。子コンポーネントは各列に合せて拡大されます。
rowHeightを、各行の高さのピクセル数に設定します。子コンポーネントは、この高さまで拡大されます。
panelDashboard
コンポーネントは使用可能なブラウザ領域に合せて拡大できます。子を拡大しないコンポーネントの子としてpanelDashboard
コンポーネントをかわりに使用する場合は、panelSplitter
コンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントを拡大するかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
dimensionsFrom
属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。
children
: panelDashboard
コンポーネントが子からディメンションを取得します。
注意: この設定を使用している場合は、(たとえば、 |
parent
: panelDashboard
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
に値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto
: panelDashboard
コンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelDashboard
コンポーネントが拡大されます。親が子を拡大しない場合、panelDashboard
コンポーネントのサイズは子コンポーネントのサイズに基づきます。
コンポーネント・パレットから、panelBox
子コンポーネントをドラッグ・アンド・ドロップします。
ヒント:
|
ユーザーが子コンポーネントを並べ替えられるようにするには、コンポーネント・パレットの「操作」パネルから、「コンポーネント・ドラッグ元」を各子コンポーネントの子としてドラッグ・アンド・ドロップします。
コンポーネントを追加および削除できるようにする場合は、マネージドBeanを作成し、子の追加またはドロップ時に子の並替えを行うハンドラ・メソッドを実装します。このイベントはドロップ・イベントとみなされるため、ドラッグ・アンド・ドロップ・フレームワークを使用する必要があります。ドロップ・イベントのハンドラの作成の詳細は、第34章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
最適化されたライフサイクルを使用するには、ハンドラに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-26に示すように、コンポーネントは、ページが表示されたらプロパティが非表示になるように構成されています。
ユーザーが切替えアイコンをクリックすると、図8-27に示されているようにプロパティが表示されます。
表示されているテキストおよび非表示のテキストを表示するために、outputText
コンポーネントより複雑なものを使用する場合は、コンポーネントをshowDetail
コンポーネントのprompt
ファセットに追加できます。表示に設定すると、promptファセットのコンテンツが、表示されているテキストおよび非表示のテキストの値と置き換えられます。showDetail
コンポーネントの使用方法は、8.9.1項「showDetailコンポーネントの使用方法」を参照してください。
ヒント: デフォルトで、 af|showDetail { -tr-layout: flush;} af|showDetail::child-container { padding-left: 10px; } 詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 |
showDetail
コンポーネントと同じように、showDetailHeader
コンポーネントでもコンテンツの表示を切り替えられますが、showDetailHeader
コンポーネントにはヘッダーにラベルと切替えアイコンがあり、メニュー・バー、ツールバーおよびテキスト用のファセットも用意されています。
ヒント:
|
タイトル行のすべてのファセットにすべてを表示する十分な領域がない場合、showDetailHeader
テキストは切り捨てられ、省略記号が表示されます。切り捨てられたテキストの上にマウスを置くと、図8-28に示すように、完全なテキストがツールチップに表示されます。
コンテンツの表示に十分な領域がある場合は、図8-29に示すように、余分な領域がcontext
ファセットとツールバーの間に配置されます。
また、showDetailHeader
コンポーネントは、エラー、警告、情報または確認のメッセージとして使用するように構成できます。コンテンツは、ヘッダーの下で表示または非表示になります。たとえば、File ExplorerアプリケーションのnewFileItem
ページでは、showDetailHeader
コンポーネントを使用して、新しいファイルを作成するためのヘルプを表示しています。図8-27に示されているように、デフォルトではヘルプは表示されません。ユーザーがヘッダーの切替えアイコンをクリックすると、図8-30に示されているようにコンテンツが表示されます。
showDetailHeader
コンポーネントは、panelHeader
コンポーネントとともに使用して、ページをセクションおよびサブセクションに分割することもできます(コンテンツの一部を非表示にできます)。showDetailHeader
コンポーネントには、ツールバーやメニュー・バー・ファセットなど、多数のファセットが含まれます。これらのファセットは、panelHeader
コンポーネントのものと同じです。panelHeader
コンポーネントの詳細は、8.11項「静的ボックスの項目の表示」を参照してください。
showDetailHeader
コンポーネントをネストさせて、コンテンツの階層を作成できます。ネストされた各コンポーネントのヘッダーは、階層を示すために異なるスタイルになります。図8-31に、ネストした3つのshowDetailHeader
コンポーネントおよびその異なるスタイルを示します。
各ヘッダー・レベルで使用されているスタイルは、showDetailHeader
コンポーネントにスキンを適用することで変更できます。ADF Facesコンポーネントのスキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
注意: サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、 |
panelBox
コンポーネントは、ヘッダーの下に情報を表示または非表示にできるようにする場合、およびページのその他の情報と分けるためのボックスが必要な場合に使用します。File Explorerアプリケーションでは、図8-32
に示すように、properties.jspx
ページに2つのpanelBoxコンポーネントを使用して、属性およびファイルの履歴を表示します。
図8-33に、「履歴」panelBox
コンポーネントが非表示の状態になっている同じページを示します。
panelBox
コンポーネントに背景色を設定して、コンテンツをページの残りの部分とさらに区別することができます。2色の組合せ(ランプと呼ばれる)が用意されており、各組合せにはnone、light、mediumおよびdarkの4つの色のレベルがあります。図8-34に図8-32と同じパネル・ボックスを示しますが、下のpanelBox
コンポーネントはcoreランプの暗い色が表示されるように構成されています。
panelBox
コンポーネントのサイズは、ピクセル・サイズを明示的に割り当てて設定することも、親に対する割合で設定することもできます。また、タイトルの位置を設定することも、アイコンを追加することもできます。また、panelBox
コンポーネントには、ボックスにツールバーおよびツールバー・ボタンを追加できるtoolbar
ファセットがあります。
コンテンツの複数の大きな領域を表示および非表示にする必要がある場合は、panelAccordion
およびpanelTabbed
コンポーネントの使用を検討してください。詳細は、8.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
コンテンツの1セットを表示および非表示にするには、showDetail
コンポーネントを使用します。
showDetailコンポーネントを作成および使用する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「詳細の表示」をドラッグ・アンド・ドロップします。
ヒント: このコンポーネントは、コンポーネント・パレットの「レイアウト」パネルではなく、「共通コンポーネント」パネルに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。
コンポーネントの子コンポーネントを表示する場合は、disclosedをtrue
に設定します。
注意: コンテンツを表示および非表示にすることで、ユーザーは |
disclosedTextを、コンテンツが開いた状態(表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「非表示」になります。
undisclosedTextを、コンテンツが閉じた状態(非表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「表示」になります。
注意:
|
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListenerをdisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、8.9.4項「表示イベントについて」を参照してください。
コンテンツを追加するには、必要な子コンポーネントをshowDetail
コンポーネントに挿入します。
showDetailHeader
コンポーネントは、ヘッダーの下にコンテンツを1セット表示する必要がある場合や、表示または非表示にできるメッセージとしてコンテンツを使用する場合に使用します。showDetailHeader
コンポーネントは、コンテンツを非表示にできるようにする場合に、ヘッダーおよびコンテンツの階層を作成する際にも使用できます。
showDetailHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「ディテール・ヘッダーの表示」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。textを、セクション・ヘッダーのラベルにするテキスト文字列に設定します。
iconを、セクション・ヘッダーのアイコンに使用するイメージ・ファイルのURIに設定します。アイコン・イメージはヘッダー・ラベルの前に表示されます。
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、messageTypeを次のいずれかの値に設定します。
confirmation
: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error
: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info
: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
warning
: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
none
: デフォルト。icon
属性に指定されていないかぎり、アイコンは表示されません。
図8-35に、メッセージ・タイプに使用される各アイコンを示します。
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
コンポーネントの子コンポーネントを表示する場合は、disclosedをtrue
に設定します。
注意: コンテンツを表示および非表示にすることで、ユーザーは |
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListenerをdisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、8.9.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.9.4項「表示イベントについて」を参照してください。
ツールバー・ボタンを追加するには、コンポーネント・パレットの「共通コンポーネント」パネルから、toolbar
ファセットにtoolbarをドラッグ・アンド・ドロップします。その後、toolbar
コンポーネントに、必要な数のcommandToolbarButton
コンポーネントを挿入します。toolbar
およびcommandToolbarButton
コンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
表示するコンテナにコンテンツを追加するには、必要なコンポーネントをpanelBox
コンポーネントの子コンポーネントとして挿入します。
通常、panelBox
コンポーネントに子コンポーネントを1つ挿入し、その子コンポーネントに表示するコンテンツを挿入します。この子コンポーネントでコンテンツの表示方法を制御できますが、親のpanelBox
コンポーネントは制御できません。
panelBox
コンポーネントの幅を変更するには、inlineStyle
属性を希望する正確なピクセル・サイズに設定します。または、inlineStyle
属性を、panelBox
コンポーネントが含まれる外側の要素の割合に設定します。例8-11に、幅を変更するために使用するコードを示します。
showDetail
、showDetail
Header
およびpanelBox
コンポーネントなどのように、組込みのイベント機能のあるADF Facesコンポーネントは、form
コンポーネントで囲む必要があります。
これらのコンポーネントのdisclosed
属性では、ヘッダーの下のコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed
属性はtrue
で、コンテンツが表示されます。この属性がfalse
に設定されていると、コンテンツは非表示になります。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
disclosed
属性の値は実行時に永続可能であるため、ユーザーがコンテンツを表示または非表示にした場合、ADF Facesでは属性値を変更して保持できるので、その値はユーザーのセッション中その状態のままになります。詳細は、第33章「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-36に示されているように、File ExplorerアプリケーションではpanelAccordion
コンポーネントを使用して、「フォルダ」および「検索」ペインを表示しています。
実行時、使用可能なブラウザの領域が、開かれたパネルのコンテンツの表示に必要な領域より少ない場合、表示されていないペインをユーザーが選択して移動できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。図8-37に、「検索」パネルを表示する十分な領域がない場合に、File Explorerアプリケーションの「フォルダ」パネルに表示されるオーバーフロー・アイコンを示します。
ユーザーがオーバーフロー・アイコンをクリックすると、ユーザーが選択してナビゲートするためのオーバーフロー・ポップアップ・メニューが表示されます(図8-38を参照)。
図8-39に示すように、ドラッグ・アンド・ドロップしてペインを再配置できるように、panelAccordion
を構成することもできます。
順序を変更すると、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-40に示されているように、メインのパネルにコンテンツを表示しています。
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-40に、File ExplorerアプリケーションのshowDetailItem
コンポーネントで使用されているツールバーを示します。
すべてのタブを表示できない場合、panelTabbed
コンポーネントでもオーバーフローがサポートされます。オーバーフローの処理方法は、-tr-layout-type
スキニング・キーがどのように構成されているかによって決まります。詳細は、第8.10.6項「スキニングとpanelTabbedコンポーネントについて」を参照してください。
パフォーマンスのヒント:
|
panelAccordion
およびpanelTabbed
コンポーネントのどちらも拡大できるように構成できますが、現在表示されているshowDetailItem
子からディメンションをかわりに取得するように構成することもできます。
panelAccordion
またはpanelTabbed
コンポーネントを拡大するように構成すると、showDetailItem
コンポーネントの子が1つのみである場合は、showDetailItem
コンポーネントで1つの子を拡大するように構成することもできます。
panelAccordion
コンポーネントは、ページ内(一般的にはページの異なる領域)に複数使用したり、ネストさせることができます。panelAccordion
コンポーネントを追加したら、各ペインにshowDetailItem
を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
コンポーネントは使用可能なブラウザ領域に合せて拡大できます。子を拡大しないコンポーネントの子としてpanelAccordion
コンポーネントをかわりに使用する場合は、panelAccordion
コンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントを拡大するかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
これを行うには、「その他」セクションを開き、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.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelTabbed
コンポーネントを使用してタブ付きのペインを作成する方法は、panelAccordion
コンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelTabbed
コンポーネントを追加した後に、一連のshowDetailItem
コンポーネントを挿入して、表示するタブ付きのパネル・コンテンツを配置します。
panelTabbedコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「タブ付きパネル」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
表示領域のコンテンツの下にタブをレンダリングする場合は、positionをbelow
に設定します。
デフォルトでは、値はabove
です。これは、タブが表示領域のコンテンツの上にレンダリングされることを意味します。使用できるその他の値はboth
で、この場合、タブは表示領域の上と下にレンダリングされます。
ユーザーがタブを閉じられる(削除できる)ようにするには、tabRemovalを設定します。この属性を設定して、すべてのタブの削除、または最後のタブを除くすべてのタブの削除を許可できます。実際に削除するにはハンドラを実装し、関連するshowDetailItem
コンポーネントのリスナーを構成する必要があります。これは各showDetailItemコンポーネントでオーバーライドできるため、各タブを削除できないか(閉じるアイコンは表示されません)、閉じるアイコンは無効になります。詳細は、8.10.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelTabbed
コンポーネントは使用可能なブラウザ領域に合せて拡大できます。子を拡大しないコンポーネントの子としてpanelTabbed
コンポーネントをかわりに使用する場合は、panelTabbed
コンポーネントの拡大の処理方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントを拡大するかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
dimensionsFrom
属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。
disclosedChild
: panelTabbed
コンポーネントが、現在表示されているshowDetailItem
コンポーネントからディメンションを取得します。
注意: この設定を使用している場合は、(たとえば、 |
parent
: panelTabbed
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
に値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto
: panelTabbed
コンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてpanelTabbed
コンポーネントが拡大されます。親が子を拡大しない場合、panelTabbed
コンポーネントのサイズは子コンポーネントのサイズに基づきます。
panelTabbed
コンポーネントの子としてshowDetailItem
コンポーネントを使用すると、デフォルトでタブ付きパネルが1つ追加されます。さらにペインを追加するには、panelTabbed
コンポーネントにshowDetailItem
コンポーネントを挿入します。必要な数だけタブ付きのペインを追加できます。
ヒント: 通常は |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。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に設定します。
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
拡大するように構成された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-38を参照)。また、パネルのflex
値がゼロ以外の場合は、その値が、その他のペインがオーバーフロー・メニューに移動する前に、パネルが縮小される最低の高さになります。
stretchChildren: first
に設定されている場合、単一の子コンポーネントが拡大されます。ただし、拡大できる子コンポーネントであることが必要です。詳細は、8.10.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
たとえば、File Explorerアプリケーションでは、showDetailItem
コンポーネントを使用してナビゲータ・パネルにコンテンツが表示されています。両方のナビゲータが開かれている場合「検索」ナビゲータにはより多くの領域が必要なため、flex
属性は2に設定され、「フォルダ」ナビゲータのshowDetailItem
コンポーネントにはデフォルトのflex
値1が使用されています。この設定により、「検索」ナビゲータが開かれている場合は、「フォルダ」ナビゲータより大きくなります。
注意: File Explorerアプリケーションでは、 |
ユーザーは実行時にパネルの高さを変更できるため、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
コンポーネントのflex
値がすべて0
(ゼロ)で、そのパネル・コンテンツが開かれている場合、開かれているコンテンツがinflexibleに設定されていても、最後に開かれたshowDetailItem
コンポーネントのコンテンツは、flex
値が1
に設定されているかのようにADF Facesによって拡大されますが、これが行われるのはshowDetailItem
コンポーネントの子が1つのみで、stretchChildren
属性がfirst
に設定されている場合のみです。最後に開かれたパネルに複数の子コンポーネントがあるか、stretchChildren
属性がnone
に設定されている場合、コンテンツは拡大されません。
flex
属性が設定されていても、ジオメトリ管理に関する制限事項があります。詳細は、8.10.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
「動作」セクションを開きます。disclosureListenerを、ユーザーがこのパネルまたはタブを選択した場合に実行するバッキングBeanのdisclosureListener
メソッドに設定します。
サーバーの表示イベントおよびイベント・リスナーの詳細は、8.9.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
(拡大するように構成されている場合)
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項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
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項「表示イベントについて」を参照してください。
-tr-layout-type
スキニング・キーを使用すると、親コンテナが小さすぎてすべてのタブを表示できない場合のpanelTabbed
コンポーネントでのオーバーフローの処理方法を構成できます。この圧縮レイアウトでは、1つ以上のオーバーフロー・ボタンを表示するか、コンベア・ベルトのように、非表示になっているタブを順に広げて表示できます。
図8-41にオーバーフローの圧縮レイアウトを示します。ユーザーがオーバーフロー・アイコンをクリックすると、非表示になっているアイテムがポップアップに表示されます。
例8-13に、スキニング・キーを使用してオーバーフローのレイアウトを表示する方法を示します。
図8-42にコンベアによる圧縮レイアウトを示します。ユーザーがオーバーフロー・アイコンをクリックすると、コンベア・ベルトの場合のように、非表示になっていたタブが順に表示域に移動してきます。その結果、反対側にあるタブは非表示になります。
例8-14に、スキニング・キーを使用してコンベア・ベルトによるレイアウトを使用する方法を示します。
注意:
したがって、次のレイアウト構成はサポートされません。
|
スキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeader
コンポーネントは、メッセージの表示や関連するヘルプ・トピックなどのヘッダー・タイプ機能が必要な場合に使用できますが、コンテンツの表示および非表示機能を指定する必要はありません。
ページの異なるルック・アンド・フィールに遷移する必要がある場合は、decorativeBox
コンポーネントを使用できます。decorativeBox
コンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、使用しているスキンに応じて、デフォルトのテーマを使用する場合、decorativeBox
コンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。テーマおよびスキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeader
コンポーネントには、特定タイプのコンポーネント用のファセットや、ヘッダーからヘルプ・トピックを起動する機能があります。次に、panelHeader
コンポーネントでサポートされているファセットを示します。
context
: ヘッダーのヘッダー・テキストの横に情報を表示します。
help
: ヘルプ情報を表示します。下位互換性が必要な場合にのみ使用します。かわりに、panelHeader
コンポーネントではhelpTopicId
属性を使用します。
info
: ヘッダー・テキストの下に情報を表示します。右揃えになります。
legend
: ヘルプ・テキストが存在する場合は、ヘルプ・コンテンツの左側でinfo
ファセットのコンテンツの下に情報が表示されます。ヘルプ・テキストが存在しない場合、legendコンテンツはヘッダーの下に直接レンダリングされます。
toolbar
: メニュー・バーの前にツールバーを表示します。
menuBar
: ツールバーの後ろにメニュー・バーを表示します。
図8-43に、panelHeader
コンポーネントの様々なファセットを示します。
タイトル行のすべてのファセットにすべてを表示する十分な領域がない場合、panelHeader
テキストは切り捨てられ、省略記号が表示されます。切り捨てられたテキストの上にマウスを置くと、図8-44に示すように、完全なテキストがツールチップに表示されます。
コンテンツの表示に十分な領域がある場合は、図8-45に示すように、余分な領域がcontext
ファセットとツールバーの間に配置されます。
セクションの階層を表すようにpanelHeaders
コンポーネントを構成できます。たとえば、図8-46に示されているように、サブヘッダーのあるメイン・ヘッダーおよびサブヘッダーのあるヘッダー・レベル1を表示できます。
それぞれにpanelHeader
コンポーネントをネストさせてサブセクションを作成します。panelHeader
コンポーネントをネストさせると、階層に応じてヘッダー・テキストが自動的にサイズ調整され、一番外側のpanelHeader
コンポーネントのテキストが最も大きくなります。
注意: サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、 |
panelHeader
コンポーネントの使用方法の詳細は、8.11.1項「panelHeaderコンポーネントの使用方法」を参照してください。
decorativeBox
コンポーネントには、テーマを使用したスタイル機能が用意されています。topとcenterの2つのファセットがあります。topファセットには色なしの領域が提供され、centerファセットは実際のボックスです。topファセットの高さは、コンポーネントがtopファセットに配置されているかどうかに依存します。ファセットが設定されていると、topHeight
属性を使用して、コンテンツが占めるサイズが指定されます。
centerファセットのボックスの色は、使用されているテーマとスキンによって決まります。図8-47に、デフォルトで使用可能な様々なテーマを示します。
decorativeBox
コンポーネントは親コンポーネントに合せて拡大できます。decorative
ボックス・コンポーネントが子コンポーネントからディメンションを継承するように構成することもできます。たとえば、図8-48は、親に合せて拡大されるように構成された暗いテーマのdecorativeBox
コンポーネントを示していますが、標準テーマのdecorativeBox
は、最大で子outputText
コンポーネントと同じ大きさになるように構成されています。
スキンを使用して、decorativeBox
コンポーネントのスタイルをさらに制御できます。コンポーネントの次の領域には、スキニング・キーを定義できます。
top-start
top
top-end
start
end
bottom-start
bottom
bottom-end
スキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeader
コンポーネントを1つ使用して特定の情報を指定することも、一連のpanelHeader
コンポーネントをネストさせてコンテンツの階層組織を作成することもできます。コンテンツを表示および非表示にできるようにする場合は、かわりにshowDetailHeader
コンポーネントを使用します。詳細は、8.9.2項「showDetailHeaderコンポーネントの使用方法」を参照してください。
panelHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、ページに「パネル・ヘッダー」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開きます。
textを、このパネルに表示するラベルに設定します。
ラベルの前にアイコンを追加するには、iconを、使用するイメージ・ファイルのURIに設定します。
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、messageTypeを次のいずれかの値に設定します。
confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
none: デフォルト。アイコンは表示されません。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
図8-49に、様々なメッセージ・タイプに使用されるアイコンを示します。
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
ヘッダーにヘルプを表示するには、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
属性を使用して、コンポーネントを拡大するかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
dimensionsFrom
属性を使用するには、「その他」セクションを開いて、DimensionsFromを次のいずれかに設定します。
children
: decorativeBox
コンポーネントが子からディメンションを取得します。
注意: この設定を使用する場合は、 同様に、(たとえば、 |
parent
: decorativeBox
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
に値が存在しない場合、サイズは親コンテナによって決定されます。
親コンテナが構成されていないか、子を拡大できない場合、サイズはスキンで決定されます。
auto
: decorativeBox
コンポーネントの親コンポーネントで子の拡大ができる場合は、親に合せてdecorativeBox
コンポーネントが拡大されます。親が子を拡大しない場合、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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelList
コンポーネントは、図8-50に示されているように、それぞれの隣に黒丸が付いた子コンポーネントの垂直のリストを表示するためのレイアウト要素です。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-15に、リストのスタイルをcircleに設定するコードを示します。
panelList
コンポーネントに(箇条書き項目として表示する)必要な数の子コンポーネントを挿入します。
ヒント: 通常はパネル・リストの直接の子コンポーネントである子コンポーネントを |
たとえば、一連のcommandLink
コンポーネントまたはoutputFormatted
コンポーネントを挿入できます。
注意: ADF Facesでは、デフォルトで、 |
panelList
コンポーネントをネストさせて、リスト階層を作成できます。図8-51に示されているように、リスト階層には外部項目と内部項目があり、外部項目に属する内部項目は外部項目の下にインデント表示されます。内部項目の各グループは、ネストした単一のpanelList
コンポーネントによって作成されます。
図8-51のようなリスト階層を作成するには、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項「関連する項目のグループ化」を参照してください。
親コンポーネント内で類似の項目をまとめる必要がある場合は、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-52に示すように、折り返さずに一連の子コンポーネントを縦または横に配置することも、折り返して続けて配置することもできます。layout
属性の値により子コンポーネントの配置が決定されます。
すべての配置において、panelGroupLayout
コンポーネントのseparator
ファセットを使用して、隣接する子コンポーネントの各ペアを線または空白で区切ることができます。詳細は、8.14項「空白または線を使用したコンテンツの分割」を参照してください。
横のレイアウトを使用する場合は、子コンポーネントを縦または横に並べることもできます。図8-53に示すように、上部の位置を合せて、高いコンポーネントの隣に低いコンポーネントを作成できます。
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-54に示すようにスクロールバーがレンダリングされます。
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-55に示されているように、文字が配置されている架空の線に沿ってテキストの文字が並べられます。そのようなテキスト・コンポーネントでvalign
をbottom
に設定した場合、bottom
の縦の配列ではすべての文字の一番下の部分が同じ架空の線上に配置されるため、結果は見栄えのよい外観にはなりません。
注意: layoutがhorizontalではない場合、 |
scroll: 縦のレイアウトになり、子コンポーネントは縦に並べられ、必要な場合には縦のスクロールバーが表示されます。
vertical: 縦のレイアウトになり、子コンポーネントは縦に並べられます。
コンポーネント間に一定の間隔を設けるために、ページに空白を組み込むことができるため、すべてのコンポーネントが互いに前後左右に近接しているよりも、ページは乱雑に見えなくなります。spacer
コンポーネントは、特にこの目的のために用意されたADF Facesコンポーネントです。
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-56に、ブラウザで表示した場合に、spacer
コンポーネントがページ出力に及ぼす影響を示します。
width
属性は、コンポーネント間に組み込む横の空白の量を決定します。例8-19に、2つのコンポーネントの間に横方向の間隔を設けるよう設定されたページのソースの一部を示します。
例8-19 横の空白
<af:outputLabel value="Your credit rating is currently:"/> <af:spacer width="10"/> <af:outputText value="Level 8"/>
図8-57に、ブラウザで表示した場合の、横方向の間隔調整コンポーネントの影響を示します。
separator
コンポーネントを使用すると横線を作成できます。図8-58に、2つのpanelBox
コンポーネント間にseparator
コンポーネントを挿入した場合のproperties.jspx
ファイルの外観を示します。
通常、spacer
およびseparator
コンポーネントは、その他のレイアウト・コンポーネントのファセットに使用します。これにより、分割するコンポーネントに空白または線が表示されます。
ページには、必要な数だけspacer
コンポーネントを使用できます。
spacerコンポーネントを作成および使用する手順:
コンポーネント・パレットの「レイアウト」パネルから、JSFページに「スペーサ」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。必要に応じて幅と高さを設定します。
注意: 高さが指定されていて幅が指定されていない場合、ブロック・レベルのHTML要素がレンダリングされ、その近くに新しい行が表示されます。幅が指定されている場合、指定されている高さの値に関係なく、HTML標準を厳密にサポートするユーザー・エージェントに適用可能な行の高さより低くなりません。 |