この章では、ADF Facesのいくつかのレイアウト・コンポーネントを使用して、Webページ上のコンテンツを編成する方法を説明します。
この章では、次の項目について説明します。
ADF Facesには、その他のコンポーネントをページに配置する際に使用可能なレイアウト・コンポーネントが多数用意されています。通常、これらのコンポーネントを使用してページの作成を開始します。その後、その他の機能(データやボタンのレンダリングなど)を提供するコンポーネントを、ファセット内またはレイアウト・コンポーネントの子コンポーネントとして追加します。
ヒント: アプリケーション内のページのレイアウトを設計できるページ・テンプレートを作成できます。テンプレートはアプリケーションのすべてのページで使用できます。詳細は、第10章「フラグメント、ページ・テンプレート、コンポーネントの作成および再利用」を参照してください。 |
コンテナとして機能するレイアウト・コンポーネントに加え、ADF Facesには、コンテンツの表示や非表示、またはセクション、リスト、空白の表示が可能な対話型のレイアウト・コンポーネントもあります。一部のレイアウト・コンポーネントには、ウィンドウのサイズが変更された場合にブラウザ・ウィンドウに合せてコンテンツが拡大する機能や、拡大するコンポーネント内に配置された場合には拡大する機能などのジオメトリ管理機能もあります。レイアウト・コンポーネントの拡大およびジオメトリ管理機能の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
表9-1では、ADF Facesの各レイアウト・コンポーネントを簡単に説明しています。
表9-1 ADF Facesのレイアウト・コンポーネント
コンポーネント | 説明 | 子の拡大 | 拡大 | |
---|---|---|---|---|
ページ管理コンポーネント |
||||
|
HTMLページの標準の各ルート要素( |
X |
||
|
HTMLの |
|||
ページ・レイアウト・コンテナ |
||||
|
|
X ( |
X ( |
|
|
他のコンポーネントを配置できる |
X |
X ( |
|
|
再配置可能な仕切線を使用してリージョンを2つの部分( |
X |
X ( |
|
|
子コンポーネント(通常は |
X |
X ( |
|
|
中心に配置できる子コンポーネントを持つことができ、12のファセットと追加コンポーネントを配置できる枠線も含みます。これらは中心を囲みます。詳細は、9.6項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。 |
|||
|
ラベルやフィールドが縦に並ぶように、 |
|||
表示/非表示機能のあるコンポーネント |
||||
|
ヘッダーの下のコンテンツを表示または非表示にできます。通常、 |
X ( |
X ( |
|
|
|
X(単一の子コンポーネントを含み、その |
||
|
子コンポーネントを含むことのできるタイトル付きのボックス。toolbarファセットがあります。詳細は、9.9項「コンテンツの動的な表示および非表示」を参照してください。 |
X(拡大されているか、 |
X |
|
|
|
X ( |
||
|
タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、かわりにナビゲーション・メニューの |
X ( |
||
|
|
X |
||
|
|
X |
||
|
トグル・アイコンを介してコンテンツを表示または非表示にします。詳細は、9.9項「コンテンツの動的な表示および非表示」を参照してください。 |
|||
その他のコンテナ |
||||
|
子コンポーネントが含まれ、メッセージ、ツールバーおよびヘルプ・トピックを含むヘッダーを表示します。詳細は、9.11項「静的ボックスの項目の表示」を参照してください。 |
X ( |
X ( |
|
|
|
X(表、ツリーまたはツリー表が1つのみの場合) |
X |
|
|
ファセットでスタイル・テーマを使用してその子に枠線付きの外観を適用するコンテナ・コンポーネントを作成します。このコンポーネントは、通常、タブを表示するように構成されている |
X(中央ファセット内) |
X ( |
|
|
インライン |
X |
||
|
ナビゲーション階層の1レベルを表す一連のナビゲーション・アイテムを作成します。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
X(タブを表示するように構成されている場合) |
||
|
各子コンポーネントをリスト項目として出力し、隣に黒丸をレンダリングします。ネストさせて階層リストを作成できます。詳細は、9.12項「1つ以上の列における箇条書きリストの表示」を参照してください。 |
|||
|
ポップアップ・ウィンドウ内に子コンポーネントを表示します。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。 |
|||
|
子のtoolbarおよびmenuコンポーネントを一緒に表示します。詳細は、16.3項「ツールバーの使用方法」を参照してください。 |
|||
グループ化コンテナ |
||||
|
子コンポーネントを縦または横にグループ化します。JSPページでは、複数のコンポーネントをファセットに含める場合にファセットで使用されます(ファセット・ページはファセット内の複数の子を操作できます)。詳細は、9.13項「関連する項目のグループ化」を参照してください。 |
X(レイアウトがscrollまたはverticalに設定されている場合のみ) |
||
|
グループの親コンポーネントに管理されている場合を除き、レイアウトに関係なく子コンポーネントをグループ化します。JSPページでは、複数のコンポーネントをファセットに含める場合にファセットで使用されます(ファセット・ページはファセット内の複数の子を操作できます)。詳細は、9.13項「関連する項目のグループ化」を参照してください。 |
|||
間隔調整コンポーネント |
||||
|
項目間に水平線を作成します。詳細は、9.14項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
|
空白の領域を作成します。詳細は、9.14項「空白または線を使用したコンテンツの分割」を参照してください。 |
ページにレイアウト・コンポーネントを追加した後で、イベントへの応答などの機能を追加することが必要になる場合があります。レイアウト・コンポーネントで使用できる他の機能へのリンクを次に示します。
テンプレート: レイアウトを作成した後で、それをテンプレートとして保存できます。テンプレートのレイアウトを変更すると、そのテンプレートを使用するすべてのページにレイアウトの変更が自動的に反映されます。詳細は、10.3項「ページ・テンプレートの使用」を参照してください。
テーマ: テーマは、panelBox
コンポーネントなどの一部のレイアウト・コンポーネントに色のスタイルを追加します。テーマの使用の詳細は、付録31「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
スキン: スキンを使用して、レイアウト・コンポーネントのアイコンおよびその他のプロパティを変更できます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ローカライゼーション: 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。詳細は、第32章「ページの国際化およびローカライズ」を参照してください。
アクセシビリティ: 入力コンポーネントをアクセス可能にできます。詳細は、第33章「アクセス可能なADF Facesページの開発」を参照してください。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
イベント: レイアウト・コンポーネントは、なんらかのロジックを実行することでアプリケーションで対応できるサーバー側とクライアント側両方のイベントを起動します。詳細は、第6章「イベントの処理」を参照してください。
ユーザー・カスタマイズ: showDetailHeader
コンポーネントなどの一部のコンポーネントには、展開または縮小できる領域があります。ユーザーがページを離れるときにコンポーネントの状態(展開または縮小)を保存できるようにアプリケーションを構成できます。詳細は、第35章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
ADF Facesコンポーネントを使用するJSFページには、view
タグで囲まれたdocument
タグが必要です。ページを構成するその他すべてのコンポーネントが、<af:document>
と</af:document>
の間に入ります。document
タグは、ページ内のその他のコンポーネントを表示できる非表示のページ・インフラストラクチャや、ブラウザのタイトル・テキストをレンダリングします。たとえば、実行時に、document
タグによりクライアント・ページのルート要素が作成されます。HTML出力では、<html>
、<head>
、<body>
などのHTMLページの標準のルート要素が生成されます。
デフォルトでは、document
タグは、拡大可能なコンポーネントを使用可能なブラウザ領域に合せて拡大できるように構成されます。ページがレンダリングされるときに特定のコンポーネントがフォーカスを持つようにしたり、データが送信される前に失敗した接続に関するメッセージやナビゲートに関する警告を提供したりするように、タグをさらに構成できます。詳細は、9.2.5項「documentタグの構成方法」を参照してください。
通常、次に使用されるコンポーネントは、ADF Faces form
コンポーネントです。このコンポーネントは、ユーザーによるページ・データの操作を可能にするコントロールを含むことができるHTMLのform
要素を作成します。
例9-1に示すように、JDeveloperはview
、document
およびform
タグを自動的に挿入します。詳細は、3.4項「ビュー・ページの作成」を参照してください。
例9-1 JDeveloperのウィザードで作成された最初のJSFページ
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <af:document title="untitled1.jsf" id="d1"> <af:form id="f1"></af:form> </af:document> </f:view>
これらのタグがページに配置されたら、レイアウト・コンポーネントを使用して、ページ上のその他のコンポーネントをレンダリングする方法と場所を制御できます。その他すべてのコンポーネントを保持するコンポーネントは、ルート・コンポーネントとみなされます。ルート・コンポーネントとして使用するコンポーネントの選択は、含まれているコンポーネントのコンテンツをブラウザ・ウィンドウに合せて拡大されるように表示するか、ウィンドウに収まらないコンテンツにアクセスするためにスクロールバーを使用してコンテンツを移動できるようにするかによって異なります。拡大と配置の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
ヒント: レイアウトを自身で作成するかわりに、目的のレイアウトでページを表示する適切に構成されたコンポーネントを提供するJDeveloperのクイック・レイアウト・テンプレートを使用できます。詳細は、9.2.3項「クイック・スタート・レイアウトの使用」を参照してください。 |
ジオメトリ管理は、ユーザー、親コンポーネントおよび子コンポーネントがアプリケーションのコンポーネントの実際のサイズと場所をネゴシエーションするプロセスです。たとえば、コンポーネントは、ブラウザに最初にロードされたとき、ブラウザがサイズ変更されたとき、またはユーザーが明示的にサイズ変更したときにサイズ変更されます。
デフォルトでは、有効なビジュアル・ルート・コンポーネントが1つのみ存在する場合、コンポーネントがジオメトリ管理をサポートしていれば、そのルート・コンポーネントはブラウザの可視領域を使用するように自動的に拡大されます。ジオメトリ管理コンポーネントの例は、panelGridLayout
およびpanelSplitter
などです。ルート・コンポーネントで子コンポーネントの拡大がサポートされている場合(および、子コンポーネントでも拡大がサポートされている場合)、配置レイアウト領域(子コンポーネントの拡大がサポートされていない領域)に達するまで、コンポーネント階層を下がって子コンポーネントのサイズが再計算されます。拡大を有効化するためにコードを記述する必要はありません。
注意: フレームワークでは、ポップアップ・ダイアログ、ポップアップ・ウィンドウまたはインラインではないメッセージは、ルート・コンポーネントとみなされません。 |
表9-1に示されているように、それ自体とその子コンポーネントも拡大できるコンポーネントはpanelGridLayout
、panelStretchLayout、panelSplitter
およびpanelDashboard
コンポーネントです。また、panelAccordion
またはpanelTabbed
コンポーネントの直接の子としてshowDetailItem
コンポーネントが使用されている場合は、showDetail
Item
コンポーネントのコンテンツを拡大できます。そのため、ページのコンテンツをブラウザ・ウィンドウに合せる必要がある場合には、showDetailItem
コンポーネントを含むpanelStretchLayout
、panelSplitter
、panelDashboard、panelAccordion
コンポーネント、およびshowDetailItem
コンポーネントを含むpanelTabbed
コンポーネントをルート・コンポーネントとして使用する必要があります。
たとえば、図9-1は、panelStretchLayout
コンポーネントのcenter
ファセットに配置された表を示しています。表はブラウザ領域に合せて拡大されます。表全体がブラウザ・ウィンドウに収まらない場合は、表のデータ本体部分にスクロールバーが追加されます。
図9-2に、子コンポーネントを拡大できないpanelGroupLayout
コンポーネント内にネストしている同じ表を示します(明確化のために、panelGroupLayout
コンポーネントが赤い点線で囲まれています)。表コンポーネントでは、表のプロパティで設定されている一部の列および行のみが表示されています。
パフォーマンスのヒント: ジオメトリ管理のコストは、子コンポーネントの複雑さに直接関係しています。そのため、ジオメトリ管理される親コンポーネントに属する子コンポーネントの数はできるだけ少なくなるようにしてください。 |
子コンポーネントを拡大できるコンポーネントを選択しても、実際に拡大されるのは次のコンポーネントのみです。
decorativeBox
(拡大するように構成されている場合)
inputText
(拡大するように構成されている場合)
panelAccordion
(拡大するように構成されている場合)
panelBox
(拡大するように構成されている場合)
panelCollection
panelDashboard
(拡大するように構成されている場合)
panelGridLayout
(拡大するように構成されている場合)
panelGroupLayout
(layout
属性がscroll
またはvertical
に設定されている場合)
panelHeader
(拡大するように構成されている場合)
panelSplitter
(拡大するように構成されている場合)
panelStretchLayout
(拡大するように構成されている場合)
panelTabbed
(拡大するように構成されている場合)
region
showDetailHeader
(拡大するように構成されている場合)
table
(拡大するように構成されている場合)
tree
(拡大するように構成されている場合)
treeTable
(拡大するように構成されている場合)
次のレイアウト・コンポーネントは、子コンポーネントを拡大するコンポーネントのファセット内に配置しても拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout
(layout
属性がdefault
またはhorizontal
に設定されている場合)
panelLabelAndMessage
panelList
showDetail
tableLayout
(MyFaces Trinidadコンポーネント)
ジオメトリ管理とサイズ変更に関する1つの興味深い考え方は、次に示すようにコンポーネントを4種類のパズル・ピースとして考えることです。
拡大できるコンポーネントは、自身の子を拡大するコンポーネントの内部にのみ配置できます。拡大されないコンポーネントを自身の子コンポーネントを拡大するコンポーネントのファセット内で使用する場合は、それを遷移コンポーネントにラップする必要があります。遷移コンポーネントは拡大できますが、その子は拡大されません。遷移コンポーネントは、常に、子を拡大するコンポーネントと拡大されないコンポーネントの間で使用する必要があります。ラップしないと、コンポーネントのレンダリング時に予期しない結果になる場合があります。
たとえば、panelSplitter
コンポーネントの一方の側にフォームを表示する必要があるとします。ルート・コンポーネントがpanelStretchLayout
であるため、このコンポーネントがページの最初のコンポーネントであるとします。panelSplitter
コンポーネント(デフォルト設定に構成されています)をpanelStretchLayout
コンポーネントに子として追加し、そのコンポーネントの最初のファセットに追加し、panelFormLayout
コンポーネントを追加します。図9-4に、これらのコンポーネントがどのように相互に適合するかを示します。panelSplitter
は子を拡大できるためpanelFormLayout
を拡大しようとしますが、panelFormLayout
は拡大できないため、panelFormLayout
コンポーネントはpanelSplitter
コンポーネントに適合しません。
コンポーネントが子を拡大するコンポーネントに適合しない場合は、ブラウザがコンポーネントのレンダリングを試行したときに予期しない結果になることがあります。
有効なレイアウトにするには、拡大されないコンポーネントを、子を拡大するコンポーネントで使用する場合に、遷移コンポーネントを使用する必要があります。panelFormLayout
の例を解決するには、panelFormLayout
コンポーネントを、scroll
に設定されたpanelGroupLayout
コンポーネントで囲むことができます。図9-5に示すように、このコンポーネントは拡大されますが、子を拡大しません。
この場合は、すべてのコンポーネントが相互に適合します。panelGroupLayout
コンポーネントはpanelFormLayout
を拡大しようとしないため、正しくレンダリングされます。また、panelGroupLayout
コンポーネントは拡大できるため、レイアウトは拡大できるコンポーネントと拡大できないコンポーネント間で分割されません。
ヒント: 拡大できないコンポーネントのリストにあるコンポーネントを、幅を100%に設定して拡大しないでください。予期しない結果になる場合があります。かわりに、拡大されるコンポーネントを、拡大できるコンポーネントで囲みます。
|
ヒント: コンポーネントが拡大されるかされないかが常に親の設定に基づいて決まることがわかっている場合は、 |
「新規ギャラリ」ウィザードを使用してJSFページ(またはページ・フラグメント)を作成する場合、様々な事前定義済のクイック・スタート・レイアウトから選択できます。それらのレイアウトの1つを選択すると、JDeveloperによって必要なコンポーネントが追加され、ユーザーが希望する外観と動作が得られるようにそれらのコンポーネントの属性が設定されます。クイック・レイアウトを使用すると、時間を節約できるのに加え、レイアウト・コンポーネントが正しく連携して使用されるので希望どおりのジオメトリ管理を実現できます。
1列、2列および3列の形式から選択できます。それらの形式では、各列に表示する独立したペインの数、およびそれらのペインを拡大可能にするか固定サイズのままにするかを選択できます。図9-6に、2列形式で使用可能な様々なレイアウトを示します。
レイアウト・コンポーネントの追加とともに、選択したクイック・レイアウトにテーマを適用することも選択できます。これらのテーマは、クイック・スタート・レイアウトで使用されるコンポーネントの一部に色のスタイルを追加します。色およびその追加場所を確認するには、付録D「クイック・スタート・レイアウトのテーマ」を参照してください。テーマの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
クイック・レイアウトを使用したページの作成の詳細は、3.4項「ビュー・ページの作成」を参照してください。
すべてのブラウザでページが期待どおりに表示されるようにするには、ページの作成時に、JDeveloperで提供されるクイック・レイアウトの1つを使用します。これらのレイアウトを使用すると、正しいコンポーネントが使用されて正確に構成されます。詳細は、9.2.3項「クイック・スタート・レイアウトの使用」を参照してください。
ベスト・プラクティス: クイック・スタート・レイアウトを使用して、レイアウト表示の問題を回避します。 |
ただし、自分でレイアウトを作成する場合のために、拡大されるコンポーネントと配置されるコンポーネントの両方を含むレイアウトを作成する際のヒントを次に示します。
ジオメトリ管理機能のあるルート・コンポーネント内(gridRow
とgridCell
コンポーネントを含むpanelStretchLayout
、panelGridLayout
、panelSplitter
、showDetailItem
を含むpanelAccordion
、およびshowDetailItem
を含むpanelTabbed
)にページ・コンテンツを配置します。
パーセント単位で高さの値を指定しないでください。かわりに、拡大がサポートされているコンポーネントや、子コンポーネントを拡大するコンポーネントの外にコンポーネント構造を作成します。詳細は、9.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
layout
属性がscroll
に設定されているpanelGroupLayout
コンポーネントなどの遷移コンポーネントを使用して、この拡大可能な構造内に、拡大できないコンポーネントまたは配置が行われるコンポーネントのグループを作成します。このコンポーネントでは拡大がサポートされていますが、子コンポーネントは拡大されないため、拡大されるコンポーネントと配置が行われるコンポーネントの遷移が可能です。
どのWebブラウザでも一貫して機能するわけではないため、拡大できないコンテナまたは配置が行われるコンテナ内で、縦方向の拡大を試行しないでください。
親の配置されるコンポーネント(つまり、子を拡大しないコンポーネント)に含まれるコンポーネントの場合は、幅を95%より大きく設定しないでください。このような設定を行うと、予期しない結果になることがあります。
親コンポーネントが768ピクセル以上の場合は、拡大されるコンポーネントのstyleClass
属性をAFStretchWidth
に設定します。このスタイルは、様々なブラウザと親のパディングまたは枠線を考慮して、親コンテナの100%となるようにコンポーネントを拡大します。
親コンポーネントが768ピクセル以下の場合は、拡大されるコンポーネントのstyleClass
属性をAFAuxiliaryStretchWidth
に設定します。このスタイルは、様々なブラウザと親のパディングまたは枠線を考慮して、親コンテナの100%となるようにコンポーネントを拡大します。
注意: Microsoft Internet Explorer 7がスクロール・コンテナ内の幅を計算する方法により、2つの異なるスタイルが必要です(これはInternet Explorer 8で解決されました)。アプリケーションへのアクセスに使用されるブラウザのバージョンを管理できない場合は、説明に従ってこれらのスタイルを使用する必要があります。 |
position
スタイルは使用しないでください。
document
タグのmaximized
属性がtrue
に設定されていることを確認します(これはデフォルトです)。属性の設定の詳細は、9.2.5項「documentタグの構成方法」を参照してください。
この章の残りの部分では、ADF Facesのレイアウト・コンポーネント、およびそれらを使用してページを設計する方法を説明しています。各コンポーネントで拡大が処理される方法の詳細は、それぞれの「ジオメトリ管理に関する必知事項」の項に記載されています。
document
タグには、ページの動作を制御するために構成できる多数の属性が含まれています。たとえば、ブラウザがアドレス・バーに挿入できるアイコン(通称ファビコン)を構成できます。図9-7に、Firefoxブラウザのアドレス・バーのOracleアイコンを示します。
次の機能のタグを構成することもできます。
フォーカス: ページが初めてレンダリングされるときにフォーカスを受け取るコンポーネントを設定できます。
コミットされていないデータ: ユーザーがページから移動しようとしたときにデータがまだ送信されていない場合に、警告メッセージを表示できます。
状態保存: 個々のページのweb.xml
ファイルで設定をオーバーライドして、ページの状態がクライアントまたはサーバーに保存されるようにすることができます。
documentタグを構成する手順:
構造ウィンドウで、af:documentノードを選択します。
「プロパティ」ウィンドウで「共通」セクションを開き、次の設定を行います。
InitialFocusId: ドロップダウン・メニューを使用して「編集」を選択します。「プロパティの編集」ダイアログで、ページを初めてレンダリングするときにフォーカスするコンポーネントを選択します。
このフォーカスはクライアントで行われるため、選択するコンポーネントには対応するクライアント・コンポーネントが必要です。詳細は、4.3項「クライアント側コンポーネントのインスタンス化」を参照してください。
Maximized: ルート・コンポーネントを拡張して使用可能なすべてのブラウザ領域に合せる場合はtrue
に設定します。document
タグのmaximized
属性がtrue
に設定されていると、フレームワークにより単一のビジュアル・ルート・コンポーネントが検索され、そのコンポーネントが拡大可能な場合は、ブラウザの表示可能領域全体にコンポーネントが拡大されます。これに対応しているコンポーネントは、panelStretchLayout
およびpanelSplitter
です。document
タグのmaximized
属性は、デフォルトでtrue
に設定されています。詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
Title: ブラウザのタイトル・バーに表示するテキストを入力します。
「外観」セクションを開き、次の属性を設定します。
FailedConnectionText: サーバーとの接続を確立できない場合に表示するテキストを入力します。
Small Icon Source: ブラウザがアドレス・バーに挿入できる(通常は16x16ピクセルの)アイコン(通称ファビコン)にURIを入力します。値が指定されていない場合は、各ブラウザで指定されるか、なんらかの別の値が表示されます。
アイコンのスペース区切りリストを入力でき、ブラウザは通常、サポートする最初の値を表示します。たとえば、Microsoft Internet Explorerでは、ファビコンに.ico
のみサポートされます。そのため、次の値があるとします。
/images/small-icon.png /small-icon.ico
Internet Explorerはsmall-icon.ico
を表示し、Firefoxはsmall-icon.png
を表示します。
ファイルがWebアプリケーションのルート・フォルダの内部にある場合は、アドレスで1つのスラッシュ(/)を使用します。ファイルがサーバーのルート・フォルダにある場合は、2つのスラッシュ(//)を使用します。
Large Icon Source: ブラウザがページにデバイスのホーム・ページへのブックマークを付ける場合に使用できるアイコン(通常は129x129ピクセル)へのURIを入力します。
値が指定されていない場合は、各ブラウザで指定されるか、なんらかの別の値が表示されます。
アイコンのスペース区切りリストを入力でき、ブラウザは通常、サポートする最初の値を表示します。
ファイルがWebアプリケーションのルート・フォルダの内部にある場合は、アドレスで1つのスラッシュ(/)を使用します。ファイルがサーバーのルート・フォルダにある場合は、2つのスラッシュ(//)を使用します。
ヒント: 異なるバージョンのiPhoneやiPadは異なるサイズのイメージを使用します。最大サイズ(129x129ピクセル)を使用でき、イメージは必要なサイズにスケール変更されます。 |
データがコミットされていないことがアプリケーションによって検出されたときにユーザーに警告メッセージを表示する場合は、「動作」セクションを展開し、UncommittedDataWarningをon
に設定します。警告メッセージは、ユーザーがデータをコミットせずにページを終了しようとする場合、またはサーバーにコミットされていないデータがある場合に表示されます。デフォルトでは、これはoff
に設定されます。
注意: アプリケーションがADFコントローラを使用しない場合、データは中間層にポストされるときにコミットされるとみなされます。たとえば、ユーザーがボタンをクリックした場合、データが実際にバック・エンドに書き込まれたかどうかにかかわらず、中間層でナビゲーションが発生した場合に警告は表示されません。 |
「拡張」セクションを開き、StateSavingをページで使用する状態保存のタイプに設定します。
ADF Facesアプリケーションの場合は、トークン付きのクライアント状態保存をアプリケーションで使用するように構成することをお薦めします。これにより、ページ状態がセッションに保存され、トークンがクライアントで永続します。この設定はアプリケーションにグローバルに影響し、すべてのページの状態がセッションに保存され、トークンと情報が状態にかかわらず永続化されます。
web.xml
のグローバル設定をページで次のいずれかにオーバーライドできます。
client: 状態は、トークンを使用せずにクライアントに完全に保存されます。この設定は、セッション失効メッセージが表示されないようにします。
default: ページの状態はweb.xml
の設定に基づきます。
server: ページの状態はサーバーに保存されます。
状態保存の詳細は、付録A「web.xmlでの構成」を参照してください。
コンテンツをページのグリッド領域(HTMLテーブルと同様)に配置し、ブラウザがサイズ変更されたときにコンテンツが拡大されるように構成するには、panelGridLayout
コンポーネントを使用します。panelGridLayout
コンポーネントはレイアウト・コンポーネントに最大限の柔軟性を提供しながら、ごく少量のHTML要素しか生成しません。これにより、個々のセルを境界内に配置する方法を完全に管理できます。
panelGridLayout
コンポーネントは子のgridRow
コンポーネントを使用して行を作成し、それらの行の中でgridCell
コンポーネントを使用して列を構成します。gridCell
コンポーネントにコンポーネントを配置して、データ、イメージまたは他のコンテンツを表示します。
図9-9に、2つのgridRow
コンポーネントが含まれているpanelGridLayout
コンポーネントを示します。各gridRow
コンポーネントには、2つのgridCell
コンポーネントが含まれています。各gridCell
コンポーネントには、1つのchooseDate
コンポーネントが含まれています。
panelGridLayout
コンポーネントはネスト可能です。図9-10に、親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
に設定されている。
セルの有効な幅と高さが、他のセルや行によって自動的に決まるように設定されていない(設定されていると、循環依存関係が発生する)。
各セルは、子コンポーネントをセルのすべての辺に固定しようとします。固定できない場合(子コンポーネントを拡大できない場合など)、子コンポーネントは開始時にセルの上部に配置されます。
JDeveloperは、ユーザーの入力に基づいて宣言的にグリッドを作成するダイアログを提供します。一定数のgridRow
コンポーネントをpanelGridLayout
コンポーネントに配置して、グリッドを手動で作成します。次に、gridCell
コンポーネントをgridRow
コンポーネントに追加し、gridCell
コンポーネントに実際のコンテンツを含むコンポーネントを配置します。panelGridLayout
コンポーネントをネストさせる場合、子panelGridLayout
コンポーネントをgridCell
コンポーネントに配置します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.3項「グリッドでのコンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
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
属性を使用して、コンポーネントが拡大されるかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
「プロパティ」ウィンドウで、DimensionsFromを次の1つに設定します。
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、and gridCellコンポーネントを構成する必要があります。
ページのサンプルを与えられても、それをグリッドに分ける方法を知らない場合があります。連続するグリッドのグリッド分割、行および列を決定するには次のヒントが役立ちます。
グリッドを設計するには:
デザインを1枚の紙に印刷するか、グラフィック・プログラムで開き、デザインの上に色つきの線を描けるように準備します。
列の分割を表すことになる縦線を任意の色(たとえば赤)で描きます。
行の分割を表すことになる横線を任意の色(たとえば緑)で描きます。
これで基本的なグリッド構造が作成されました。別の色(たとえば黄色)を使用して、複数の行または列にまたがるセルにXマークを描きます。
図9-11に、4列4行に分割され、列がまたがる箇所が複数ある設計を示します。
最初の試みでは、列の線がほとんど意味を成さないことがわかります。たとえば、図9-11では、中央の2つの列には隣の列にまたがるセルが含まれます。これはかわりに2つのグリッドが必要なことを示しています。
4色(たとえば、赤紫)を使用して分割が意味を成すような線を引き、それを繰り返します。
図9-12は2つの連続するグリッドを使用する同一の設計を示します。
これで、コンテンツがどこに配置され、どこで列や行がまたがるか視覚的に確認できるので、gridRow
コンポーネントとgridCell
コンポーネントをコーディングできます。セルのサイズや縦横の配置を正確に指定することもできます。
ヒント: グリッド内に列にまたがるラベルを持つフィールドがある場合は、ビルトイン・ラベルを使用するかわりに、それらのラベルが非表示になるように構成(通常は たとえば、図9-12では、PhoneおよびEmailフィールドのラベルは最初の列にありますが、それらのフィールド自体は2番目の列にあります。このレイアウトを作成するには、対応する
|
図9-13に最終的なグリッド設計を示します。
ベスト・プラクティスのヒント:
|
panelGridLayout
コンポーネントはレイアウト・コンポーネントに最大限の柔軟性を提供しながら、ごく少量のHTML要素しか生成しません。これにより、個々のセルを境界内に配置する方法を完全に管理できます。反対に、panelGroupLayout
では構造の個々の子の表示方法をほとんど制御できず、panelStretchLayout
では少数のグリッド構造のみ生成され、多くの場合、複数のpanelStretchLayout
コンポーネントのネストを必要とします。複数コンポーネントのネストには、より多くのHTML要素が必要とされ、コードの管理がより複雑になります。このため、複雑なレイアウトにはpanelGridLayout
コンポーネントを使用します。
たとえば、一連のボタン・コンポーネントの配置など、配置を詳細に制御する必要がない単純な構造には、panelGroupLayout
を使用します。複数のpanelGroupLayout
コンポーネントをネストしているということは、panelGridLayout
のほうがより適していることを意味します。
コンテンツをページの定義済領域に配置し、ブラウザがサイズ変更されたらコンテンツが拡大されるようにする必要がある場合には、panelStretchLayout
コンポーネントを使用します。panelStretchLayout
コンポーネントは、ファセット内に配置されたコンポーネントが拡大されるコンポーネントの1つです。図9-14に、コンポーネントのファセットを示します。
top
およびbottom
ファセットの高さを設定すると、含まれるコンポーネントはその高さに合うように拡大されます。同様に、start
およびend
ファセットの幅を設定すると、それらのファセットに含まれるコンポーネントはその幅まで拡大されます。それらのファセットに配置されているコンポーネントがない場合、ファセットはレンダリングされません。つまり、ファセットは領域を占有しません。設定した領域をファセットで占有し、空白のままにする場合は、spacerコンポーネントを挿入します。9.14項「空白または線を使用したコンテンツの分割」を参照してください。center
ファセットの子コンポーネントは、残りの領域に合うよう拡大されます。コンポーネント拡大の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
Topまたはbottomのファセットの高さ、あるいはstartまたはendファセットの幅を設定するかわりに、高さまたは幅をauto
に設定できます。これにより、ファセットの子コンポーネントに必要な正確な領域を使用するように、ファセット自体がサイズを設定できます。領域は、Webブラウザがファセットのコンテンツの表示に必要だと判断する領域の量に基づいて割り当てられます。
パフォーマンスのヒント: 値として |
File Explorerアプリケーションでは、テンプレートのルート・コンポーネントとしてpanelStretchLayout
コンポーネントが使用されています。子コンポーネントは、center
およびbottom
ファセットにのみ配置されています。そのため、center
ファセット内のすべてのコンポーネントは、ウィンドウの幅全体、およびウィンドウの上部から、高さがbottomHeight
属性で指定されているbottom
ファセットの上部までの大きさに合うように拡大されます。例9-2に、fileExplorerTemplate
ファイルの省略形のコードを示します。
例9-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
コンポーネントはネスト可能です。詳細は、9.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.4項「コンテンツをページ全体に拡大するための設定」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
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を次のいずれかの値に設定します。
children
: 拡大するかわりに、panelStretchLayout
コンポーネントは子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合は、 また、この設定を使用している場合は、 |
parent
: panelStretchLayout
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます(つまり、panelStretchLayout
コンポーネントは拡大されます)。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelStretchLayout
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelStretchLayout
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelStretchLayout
コンポーネントはその子コンポーネントのサイズに基づきます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントを任意のファセットにドラッグ・アンド・ドロップします。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、9.4.2項「ジオメトリ管理およびpanelStretchLayoutコンポーネントに関する必知事項」を参照してください。
JSPまたはJSPX上のファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、子コンポーネントをコンテナ(たとえばpanelGroupLayout
またはgroup
コンポーネント)の内側にラップする必要があります。Faceletページ上のファセットには、複数のコンポーネントを配置できます。含まれているすべてのコンポーネントを拡大するには、子のコンポーネントも拡大できる必要があります。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
panelStretchLayout
コンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次に、panelStretchLayout
コンポーネントのファセット内で拡大できるコンポーネントを示します。
decorativeBox
(拡大するように構成されている場合)
calendar
inputText
(拡大するように構成されている場合)
panelAccordion
(拡大するように構成されている場合)
panelBox
(拡大するように構成されている場合)
panelCollection
panelDashboard
(拡大するように構成されている場合)
panelGroupLayout
(layout
属性がscroll
またはvertical
に設定されている場合のみ)
panelHeader
(拡大するように構成されている場合)
panelSplitter
(拡大するように構成されている場合)
panelStretchLayout
(拡大するように構成されている場合)
panelTabbed
(拡大するように構成されている場合)
region
showDetailHeader
(拡大するように構成されている場合)
table
(拡大するように構成されている場合)
tree
(拡大するように構成されている場合)
treeTable
(拡大するように構成されている場合)
panelStretchLayout
コンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout
(layout
属性がdefault
またはhorizontal
に設定されている場合のみ)
panelLabelAndMessage
panelList
showDetail
tableLayout
(MyFaces Trinidadコンポーネント)
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、panelStretchLayout
コンポーネントのファセットに拡大できないコンポーネントに配置する必要がある場合は、拡大できる遷移コンポーネントでそのコンポーネントをラップします。
たとえば、panelStretchLayout
コンポーネントのファセット内のpanelBox
コンポーネント(拡大しない)にコンテンツを配置する場合は、layout
属性がscroll
に設定されているpanelGroupLayout
コンポーネントをpanelStretchLayout
コンポーネントのファセットに配置し、panelBox
コンポーネントをそのpanelGroupLayout
コンポーネントに配置します。詳細は、9.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
ユーザーに表示する一意のコンテンツのグループがある場合は、panelSplitter
コンポーネントを使用して、調整可能なスプリッタによって分離された複数のペインを提供することを検討します。ADF Facesデモ・アプリケーションは、panelSplitter
を使用して、図9-15に示すようにエディタ領域からコンポーネント・デモ領域を分離します。ユーザーは、スプリッタをドラッグすることでペインのサイズを変更でき、エディタを表示するパネルを縮小および復元することもできます。パネルが縮小されると、パネルのコンテンツが非表示になります。パネルが復元されると、コンテンツが表示されます。
panelSplitter
コンポーネントでは、調整可能なスプリッタで分離された2つのペインにコンテンツを編成できます。ペインは、(図9-15に示されているスプリッタのように)水平に並べるか、垂直に並べることができます。ADF Facesデモ・アプリケーションでは、別のpanelSplitter
コンポーネントを使用して、ページのメイン本体からアプリケーションのグローバル・メニューを分離します。図9-16に、ドキュメントとソースへのアクセスを含むメニューを表示するように展開されたpanelSplitter
コンポーネントを示します。
スプリッタの矢印ボタンをクリックすると、グローバル・メニューが表示されているパネルが閉じられ、図9-17に示すように、メニュー項目が表示されなくなります。
panelSplitter
コンポーネントのファセットにコンポーネントを配置します。panelSplitter
コンポーネントではジオメトリ管理を使用して、実行時に子コンポーネントを拡大します。つまり、ユーザーがパネルを1つ閉じると、使用可能な領域に合うように別のパネルのコンテンツが明示的にサイズ変更されます。
注意: ユーザーはペインをサイズ変更または縮小することで |
panelSplitter
コンポーネントを使用すると、スプリッタで分割された2つのペインを作成できます。それぞれのスプリッタ・コンポーネントには、first
およびsecond
という2つのファセットがあり、それぞれ第1パネルと第2パネルに対応します。子コンポーネントが存在できるのはファセット内のみです。3つ以上のペインを作成するには、panelSplitter
コンポーネントをネストします。
始める前に
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.5項「スプリッタを使用したサイズ変更可能なペインの作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelSplitterコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「パネル・スプリッタ」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。
「向き」をvertical
に設定して、縦のペインを2つ作成します(一方をもう一方の上に配置)。デフォルトでは値はhorizontal
で、この場合、横方向のペインは左から右(または言語の読み方向によっては右から左)に配置されます。
SplitterPositionおよびPositionedFromEndを設定して、スプリッタの最初の配置位置を決定します。デフォルトで、splitterPosition
属性の値は200ピクセルで、positionedFromEnd
属性はfalse
です。この設定は、ADF Facesでは調整可能なスプリッタの初期位置が、(orientation
属性の値に応じて)startまたはtopパネルから計測されることを意味します。たとえば、orientation
属性がhorizontal
で、splitterPosition
属性が200
、positionedFromEnd
属性がfalse
(すべてデフォルト値)に設定されている場合、図9-18に示されているように、ADF Facesによりスプリッタはstartパネルから200ピクセルの位置に配置されます。
positionedFromEnd
属性がtrue
に設定されている場合、ADF Facesではスプリッタの初期位置はend(またはorientation
の値に応じてbottomパネル)から計測されます。図9-19に、endパネルから200ピクセル計測したスプリッタの位置を示します。
collapsedを設定して、スプリッタを閉じた状態(非表示)にするかどうかを決定します。デフォルトではcollapsed
属性はfalse
で、どちらのペインも表示されます。ユーザーがスプリッタの矢印ボタンをクリックすると、collapsed
属性がtrue
に設定され、いずれかのペインが非表示になります。
ADF Facesは、collapsed
およびpositionedFromEnd
属性を使用して、ユーザーがスプリッタ上の矢印ボタンをクリックしたときに非表示に(縮小)するパネル(第1または第2パネル)を決定します。collapsed
属性がtrue
に設定され、positionedFromEnd
属性がfalse
に設定されている場合は、第1パネルが非表示になり、第2パネルは使用可能な領域に合せて拡大されます。collapsed
属性がtrue
に設定され、positionedFromEnd
属性がtrue
に設定されている場合は、第2パネルがかわりに非表示になります。視覚的には、ユーザーは、ボタン上の矢印の方向を参照することで、縮小されるパネルを知ることができます。ユーザーがスプリッタ上の矢印ボタンをクリックすると、矢印の方向にパネルが縮小します。
デフォルトでは、panelSplitter
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。子を拡大しないコンポーネントにpanelSplitter
を配置する場合は、panelSplitter
コンポーネントが拡大を処理する方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントが拡大されるかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
「プロパティ」ウィンドウで、DimensionsFromを次の1つに設定します。
children
: 拡大するかわりに、panelSplitter
コンポーネントは子コンポーネントからディメンションを取得します。
注意: この設定を使用し、 また、この設定を使用している場合は、 |
parent
: panelSplitter
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelSplitter
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelSplitter
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelSplitter
コンポーネントはその子コンポーネントのサイズに基づきます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントをfirst
ファセットおよびsecond
ファセットにドラッグ・アンド・ドロップします。orientationがhorizontalに設定されている場合、first
ファセットがleftファセットになります。orientationがverticalに設定されている場合、first
ファセットがtopファセットになります。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、9.5.2項「ジオメトリ管理およびpanelSplitterコンポーネントに関する必知事項」を参照してください。
JSPまたはJSPX上のファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、子コンポーネントをコンテナ(たとえばpanelGroupLayout
またはgroup
コンポーネント)の内側にラップする必要があります。Faceletページ上のファセットには、複数のコンポーネントを配置できます。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
3つ以上のペインを作成するには、別のパネル・スプリッタ・コンポーネントをファセットに挿入し、ネストされたスプリッタ・ペインを作成します(図9-20を参照)。
例9-3に、スプリッタ・コンポーネントをネストする際に、JDeveloperによって生成されるコードを示します。
例9-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スクリプトをアタッチします。クライアント側のイベントの詳細は、第6章「イベントの処理」を参照してください。
panelSplitter
コンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次のコンポーネントは、panelSplitter
コンポーネントのfirst
またはsecond
ファセットの内部で拡大できます。
decorativeBox
(拡大するように構成されている場合)
calendar
inputText
(拡大するように構成されている場合)
panelAccordion
(拡大するように構成されている場合)
panelBox
(拡大するように構成されている場合)
panelCollection
(拡大するように構成されている場合)
panelDashboard
(拡大するように構成されている場合)
panelGroupLayout
(layout
属性がscroll
またはvertical
に設定されている場合のみ)
panelHeader
(拡大するように構成されている場合)
panelSplitter
(拡大するように構成されている場合)
panelStretchLayout
(拡大するように構成されている場合)
panelTabbed
(拡大するように構成されている場合)
region
showDetailHeader
(拡大するように構成されている場合)
table
(拡大するように構成されている場合)
tree
(拡大するように構成されている場合)
treeTable
(拡大するように構成されている場合)
panelSplitter
コンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout
(layout
属性がdefault
またはhorizontal
に設定されている場合のみ)
panelLabelAndMessage
panelList
showDetail
tableLayout
(MyFaces Trinidadコンポーネント)
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、panelSplitter
コンポーネントのファセットに拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない遷移コンポーネントでそのコンポーネントをラップします。
たとえば、panelBox
コンポーネントにコンテンツを配置し、panelSplitter
コンポーネントのファセットに配置するように設定する場合は、layout属性がscroll
に設定されているpanelGroupLayout
コンポーネントをpanelSplitter
コンポーネントのファセットに配置し、panelBox
コンポーネントをそのpanelGroupLayout
コンポーネントに配置します。詳細は、9.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelBorderLayout
コンポーネントは、ファセットを使用してコンポーネントをページの事前定義済領域に含めます。center
ファセットのかわりに、panelBorder
レイアウト・コンポーネントは0
からn
個の直接子コンポーネント(索引付きの子とも呼ばれます)を受け取り、それらが中央に連続的にレンダリングされます。ファセットは子コンポーネントを囲みます。
図9-21に、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
コンポーネントを使用することを検討してください。詳細は、9.4項「コンテンツをページ全体に拡大するための設定」を参照してください。
JSFページに使用できるpanelBorderLayout
コンポーネントの数に制限はありません。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.6項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelBorderLayoutコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「パネル枠線レイアウト」をJSFページにドラッグ・アンド・ドロップします。
「コンポーネント」ウィンドウから、panelBorderLayout
コンポーネントの子コンポーネントとして、ウィンドウ中央へのコンテンツの表示に使用するコンポーネントをドラッグ・アンド・ドロップします。
子コンポーネントは、挿入した順番で連続して表示されます。他のタイプのレイアウトで子コンポーネントを表示する場合は、panelGroupLayout
コンポーネントにそのコンポーネントをラップします。詳細は、9.13項「関連する項目のグループ化」を参照してください。
中央を囲むコンテンツを配置するには、必要なコンポーネントを各ファセットにドラッグ・アンド・ドロップします。
JSPまたはJSPX上のファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、子コンポーネントをコンテナ(たとえばpanelGroupLayout
またはgroup
コンポーネント)の内側にラップする必要があります。Faceletページ上のファセットには、複数のコンポーネントを配置できます。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
panelFormLayout
コンポーネントを使用すると、入力フィールドや選択リスト・フィールドなど、複数のコンポーネントを1つ以上の列に配置できます。File Explorerアプリケーションでは、panelFormLayout
コンポーネントを使用してファイル・プロパティが表示されています。図9-22に示されているように、コンポーネントはラベルが右揃えになるように構成されています。
図9-23に、ラベルがフィールドの上に表示されるように構成されているコンポーネントを使用した同じページを示します。
1つ以上の列にラベル付きのフィールドを表示するようにpanelFormLayout
コンポーネントを構成できます。フォームの各フィールドは、panelFormLayout
コンポーネントの子コンポーネントです。目的の行数を設定し、行より多くの子コンポーネントがある場合は、残りの子コンポーネントが新しい列に配置されます。例9-4に、10個のinputText
子コンポーネントを持つpanelFormLayout
コンポーネントを示します。
例9-4
<af:panelFormLayout id="pfl1" rows="10">
<af:inputText label="Label 1" id="it1"/>
<af:inputText label="Label 2" id="it2"/>
<af:inputText label="Label 3" id="it3"/>
<af:inputText label="Label 4" id="it4"/>
<af:inputText label="Label 5" id="it5"/>
<af:inputText label="Label 6" id="it6"/>
<af:inputText label="Label 7" id="it7"/>
<af:inputText label="Label 8" id="it8"/>
<af:inputText label="Label 9" id="it9"/>
<af:inputText label="Label 10" id="it10"/>
</af:panelFormLayout>
panelFormLayout
のrow
属性は10
に設定されているため、10個のinputText
コンポーネントは、図9-24に示すようにすべて1つの列に表示されます。
ただし、row
属性が8
に設定されている場合は、図9-25に示すように、最初の8個のinputText
コンポーネントは最初の列に表示され、最後の2つのコンポーネントは2列目に表示されます。
ただし、それぞれに表示される行数は、構成された行数によってのみ決定されるわけではありません。panelFormLayout
コンポーネントのmaxColumns
属性は、デフォルトで、4列以上レンダリングしないように設定されています(PDAアプリケーションの場合は2列)。この値により、実際に行数が決定されます。たとえば、25の子コンポーネントがあり、5行表示するようにコンポーネントを設定し、デフォルトの最大列数を3
に設定したままにした場合、5行表示するように設定しても、実際はコンポーネントにより9行表示されます。これは、最大列数が設定された行数をオーバーライドするためです。最大3列のみ許可するように設定されているため、すべての子コンポーネントを表示するにはコンポーネントで9行を使用する必要があります。コンポーネントで5行のみが表示されるようにするには、最大列数を5に設定する必要があります。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用されます。幅は、ピクセル単位の絶対数またはパーセント値を使用して指定します。ラベルの長さが合わない場合は、テキストが折り返されます。
ヒント: ページが英語以外の言語で表示される場合は、異なる言語および文字で使用するためにラベルに余分な空白を残す必要があります。 |
ページに1つ以上のpanelFormLayout
コンポーネントを使用して、必要なフォーム・レイアウトを作成できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.7項「フォームでのコンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelFormLayoutを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「パネル・フォーム・レイアウト」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開き、ラベルの配置を設定します。
デフォルトで、子の入力コンポーネントのフィールド・ラベルはフィールドの横に表示されます。フィールドの上にラベルを配置するには、labelAlignment
属性をtop
に設定します。
注意:
|
rowsおよびmaxColumnsを設定して、panelFormLayout
コンポーネントの行数と列数を決定します。
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
属性ではフィールドの優先幅を設定できます。
注意:
|
フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用され、異なる列に異なる幅を設定することはできません。em、px、%などの任意のCSS単位を使用して幅を指定します。使用される単位は、labelWidth
属性とfieldWidth
属性の両方で同じである必要があります。
パーセント値を使用する場合は次のようにします。
指定するパーセント幅は、表示される列数に関係なく、panelFormLayout
コンポーネントが占有する幅全体のパーセントです。
labelWidth
およびfieldWidth
のパーセントの合計は、100%になる必要があります。合計が100%未満の場合、幅は100%になるように正規化されます。たとえば、labelWidth
を10%に、fieldWidth
を30%に設定した場合、実行時にlabelWidth
は33%に、fieldWidth
は67%になります。
一方の幅を明示的に設定してもう一方の幅を指定しない場合(labelWidth
のパーセントは指定してfieldWidth
は指定しないなど)、指定されていないパーセント幅がADF Facesにより自動的に計算されます。
注意:
|
panelFormLayout
コンポーネントの幅が領域の600ピクセルを占有し、labelWidth
属性が50
%に設定されているとします。1列に表示される場合、ラベル幅もフィールド幅も300ピクセルになります。2列に表示される場合は、各列が300ピクセルであるため、列の各ラベル幅とフィールド幅は150ピクセルになります。
ラベル・テキストの長さが指定されたラベル幅の1行に収まらない場合は、ADF Facesによりラベル・テキストが自動的に折り返されます。指定されたフィールド幅がpanelFormLayout
コンポーネントに配置した子コンテンツの最低サイズより狭い場合は、子コンテンツの最低サイズがフィールド幅として自動的に使用されます。
注意: 割り当てられた領域よりフィールドが広い場合、ブラウザはフィールドを切り捨てず、ラベル列の領域を使用します。これが原因で、ラベルが予想以上に折り返される可能性があります。この場合は、フィールド・コンテンツの幅を狭くすることを検討してください( |
必要な子コンポーネントを挿入します。
通常は、入力テキストやチェック・ボックスを複数選択などのラベル付きのフォーム入力コンポーネント、およびユーザーの入力を可能にするその他の類似のコンポーネントを挿入します。
ヒント: 通常は |
例9-5は、図9-22に示したFile Explorerアプリケーションのproperties.jspx
ページで使用されているpanelFormLayout
コンポーネントを示します。
例9-5 panelFormLayoutコンポーネント
<af:panelFormLayout rows="5" id="pfl1"> <af:inputText value="#{fileItemProperties.type}" label="#{explorerBundle['fileproperties.type']}" readOnly="true" id="it2"/> <af:inputText value="#{fileItemProperties.location}" label="#{explorerBundle['fileproperties.currentpath']}" readOnly="true" id="it3"/> <af:inputText value="#{fileItemProperties.size}" label="#{explorerBundle['fileproperties.size']}" readOnly="true" id="it4"/> <af:inputText value="#{fileItemProperties.contains}" label="#{explorerBundle['fileproperties.contains']}" readOnly="true" id="it5"/> </af:panelFormLayout>
ヒント: 入力コンポーネント以外のコンポーネント( |
フォーム・レイアウトに意味的に関連する入力コンポーネントをグループ化するには、group
コンポーネントを使用してグループに属するコンポーネントをラップします。group内にコンポーネントを配置すると、デフォルトではpanelFormLayout
コンポーネントによりグループの始まりと終わりにセパレータが描かれます。StartBoundary
およびEndBoundary
属性の設定により、セパレータを常に表示または常に表示しないようにgroup
コンポーネントを構成できます。
group
コンポーネントの使用方法の詳細は、9.7.2項「groupコンポーネントをpanelFormLayoutコンポーネントとともに使用する方法に関する必知事項」を参照してください。
子の入力コンポーネントの下にコンテンツを追加するには、必要なコンポーネントをfooter
ファセットに挿入します。
JSPまたはJSPX上のファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、子コンポーネントをコンテナ(たとえばpanelGroupLayout
またはgroup
コンポーネント)の内側にラップする必要があります。Faceletページ上のファセットには、複数のコンポーネントを配置できます。
例9-6に、panelFormLayout
コンポーネントにpanelGroupLayout
コンポーネントを使用してfooter
の子コンポーネントを配置するサンプル・コードを示します。
例9-6 水平に配置されたpanelFormLayoutのfooterの子コンポーネント
<af:panelFormLayout> <f:facet name="footer"> <af:panelGroupLayout layout="horizontal"> <af:button text="Save"/> <af:button text="Cancel"/> <f:facet name="separator"> <af:spacer width="3" height="3"/> </f:facet> </af:panelGroupLayout> </f:facet> . . . </af:panelFormLayout>
group
コンポーネント自体は何もレンダリングしませんが、panelFormLayout
コンポーネントの子のコンポーネントをグループ化するために使用すると、デフォルトにより各group
コンポーネントの子コンポーネントの周辺にセパレータが表示されます。たとえば、panelFormLayout
コンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。title
属性を使用してグループのタイトルを表示することも選択できます。
注意: グループ・タイトルの横の長さが現在の |
startBoundary
属性はグループの上にセパレータを表示するかどうか制御し、endBoundary
属性はグループの下にセパレータを表示するかどうか制御します。線を表示するには、その属性をshow
に設定します。線を非表示にするには、その属性をhide
に設定します。2つの隣り合うグループに線を表示しないようにするには、隣接部の属性を両方ともhide
に設定するか、1つをhide
に、もう1つをdontCare
に設定します。デフォルトでは、これらの属性はdontCare
に設定されます。つまり、親のコンポーネント(この場合はpanelFormLayoutコンポーネント)に線が表示されます。
例9-7に、panelFormLayout
コンポーネント内の3セットの子コンポーネントをグループ化するサンプル・コードを示します。最初のグループではセパレータが非表示に設定されています。ただし、2番目のグループはグループの開始位置にセパレータを表示するように構成されているため、線が表示されます。2番目のグループはタイトルとグループの終了位置の線も表示するように設定されています。3番目のグループは、startBoundary
属性がdontCare
に設定されているため、2番目のグループの終了位置の線が表示されます。
例9-7 panelFormLayoutの子コンポーネントのグループ化
<af:panelFormLayout maxColumns="1" labelWidth="75" id="pfl4"> <af:group id="g1" startBoundary="hide" endBoundary="hide"> <af:selectOneChoice label="Prompt" value="option1" id="soc4"> <af:selectItem label="Option 1" value="option1" id="si30"/> <af:selectItem label="Option 2" value="option2" id="si31"/> </af:selectOneChoice> <af:selectOneChoice label="Prompt" value="option1" id="soc5"> <af:selectItem label="Option 1" value="option1" id="si32"/> <af:selectItem label="Option 2" value="option2" id="si33"/> </af:selectOneChoice> <af:panelLabelAndMessage label="Prompt" id="plam6" for="it6"> <af:panelGroupLayout layout="horizontal" id="pgl4"> <af:inputText simple="true" contentStyle="width: 100px;" label="inputText" id="it6"/> <af:button partialSubmit="true" text="Browse..." id="cb3"/> </af:panelGroupLayout> </af:panelLabelAndMessage> </af:group> <af:group id="g2" title="Grouped Set of Forms" startBoundary="show" endBoundary="show"> <af:selectManyListbox label="Prompt" contentStyle="width: 100px" id="sml3"> <af:selectItem label="Option 1" value="option1" id="si34"/> <af:selectItem label="Option 2" value="option2" id="si35"/> <af:selectItem label="Option 3" value="option3" id="si36"/> <af:selectItem label="Option 4" value="option4" id="si37"/> </af:selectManyListbox> </af:group> <af:group id="g3" startBoundary="dontCare" endBoundary="dontCare"> <af:selectManyCheckbox label="Prompt" id="smc3"> <af:selectItem label="Value 1" value="value1" id="si38"/> <af:selectItem label="Value 2" value="value2" id="si39"/> <af:selectItem label="Value 3" value="value3" id="si40"/> </af:selectManyCheckbox> </af:group> </af:panelFormLayout>
図9-26に示すように、実行時にはpanelFormLayout
コンポーネントにより、子コンポーネントの2番目のgroup
の前後にセパレータが描かれタイトルが添えられます。
9.7項「フォームでのコンテンツの配置」で説明したように、panelFormLayout
コンポーネントは特定のコンポーネント属性を使用して、列と行にその子コンポーネントを表示する方法(グループ化および非グループ化)を決定します。group
コンポーネントを使用して、子コンポーネントを複数の列に表示するpanelFormLayout
コンポーネントに関連コンポーネントをグループ化する場合、group
コンポーネントの子コンポーネントは常に同じ列に表示されるため、group
コンポーネントの内部の子コンポーネントは列をまたがって分割されません。
JSPページでは、ファセットに1つの子コンポーネントしか含められません(Faceletページには制限がありません)。そのため、panelFormLayout
コンポーネントのfooter
ファセットの子コンポーネントをgroup
コンポーネントを使用してグループ化する場合は、例9-8に示すように、すべてのgroup
コンポーネントおよびグループ化されていないその他の子コンポーネントを、1つのルートgroup
コンポーネントに配置する必要があります。
例9-8 ルートgroupコンポーネントが1つ含まれるpanelFormLayoutのfooterファセット
<af:panelFormLayout ...> <f:facet name="footer"> <af:group id="g2"> <af:inputText rows="2" label="footer item 1" id="it10"/> <af:group id="g3"> <af:inputText columns="5" label="footer group item 1" id="it11"/> <af:inputText columns="5" label="footer group item 2" id="it12"/> <af:inputText columns="5" label="footer group item 3" id="it13"/> </af:group> <af:panelGroupLayout layout="horizontal" id="pgl2"> <f:facet name="separator"> <af:spacer width="10" id="s2"/> </f:facet> <af:button text="Page 1" partialSubmit="true" id="cb3"/> <af:button text="Page 2" partialSubmit="true" id="cb4"/> </af:panelGroupLayout> </af:group> </f:facet> . . . </af:panelFormLayout>
図9-27に示すように、panelFormLayout
コンポーネントのグループ化された子コンポーネントと同じように、panelFormLayout
コンポーネントにより、実行時にデフォルトでfooter
ファセットの各group
コンポーネントの子コンポーネントの周辺にセパレータがレンダリングされます。
注意: JSPページでは、 <f:facet name="footer"> <!-- Only one root group --> <af:group id-"g1"> <af:outputText value="Footer item 1" id="ot1"/> <!-- Any number of groups at this level --> <af:group id="g2"> <af:outputText value="Group 1 item 1" id="ot2"/> <af:outputText value="Group 1 item 2" id="ot3"/> <!-- But not another nested group. This is illegal. --> <af:group id="g3"> <af:outputText value="Nested Group 1 item 1" id="ot4"/> <af:outputText value="Nested Group 1 item 2" id="ot5"/> </af:group> </af:group> <af:outputText value="Another footer item" id="ot6"/> </af:group> </f:facet> |
group
コンポーネントがpanelFormLayout
列の最初にあると、startBoundary
がshow
に設定されていても上にセパレータは表示されません。列の最後のgroup
コンポーネントも同様に、endBoundary
属性がshow
に設定されていても、下にセパレータは表示されません。
panelDashboard
コンポーネントでは、panelForm
コンポーネントと同様に、行および列にその子コンポーネントを配置できます。ただし、図9-28に示されているように、panelDashboard
の子は、テキスト・コンポーネントではなく、コンテンツを含むpanelBox
コンポーネントです。
panelDashboard
コンポーネントを追加する場合、コンポーネントに含まれる列数および各行の高さを構成します。ダッシュボードは、子を拡大して構成済の領域を埋めます。すべての子コンポーネントが、指定した列数と行の高さ内に収まらない場合、panelDashboard
コンポーネントにスクロールバーが表示されます。
子を拡大するコンポーネントに配置した場合、デフォルトで、panelDashboard
は子の数にかかわらずその親コンテナに合せて拡大されます。これは、ブラウザがダッシュボードのニーズを超えてサイズ変更された場合に、ダッシュボードに空白の領域があることを意味する場合があります。
たとえば、dimensionsFrom
属性をparent
に設定することでpanelDashboard
がその親からサイズを継承するように設定したとします。列を1に、rowHeight
を50px
に設定します。次に、2つのpanelBox
コンポーネントを追加します。columns
は1に設定されているため、行は2つになります。親コンポーネントはpanelStretchLayout
であるため、panelDashboard
はボックスの高さにかかわらずpanelStretchLayout
に合せて拡大され、図9-29に示すように最終的に余分な領域ができます(ダッシュボードの色が紫紅に変わり、境界が見やすくなります)。
ダッシュボードを拡大しない場合は、子を拡大しないコンポーネントに配置し、(dimensionsFrom
属性をchildren
に設定することで)子に基づいてサイズを決定するようにpanelDashboard
を構成します。これは、rowHeight
属性を乗算することで、子の表示に必要な行数と同じ高さになります。
前の例では、scroll
に設定されたpanelGroupLayout
にダッシュボードを配置した場合、rowHeight
が50
に設定されているため、図9-30に示すように、ブラウザ・ウィンドウのサイズにかかわらず、panelDashboard
は常に100pxの高さを少し上回ります。
panelDashboard
コンポーネントでは、宣言的なドラッグ・アンド・ドロップ動作もサポートされており、ユーザーは子コンポーネントを再配置できます。図9-31に示されているように、ユーザーは、たとえばpanelBox 10
をpanelBox 4
とpanelBox
5
の間に移動できます。ボックスをドロップできる場所にはシャドウが表示されます。
注意: ユーザーがコンポーネントを |
子コンポーネントを移動する機能とともに、panelDashboard
コンポーネントは、ユーザーが子コンポーネントをレンダリングから非レンダリングに切り替えられるようにし、挿入または削除されるpanelBoxes
の外観を与えるAPIも提供します。ダッシュボードは、部分ページ・レンダリングを使用して、ページ全体を再描画することなく子コンポーネントの新しいセットを再描画します。
panelDashboardBehavior
タグを使用して、コンポーネントのレンダリングの応答性を向上させることができます。このタグを使用すると、コマンド・コンポーネントをアクティブ化し、視覚的な変更をダッシュボードに適用してから、アプリケーション・コードでサーバーのコンポーネント・ツリーを変更できます。アクション・イベントがサーバーに送信される前に、この領域の拡大が行われるため、コマンド・コンポーネントのアクション・リスナーがコンポーネント・ツリーを変更し、ダッシュボードでの挿入の最適化されたエンコーディングを準備している間に、ユーザーはすぐにフィードバックを確認できます。
たとえば、図9-32は、panelSplitter
コンポーネントの右パネルで使用されるpanelDashboard
コンポーネントを示しています。左パネルにリンクとして表示されているリスト項目は、panelDashboard
の各panelBox
コンポーネントを表しています。すべてのpanelBox
コンポーネントが表示されている場合、リンクはすべて非アクティブです。ただし、ユーザーがpanelBox
コンポーネントの1つを削除すると、対応するリンクがアクティブになります。ユーザーはそのリンクをクリックして、panelBox
を再挿入できます。panelDashboardBehavior
タグをcommandLink
コンポーネントとともに使用することで、ユーザーは挿入済ボックスの描画を確認できます。
このタグを使用しない場合、アクション・リスナーが処理している間、ユーザーがダッシュボード構造に対する変更を確認できるまで多少の遅延があります。
図9-33は、panelDashboard
コンポーネントを使用した実際的な例を示しています。ページの上部にあるリンクの1つを選択すると、ダッシュボードに表示されるpanelBoxes
が変わります。ページの左側にある関連リンクをクリックして、panelBox
を追加することもできます。
panelDashboard
をページに追加した後で、ダッシュボードを構成して、拡大するかどうかを決定できます。その後、子コンポーネントを追加し、コンポーネントを再配置できるようにする場合は、子コンポーネントにもcomponentDragSource
タグを追加します。コンポーネントの挿入および削除を許可する場合は、アクションを処理するためのリスナーを実装します。panelDashboardBehavior
タグを使用して、panelDashboard
コンポーネントでの挿入への応答性を向上させることもできます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.8項「ダッシュボードでのコンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelDashboardコンポーネントを使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「パネル・ダッシュボード」をページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。
columnsを、子コンポーネントを表示するために使用する列数に設定します。子コンポーネントは各列に合せて拡大されます。
RowHeightを、各行の高さのピクセル数に設定します。子コンポーネントは、この高さまで拡大されます。
デフォルトでは、panelDashboard
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelDashboard
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelDashboard
コンポーネントが拡大を処理する方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントが拡大されるかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
「外観」セクションで、DimensionsFromを次のいずれかに設定します。
children
: panelDashboard
コンポーネントは、子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合は、 |
parent
: panelDashboard
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelDashboard
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelDashboard
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelDashboard
コンポーネントはその子コンポーネントのサイズに基づきます。
「コンポーネント」ウィンドウから、panelBox
子コンポーネントをドラッグ・アンド・ドロップします。
ヒント:
|
ユーザーが子コンポーネントを並べ替えられるようにするには、「コンポーネント」ウィンドウで、「操作」パネルの「ドラッグ・アンド・ドロップ」グループから、「コンポーネント・ドラッグ元」を各子コンポーネントに子としてドラッグ・アンド・ドロップします。
コンポーネントを追加および削除できるようにする場合は、マネージドBeanを作成し、子の追加またはドロップ時に子の並替えを行うハンドラ・メソッドを実装します。このイベントはドロップ・イベントとみなされるため、ドラッグ・アンド・ドロップ・フレームワークを使用する必要があります。ドロップ・イベントのハンドラの作成の詳細は、第36章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
最適化されたライフサイクルを使用するには、ハンドラにpanelDashboard
コンポーネントのprepareOptimizedEncodingOfInsertedChild()
メソッドをコールさせます。これにより、挿入された子コンポーネントのみがレンダリングのためにダッシュボードから送信されます。
注意:
|
手順7でcomponentDragSource
タグを追加した場合、panelDashboard
のDropEvent
ハンドラも実装する必要があります。panelDashboard
コンポーネントを選択している状態で、「動作」セクションを開き、DropListener
属性をハンドラ・メソッドにバインドします。
panelDashboardBehavior
タグを使用する場合は、挿入を開始するために使用するコマンド・コンポーネントをドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コマンド・コンポーネントのActionListenerを、コンポーネント・ツリーの変更を処理するマネージドBeanのハンドラにバインドします。ハンドラでpanelDashboard
コンポーネントのprepareOptimizedEncodingOfInsertedChild()
メソッドをコールします。これにより、挿入されたレンダリング対象の子コンポーネントのみがダッシュボードから送信されます。例9-9に、子コンポーネントの挿入を処理するマネージドBeanのコードを示します。
例9-9 「挿入」ボタンのアクション・リスナー・コード
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
コンポーネントを使用してファイル・プロパティを表示および非表示にしています。図9-34に示すように、コンポーネントは、ページが表示されたらプロパティが非表示になるように構成されています。
ユーザーが切替えアイコンをクリックすると、図9-35に示されているようにプロパティが表示されます。
表示されているテキストおよび非表示のテキストを表示するために、outputText
コンポーネントより複雑なコンポーネントを使用する場合は、コンポーネントをshowDetail
コンポーネントのprompt
ファセットに追加できます。表示に設定すると、promptファセットのコンテンツが、表示されているテキストおよび非表示のテキストの値と置き換えられます。showDetail
コンポーネントの使用方法は、9.9.1項「showDetailコンポーネントの使用方法」を参照してください。
showDetail
コンポーネントと同じように、showDetailHeader
コンポーネントでもコンテンツの表示を切り替えられますが、showDetailHeader
コンポーネントにはヘッダーにラベルと切替えアイコンがあり、メニュー・バー、ツールバーおよびテキスト用のファセットも用意されています。
ヒント:
|
図9-36に示すように、タイトル行のすべてのファセットにすべてを表示するのに十分な領域がない場合、showDetailHeader
テキストが切り捨てられ、省略記号が表示されます。
コンテンツを表示するのに十分な領域がある場合は、図9-37に示すように、context
ファセットとツールバーの間に追加の領域が配置されます。
また、showDetailHeader
コンポーネントをエラー、警告、情報または確認のメッセージとして使用するように構成できます。コンテンツは、ヘッダーの下で表示または非表示になります。たとえば、File ExplorerアプリケーションのnewFileItem
ページはshowDetailHeader
コンポーネントを使用して、新規ファイルの作成のヘルプを表示します。デフォルトでは、図9-35に示すようにヘルプは非表示になります。ユーザーがヘッダー内の切替えアイコンをクリックすると、図9-38に示すように、コンテンツが表示されます。
showDetailHeader
コンポーネントをpanelHeader
コンポーネントとともに使用してページをセクションとサブセクションに分割し、一部のコンテンツを非表示にできます。showDetailHeader
コンポーネントには、ツールバー・ファセットやメニュー・バー・ファセットなど、いくつかのファセットが含まれます。これらのファセットは、panelHeader
コンポーネントの場合と同じです。panelHeader
コンポーネントの詳細は、9.11項「静的ボックスの項目の表示」を参照してください。
showDetailHeader
コンポーネントをネストさせて、コンテンツの階層を作成できます。ネストされた各コンポーネントのヘッダーは、階層を示すために異なるスタイルになります。図9-39に、ネストした3つのshowDetailHeader
コンポーネントおよびその異なるスタイルを示します。
注意: サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、 |
panelBox
コンポーネントは、ヘッダーの下に情報を表示または非表示にできるようにする場合、およびページのその他の情報と分けるためのボックスが必要な場合に使用します。File Explorerアプリケーションでは、図9-40
に示すように、properties.jspx
ページに2つのpanelBoxコンポーネントを使用して、属性およびファイルの履歴を表示します。
図9-41に、「履歴」panelBox
コンポーネントが非表示の状態になっている同じページを示します。
panelBox
コンポーネントに背景色を設定して、コンテンツをページの残りの部分とさらに区別することができます。2色の組合せ(ランプと呼ばれる)が用意されており、各組合せにはnone、light、mediumおよびdarkの4つの色のレベルがあります。図9-42に図9-40と同じパネル・ボックスを示しますが、下のpanelBox
コンポーネントはcoreランプの中間色が表示されるように構成されています。
panelBox
コンポーネントのサイズは、ピクセル・サイズを明示的に割り当てて設定することも、親に対する割合で設定することもできます。また、タイトルの位置を設定することも、アイコンを追加することもできます。また、panelBox
コンポーネントには、ボックスにツールバーおよびツールバー・ボタンを追加できるtoolbar
ファセットがあります。
showDetail
、showDetailHeader
およびpanelBox
コンポーネントはすべて、サーバー上の表示イベントを処理します。表示イベントは、ユーザーがコンポーネントの表示と非表示を切り替えるたびに送信されます。これは、データが送信または受信されない場合でも、サーバーとのラウンドトリップが必要であることを意味します。表示イベントをクライアント上で処理するようにこれらのコンポーネントを構成して、パフォーマンスを向上させることができます。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出するまでサーバーに送信されません。
コンテンツの複数の大きな領域を表示および非表示にする必要がある場合は、panelAccordion
およびpanelTabbed
コンポーネントの使用を検討してください。詳細は、9.10項「パネルにおけるコンテンツの表示または非表示」を参照してください。
showDetail
コンポーネントを使用して、コンテンツの1セットを表示および非表示にできます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.9項「コンテンツの動的な表示および非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
showDetailコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「詳細の表示」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開き、必要に応じて属性を設定します。
コンポーネントの子コンポーネントを表示する場合は、Disclosedをtrue
に設定します。
注意: コンテンツを表示および非表示にすることで、ユーザーは |
DisclosedTextを、コンテンツが開いた状態(表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「非表示」になります。
UndisclosedTextを、コンテンツが閉じた状態(非表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「表示」になります。
注意:
|
showDetailコンポーネントと任意の子コンポーネントとの間のパディングを変更することもできます。詳細は、9.9.5項「スキニングとshowDetailコンポーネントに関する必知事項」を参照してください。
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをDisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
表示イベントをクライアントで処理する場合は、HandleDisclosureをclient
に設定します。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。
表示イベントおよびリスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
注意:
|
パフォーマンスのヒント: コンポーネントでデータ変更を処理しない場合は、 |
コンテンツを追加するには、必要な子コンポーネントをshowDetail
コンポーネントに挿入します。
showDetailHeader
コンポーネントは、ヘッダーの下にコンテンツを1セット表示する必要がある場合や、表示または非表示にできるメッセージとしてコンテンツを使用する場合に使用します。showDetailHeader
コンポーネントは、コンテンツを非表示にできるようにする場合に、ヘッダーおよびコンテンツの階層を作成する際にも使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.9項「コンテンツの動的な表示および非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
showDetailHeaderコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「ディテール・ヘッダーの表示」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。Textをセクション・ヘッダーのラベルにするテキスト文字列に設定します。
Iconを、セクション・ヘッダーのアイコンに使用するイメージ・ファイルのURIに設定します。アイコン・イメージはヘッダー・ラベルの前に表示されます。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、MessageTypeを次のいずれかの値に設定します。
confirmation
: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error
: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info
: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
warning
: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
none
: デフォルト。icon
属性に指定されていないかぎり、アイコンは表示されません。
図9-43に、メッセージ・タイプに使用される各アイコンを示します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
コンポーネントの子コンポーネントを表示する場合は、Disclosedをtrue
に設定します。
注意: コンテンツを表示および非表示にすることで、ユーザーは |
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをdisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
表示イベントをクライアントで処理する場合は、HandleDisclosureをclient
に設定します。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。
表示イベントおよびリスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
注意:
|
パフォーマンスのヒント: コンポーネントでデータ変更を処理しない場合は、 |
showDetailHeader
コンポーネントがジオメトリ管理を処理する方法を制御する場合は、「外観」セクションを開き、Typeを設定します。コンポーネントの拡大またはその子の拡大を行わない場合は、これをflow
に設定します。showDetailHeader
コンポーネントの高さは、その子によってのみ決定されます。コンポーネントの拡大およびその子の拡大を行う場合は、stretch
に設定します(単一の子コンポーネントのみ拡大されます)。showDetailHeader
コンポーネントの親コンポーネントでジオメトリ管理を決定する場合は、デフォルトに設定したままにします。ジオメトリ管理の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
ヘッダーにボタンまたはアイコンを追加するには、「コンポーネント」ウィンドウの「レイアウト」パネルから「メニューおよびツールバー・コンテナ」グループのtoolbar
コンポーネントをtoolbar
ファセットにドラッグ・アンド・ドロップします。新しく挿入されたtoolbar
コンポーネントに任意数のボタン・コンポーネントを追加します。toolbar
コンポーネントの使用方法の詳細は、16.3項「ツールバーの使用方法」を参照してください。
注意:
|
ヘッダーにメニューを追加するには、menuBar
ファセットにmenuコンポーネントを挿入します。メニュー作成の詳細は、16.2項「メニュー・バーでのメニューの使用方法」を参照してください。
ヒント:
|
サブセクション・ヘッダーを作成するには、既存のshowDetailHeader
コンポーネントに別のshowDetailHeader
コンポーネントを挿入します。
コンポーネントの見出しレベルをオーバーライドするには、headerLevelを目的のレベル(H1
、H2
などからH6
)に設定します。
見出しレベルは、特にスクリーン・リーダー・アプリケーションで使用する場合に、正しいページ構造を決定するのに使用されます。デフォルトで、headerLevel
は-1に設定されており、ページの物理的位置に基づいて、ヘッダーでサイズを決定できます。つまり、最初のヘッダー・コンポーネントはH1に設定されます。そのH1コンポーネントにネストされるヘッダー・コンポーネントはH2などに設定されます。
注意: スクリーン・リーダー・アプリケーションでは、HTMLヘッダー・レベルの割当てを利用して、ページの基本構造を識別します。ヘッダー・コンポーネントおよびヘッダー・レベルの割当てがページで意味をなすようにしてください。 オーバーライド値を使用する場合は、ページの公開可能なセクション内にヘッダーを含めた場合の影響について考慮してください。たとえば、ページに縮小可能な領域がある場合は、領域が縮小および表示されるときに、オーバーライドされた構造が意味を持つようにする必要があります。 |
見出し階層の構造ではなく、ヘッダー・テキストのサイズのみを変更する場合は、size
属性を設定します。
size
属性では、ヘッダー・テキストに使用する数値を指定し、スキンをオーバーライドします。最大の数字は0
で、これはH1ヘッダー・レベルに対応します。最小は5
で、H6ヘッダーに対応します。
デフォルトで、size
属性は-1
です。これは、ADF Facesにより、使用するヘッダー・レベルのスタイルが最上位の親コンポーネントから自動的に計算されることを意味します。ネストされているコンポーネントを使用する場合は、size
属性を明示的に設定して、表示する適切なヘッダー・スタイルを取得する必要はありません。
注意: テキストのスタイルは |
スキンを使用して別のヘッダーの外観を変更することもできます。詳細は、9.9.6項「スキニングとshowDetailHeaderコンポーネントに関する必知事項」を参照してください。
セクションまたはサブセクションにコンテンツを追加するには、必要な子コンポーネントをshowDetailHeader
コンポーネントに挿入します。
ページには、任意の数のpanelBox
コンポーネントを挿入できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.9項「コンテンツの動的な表示および非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelBoxコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「パネル・ボックス」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、「外観」セクションを開き、ランプで使用するランプを選択します。
core
ランプでは様々な青が使用され、highlight
ランプでは様々な黄色が使用されます。使用する色は、カスタム・スキンを作成することで変更できます。詳細は、第9.9.7項「スキニングとpanelBoxコンポーネントに関する必知事項」を参照してください。
Backgroundをlight
、medium
、dark
またはdefault
のいずれかの値に設定します。デフォルトの背景色は透明です。
Textを、コンテナのヘッダー部分のタイトルとして表示するテキスト文字列に設定します。
Iconを、ヘッダー・テキストの前に表示するアイコン・イメージのURIに設定します。
注意:
|
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
TitleHalignをcenter
、start
、end
、left
またはright
のいずれかの値に設定します。この値により、コンテナのヘッダー部分のタイトルの横位置(アイコン・イメージを含む)が決定されます。
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをdisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
表示イベントをクライアントで処理する場合は、HandleDisclosureをclient
に設定します。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。
表示イベントおよびリスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
注意:
|
パフォーマンスのヒント: コンポーネントでデータ変更を処理しない場合は、 |
ツールバー・ボタンを追加するには、「コンポーネント」ウィンドウの「レイアウト」パネルから「メニューおよびツールバー・コンテナ」グループの「ツールバー」をtoolbar
ファセットにドラッグ・アンド・ドロップします。次に必要な数のボタン・コンポーネントをtoolbar
コンポーネントに挿入します。toolbar
およびボタン・コンポーネントの使用法は、16.3項「ツールバーの使用方法」を参照してください。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
表示するコンテナにコンテンツを追加するには、必要なコンポーネントをpanelBox
コンポーネントの子コンポーネントとして挿入します。
通常、panelBox
コンポーネントに子コンポーネントを1つ挿入し、その子コンポーネントに表示するコンテンツを挿入します。この子コンポーネントでコンテンツの表示方法を制御できますが、親のpanelBox
コンポーネントは制御できません。
panelBox
コンポーネントの幅を変更するには、inlineStyle
属性を希望する正確なピクセル・サイズに設定します。または、inlineStyle
属性を、panelBox
コンポーネントが含まれる外側の要素の割合に設定します。例9-10に、幅を変更するために使用するコードを示します。
disclosed
属性では、ヘッダーの下のコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed
属性はtrue
で、コンテンツが表示されます。この属性がfalse
に設定されていると、コンテンツは非表示になります。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
ユーザーが切替えアイコンをクリックしてコンテンツを表示または非表示にすると、デフォルトで、コンポーネントからサーバーにorg.apache.myfaces.trinidad.event.DisclosureEvent
イベントが送信されます。DisclosureEvent
イベントには、ソース・コンポーネントおよびその状態、つまり表示(開いている)または非表示(閉じている)に関する情報が含まれています。isExpanded()
メソッドは、ノードを開く(表示)か閉じる(非表示)かを決定するboolean
値を返します。コンポーネントにそのコンテンツの表示および非表示のみを行わせる場合は、コードを記述する必要はありません。
ただし、DisclosureEvent
イベントの特別な処理を実行する場合は、コンポーネントのdisclosureListener
属性をバッキングBeanのdisclosureListener
メソッドにバインドできます。ユーザーが表示されているまたは非表示のアイコンをクリックするたびに、DisclosureEvent
イベントへのレスポンスとしてdisclosureListener
メソッドが起動されます。
例9-11に示されているように、disclosureListener
メソッドは、単一のdisclosureEvent
イベント・オブジェクトを持つpublicメソッドで、戻りタイプがvoidである必要があります。
例9-11 disclosureListenerメソッド
public void some_disclosureListener(DisclosureEvent disclosureEvent) { // Add event handling code here }
コンポーネントのimmediate
属性がtrue
に設定されている場合以外、DisclosureEvent
イベントはデフォルトでは、アプリケーションの起動フェーズに送信されます。immediate
属性がtrue
に設定されている場合、イベントは可能なかぎり早期のフェーズ(通常はリクエスト値の適用フェーズ)で送信されます。
リスナー・メソッドを使用して表示イベントに応答する必要がない場合は、handleDisclosure
属性をclient
に設定することを検討します。この設定により、表示イベントがクライアントで処理されます。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。disclosureListener
属性がリスナー・メソッドにバインドされている場合は、handleDisclosure
属性がclient
に設定されていても、イベントはサーバーにも自動的に送信されます。
disclosureListener
メソッドを使用し、クライアント上のイベントにも応答する場合は、AdfDisclosureEvent
クライアント側イベントを使用できます。クライアントのAdfDisclosureEvent
イベントのイベント・ルートは、イベントのソース・コンポーネントに設定されており、disclosed
属性がtrue
のパネルに対するイベントのみがサーバーに送信されます。クライアント側のイベントおよびイベント・ルートの詳細は、第6章「イベントの処理」を参照してください。
disclosed
属性の値は実行時に永続可能であるため、ユーザーがコンテンツを表示または非表示にした場合、ADF Facesでは属性値を変更して保持できるので、その値はユーザーのセッション中その状態のままになります。詳細は、第35章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
注意:
|
ADF Facesによって使用されるデフォルトのスキンでは、showDetail
コンポーネントの子コンポーネントがインデントされます。child-container
スキニング・キーを使用してインデントを制御できます。次に例を示します。
例9-12 スキニング・キーを使用したshowDetailのインデントの変更
af|showDetail { -tr-layout: flush;} af|showDetail::child-container { padding-left: 10px; }
詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
また、デフォルトでは、showDetailHeader
コンポーネントのヘッダー・サイズに使用されるスタイルはスキンによって制御されます。2以上のヘッダー・サイズは、サイズ2として表示されます。つまり、サイズ3、4または5のスタイルには違いがなく、すべてサイズ2と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。
詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelBoxコンポーネントのcore
ランプでは様々な青が使用され、highlight
ランプでは様々な黄色が使用されます。カスタム・スキンを作成し、様々なpanelBox
スキン・スタイル・セレクタを構成することにより、カラーを変更できます。
これらのスタイル・セレクタはすべて、2つの擬似クラスによって増強されます。1つ目の擬似クラスはramp
であり、:core
または:highlight
の値を持つことができます。2つ目の擬似クラスはbackground
であり、:default
、:light
、:medium
または:dark
の値を持つことができます。たとえば、ヘッダー開始セルの背景色をピンク色にする場合、panelBox
のramp属性がcore
でbackground
属性がdefault
のときは、以下のようにします。
af|panelBox::header-start:core:default {background-color:pink; border: none;}
ヘッダーおよびコンテンツの変更に別名を使用することもできます。たとえば、.AFPanelBoxHeaderCoreMedium:alias
はaf|panelBox::header-start:core:medium
、af|panelBox::header-center:core:medium
、およびaf|panelBox::header-end:core:medium
に含まれます。このため、core mediumのpanelBox
のヘッダーの背景色を変更する場合は、これら3つのセレクタのかわりに..AFPanelBoxHeaderCoreMedium:alias
も使用できます。
詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
非表示および表示できるコンテンツの複数の領域を表示する必要がある場合は、panelAccordion
、panelTabbed
、panelDrawer
、またはpanelSpringboard
コンポーネントを使用できます。これらのコンポーネントでも、showDetailItem
コンポーネントを使用して実際のコンテンツを表示します。
panelAccordion
コンポーネントを使用すると、開くことのできる一連のペインを作成できます。ユーザーが一度に複数のパネルを開くことや、一度に1つのパネルのみを開くことができるように設定可能です。複数のパネルを開いている場合は、showDetailItem
コンポーネントのヘッダーをドラッグして、パネルの高さを調整できます。
パネルが縮小されている場合は、パネル・ヘッダーのみ表示されます。パネルが展開されている場合は、パネル・コンテンツがパネル・ヘッダーの下に表示されます(ユーザーは、panelAccordion
コンポーネントのヘッダーまたは展開アイコンをクリックしてペインを展開できます)。図9-44に示されているように、File ExplorerアプリケーションではpanelAccordion
コンポーネントを使用して、「フォルダ」および「検索」ペインを表示しています。
実行時、使用可能なブラウザの領域が、開かれたパネルのコンテンツの表示に必要な領域より少ない場合、表示されていないパネルをユーザーが選択して移動できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。図9-45は、「検索」パネルを表示する十分な領域がないときにFile Explorerアプリケーションの「フォルダ」パネルの右下に表示されるオーバーフロー・アイコンを示します。
ユーザーがオーバーフロー・アイコンをクリックすると、ユーザーが選択してナビゲートするためのオーバーフロー・ポップアップ・メニューが表示されます(図9-46を参照)。
図9-47に示すように、ペインをドラッグ・アンド・ドロップで再配置できるようにpanelAccordion
を構成することもできます。
順序が変更されると、showDetailItem
コンポーネントのdisplayIndex
属性も変更されて新しい順序を反映します。
注意: オーバーフローしている項目は並替えできません。 |
panelAccordion
コンポーネントの使用方法は、9.10.1項「panelAccordionコンポーネントの使用方法」を参照してください。
panelTabbed
コンポーネントを使用すると、タブ付きの一連のペインを作成できます。panelAccordion
ペインとは異なり、panelTabbed
ペインは閉じることも開くこともできません。かわりに、ユーザーがタブを選択すると、選択したタブのコンテンツが表示されます。タブは表示領域の上か下(またはその両方)、または左か右に表示されます。
デフォルトでは、タブの幅はラベルとして表示されるテキストによって決まります。タブの幅に最小または最大値を設定することもできます。テキストが収まらない場合は、テキストが切り詰められたことを示す省略記号が表示されるように設定できます。
個々のタブを削除する(閉じる)ようにpanelTabbed
コンポーネントを構成できます。このコンポーネントは、すべてのタブを削除する、最後のタブを除いてすべて削除する、またはタブを削除しないように構成できます。
各タブのコンテンツを含むshowDetailItem
がいつ作成されるかを構成できます。タブが少数の場合は、現在表示されているタブに関係なく、panelTabbed
コンポーネントが初めて作成されるときにすべてのshowDetailItem
コンポーネントを作成できます。ただし、panelTabbed
コンポーネントに多数のshowDetailItem
コンポーネントが含まれる場合は、ページのレンダリングが低速になることがあります。パフォーマンスを向上させるには、かわりに対応するタブが選択されたときにのみshowDetailItem
コンポーネントを作成するようpanelTabbed
コンポーネントを構成できます。さらに、アクセスされるたびに再作成する必要がないように、ユーザーが別のタブを選択した後でshowDetailItem
を破棄するか、コンポーネント・ツリーで選択されているshowDetailItem
コンポーネントを保持するように、配信メソッドを構成できます。
File ExplorerアプリケーションではpanelTabbed
コンポーネントを使用して、図9-48に示されているように、メインのパネルにコンテンツを表示しています。
ヒント: タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、ナビゲーション・パネル・コンポーネントを使用してナビゲーション・メニューを作成できます。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
すべてのタブを表示できない場合、panelTabbed
コンポーネントでもオーバーフローがサポートされます。オーバーフローの処理方法は、-tr-layout-type
スキニング・キーがどのように構成されているかによって決まります。詳細は、第9.10.9項「スキニングとpanelTabbedコンポーネントに関する必知事項」を参照してください。
注意: オーバーフローは、位置属性が |
パフォーマンスのヒント:
|
panelTabbed
コンポーネントの使用方法は、9.10.2項「panelTabbedコンポーネントの使用方法」を参照してください。
panelDrawer
コンポーネントは、コンテナ・コンポーネントの横に付けてタブをレンダリングします。デフォルトでは、ドロワーはpanelDrawer
の親に合わせて配置しますが、別の近い祖先を選択できます。関連するコンポーネントの始めまたは終わりに合わせて配置できます。ユーザーがタブをクリックすると、ドロワーが開き、子のshowDetailItem
のコンテンツが表示されます。図9-49にドロワーが閉じたpanelDrawer
を示します。
図9-50に示すように、ユーザーがタブをクリックすると対応するドロワーが開きます。
ドロワーが開く幅は、width
属性の設定によります。width属性に値がない場合は、開くドロワーのサイズは、showDetailItem
コンポーネントの子に含まれるコンテンツにより決定されます。そうでなければ、width
属性は、panelDrawer
が位置揃えの基準とするコンポーネントのパーセンテージに設定できます。
panelSpringboard
コンポーネントは、そのコンテンツを一連のアイコンとしてグリッドかストライプのいずれかに表示します。アイコンをクリックすると、クリックされたアイコンと関連する子のshowDetailItemコンポーネントはそのコンテンツをストライプの下に表示します。
たとえば、図9-51は関連するアイコンをグリッドに表示するように構成された10個の子のshowDetailItem
コンポーネントを含むpanelSpringboard
コンポーネントを示します。
図9-52は、Teamアイコンをクリックした後の同じpanelSpringboard
コンポーネントを示します。panelSpringboard
アイコンは、ストライプの中の一番上に移動し、選択されたアイコンと関連するコンテンツが表示されます。
panelSpringboard
コンポーネントと同様に、panelAccordion
、panelTabbed
、およびpanelDrawer
コンポーネントは、showDetailItem
コンポーネントを1つ使用して各パネルにコンテンツを配置します。たとえば、4つのペインを使用する場合、panelAccordion
、panelTabbed
またはpanelDrawer
コンポーネントのそれぞれにshowDetailItem
コンポーネントを4つ挿入します。showDetailItem
コンポーネントを使用するには、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。ツールバーをshowDetailItem
コンポーネントのtoolbar
ファセットに追加でき、ツールバーはshowDetailItem
が表示されると表示されます。図9-48に、File ExplorerアプリケーションのshowDetailItem
コンポーネントで使用されているツールバーを示します。
showDetailItem
子コンポーネントは、そのアイテムに関する情報を示すためにバッジを表示することもできます。たとえば、図9-51のpanelSpringboard
では、バッジはホームshowDetailItem
の多数のアイテムを表示するために使用されます。
panelAccordion
およびpanelTabbed
コンポーネントを拡大するように構成することも、現在表示されているshowDetailItem
の子からディメンションを取得するように構成することもできます。親コンポーネントが子の拡大を許可する場合に、panelSpringboard
コンポーネントが拡大されます。親が子を拡大しない場合、panelSpringboard
コンポーネントのサイズはその子であるshowDetailItem
コンポーネントのコンテンツに基づきます。panelDrawer
コンポーネントは、特定の幅が設定されない限り含有するコンポーネントのサイズで開かれます。
パネル・コンポーネントを拡大するように構成する場合、showDetailItem
コンポーネントが単一の子を拡大するように構成できます。ただし、それには、その子がshowDetailItem
コンポーネントの唯一の子である必要があります。
1つのページで、通常はページの異なる領域にあるかネストされている複数のpanelAccordion
コンポーネントを使用できます。panelAccordion
コンポーネントを追加した後に、一連のshowDetailItem
コンポーネントを挿入して、1つのパネルに1つのshowDetailItem
を使用してペインを配置します。次に、各showDetailItem
にコンポーネントを挿入してパネル・コンテンツを配置します。showDetailItem
の使用手順は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.10項「パネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelAccordionコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「パネル・アコーディオン」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。
ユーザーが同時に複数のパネルのコンテンツを開いて参照できるようにする場合は、DiscloseManyをtrue
に設定します。
デフォルト値はfalse
です。これは、一度に開くことのできるパネルが1つのみであることを意味します。たとえば、最初にページがロードされた際に、開いているパネルAと閉じているパネルBが1つずつあるとします。一度に開くことのできるパネルは1つのみであるため、ユーザーがパネルBを開くとパネルAが閉じます。
ユーザーがすべてのペインを閉じることができるようにする場合は、DiscloseNoneをtrue
に設定します。
デフォルト値はfalse
です。これは、必ず1つのパネルが開かれたままになることを意味します。
ユーザーがドラッグ・アンド・ドロップによってペインを再配置できるようにする場合は、「動作」セクションを開き、Reorderを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
属性を使用して、子コンポーネントをいつ作成するかを構成します。それには、Behaviorセクションを拡大して、ChildCreationを以下の1つに設定します。
immediate
: panelTabbed
コンポーネントが作成されるとすべてのshowDetailItem
コンポーネントが作成されます。
lazy
: 関連付けられたタブが選択されたときにのみshowDetailItem
コンポーネントが作成されます。タブが選択されると、showDetailItem
コンポーネントはコンポーネント・ツリーに作成されたままになります。
lazyUncached
: 関連付けられたタブが選択されたときにのみshowDetailItem
コンポーネントが作成されます。別のタブが選択されると、showDetailItem
コンポーネントは破棄されます。
デフォルトで、panelAccordion
コンポーネントの子コンポーネントとしてshowDetailItem
コンポーネントを使用すると、パネルが1つ追加されます。さらにペインを追加するには、panelAccordion
コンポーネントにshowDetailItem
コンポーネントを挿入します。必要な数だけペインを追加できます。
ヒント: 通常はアコーディオン・パネルの直接の子コンポーネントである子コンポーネントを |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。手順は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelTabbed
コンポーネントを使用してタブ付きのペインを作成する方法は、panelAccordion
コンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelTabbed
コンポーネントを追加した後で、一連のshowDetailItem
コンポーネントを挿入して、表示するタブ付きのパネル・コンテンツを配置します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.10項「パネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelTabbedコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、「タブ付きパネル」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。
「位置」を設定して、タブの表示位置を決めます。次のいずれかに設定できます。
above
: タブがコンテンツの上に表示されます。これがデフォルトです。
below
: タブがコンテンツの下に表示されます。
start
: クライアント・ブラウザの読み方向が左から右(LTR)の場合、タブは左側に表示されます。読み方向が右から左(RTL)の場合、タブは右側にレンダリングされます。
end
: タブは、LTRロケールでは右側に表示され、RTLロケールでは左側に表示されます。
left
: タブは常に左側に表示されます。
right
: タブは常に右側に表示されます。
ヒント:
|
ユーザーがタブを閉じられる(削除できる)ようにするには、tabRemovalを設定します。この属性を設定して、すべてのタブの削除、または最後のタブを除くすべてのタブの削除を許可できます。実際に削除するにはハンドラを実装し、関連するshowDetailItem
コンポーネントのリスナーを構成する必要があります。各showDetailItem
コンポーネントでこれをオーバーライドして、各タブを削除できなくするか(閉じるアイコンは表示されません)、閉じるアイコンを無効にできます。
タブが削除されるように構成すると、閉じるアイコンがタブの終わりに表示されます(タブのクリックまたはタブの移動のいずれでも)。
詳細は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
注意: タブの削除は、位置属性が |
デフォルトでは、タブのサイズはラベルとして使用されるテキストによって決まります。そのかわりに、タブを一定のサイズに設定して、表示できないテキストを省略記号で表すことができます。それには、次のように設定します。
maxTabSize
: サイズをピクセル単位で設定します。タブのサイズがこれよりも大きくなることはありません。使用可能なタブ領域を埋めるには、infinity
に設定します。これがデフォルトです。
minTabSize
: サイズをピクセル単位で設定します。タブのサイズがこれよりも小さくなることはありません。
truncationStyle
: maxTabSize
に基づき、表示しきれないテキストを切り捨てたときに省略記号を表示するには、ellipsis
を設定します。「なし」に設定すると、タブに収まらないテキストは単に切り詰められます。maxTabSize
を設定しないと、タブが常にテキストと同じ大きさで表示されます。
注意: 切捨てと拡張は、 |
デフォルトでは、panelTabbed
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelTabbed
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelTabbed
コンポーネントが拡大を処理する方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントが拡大されるかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
DimensionsFromを次のいずれかの値に設定します。
disclosedChild
: panelTabbed
コンポーネントは、現在表示されているshowDetailItem
コンポーネントからそのディメンションを取得します。
注意: この設定を使用する場合は、 |
parent
: panelTabbed
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelTabbed
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelTabbed
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelTabbed
コンポーネントはその子コンポーネントのサイズに基づきます。
デフォルトで、panelTabbed
コンポーネントの子としてshowDetailItem
コンポーネントを使用すると、タブ付きパネルが1つ作成されます。さらにペインを追加するには、panelTabbed
コンポーネントにshowDetailItem
コンポーネントを挿入します。必要な数だけタブ付きのペインを追加できます。
ヒント: 通常は |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。showDetailItem
の使用方法は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelDrawer
コンポーネントを使用してタブ付きのペインを作成する方法は、panelTabbed
コンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelDrawer
コンポーネントを追加した後に、一連のshowDetailItem
コンポーネントを挿入して、表示するドロワー・コンテンツを配置します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.10項「パネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelDrawerコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、パネル・ドロワーをJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。
panelDrawer
の位置合せの基準となるコンポーネントにAlignIdを設定します。プロパティ・フィールドの上にマウスを置くと現れるアイコンをクリックして、「編集」を選択すると「プロパティの編集: AlignId」ダイアログが表示されます。そこでコンポーネントを選択します。alignId
属性を設定しない場合、panelDrawer
はその親に位置合せします。
「位置」を設定して、ドロワーのタブの表示位置を決めます。位置合せしたコンポーネントの終わり(LTRロケールでは右)にタブを表示するには、それをend
(デフォルト)に設定します。それをstart
、left
またはright
に設定することもできます。
ヒント:
|
ドロワーの「width」と「height」を設定します。デフォルトでは、panelDrawer
コンポーネントは、showDetailItem
コンポーネントのコンテンツのサイズ.に合わせて拡大されます。同様に、以下がtrueの場合にshowDetailItem
は拡大を許可します。
panelDrawer
にはwidth
属性とheight
属性が定義されています。
showDetailItem
には単一の子が含まれます。
showDetailItemの子のコンポーネントでは、幅、高さ、マージン、境界線、パディングに値が指定されていません。
子は拡大可能である必要があります。
注意: ドロワーが開かれてからコンテンツのサイズが変更される(たとえば、ドロワー内部の |
必要に応じてMaximumHeightおよびMaximumWidthを設定します。デフォルトでは100%
に設定されています。
「外観」セクションを開き、「ShowHandles」を設定します。デフォルトでは、この値はalways
に設定され、ハンドルは常に表示されます。それをwhenOpen
に設定することもできます。これによりハンドルはドロワーが開いたときにのみ表示されます。対応するshowDetailItem
の公開属性をtrueに設定することにより、プログラムからドロワーを開く必要があります。たとえば、ハンドルのかわりにボタンを使用してドロワーを開くことがあります。ボタンと関連するアクションはshowDetailItem
のdisclosed
属性をtrueに設定します。
panelDrawer
コンポーネントの内部にshowDetailItem
コンポーネントを挿入することによりドロワーを追加します。必要な数だけドロワーを追加できます。
注意:
|
ヒント: 通常は |
ドロワーに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。showDetailItem
の使用方法は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelSpringboard
は、他のパネル・コンポーネントと同様に一連のshowDetailItem
コンポーネントを含みます。各showDetailItem
は、アイコンによって表されます。各showDetailItem
にコンポーネントを挿入して、パネル・コンテンツを配置します。showDetailItem
の使用手順は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.10項「パネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelSpringboardコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから、Panel SpringboardをJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、「外観」セクションを開き、DisplayModeを設定してpanelSpringboard
が最初にレンダリングされるときの表示方法を指定します。図9-51に示すように、アイコンだけを表示するには、それをgrid
に設定します。図9-52に示すように、アイコンをストライプの上部に沿って表示し、選択されたアイコンのコンテンツをストライプの下に表示するには、それをstrip
に設定します。
ヒント: 2つのモードを切替えられるようにするには、Javascriptをページに追加する必要があります。詳細は、9.10.5項「グリッド・モードとストライプ・モードの切替えに関する必知事項」を参照してください。 |
表示モードが変わるときにロジックを実行するには、「拡張」セクションを開き、そのロジックを処理するbean上のメソッドにSpringboardChangeListenerを設定します。
実行時にデフォルトでは、panelSpringboard
コンポーネントが作成されると、すべてのshowDetailItem
子コンポーネントが作成されます。子が多数の場合は、パフォーマンスを向上するために、タブが選択された場合にのみshowDetailItem
子コンポーネントを作成するか、タブが最初に選択された場合にのみshowDetailItem
子コンポーネントを作成し、その時点以降、作成されたままになるように、panelSpringboard
を構成できます。
childCreation
属性を使用して、子コンポーネントをいつ作成するかを構成します。それには、Behaviorセクションを拡大して、ChildCreationを以下の1つに設定します。
immediate
: panelSpringboard
コンポーネントが作成されるとすべてのshowDetailItem
コンポーネントが作成されます。
lazy
: 関連付けられたアイコンが選択されたときにのみshowDetailItem
コンポーネントが作成されます。一度アイコンが選択され、関連するshowDetailItem
がレンダリングされると、showDetailItem
コンポーネントはツリー内で作成された状態を保ちます。
lazyUncached
: 関連付けられたアイコンが選択されたときにのみshowDetailItem
コンポーネントが作成されます。別のアイコンが選択されると、showDetailItem
コンポーネントは破棄されます。
showDetailItem
コンポーネントをpanelSpringboard
コンポーネントの中に挿入します。必要な数だけ追加できます。それらを子として追加する順序が、それらがspringboardに表示される順序になります。
ヒント: 通常は |
表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。手順は、9.10.6項「コンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
デフォルトでは、panelSpringboard
は最初グリッド・モードでレンダリングします。ユーザーがアイコンをクリックすると、panelSpringboard
はSpringboardChangeListener
イベントを発生させ、ストライプ・モードに変わります。2つのモードを切替えられるようにするには、そのイベントをリッスンし、ソース(Springboard)を特定し、displayMode属性を希望のモードに設定する必要があります。
たとえば、表示モードをグリッドに設定するには、例9-13に示すJavaScriptを使用します。
例9-13 表示モードをグリッドに変更するJavascriptコード
<af:resource type="javascript"> function backToGrid(actionEvent) { actionEvent.cancel(); var eventSource = actionEvent.getSource(); var object_navigator = eventSource.findComponent("panelSpringboardId"); object_navigator.setProperty(AdfRichPanelSpringboard.DISPLAY_MODE, "grid", true); }
例9-14に示すようにリンクからコードをコールします。
例9-14 Javascriptをコールするページ・コード
<af:link id="logo" text="Back to Grid"> <af:clientListener type="click" method="backToGrid"/> </af:link>
Javascriptをページ上で使用する方法は、第4章「ADF Facesクライアント側アーキテクチャの使用方法」を参照してください。
showDetailItem
コンポーネントをpanelAccordion
、panelTabbed
、panelDrawer
、またはpanelSpringboard
コンポーネントのみに挿入します。各showDetailItem
コンポーネントは、1つのパネルに対応します。一般的に、親コンポーネントに2つ以上のshowDetailItem
コンポーネントを挿入します。表示する子コンポーネントをshowDetailItem
コンポーネントに挿入します。
showDetailItem
コンポーネントのdisclosed
属性は、対応するパネルのコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed
属性はfalse
で、コンテンツは非表示(閉じた状態)になります。この属性がtrue
に設定されていると、コンテンツは表示(開いた状態)されます。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
次の手順では、9.10.1項「panelAccordionコンポーネントの使用方法」、9.10.2項「panelTabbedコンポーネントの使用方法」、9.10.3項「panelDrawerコンポーネントの使用方法」および9.10.4項「panelSpringboardコンポーネントの使用方法」の説明に従って、JSFページにpanelAccordion
、panelTabbed
、 panelDrawer
またはpanelSpringboard
コンポーネントをそれぞれ追加済であると仮定しています。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.10項「パネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
showDetailItemコンポーネントを使用してパネル・コンテンツを追加する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルから「詳細アイテムの表示」コンポーネントをドラッグ・アンド・ドロップして、panelAccordion
などの親コンポーネントの中に1つ以上のshowDetailItem
コンポーネントを挿入します。
「プロパティ」ウィンドウで「外観」セクションを開きます。
Textを、このパネル、タブまたはアイコンに表示するラベルに設定します。
アイコンを追加するには、Iconを、使用するイメージ・ファイルのURIに設定します。HoverIcon、DepressedIcon、DisabledIconを設定することもできます。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
showDetailItem
コンポーネントが、拡大されるように構成されたpanelAccordion
コンポーネント内で使用されている場合は、showDetailItem
とそのコンテンツを拡大するように構成できますが、showDetailItem
コンポーネントには1つの子コンポーネントのみ含まれている必要があります。各showDetailItem
コンポーネントのFlexおよびStretchChildrenを設定する必要があります。
各showDetailItem
コンポーネントに次の属性を使用して、パネル・コンテンツの柔軟性を制御します。
Flex: 1つのpanelAccordion
コンポーネントのshowDetailItem
コンポーネントにどのくらいの領域が配分されるかを決定する負でない整数を指定します。デフォルトではflex
属性の値は0
(ゼロ)で、各showDetailItem
コンポーネントのパネル・コンテンツはフレキシブルではありません。パネルのフレキシブルなコンテンツを有効にするには、1
または2
など、flex
に0
より大きい数値を指定します。flex
値が大きいと、コンテンツは、flex
値の小さいコンポーネントより大きくなります。フレキシブルなコンテンツが2つの場合、その高さは割り当てられたflex
値に正確に比例します。コンポーネントAではflex
が2
に設定されていて、コンポーネントBではflex
が1
に設定されている場合、コンポーネントAの高さはコンポーネントBの2倍です。
InflexibleHeight: パネルで使用するピクセル数を指定します。デフォルトは100ピクセルです。パネルのflex
値が0
(ゼロ)の場合、ADF Facesによりそのパネルに100ピクセルが使用され、ゼロ以外のパネルに残りの領域が配分されます。指定されたinflexibleHeight
値を考慮した場合に、パネルのコンテンツがpanelAccordion
コンテナ内に収まらない際には、ADF Facesにより近くのコンテンツが自動的にオーバーフロー・メニューに移動されます(図9-46を参照)。また、パネルのflex
値がゼロ以外の場合は、その値が、その他のパネルがオーバーフロー・メニューに移動する前に、パネルが縮小される最低の高さになります。
StretchChildren: first
に設定されている場合、単一の子コンポーネントが拡大されます。ただし、拡大できる子コンポーネントであることが必要です。詳細は、9.10.7項「ジオメトリ管理およびshowDetailItemコンポーネントに関する必知事項」を参照してください。
たとえば、File Explorerアプリケーションでは、showDetailItem
コンポーネントを使用してナビゲータ・パネルにコンテンツが表示されています。両方のナビゲータが開かれている場合「検索」ナビゲータにはより多くの領域が必要なため、flex
属性は2に設定され、「フォルダ」ナビゲータのshowDetailItem
コンポーネントにはデフォルトのflex
値1が使用されています。この設定により、「検索」ナビゲータが開かれている場合は、「フォルダ」ナビゲータより大きくなります。
注意: File Explorerアプリケーションでは、 |
ユーザーは、実行時にパネルの高さを変更して、flex
およびinflexibleHeight
属性の値を変更できます。これらの値は、ユーザーのセッション中に変わらないように永続化できます。詳細は、第35章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
フレキシブルなアコーディオン・パネル・コンテンツに関する次の追加情報に注意してください。
ADF Facesでフレキシブルなコンテンツを有効にするには、flex
値が0
より大きいペイン(showDetailItem
コンポーネント)が2つ以上必要です。これは、ADF Facesでは、パネル・コンテンツにどのくらいの領域を割り当てるかの決定に、2つのコンポーネントのflex
の割合が使用されているためです。実行時、フレキシブルなコンテンツの表示の結果を確認するには、2つ以上のペインが開かれている必要があります。
showDetailItem
コンポーネントの子コンポーネントが1つのみでflex
値がゼロ以外の場合、かつstretchChildren
属性がfirst
に設定されている場合、ADF Facesにより、panelAccordion
コンポーネントのdiscloseMany
属性の値にかかわらずその子コンポーネントが拡大されます。
すべてのshowDetailItem
コンポーネントに0
(ゼロ)のflex
値があり、それらのパネル・コンテンツが表示されている場合、表示されるコンテンツが非フレキシブルに設定されていても、ADF Facesは最後に表示されたshowDetailItem
コンポーネントのコンテンツを、コンポーネントのflex
値が1
であるかのように拡大しますが、それはshowDetailItem
コンポーネントの子が1つのみであり、stretchChildren
属性がfirst
に設定されている場合だけです。最後に表示されたパネルに複数の子コンポーネントがあるか、stretchChildren
属性がnone
に設定されている場合、コンテンツは拡大されません。
flex
属性が設定されていても、ジオメトリ管理に関する制限事項があります。詳細は、9.10.7項「ジオメトリ管理およびshowDetailItemコンポーネントに関する必知事項」を参照してください。
拡大するように構成されたpanelSpringboard
コンポーネントの中でshowDetailItem
コンポーネントが使用されている場合、showDetailItem
を拡大するように構成し、次にそのコンテンツを拡大するように構成できます。ただし、showDetailItem
コンポーネントは1つの子コンポーネントのみを含む必要があり、その子コンポーネントに幅、高さ、マージン、境界線、パディングは設定しません。
コンテンツを拡大するには、各showDetailItem
コンポーネントでStretchChildrenをfirst
に設定します。
ヒント:
|
「動作」セクションを開きます。DisclosureListenerを、ユーザーがこのパネル、タブまたはアイコンを選択した場合に実行するバッキングBeanのdisclosureListener
メソッドに設定します。
サーバーの表示イベントおよびイベント・リスナーの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
このパネル、タブまたはアイコンを無効(ユーザーがパネルまたはタブを選択できない状態)にする場合は、Disabledをtrue
に設定します。
このパネル、タブまたはアイコンの子コンポーネントを表示する場合は、Disclosedをtrue
に設定します。
disclosed
属性は、デフォルトでfalse
に設定されています。これは、このパネル、タブまたはアイコンのコンテンツが非表示になることを意味します。
注意:
|
disclosed
属性がtrue
に設定されているshowDetailItem
コンポーネントがない場合は、ADF Facesにより、最初に有効にされたshowDetailItem
コンポーネントのコンテンツが自動的に表示されます(panelAccordion
コンポーネントの子で、表示されないペインの設定が行われている場合を除きます)。
注意: コンテンツを表示または非表示にすることで、ユーザーは |
panelAccordion
コンポーネントで使用されているshowDetailItem
コンポーネントの場合は、「動作」セクションを開き、showDetailItem
コンポーネントが表示される順序を反映するようにDisplayIndexを設定します。単純にページのコード内での順序で表示する場合は、デフォルトの-1
のままにします。
ヒント: 一部の |
ヒント: 親 |
panelTabbed
コンポーネントのタブの削除を許可することを選択した場合は、「動作」セクションを展開し、Removeを次のいずれかに設定します。
inherit: 対応するタブは、親panelTabbed
コンポーネントで許可されている場合に削除できます。これがデフォルトです。
no: 対応するタブは削除できず、閉じるアイコンは表示されません。
disabled: 対応するタブには無効な閉じるアイコンが表示されます。
ItemListenerを、コンポーネントの実際の削除を処理するハンドラ・メソッドに解決されるEL式に設定します。
(panelAccordion
コンポーネントのみでサポートされている)パネルにツールバー・ボタンを追加するには、「コンポーネント」ウィンドウで、「レイアウト」パネルの「メニューおよびツールバー・コンテナ」グループから、そのパネルを定義するshowDetailItem
コンポーネントのtoolbar
ファセットに「ツールバー」を挿入します。次に必要な数のボタン・コンポーネントをtoolbar
コンポーネントに挿入します。toolbar
ファセットがshowDetailItem
コンポーネントにある場合でも、ツールバーおよびボタンをレンダリングするのはpanelAccordion
コンポーネントです。toolbar
およびボタン・コンポーネントの使用法は、16.3項「ツールバーの使用方法」を参照してください。
注意: アコーディオン・パネルが閉じている場合、ツールバーおよびそのボタンは表示されません。ツールバーおよびそのボタンは、パネルが開かれている場合にのみ、パネル・ヘッダーに表示されます。 |
showDetailItem
に関する情報を追加するには(たとえば、panelSpringboard
には注意書きを表示するなど)、Badgeに値を入力します。
パネルにコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。
panelAccordion
、panelTabbed
、panelDrawer
およびpanelSpringboard
コンポーネントは、子コンポーネントの拡大にジオメトリ管理を使用するコンポーネントに配置された場合、どちらも拡大されるように構成できます。ただし、デフォルトでshowDetailItem
はその子を拡大しません。
panelAccordion
コンポーネントでは、showDetailItem
コンポーネントが拡大されるのは、panelAccordion
コンポーネントのdiscloseMany
属性がtrue
に設定されている場合(つまり、フレキシブルでないコンテンツまたはフレキシブルなコンテンツを表示するために複数のペインが開かれる場合)、showDetailItem
コンポーネントに含まれる子コンポーネントが1つのみの場合、およびshowDetailItem
コンポーネントのstretchChildren
属性がfirst
に設定されている場合のみです。
その他のパネル・コンポーネントでは、以下の場合にshowDetailItem
コンポーネントが拡大を許可します。
含まれる子が1つのみの場合
stretchChildren
属性がfirst
に設定されている場合
子に幅、高さ、境界およびパディングが設定されていない場合
子が拡大可能である場合
前述の項目がすべてtrueの場合、showDetailItem
コンポーネントは子コンポーネントを拡大できます。次に、showDetailItem
コンポーネント内で拡大可能なコンポーネントを示します。
decorativeBox
(拡大するように構成されている場合)
calendar
inputText
(拡大するように構成されている場合)
panelAccordion
(拡大するように構成されている場合)
panelBox
panelCollection
(拡大するように構成されている場合)
panelDashboard
(拡大するように構成されている場合)
panelGroupLayout
(layout
属性がscroll
またはvertical
に設定されている場合のみ)
panelLabelAndMessage
(拡大するように構成されている場合)
panelSplitter
(拡大するように構成されている場合)
panelStretchLayout
(拡大するように構成されている場合)
panelTabbed
(拡大するように構成されている場合)
region
table
(拡大するように構成されている場合)
tree
(拡大するように構成されている場合)
treeTable
(拡大するように構成されている場合)
showDetailItem
コンポーネント内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout
(layout
属性がdefault
またはhorizontal
に設定されている場合のみ)
panelHeader
panelList
tableLayout
(MyFaces Trinidadコンポーネント)
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントの子として配置することはできません。そのため、showDetailItem
コンポーネントの子として拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない別のコンポーネントでそのコンポーネントをラップする必要があります。
たとえば、panelList
コンポーネントにコンテンツを配置し、showDetailItem
コンポーネント内に表示されるようにする場合は、layout
属性がscroll
に設定されているpanelGroupLayout
コンポーネントをshowDetailItem
コンポーネントの子として配置し、panelList
コンポーネントをそのコンポーネントに配置します。詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
パネル・コンポーネントの中のshowDetailItem
コンポーネントでは表示イベントのキューイングがサポートされるため、サーバーおよびクライアントで検証が適切に処理されます。
一般に、disclosed
属性を持つコンポーネントの場合、デフォルトで、クライアントのAdfDisclosureEvent
のイベント・ルートはイベントのソース・コンポーネントに設定されており、disclosed
属性がtrue
のパネルに対するイベントのみがサーバーに送信されます。panelAccordion
、panelTabbed
またはpanelDrawer
コンポーネントの中で使用されるshowDetailItem
コンポーネントでは、イベント・ルートはそのパネル・コンポーネントです(つまり、イベント・ソースの親コンポーネントではなく、イベント・ソース・コンポーネントです)。このため、前に開かれたパネルの値はサーバーに送信されません。
たとえば、panelTabbed
コンポーネントの中に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つずつです。
表示イベントの詳細は、9.9.4項「表示イベントに関する必知事項」を参照してください。
-tr-layout-type
スキニング・キーを使用すると、親コンテナが小さすぎてすべてのタブを表示できない場合のpanelTabbed
コンポーネントでのオーバーフローの処理方法を構成できます。この圧縮レイアウトでは、1つ以上のオーバーフロー・ボタンを表示するか、コンベア・ベルトのように、非表示になっているタブを順に広げて表示できます。
注意: オーバーフローは、 |
図9-53にオーバーフローの圧縮レイアウトを示します。ユーザーがオーバーフロー・アイコンをクリックすると、非表示になっているアイテムがポップアップに表示されます。
例9-15に、スキニング・キーを使用してオーバーフローのレイアウトを表示する方法を示します。
図9-54にコンベアによる圧縮レイアウトを示します。ユーザーがオーバーフロー・アイコンをクリックすると、コンベア・ベルトの場合のように、非表示になっていたタブが順に表示域に移動してきます。その結果、反対側にあるタブは非表示になります。
例9-16に、スキニング・キーを使用してコンベア・ベルトによるレイアウトを使用する方法を示します。
注意:
したがって、次のレイアウト構成はサポートされません。
|
スキンの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeader
コンポーネントは、メッセージの表示や関連するヘルプ・トピックなどのヘッダー・タイプ機能が必要な場合に使用できますが、コンテンツの表示および非表示機能を指定する必要はありません。
ページの別のルック・アンド・フィールに遷移する必要がある場合は、decorativeBox
コンポーネントを使用できます。decorativeBox
コンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。詳細は、9.11.5項「スキニングとdecorativeBoxコンポーネントに関する必知事項」を参照してください。
panelHeader
コンポーネントには、特定タイプのコンポーネント用のファセットや、ヘッダーからヘルプ・トピックを起動する機能があります。次に、panelHeader
コンポーネントでサポートされているファセットを示します。
context
: ヘッダーのヘッダー・テキストの横に情報を表示します。
help
: ヘルプ情報を表示します。後方互換性が必要な場合にのみ使用します。かわりに、panelHeader
コンポーネントではhelpTopicId
属性を使用します。
info
: ヘッダー・テキストの下に情報を表示します。右揃えになります。
legend
: ヘルプ・テキストが存在する場合は、ヘルプ・コンテンツの左側でinfo
ファセットのコンテンツの下に情報が表示されます。ヘルプ・テキストが存在しない場合、legendコンテンツはヘッダーの下に直接レンダリングされます。
toolbar
: メニュー・バーの前にツールバーを表示します。
menuBar
: ツールバーの後ろにメニュー・バーを表示します。
図9-55に、panelHeader
コンポーネントの様々なファセットを示します。
タイトル行のすべてのファセットにすべてを表示するのに十分な領域がない場合、panelHeader
テキストが切り捨てられ、省略記号が表示されます。ユーザーが切り捨てられたテキスト上にカーソルを起動すると、図9-56に示すように、ツールチップに完全なテキストが表示されます。
コンテンツを表示するのに十分な領域がある場合は、図9-57に示すように、context
ファセットとツールバーの間に追加の領域が配置されます。
セクションの階層を表すようにpanelHeaders
コンポーネントを構成できます。たとえば、図9-58に示すように、サブヘッダーのあるメイン・ヘッダー、およびサブヘッダーのあるヘッダー・レベル1を表示できます。
それぞれにpanelHeader
コンポーネントをネストさせてサブセクションを作成します。panelHeader
コンポーネントをネストさせると、階層に応じてヘッダー・テキストが自動的にサイズ調整され、一番外側のpanelHeader
コンポーネントのテキストが最も大きくなります。
注意: サイズの処理は、デフォルトでヘッダー・コンポーネントの物理包含によって決定されます。つまり、最初のヘッダー・コンポーネントは見出しレベル1としてレンダリングされます。最初のヘッダー・コンポーネントにネストされるヘッダー・コンポーネントは見出しレベル2などとしてレンダリングされます。各ヘッダー・コンポーネントの見出しレベルは、 |
panelHeader
コンポーネントの使用の詳細は、9.11.1項「panelHeaderコンポーネントの使用方法」を参照してください。
decorativeBox
コンポーネントには、テーマを使用したスタイル設定機能が用意されています。これには、topとcenterの2つのファセットがあります。topファセットは色のない領域を提供し、centerファセットは実際のボックスです。topファセットの高さは、コンポーネントがtopファセットに配置されているかどうかに依存します。ファセットが設定されていると、topHeight
属性を使用して、コンテンツが占めるサイズが指定されます。
centerファセットのボックスの色は、使用されるテーマとスキンによって決まります。図9-59に、デフォルトで使用できる様々なテーマを示します。
デフォルトでは、decorativeBox
コンポーネントは親コンポーネントに合せて拡大されます。子コンポーネントからディメンションを継承するようにdecorativeBox
コンポーネントを構成することもできます。たとえば、図9-60では、親に合せて拡大されるように構成されたミディアム・テーマのdecorativeBox
コンポーネントを示していますが、ダーク・テーマのdecorativeBox
は、最大で子outputText
コンポーネントと同じ大きさになるように構成されています。
panelHeader
コンポーネントを1つ使用して特定の情報を指定することも、一連のpanelHeader
コンポーネントをネストさせてコンテンツの階層組織を作成することもできます。コンテンツを表示および非表示にできるようにする場合は、かわりにshowDetailHeader
コンポーネントを使用します。詳細は、9.9.2項「showDetailHeaderコンポーネントの使用方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.11項「静的ボックスの項目の表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelHeaderコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルで「パネル・ヘッダー」をページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「外観」セクションを開きます。
Textを、このパネルに表示するラベルに設定します。
ラベルの前にアイコンを追加するには、Iconを、使用するイメージ・ファイルのURIに設定します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、MessageTypeを次のいずれかの値に設定します。
confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
none: デフォルト。アイコンは表示されません。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
図9-61に、様々なメッセージ・タイプに使用されるアイコンを示します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
ヘッダーにヘルプを表示するには、HelpTopicIdにトピックIDを入力します。ヘルプ・トピックの作成および使用方法の詳細は、19.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と同じように表示されます。これは、カスタム・スキンを作成することで変更できます。詳細は、9.11.4項「スキニングとpanelHeaderコンポーネントに関する必知事項」を参照してください。
panelHeader
コンポーネントがジオメトリ管理を処理する方法を制御する場合は、「外観」セクションを開き、Typeを次のいずれかに設定します。ジオメトリ管理の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
flow: コンポーネントは拡大されないか、子を拡大しません。panelHeader
コンポーネントの高さは、その子によってのみ決定されます。
stretch: コンポーネントは拡大され、その子を拡大します(単一の子コンポーネントのみ拡大します)。
default: panelHeader
コンポーネントの親コンポーネントでジオメトリ管理を決定する場合。
パネルにツールバー・ボタンを追加するには、toolbar
コンポーネントをtoolbar
ファセットに挿入します。次に必要な数のボタン・コンポーネントをtoolbar
コンポーネントに挿入します。toolbar
およびボタンの使用方法は、16.3項「ツールバーの使用方法」を参照してください。
注意:
|
パネルにメニューを追加するには、menuBar
ファセットにmenuコンポーネントを挿入します。メニュー・バーへのメニュー作成の詳細は、16.2項「メニュー・バーでのメニューの使用方法」を参照してください。
ヒント:
|
必要に応じて、その他のファセットにコンテンツを追加します。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
パネルにコンテンツを追加するには、必要な子コンポーネントをpanelHeader
コンポーネントに挿入します。
decorativeBox
コンポーネントを使用して、ページに色付きの領域またはボックスを配置します。このコンポーネントは、通常、タブを表示するように構成されているnavigationPane
コンポーネントのコンテナとして使用されます。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
decorativeBoxコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルで「装飾ボックス」をページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウの「共通」セクションを開き、Top Heightにtop
ファセットの高さを設定します。
テーマを変更するには、「スタイルおよびテーマ」セクションを開き、別のテーマを選択します。
デフォルトでは、decorativeBox
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、decorativeBox
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、decorativeBox
コンポーネントが拡大を処理する方法を変更する必要があります。
dimensionsFrom
属性を使用して、コンポーネントが拡大されるかどうかを構成します。
注意:
デフォルトでは、DEFAULT_DIMENSIONSが設定されるので、次の説明にあるように、 |
DimensionsFromを次のいずれかの値に設定します。
children
: decorativeBox
コンポーネントは、子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合は、 同様に、 |
parent
: decorativeBox
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: decorativeBox
コンポーネントの親コンポーネントがその子の拡大を許可する場合、decorativeBox
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、decorativeBox
コンポーネントはその子コンポーネントのサイズに基づきます。
詳細は、9.11.3項「ジオメトリ管理およびdecorativeBoxコンポーネントに関する必知事項」を参照してください。
decorativeBox
コンポーネントは、そのcenter
ファセット内の子コンポーネントを拡大でき、このコンポーネント自体も拡大できます。次のコンポーネントは、decorativeBox
コンポーネントのcenter
ファセット内で拡大できます。
inputText
(拡大するように構成されている場合)
decorativeBox
(拡大するように構成されている場合)
panelAccordion
(拡大するように構成されている場合)
panelBox
panelCollection
(拡大するように構成されている場合)
panelDashboard
panelGroupLayout
(layout
属性がscroll
またはvertical
に設定されている場合のみ)
panelLabelAndMessage
(拡大するように構成されている場合)
panelSplitter
(拡大するように構成されている場合)
panelStretchLayout
(拡大するように構成されている場合)
panelTabbed
(拡大するように構成されている場合)
region
table
(拡大するように構成されている場合)
tableLayout
(拡大するように構成されている場合。これはMyFaces Trinidadコンポーネントであることに注意してください)
tree
(拡大するように構成されている場合)
treeTable
(拡大するように構成されている場合)
decorativeBox
コンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout
(layout
属性がdefault
またはhorizontal
に設定されている場合のみ)
panelHeader
panelList
showDetail
showDetailHeader
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、decorativeBox
コンポーネントのファセットに拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない遷移コンポーネントでそのコンポーネントをラップします。
たとえば、panelBox
コンポーネントにコンテンツを配置し、decorativeBox
コンポーネントのファセットに配置するように設定する場合は、layout属性がscroll
に設定されているpanelGroupLayout
コンポーネントをdecorativeBox
コンポーネントのファセットに配置し、panelBox
コンポーネントをそのpanelGroupLayout
コンポーネントに配置します。詳細は、9.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
またデフォルトではpanelHeaderコンポーネントのヘッダー・サイズに使用されるスタイルはスキンによって制御されます。2以上のヘッダー・サイズは、サイズ2として表示されます。つまり、サイズ3、4または5のスタイルには違いがなく、すべてサイズ2と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。
詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
decorativeBox
コンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、使用しているスキンに応じて、デフォルトのテーマを使用する場合、decorativeBox
コンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。
注意: Skyrosスキンの単純な境界線機能を使用する場合、角などの境界要素はまったくレンダリングされません。 |
スキンを使用して、decorativeBox
コンポーネントのスタイルをさらに制御できます。スキニング・キーは、次のコンポーネント領域に対して定義できます。
top-start
top
top-end
start
end
bottom-start
bottom
bottom-end
スキンの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelList
コンポーネントは、図9-62に示されているように、それぞれの隣に黒丸が付いた子コンポーネントの垂直のリストを表示するためのレイアウト要素です。rendered
属性がtrue
に設定されている子コンポーネント、およびvisible
属性がtrue
に設定されている子コンポーネントのみが、リストの順で表示の対象となります。
注意: 動的データ(JSFバインディングによって実行時に決定されるデータのリストなど)を表示するには、11.6項「選択コンポーネントの使用方法」で説明されているように選択コンポーネントを使用します。モデル・レイヤーを変更するリストを作成する必要がある場合は、第13章「値リスト・コンポーネントの使用方法」を参照してください。 |
デフォルトで、黒丸は子コンポーネントのスタイルの設定に使用されます。四角や白丸など、使用できるスタイルは他にもあります。表示する項目のリストが非常に長い場合は、リストを列に分割することもできます。
項目のリストを1つ作成するには、panelList
コンポーネントを1つ使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.12項「1つ以上の列における箇条書きリストの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelListコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルで「パネル・リスト」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウの「共通」セクションを開き、listStyle
属性を以下のような有効なCSS 2.1リスト・スタイル値の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
ヒント: 一部のブラウザは、 |
例9-17に、リストのスタイルをcircleに設定するコードを示します。
panelList
コンポーネントに(箇条書き項目として表示する)必要な数の子コンポーネントを挿入します。
ヒント: 通常はパネル・リストの直接の子コンポーネントである子コンポーネントを |
たとえば、一連のcommandLink
コンポーネントまたはoutputFormatted
コンポーネントを挿入できます。
注意: ADF Facesでは、デフォルトで、 |
panelList
コンポーネントをネストさせて、リスト階層を作成できます。図9-63に示されているように、リスト階層には外部項目と内部項目があり、外部項目に属する内部項目は外部項目の下にインデント表示されます。内部項目の各グループは、ネストした単一のpanelList
コンポーネントによって作成されます。
図9-63のようなリスト階層を作成するには、group
コンポーネントを使用して、外部項目とその内部項目の各グループを構成するコンポーネントをラップします。例9-18に、4つの内部項目を持つ外部項目が1つと、2つの内部項目を持つ別の外部項目があるリスト階層の作成方法に関するコードを示します。
例9-18 ネストした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
コンポーネントの詳細は、9.13項「関連する項目のグループ化」を参照してください。
類似する項目を親コンポーネント内に保持するには、group
またはpanelGroupLayout
コンポーネントを使用します。group
コンポーネントは、意味的に関連のある子コンポーネントを集約またはグループ化します。panelGroupLayout
コンポーネントとは異なり、group
コンポーネントはその子コンポーネントのレイアウトを提供しません。単独で使用される場合、group
コンポーネントは何もレンダリングしません。実行時にgroup
コンポーネントの内部の子コンポーネントのみレンダリングされます。
関連するコンポーネントのグループ化には、任意の数のgroup
コンポーネントを使用できます。たとえば、panelFormLayout
コンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。
例9-19に、panelFormLayout
コンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。
例9-19 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
コンポーネントを使用すると、図9-64に示すように、折り返さずに一連の子コンポーネントを縦または横に配置することも、折り返して続けて配置することもできます。layout
属性の値により子コンポーネントの配置が決定されます。
すべての配置において、panelGroupLayout
コンポーネントのseparator
ファセットを使用して、隣接する子コンポーネントの各ペアを線または空白で区切ることができます。詳細は、9.14項「空白または線を使用したコンテンツの分割」を参照してください。
横のレイアウトを使用する場合は、子コンポーネントを縦または横に並べることもできます。図9-65に示すように、上部の位置を合せて、高いコンポーネントの隣に低いコンポーネントを作成できます。
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
コンポーネントが含まれています。検索条件が非表示で、検索結果が領域に収まらない場合は、図9-66に示すようにスクロールバーがレンダリングされます。
panelGroupLayout
コンポーネントは、必要なレイアウトにするためにいくつでもネストさせることができます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.13項「関連する項目のグループ化」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
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
に設定すると、図9-67に示されているように、文字が配置されている架空の線に沿ってテキストの文字が並べられます。そのようなテキスト・コンポーネントでvalign
をbottom
に設定した場合、bottom
の縦の配列ではすべての文字の一番下の部分が同じ架空の線上に配置されるため、結果は見栄えのよい外観にはなりません。
注意: layoutがhorizontalではない場合、 |
scroll: 縦のレイアウトになり、子コンポーネントは縦に並べられ、必要な場合には縦のスクロールバーが表示されます。
vertical: 縦のレイアウトになり、子コンポーネントは縦に並べられます。
ページ内に空白の部分を配置して、コンポーネントの間に間隔を設け、すべてのコンポーネントを互いのすぐ隣やすぐ下に詰めて配置した場合よりも見やすくすることができます。この目的で提供されているADF Facesコンポーネントは、spacer
コンポーネントです。
height
およびwidth
属性を使用して、縦または横、あるいはその両方の空白をページに組み込むことができます。
height
: ページに組み込む縦の空白の量を決定する属性。例9-20に、縦の空白を使用して、2つの長いoutputText
コンポーネントの間に一定の間隔を設けるよう設定されたページを示します。
例9-20 縦の空白
<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>
図9-68に、ブラウザで表示した場合に、spacer
コンポーネントがページ出力に及ぼす影響を示します。
width
属性は、コンポーネント間に組み込む横の空白の量を決定します。例9-21に、2つのコンポーネントの間に横方向の間隔を設けるよう設定されたページのソースの一部を示します。
例9-21 横の空白
<af:outputLabel value="Your credit rating is currently:"/> <af:spacer width="10"/> <af:outputText value="Level 8"/>
図9-69に、ブラウザで表示した場合の、横方向の間隔調整コンポーネントの影響を示します。
separator
コンポーネントを使用すると横線を作成できます。図9-70に、2つのpanelBox
コンポーネント間にseparator
コンポーネントを挿入した場合のproperties.jspx
ファイルの外観を示します。
通常、spacer
およびseparator
コンポーネントは、その他のレイアウト・コンポーネントのファセットに使用します。これにより、分割するコンポーネントに空白または線が表示されます。
ページには、必要な数だけspacer
コンポーネントを使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.14項「空白または線を使用したコンテンツの分割」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
spacerコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルで「スペーサ」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで「共通」セクションを開きます。必要に応じて幅と高さを設定します。
注意: 高さが指定されていて幅が指定されていない場合、ブロック・レベルのHTML要素がレンダリングされ、その近くに新しい行が表示されます。幅が指定されている場合、指定されている高さの値に関係なく、HTML標準を厳密にサポートするユーザー・エージェントに適用可能な行の高さより低くなりません。 |
ページには、必要な数だけseparator
コンポーネントを使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.14項「空白または線を使用したコンテンツの分割」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
separatorコンポーネントを作成および使用する手順:
「コンポーネント」ウィンドウの「レイアウト」パネルで「セパレータ」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、必要に応じてプロパティを設定します。