Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース2 (11.1.2.1.0) B66719-01 |
|
前 |
次 |
この章では、ADF Facesのいくつかのレイアウト・コンポーネントを使用して、Webページ上のコンテンツを編成する方法を説明します。
この章では、次の項目について説明します。
ADF Facesには、その他のコンポーネントをページに配置する際に使用可能なレイアウト・コンポーネントが多数用意されています。通常、これらのコンポーネントを使用してページの作成を開始します。その後、その他の機能(データやボタンのレンダリングなど)を提供するコンポーネントを、ファセット内またはレイアウト・コンポーネントの子コンポーネントとして追加します。
ヒント: アプリケーション内のページのレイアウトを設計できるページ・テンプレートを作成できます。テンプレートはアプリケーションのすべてのページで使用できます。詳細は、第10章「フラグメント、ページ・テンプレート、コンポーネントの作成および再利用」を参照してください。 |
コンテナとして機能するレイアウト・コンポーネントに加え、ADF Facesには、コンテンツの表示や非表示、またはセクション、リスト、空白の表示が可能な対話型のレイアウト・コンポーネントもあります。一部のレイアウト・コンポーネントには、ウィンドウのサイズが変更された場合にブラウザ・ウィンドウに合せてコンテンツが拡大する機能や、拡大するコンポーネント内に配置された場合には拡大する機能などのジオメトリ管理機能もあります。レイアウト・コンポーネントの拡大およびジオメトリ管理機能の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
表9-1では、ADF Facesの各レイアウト・コンポーネントを簡単に説明しています。
表9-1ADF Facesのレイアウト・コンポーネント
コンポーネント | 説明 | 子の拡大 | 拡大 | |
---|---|---|---|---|
ページ管理コンポーネント |
||||
|
HTMLページの標準の各ルート要素( |
X |
||
|
HTMLの |
|||
ページ・レイアウト・コンテナ |
||||
|
他のコンポーネントを配置できる |
X |
X( |
|
|
再配置可能な仕切線を使用してリージョンを2つの部分( |
X |
X( |
|
|
子コンポーネント(通常は |
X |
X( |
|
|
中心に配置できる子コンポーネントを持つことができ、12のファセットと追加コンポーネントを配置できる枠線も含みます。これらは中心を囲みます。詳細は、9.5項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。 |
|||
|
ラベルやフィールドが縦に並ぶように、 |
|||
表示/非表示機能のあるコンポーネント |
||||
|
ヘッダーの下のコンテンツを表示または非表示にできます。通常、 |
X( |
X( |
|
|
|
X(単一の子コンポーネントを含み、その |
||
|
子コンポーネントを含むことのできるタイトル付のボックス。toolbarファセットがあります。詳細は、9.8項「コンテンツの動的な表示および非表示」を参照してください。 |
X(拡大されているか、 |
X |
|
|
|
X( |
||
|
タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、かわりにナビゲーション・メニューの |
X( |
||
|
トグル・アイコンを介してコンテンツを表示または非表示にします。詳細は、9.8項「コンテンツの動的な表示および非表示」を参照してください。 |
|||
その他のコンテナ |
||||
|
子コンポーネントが含まれ、メッセージ、ツールバーおよびヘルプ・トピックを含むヘッダーを表示します。詳細は、9.10項「静的ボックスの項目の表示」を参照してください。 |
X( |
X( |
|
|
|
X(表、ツリーまたはツリー表が1つのみの場合) |
X |
|
|
ファセットでスタイル・テーマを使用してその子に枠線付の外観を適用するコンテナ・コンポーネントを作成します。このコンポーネントは、通常、タブを表示するように構成されている |
X(中央ファセット内) |
X( |
|
|
インライン |
X |
||
|
ナビゲーション階層の1レベルを表す一連のナビゲーション・アイテムを作成します。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
X(タブを表示するように構成されている場合) |
||
|
各子コンポーネントをリスト項目として出力し、隣に黒丸をレンダリングします。ネストさせて階層リストを作成できます。詳細は、9.11項「1つ以上の列における箇条書きリストの表示」を参照してください。 |
|||
|
ポップアップ・ウィンドウ内に子コンポーネントを表示します。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。 |
|||
|
子のtoolbarおよびmenuコンポーネントを一緒に表示します。詳細は、16.3項「ツールバーの使用方法」を参照してください。 |
|||
グループ化コンテナ |
||||
|
子コンポーネントを縦または横にグループ化します。複数のコンポーネントをファセットに含める場合にファセットで使用されます。詳細は、9.12項「関連する項目のグループ化」を参照してください。 |
X(レイアウトがscrollまたはverticalに設定されている場合のみ) |
||
|
グループの親コンポーネントに管理されている場合を除き、レイアウトに関係なく子コンポーネントをグループ化します。複数のコンポーネントをファセットに含める場合にファセットで使用されます。詳細は、9.12項「関連する項目のグループ化」を参照してください。 |
|||
間隔調整コンポーネント |
||||
|
項目間に水平線を作成します。詳細は、9.13項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
|
空白の領域を作成します。詳細は、9.13項「空白または線を使用したコンテンツの分割」を参照してください。 |
ページにレイアウト・コンポーネントを追加した後で、イベントへの応答などの機能を追加することが必要になる場合があります。レイアウト・コンポーネントで使用できる他の機能へのリンクを次に示します。
テンプレート: レイアウトを作成した後で、それをテンプレートとして保存できます。テンプレートのレイアウトを変更すると、そのテンプレートを使用するすべてのページにレイアウトの変更が自動的に反映されます。詳細は、10.4項「ページ・テンプレートの使用」を参照してください。
テーマ: テーマは、panelBox
コンポーネントなどの一部のレイアウト・コンポーネントに色のスタイルを追加します。テーマの使用の詳細は、付録28「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
スキン: スキンを使用して、レイアウト・コンポーネントのアイコンおよびその他のプロパティを変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ローカライゼーション: 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。詳細は、第29章「ページの国際化およびローカライズ」を参照してください。
アクセシビリティ: 入力コンポーネントをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
イベント: レイアウト・コンポーネントは、なんらかのロジックを実行することでアプリケーションで対応できるサーバー側とクライアント側両方のイベントを起動します。詳細は、第6章「イベントの処理」を参照してください。
ユーザー・カスタマイズ: showDetailHeader
コンポーネントなどの一部のコンポーネントには、展開または縮小できる領域があります。ユーザーがページを離れるときにコンポーネントの状態(展開または縮小)を保存できるようにアプリケーションを構成できます。詳細は、第32章「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'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <f:view> <af:document title="untitled1" id="d1"> <af:form id="f1"></af:form> </af:document> </f:view> </jsp:root>
これらのタグがページに配置されたら、レイアウト・コンポーネントを使用して、ページ上のその他のコンポーネントをレンダリングする方法と場所を制御できます。その他すべてのコンポーネントを保持するコンポーネントは、ルート・コンポーネントとみなされます。ルート・コンポーネントとして使用するコンポーネントの選択は、含まれているコンポーネントのコンテンツをブラウザ・ウィンドウに合せて拡大されるように表示するか、ウィンドウに収まらないコンテンツにアクセスするためにスクロールバーを使用してコンテンツを移動できるようにするかによって異なります。拡大と配置の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
ヒント: レイアウトを自身で作成するかわりに、目的のレイアウトでページを表示する適切に構成されたコンポーネントを提供するJDeveloperのクイック・レイアウト・テンプレートを使用できます。詳細は、9.2.3項「クイック・スタート・レイアウトの使用」を参照してください。 |
ジオメトリ管理は、ユーザー、親コンポーネントおよび子コンポーネントがアプリケーションのコンポーネントの実際のサイズと場所をネゴシエーションするプロセスです。たとえば、コンポーネントは、ブラウザに最初にロードされたとき、ブラウザがサイズ変更されたとき、またはユーザーが明示的にサイズ変更したときにサイズ変更されます。
デフォルトでは、可視できる有効なルート・コンポーネントが1つのみ存在する場合、コンポーネントがジオメトリ管理をサポートしていれば、そのルート・コンポーネントはブラウザの可視領域を使用するように自動的に拡大されます。ジオメトリ管理コンポーネントは、panelStretchLayout
およびpanelSplitter
などです。ルート・コンポーネントで子コンポーネントの拡大がサポートされている場合(および、子コンポーネントでも拡大がサポートされている場合)、配置レイアウト領域(子コンポーネントの拡大がサポートされていない領域)に達するまで、コンポーネント階層を下がって子コンポーネントのサイズが再計算されます。拡大を有効化するためにコードを記述する必要はありません。
注意: フレームワークでは、ポップアップ・ダイアログ、ポップアップ・ウィンドウまたはインラインではないメッセージは、ルート・コンポーネントとみなされません。form コンポーネントがdocument コンポーネントの直接の子コンポーネントである場合には、フレームワークにより、form タグ内のビジュアル・ルートの有無が確認されます。ポップアップのサイズ変更の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。 |
表9-1に示されているように、それ自体とその子コンポーネントも拡大できるコンポーネントは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
(拡大するように構成されている場合)
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「クイック・スタート・レイアウトのテーマ」を参照してください。テーマの詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
クイック・レイアウトを使用したページの作成の詳細は、3.4項「ビュー・ページの作成」を参照してください。
すべてのブラウザでページが期待どおりに表示されるようにするには、ページの作成時に、JDeveloperで提供されるクイック・レイアウトの1つを使用します。これらのレイアウトを使用すると、正しいコンポーネントが使用されて正確に構成されます。詳細は、9.2.3項「クイック・スタート・レイアウトの使用」を参照してください。
ベスト・プラクティス: クイック・スタート・レイアウトを使用して、レイアウト表示の問題を回避します。 |
ただし、自分でレイアウトを作成する場合のために、拡大されるコンポーネントと配置されるコンポーネントの両方を含むレイアウトを作成する際のヒントを次に示します。
ジオメトリ管理機能のあるルート・コンポーネント内(showDetailItem
を含むpanelStretchLayout
、panelSplitter
、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.4項「クライアント側コンポーネントのインスタンス化」を参照してください。
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ピクセル)を使用でき、イメージは必要なサイズにスケール変更されます。 |
データがコミットされていないことがアプリケーションによって検出されたときにユーザーに警告メッセージを表示する場合は、「動作」セクションを展開し、UncommitedDataWarningをon
に設定します。警告メッセージは、ユーザーがデータをコミットせずにページを終了しようとする場合、またはサーバーにコミットされていないデータがある場合に表示されます。デフォルトでは、これはoff
に設定されます。
注意: アプリケーションがADFコントローラを使用しない場合、データは中間層にポストされるときにコミットされるとみなされます。たとえば、ユーザーがcommandButton をクリックした場合、データが実際にバック・エンドに書き込まれたかどうかにかかわらず、中間層でナビゲーションが発生した場合に警告は表示されません。 |
「拡張」セクションを開き、StateSavingをページで使用する状態保存のタイプに設定します。
ADF Facesアプリケーションの場合は、アプリケーションで、ページ状態をセッションに保存し、トークンをクライアントに永続化する、トークンによるクライアント状態保存を使用することをお薦めします。この設定はアプリケーションにグローバルに影響し、すべてのページの状態がセッションに保存され、トークンと情報が状態にかかわらず永続化されます。
ただし、状態を異なる方法で保存する必要のあるページがある場合があります。たとえば、長時間経過した後でユーザーがログイン・ページにポストバックする場合に、セッション・タイムアウト・エラーが表示されないようにする場合などです。ページのstateSaving
属性をclient
に変更することで、ユーザーがログイン・ページにポストバックするときにタイムアウト・エラーは表示されません。
web.xml
のグローバル設定をページで次のいずれかにオーバーライドできます。
client: 状態は、トークンを使用せずにクライアントに完全に保存されます。この設定は、セッション失効メッセージが表示されないようにします。
default: ページの状態はweb.xml
の設定に基づきます。
server: ページの状態はサーバーに保存されます。
状態保存の詳細は、付録A「web.xmlでの構成」を参照してください。
コンテンツをページの定義済領域に配置し、ブラウザがサイズ変更されたらコンテンツが拡大されるようにする必要がある場合には、panelStretchLayout
コンポーネントを使用します。panelStretchLayout
コンポーネントは、ファセット内に配置されたコンポーネントが拡大されるコンポーネントの1つです。図9-9に、コンポーネントのファセットを示します。
top
およびbottom
ファセットの高さを設定すると、含まれるコンポーネントはその高さに合うように拡大されます。同様に、start
およびend
ファセットの幅を設定すると、それらのファセットに含まれるコンポーネントはその幅まで拡大されます。それらのファセットに配置されているコンポーネントがない場合、ファセットはレンダリングされません。つまり、ファセットは領域を占有しません。設定した領域をファセットで占有し、空白のままにする場合は、spacerコンポーネントを挿入します。9.13項「空白または線を使用したコンテンツの分割」を参照してください。center
ファセットの子コンポーネントは、残りの領域に合うよう拡大されます。コンポーネント拡大の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
Topまたはbottomのファセットの高さ、あるいはstartまたはendファセットの幅を設定するかわりに、高さまたは幅をauto
に設定できます。これにより、ファセットの子コンポーネントに必要な正確な領域を使用するように、ファセット自体がサイズを設定できます。領域は、Webブラウザがファセットのコンテンツの表示に必要だと判断する領域の量に基づいて割り当てられます。
パフォーマンスのヒント: 値としてauto を使用すると、ページのパフォーマンスが低下します。最初に高さまたは幅を設定し、auto 属性の使用は控えるようにしてください。 |
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.3項「コンテンツをページ全体に拡大するための設定」を参照してください。
他の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
に設定すると、ファセットのコンテンツの表示に必要な領域の量がブラウザにより決定されます。
注意: ファセットの幅または高さの値としてauto を使用するようにそのファセットを設定した場合、子コンポーネントは拡大できる必要がありません。実際には、ファセットの幅に依存しない安定した単独の幅を使用する必要があります。
たとえば、子コンポーネントが子を自動的に拡大できるファセットでは また、 |
値を明示的に指定しない場合、topHeight
、bottomHeight
、startWidth
およびendWidth
属性の値は、それぞれデフォルトで50ピクセルになります。top
とbottom
ファセットの幅、およびstart
とend
ファセットの高さは、panelStretchLayout
の親コンポーネントの幅と高さから導出されます。
ヒント: ファセットに子コンポーネントが含まれない場合はレンダリングが行われないため、領域は占有されません。構成した領域を占有するには、ファセットに子コンポーネントを配置する必要があります。 |
デフォルトでは、panelStretchLayout
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。panelStretchLayout
コンポーネントを、子を拡大しないコンポーネントの内部に配置する場合は、panelStretchLayout
コンポーネントを拡大しないように構成する必要があります。
DimensionsFromを次のいずれかの値に設定します。
children
: 拡大するかわりに、panelStretchLayout
コンポーネントは子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合は、top およびbottom ファセットの高さの設定に割合を使用できません。使用すると、それらのファセットはこのpanelStretchLayout コンポーネントのサイズからディメンションを取得しようとしますが、panelStretchLayout コンポーネントはそのコンテンツから高さを取得するため取得できず、循環依存関係が発生します。いずれかのファセットに割合が使用されている場合、それは無視され、デフォルトの50px がかわりに使用されます。
また、この設定を使用している場合は、 |
parent
: panelStretchLayout
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます(つまり、panelStretchLayout
コンポーネントは拡大されます)。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelStretchLayout
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelStretchLayout
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelStretchLayout
コンポーネントはその子コンポーネントのサイズに基づきます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントを任意のファセットにドラッグ・アンド・ドロップします。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、9.3.2項「ジオメトリ管理およびpanelStretchLayoutコンポーネントについて」を参照してください。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネント(panelGroupLayout
コンポーネントなど)で子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
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-10に示すようにエディタ領域からコンポーネント・デモ領域を分離します。ユーザーは、スプリッタをドラッグすることでペインのサイズを変更でき、エディタを表示するパネルを縮小および復元することもできます。パネルが縮小されると、パネルのコンテンツが非表示になります。パネルが復元されると、コンテンツが表示されます。
panelSplitter
コンポーネントでは、調整可能なスプリッタで分離された2つのペインにコンテンツを編成できます。ペインは、(図9-10に示されているスプリッタのように)水平に並べるか、垂直に並べることができます。ADF Facesデモ・アプリケーションでは、別のpanelSplitter
コンポーネントを使用して、ページのメイン本体からアプリケーションのグローバル・メニューを分離します。図9-11に、ドキュメントとソースへのアクセスを含むメニューを表示するように展開されたpanelSplitter
コンポーネントを示します。
スプリッタの矢印ボタンをクリックすると、グローバル・メニューが表示されているパネルが閉じられ、図9-12に示すように、メニュー項目が表示されなくなります。
panelSplitter
コンポーネントのファセットにコンポーネントを配置します。panelSplitter
コンポーネントではジオメトリ管理を使用して、実行時に子コンポーネントを拡大します。つまり、ユーザーがパネルを1つ閉じると、使用可能な領域に合うように別のパネルのコンテンツが明示的にサイズ変更されます。
注意: ユーザーはペインをサイズ変更または縮小することでsplitterPosition およびcollapsed 属性の値を変更できますが、アプリケーションが変更の永続性を使用するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。変更の永続性の有効化および使用方法の詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
panelSplitter
コンポーネントを使用すると、スプリッタで分割された2つのペインを作成できます。それぞれのスプリッタ・コンポーネントには、first
およびsecond
という2つのファセットがあり、それぞれ第1パネルと第2パネルに対応します。子コンポーネントが存在できるのはファセット内のみです。3つ以上のペインを作成するには、panelSplitter
コンポーネントをネストします。
操作を開始する前に
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.4項「スプリッタを使用したサイズ変更可能なペインの作成」を参照してください。
他の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-13に示されているように、ADF Facesによりスプリッタはstartパネルから200ピクセルの位置に配置されます。
positionedFromEnd
属性がtrue
に設定されている場合、ADF Facesではスプリッタの初期位置はend(またはorientation
の値に応じてbottomパネル)から計測されます。図9-14に、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
属性を使用しないかを構成します。プロパティ・インスペクタで、DimensionsFromを次のいずれかに設定します。
children
: 拡大するかわりに、panelSplitter
コンポーネントは子コンポーネントからディメンションを取得します。
注意: この設定を使用し、orientation 属性をvertical に設定した場合、collapsibleパネルのコンテンツは子コンポーネントによって決定されずに、splitterPosition 属性の値によって決定されます。他のペインのサイズは、その子コンポーネントによって決定されます。
また、この設定を使用している場合は、 |
parent
: panelSplitter
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelSplitter
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelSplitter
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelSplitter
コンポーネントはその子コンポーネントのサイズに基づきます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントをfirst
ファセットおよびsecond
ファセットにドラッグ・アンド・ドロップします。orientationがhorizontalに設定されている場合、first
ファセットがleftファセットになります。orientationがverticalに設定されている場合、first
ファセットがtopファセットになります。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、9.4.2項「ジオメトリ管理およびpanelSplitterコンポーネントについて」を参照してください。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネントで子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
3つ以上のペインを作成するには、別のパネル・スプリッタ・コンポーネントをファセットに挿入し、ネストされたスプリッタ・ペインを作成します(図9-15を参照)。
例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-16に、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.3項「コンテンツをページ全体に拡大するための設定」を参照してください。
JSFページに使用できるpanelBorderLayout
コンポーネントの数に制限はありません。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.5項「事前定義済固定領域へのページ・コンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelBorderLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル枠線レイアウト」をJSFページにドラッグ・アンド・ドロップします。
コンポーネント・パレットから、panelBorderLayout
コンポーネントの子コンポーネントとして、ウィンドウ中央へのコンテンツの表示に使用するコンポーネントをドラッグ・アンド・ドロップします。
子コンポーネントは、挿入した順番で連続して表示されます。他のタイプのレイアウトで子コンポーネントを表示する場合は、panelGroupLayout
コンポーネントにそのコンポーネントをラップします。詳細は、9.12項「関連する項目のグループ化」を参照してください。
中央を囲むコンテンツを配置するには、必要なコンポーネントを各ファセットにドラッグ・アンド・ドロップします。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナで子コンポーネントをラップします。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
panelFormLayout
コンポーネントを使用すると、入力フィールドや選択リスト・フィールドなど、複数のコンポーネントを1つ以上の列に配置できます。File Explorerアプリケーションでは、panelFormLayout
コンポーネントを使用してファイル・プロパティが表示されています。図9-17に示されているように、コンポーネントはラベルが右揃えになるように構成されています。
図9-18に、ラベルがフィールドの上に表示されるように構成されているコンポーネントを使用した同じページを示します。
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-19に示すようにすべて1つの列に表示されます。
ただし、row
属性が8
に設定されている場合は、図9-20に示すように、最初の8個のinputText
コンポーネントは最初の列に表示され、最後の2つのコンポーネントは2列目に表示されます。
ただし、それぞれに表示される行数は、構成された行数によってのみ決定されるわけではありません。panelFormLayout
コンポーネントのmaxColumns
属性は、デフォルトで、4列以上レンダリングしないように設定されています(PDAアプリケーションの場合は2列)。この値により、実際に行数が決定されます。たとえば、25の子コンポーネントがあり、5行表示するようにコンポーネントを設定し、デフォルトの最大列数を3
に設定したままにした場合、5行表示するように設定しても、実際はコンポーネントにより9行表示されます。これは、最大列数が設定された行数をオーバーライドするためです。最大3列のみ許可するように設定されているため、すべての子コンポーネントを表示するにはコンポーネントで9行を使用する必要があります。コンポーネントで5行のみが表示されるようにするには、最大列数を5に設定する必要があります。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用されます。幅は、ピクセル単位の絶対数またはパーセント値を使用して指定します。ラベルの長さが合ない場合は、テキストが折り返されます。
ヒント: ページが英語以外の言語で表示される場合は、異なる言語および文字で使用するためにラベルに余分な空白を残す必要があります。 |
ページに1つ以上のpanelFormLayout
コンポーネントを使用して、必要なフォーム・レイアウトを作成できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.6項「フォームでのコンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelFormLayoutを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・フォーム・レイアウト」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いてラベルの位置を設定します。
デフォルトで、子の入力コンポーネントのフィールド・ラベルはフィールドの横に表示されます。フィールドの上にラベルを配置するには、labelAlignment
属性をtop
に設定します。
注意: panelFormLayout コンポーネントを別のpanelFormLayout コンポーネントにネストすると、ネストされたレイアウトのラベルの位置はtop になります。 |
rowsおよびmaxColumnsを設定して、panelFormLayout
コンポーネントの行数と列数を決定します。
rows
属性の値は、ADF Facesにより、その後から新しい列が開始される行の番号として使用される数値です。デフォルトでは、2147483647
(Integer.MAX_VALUE
)に設定されています。これは、rendered="true"
およびvisible="true"
に設定されているすべての子コンポーネントが、単一の列にレンダリングされることを意味します。
フォームに複数の列を含める場合は、rows
属性をレンダリングされる子コンポーネントの倍数に設定し、maxColumns
属性をフォームに表示する最大列数に設定します。maxColumns
のデフォルト値は3
です。(PDAの場合、デフォルトは2
です。)
注意: panelFormLayout コンポーネントが別のpanelFormLayout コンポーネント内に存在している場合、内側のpanelFormLayout コンポーネントのmaxColumns 値は常に1 です。 |
たとえば、rows
属性が6
に設定されていて、レンダリングされた子が1から6ある場合、リストは1列に表示されます。レンダリングされた子コンポーネントが7から12ある場合、リストは2列に表示されます。子コンポーネントが13以上ある場合、リストは3列に表示されます。レンダリングされたすべての子コンポーネントを1列に表示するには、rows
属性をデフォルトの値に設定しなおします。
レンダリングされた子コンポーネントの数に、maxColumn
属性で許可されている数を超える列が必要な場合には、rows
属性の値がオーバーライドされます。たとえば、レンダリングされた子コンポーネントが100あり、rows
属性が30
に設定されていて、maxColumns
属性が3
(デフォルト)の場合、リストは3列34行で表示されます。maxColumns
属性が2
に設定されている場合、リストは2列51行で表示されます。
ヒント: レンダリングされた子コンポーネントが参照するのは、panelFormLayout コンポーネントの直接の子コンポーネントのみです。そのため、複数の行をレンダリングするコンポーネント(selectManyCheckbox など)が子の場合は、そのすべての行がレンダリングされた単一の子とみなされ、別々の列に分割できません。 |
必要に応じてfieldWidthおよびlabelWidthを設定します。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。
panelFormLayout
コンポーネントのlabelWidth
属性ではラベルの優先幅を、fieldWidth
属性ではフィールドの優先幅を設定できます。
注意: labelWidth コンポーネントに指定する値は、labelAlignment 属性がtop に設定されていて、ラベルがフィールドの上に表示されるレイアウトでは無視されます。 |
フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用され、異なる列に異なる幅を設定することはできません。em、px、%などの任意のCSS単位を使用して幅を指定します。使用される単位は、labelWidth
属性とfieldWidth
属性の両方で同じである必要があります。
パーセント値を使用する場合は次のようにします。
指定するパーセント幅は、表示される列数に関係なく、panelFormLayout
コンポーネントが占有する幅全体のパーセントです。
labelWidth
およびfieldWidth
のパーセントの合計は、100%になる必要があります。合計が100%未満の場合、幅は100%になるように正規化されます。たとえば、labelWidth
を10%に、fieldWidth
を30%に設定した場合、実行時にlabelWidth
は33%に、fieldWidth
は67%になります。
一方の幅を明示的に設定してもう一方の幅を指定しない場合(labelWidth
のパーセントは指定してfieldWidth
は指定しないなど)、指定されていないパーセント幅がADF Facesにより自動的に計算されます。
注意: panelFormLayout コンポーネントに複数の列とフッターが含まれている場合、パーセントの分数分割がサポートされていないWebブラウザでは、メインのフォーム項目とフッター項目の位置の間にわずかにオフセットが生じることがあります。この影響を最小限にするために、labelWidth のパーセントは、列数で均等に分割できるようにしてください。 |
panelFormLayout
コンポーネントの幅が領域の600ピクセルを占有し、labelWidth
属性が50
%に設定されているとします。1列に表示される場合、ラベル幅もフィールド幅も300ピクセルになります。2列に表示される場合は、各列が300ピクセルであるため、列の各ラベル幅とフィールド幅は150ピクセルになります。
ラベル・テキストの長さが指定されたラベル幅の1行に収まらない場合は、ADF Facesによりラベル・テキストが自動的に折り返されます。指定されたフィールド幅がpanelFormLayout
コンポーネントに配置した子コンテンツの最低サイズより狭い場合は、子コンテンツの最低サイズがフィールド幅として自動的に使用されます。
注意: 割り当てられた領域よりフィールドが広い場合、ブラウザはフィールドを切り捨てず、ラベル列の領域を使用します。これが原因で、ラベルが予想以上に折り返される可能性があります。この場合は、フィールド・コンテンツの幅を狭くすることを検討してください(inputText コンポーネントに、幅がより狭いcontentStyle を使用するなど)。 |
必要な子コンポーネントを挿入します。
通常は、入力テキストやチェック・ボックスを複数選択などのラベル付きのフォーム入力コンポーネント、およびユーザーの入力を可能にするその他の類似のコンポーネントを挿入します。
ヒント: 通常はpanelFormLayout コンポーネントの直接の子コンポーネントである子コンポーネントをiterator 、switcher およびgroup コンポーネントにラップすれば、panelFormLayout コンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
例9-5に、図9-17に表示されている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>
ヒント: 入力以外のコンポーネント(label 属性がない)を使用する場合、またはpanelFormLayout コンポーネント内の単一のラベルで複数の入力コンポーネントをグループ化する場合は、まずpanelLabelAndMessage コンポーネントにコンポーネントをラップします。panelLabelAndMessage コンポーネントの使用方法の詳細は、19.4項「単一のラベルおよびメッセージを使用したコンポーネントのグループ化」を参照してください。 |
フォーム・レイアウトに意味的に関連する入力コンポーネントをグループ化するには、group
コンポーネントを使用してグループに属するコンポーネントをラップします。groupにコンポーネントを配置すると、panelFormLayout
コンポーネントによりグループの上下に区切り線が引かれます。
group
コンポーネントの使用方法の詳細は、9.6.2項「groupコンポーネントをpanelFormLayoutコンポーネントとともに使用する方法について」を参照してください。
子の入力コンポーネントの下にコンテンツを追加するには、必要なコンポーネントをfooter
ファセットに挿入します。
ファセットに使用できる子コンポーネントは1つのみです。footer
ファセットに複数のコンポーネントを挿入する必要がある場合は、panelGroupLayout
コンポーネントまたはgroup
コンポーネントを使用してfooter
の子コンポーネントをラップします。例9-6に、panelFormLayout
コンポーネントにpanelGroupLayout
コンポーネントを使用してfooter
の子コンポーネントを配置するサンプル・コードを示します。
例9-6 水平に配置されたpanelFormLayoutのfooterの子コンポーネント
<af:panelFormLayout> <f:facet name="footer"> <af:panelGroupLayout layout="horizontal"> <af:commandButton text="Save"/> <af:commandButton text="Cancel"/> <f:facet name="separator"> <af:spacer width="3" height="3"/> </f:facet> </af:panelGroupLayout> </f:facet> . . . </af:panelFormLayout>
group
コンポーネント自体は何もレンダリングしませんが、panelFormLayout
コンポーネントの子として使用すると、各group
コンポーネントの子コンポーネントの周辺にセパレータが表示されます。たとえば、panelFormLayout
コンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例9-16に、panelFormLayout
コンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。
例9-7 panelFormLayoutの子コンポーネントのグループ化
<af:panelFormLayout binding="#{editor.component}" rows="10" labelWidth="33%" fieldWidth="67%" testId="panelFormLayout1"> <af:inputText columns="5" label="label 1"/> <af:group> <af:inputText columns="5" label="grouped 1" shortDesc="This one is secret!" secret="true"/> <af:inputText columns="5" label="grouped 2"/> <af:inputText columns="5" label="grouped 3"/> </af:group> <af:inputDate id="df1" label="label 2"/> <af:panelLabelAndMessage label="label 3" labelStyle="vertical-align: middle;"> <af:commandButton text="Submit"/> </af:panelLabelAndMessage> <af:selectOneListbox id="sol" label="label 4" shortDesc="Select One Option"> <af:selectItem label="option 1"/> <af:selectItem label="option 2"/> <af:selectItem label="option 3"/> <af:selectItem label="option 4"/> </af:selectOneListbox> <af:selectManyListbox id="rs" label="label 5" shortDesc="Select Option"> <af:selectItem label="option 1"/> <af:selectItem label="option 2"/> <af:selectItem label="option 3"/> <af:selectItem label="option 4"/>oiiiik, </af:selectManyListbox> </af:panelFormLayout>
図9-21に示されているように、例9-16のサンプル・コードでは、実行時にpanelFormLayout
コンポーネントにより子コンポーネントの1つ目のgroup
の前後に点線のセパレータがレンダリングされます。
9.6項「フォームでのコンテンツの配置」で説明したように、panelFormLayout
コンポーネントは特定のコンポーネント属性を使用して、列と行にその子コンポーネントを表示する方法(グループ化および非グループ化)を決定します。group
コンポーネントを使用して、子コンポーネントを複数の列に表示するpanelFormLayout
コンポーネントに関連コンポーネントをグループ化する場合、group
コンポーネントの子コンポーネントは常に同じ列に表示されるため、group
コンポーネントの内部の子コンポーネントは列をまたがって分割されません。
group
コンポーネントで子コンポーネントのレイアウトを設定することはできませんが、基礎となるHTML要素で、group
コンポーネント内の子コンポーネントを必要なレイアウトに設定できます。たとえば、group
コンポーネントの子のボタン・コンポーネントをフォーム・レイアウト内に水平に配置する場合は、panelGroupLayout
コンポーネントを使用してボタンをラップし、panelGroupLayout
コンポーネントのlayout
属性をhorizontal
に設定します。その後、例9-8に示すように、group
コンポーネントにpanelGroupLayout
コンポーネントを挿入します。
例9-8 groupコンポーネント内のpanelGroupLayout
<af:group> <af:panelGroupLayout layout="horizontal"> <af:commandButton text="Save" ../> <af:commandButton text="Cancel" ../> <f:facet name="separator"> <af:spacer width="3"/> </f:facet> </af:panelGroupLayout> </af:group>
panelFormLayout
コンポーネントのfooter
ファセットの子コンポーネントをgroup
コンポーネントを使用してグループ化する場合は、例9-9に示すように、すべてのgroup
コンポーネントおよびグループ化されていないその他の子コンポーネントを、1つのルートgroup
コンポーネントに配置する必要があります。
例9-9 ルートgroupコンポーネントが1つ含まれるpanelFormLayoutのfooterファセット
<af:panelFormLayout ...> <f:facet name="footer"> <!-- One root group component needed --> <af:group> <af:outputText value="Footer item 1"/> <!-- One group --> <af:group> <af:outputText value="Group 1 item 1"/> <af:outputText value="Group 1 item 2"/> </af:group> <af:panelGroupLayout layout="horizontal"> <af:commandButton text="Save"/> <af:commandButton text="Cancel"/> <f:facet name="separator"> <af:spacer width="3"/> </f:facet> </af:panelGroupLayout> </af:group> </f:facet> . . . </af:panelFormLayout>
図9-22に示されているように、panelFormLayout
コンポーネントのグループ化された子コンポーネントと同じように、panelFormLayout
コンポーネントにより、実行時にfooter
ファセットの各group
コンポーネントの子コンポーネントの周辺に点線のセパレータがレンダリングされます。
注意: panelFormLayout コンポーネントのfooter ファセットでサポートされているのは、2レベルのグループ化されたコンポーネントのみで、footer ファセットに3レベル以上ネストしたgroup コンポーネントを配置することはできません。たとえば、次のコードは無効です。
<f:facet name="footer"> <!-- Only one root group --> <af:group> <af:outputText value="Footer item 1"/> <!-- Any number of groups at this level --> <af:group> <af:outputText value="Group 1 item 1"/> <af:outputText value="Group 1 item 2"/> <!-- But not another nested group. This is illegal. --> <af:group> <af:outputText value="Nested Group 1 item 1"/> <af:outputText value="Nested Group 1 item 2"/> </af:group> </af:group> <af:outputText value="Another footer item"/> </af:group> </f:facet> |
panelFormLayout
コンポーネントのfooter
ファセットと本体のどちらにコンポーネントをグループ化しているかにかかわらず、panelFormLayout
コンポーネントかfooter
ファセットの最初または最後の子がgroup
コンポーネントの場合、そのgroupの子コンポーネントの周辺にはセパレータは表示されません。たとえば、例9-10のどちらのコード例でも、実行時に生成される外観は同じです。
例9-10 同じ外観を生成するコード
<!-- Example 1: Group of buttons is last child in root group --> <f:facet name="footer"> <af:group> <af:outputText value="Footer text item 1"/> <af:outputText value="Footer text item 2"/> <af:group> <af:inputText label="Nested group item 1"/> <af:inputText label="Nested group item 2"/> </af:group> <af:group> <af:panelGroupLayout layout="horizontal"> <af:commandButton text="Cancel"/> <af:commandButton text="Save"/> </af:panelGroupLayout> </af:group> </af:group> </f:facet> <!-- Example 2: panelGroupLayout of buttons is last child in root group--> <f:facet name="footer"> <af:group> <af:outputText value="Footer text item 1"/> <af:outputText value="Footer text item 2"/> <af:group> <af:inputText label="Nested group item 1"/> <af:inputText label="Nested group item 2"/> </af:group> <af:panelGroupLayout layout="horizontal"> <af:commandButton text="Cancel"/> <af:commandButton text="Save"/> </af:panelGroupLayout> </af:group> </f:facet>
panelDashboard
コンポーネントでは、panelForm
コンポーネントと同様に、行および列にその子コンポーネントを配置できます。ただし、図9-23に示されているように、panelDashboard
の子は、テキスト・コンポーネントではなく、コンテンツを含むpanelBox
コンポーネントです。
panelDashboard
コンポーネントを追加する場合、コンポーネントに含まれる列数および各行の高さを構成します。ダッシュボードは、子を拡大して構成済の領域を埋めます。すべての子コンポーネントが、指定した列数と行の高さ内に収まらない場合、panelDashboard
コンポーネントにスクロールバーが表示されます。
子を拡大するコンポーネントに配置した場合、デフォルトで、panelDashboard
は子の数にかかわらずその親コンテナに合せて拡大されます。これは、ブラウザがダッシュボードのニーズを超えてサイズ変更された場合に、ダッシュボードに空白の領域があることを意味する場合があります。
たとえば、dimensionsFrom
属性をparent
に設定することでpanelDashboard
がその親からサイズを継承するように設定したとします。列を1に、rowHeight
を50px
に設定します。次に、2つのpanelBox
コンポーネントを追加します。columns
は1に設定されているため、行は2つになります。親コンポーネントはpanelStretchLayout
であるため、panelDashboard
はボックスの高さにかかわらずpanelStretchLayout
に合せて拡大され、図9-24に示すように最終的に余分な領域ができます(ダッシュボードの色が紫紅に変わり、境界が見やすくなります)。
ダッシュボードを拡大しない場合は、子を拡大しないコンポーネントに配置し、(dimensionsFrom
属性をchildren
に設定することで)子に基づいてサイズを決定するようにpanelDashboard
を構成します。これは、rowHeight
属性を乗算することで、子の表示に必要な行数と同じ高さになります。
前の例では、scroll
に設定されたpanelGroupLayout
にダッシュボードを配置した場合、rowHeight
は50
に設定されているため、図9-25に示すように、ブラウザ・ウィンドウのサイズにかかわらず、panelDashboard
は常に100pxの高さを少し上回ります。
panelDashboard
コンポーネントでは、宣言的なドラッグ・アンド・ドロップ動作もサポートされており、ユーザーは子コンポーネントを再配置できます。図9-26に示されているように、ユーザーは、たとえばpanelBox 10
をpanelBox 4
とpanelBox
5
の間に移動できます。ボックスをドロップできる場所にはシャドウが表示されます。
注意: ユーザーがコンポーネントをpanelDashboard コンポーネントの内外にドラッグできるドラッグ・アンド・ドロップ機能を構成することもできます。詳細は、33.6項「panelDashboardコンポーネントでのドラッグ・アンド・ドロップ機能の追加」を参照してください。 |
子コンポーネントを移動する機能とともに、panelDashboard
コンポーネントは、ユーザーが子コンポーネントをレンダリングから非レンダリングに切り替えられるようにし、挿入または削除されるpanelBoxes
の外観を与えるAPIも提供します。ダッシュボードは、部分ページ・レンダリングを使用して、ページ全体を再描画することなく子コンポーネントの新しいセットを再描画します。
panelDashboardBehavior
タグを使用して、コンポーネントのレンダリングの応答性を向上させることができます。このタグを使用すると、コマンド・コンポーネントをアクティブ化し、視覚的な変更をダッシュボードに適用してから、アプリケーション・コードでサーバーのコンポーネント・ツリーを変更できます。アクション・イベントがサーバーに送信される前に、この領域の拡大が行われるため、コマンド・コンポーネントのアクション・リスナーがコンポーネント・ツリーを変更し、ダッシュボードでの挿入の最適化されたエンコーディングを準備している間に、ユーザーはすぐにフィードバックを確認できます。
たとえば、図9-27は、panelSplitter
コンポーネントの右パネルで使用されるpanelDashboard
コンポーネントを示しています。左パネルにリンクとして表示されているリスト項目は、panelDashboard
の各panelBox
コンポーネントを表しています。すべてのpanelBox
コンポーネントが表示されている場合、リンクはすべて非アクティブです。ただし、ユーザーがpanelBox
コンポーネントの1つを削除すると、対応するリンクがアクティブになります。ユーザーはそのリンクをクリックして、panelBox
を再挿入できます。panelDashboardBehavior
タグをcommandLink
コンポーネントとともに使用することで、ユーザーは挿入済ボックスの描画を確認できます。
このタグを使用しない場合、アクション・リスナーが処理している間、ユーザーがダッシュボード構造に対する変更を確認できるまで多少の遅延があります。
図9-28は、panelDashboard
コンポーネントを使用した実際的な例を示しています。ページの上部にあるリンクの1つを選択すると、ダッシュボードに表示されるpanelBoxes
が変わります。ページの左側にある関連リンクをクリックして、panelBox
を追加することもできます。
panelDashboard
をページに追加した後で、ダッシュボードを構成して、拡大するかどうかを決定できます。その後、子コンポーネントを追加し、コンポーネントを再配置できるようにする場合は、子コンポーネントにもcomponentDragSource
タグを追加します。コンポーネントの挿入および削除を許可する場合は、アクションを処理するためのリスナーを実装します。panelDashboardBehavior
タグを使用して、panelDashboard
コンポーネントでの挿入への応答性を向上させることもできます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.7項「ダッシュボードでのコンテンツの配置」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelDashboardコンポーネントを使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・ダッシュボード」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
columnsを、子コンポーネントを表示するために使用する列数に設定します。子コンポーネントは各列に合せて拡大されます。
RowHeightを、各行の高さのピクセル数に設定します。子コンポーネントは、この高さまで拡大されます。
デフォルトでは、panelDashboard
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelDashboard
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelDashboard
コンポーネントが拡大を処理する方法を変更する必要があります。
コンポーネントが拡大されるか、dimensionsFrom
属性を使用しないかを構成します。そのためには、「外観」セクションで、DimensionsFromを次のいずれかに設定します。
children
: panelDashboard
コンポーネントは、子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合は、panelDashboard コンポーネントの高さを(たとえばinlineStyle またはstyleClass 属性を通じて)設定できません。設定すると、panelDashboard の高さと子コンポーネントの高さが競合する原因となります。 |
parent
: panelDashboard
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelDashboard
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelDashboard
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelDashboard
コンポーネントはその子コンポーネントのサイズに基づきます。
コンポーネント・パレットから、子panelBox
コンポーネントをドラッグ・アンド・ドロップします。
ヒント: panelDashboard コンポーネントでは、region コンポーネントも子コンポーネントとしてサポートされています。 |
ユーザーが子コンポーネントを並べ替えられるようにするには、コンポーネント・パレットで、「操作」パネルの「ドラッグ・アンド・ドロップ」グループから、「コンポーネント・ドラッグ元」を各子コンポーネントに子としてドラッグ・アンド・ドロップします。
コンポーネントを追加および削除できるようにする場合は、マネージドBeanを作成し、子の追加またはドロップ時に子の並替えを行うハンドラ・メソッドを実装します。このイベントはドロップ・イベントとみなされるため、ドラッグ・アンド・ドロップ・フレームワークを使用する必要があります。ドロップ・イベントのハンドラの作成の詳細は、第33章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
最適化されたライフサイクルを使用するには、ハンドラにpanelDashboard
コンポーネントのprepareOptimizedEncodingOfInsertedChild()
メソッドをコールさせます。これにより、挿入された子コンポーネントのみがレンダリングのためにダッシュボードから送信されます。
注意: panelDashboardBehavior タグを使用する予定の場合は、関連付けられているコマンド・コンポーネントのactionListener ハンドラからこのAPIをコールする必要があります。 |
手順7でcomponentDragSource
タグを追加した場合、panelDashboard
のDropEvent
ハンドラも実装する必要があります。panelDashboard
コンポーネントを選択している状態で、「動作」セクションを開き、DropListener
属性をハンドラ・メソッドにバインドします。
panelDashboardBehavior
タグを使用する場合は、挿入を開始するために使用するコマンド・コンポーネントをドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、コマンド・コンポーネントのActionListenerを、コンポーネント・ツリーの変更を処理するマネージドBeanのハンドラにバインドします。ハンドラでpanelDashboard
コンポーネントのprepareOptimizedEncodingOfInsertedChild()
メソッドをコールします。これにより、挿入されたレンダリング対象の子コンポーネントのみがダッシュボードから送信されます。例9-11に、子コンポーネントの挿入を処理するマネージドBeanのコードを示します。
例9-11 「挿入」ボタンのアクション・リスナー・コード
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); }
コンポーネント・パレットで、「操作」パネルの「動作」グループからPanel Dashboard Behaviorタグをドラッグし、コマンド・コンポーネントに子としてドロップします。
プロパティ・インスペクタで次の入力を行います。
for: 関連するpanelDashboard
コンポーネントのIDを入力します。
index: 挿入するコンポーネントの索引を決定するメソッドに解決されるEL式を入力します。panelDashboardBehavior
タグを使用する場合、プレースホルダ要素は、サーバーから戻った後で実際のコンポーネントがレンダリングされるDOMツリーに挿入されます。サーバーで挿入が行われる前に挿入のプレースホルダが追加されるため、ユーザーがページをリロードしても、子コンポーネントが継続的に同じ順序で表示されるように、子の挿入場所を指定する必要があります。
このコンポーネントでは、列数およびrowHeight
属性に基づき、子がグリッドに編成されます。panelDashboard
内で拡大可能な子コンポーネントは次のとおりです。
inputText
(rows
属性が1より大きく設定され、simple
属性がtrue
に設定されている場合)
panelBox
region
(拡大するように構成されている場合)
table
(拡大するように構成されている場合)
その他のコンポーネントを子コンポーネントとしてpanelDashboard
コンポーネントに配置しようとすると、コンポーネントの階層は無効になります。
ユーザーがコンテンツの表示または非表示を選択できるようにすることが必要な場合があります。ユーザー・インタフェースのすべての機能を一度に表示する必要がなければ、ユーザーの意志でインタフェースの一部を表示および非表示にできるコンポーネントを使用して領域を節約できます。
showDetail
コンポーネントを使用すると、ユーザーがラベルの下のコンテンツを開いた状態(表示)または閉じた状態(非表示)にすることが可能な切替えアイコン付きのラベルを作成できます。コンテンツが閉じた状態(非表示)の場合、デフォルトのラベルは「表示」で、展開アイコンが表示されます。コンテンツが開いた状態(表示)の場合、デフォルトのラベルは「非表示」で、縮小アイコンが表示されます。
たとえば、File ExplorerアプリケーションのnewFileItem
ページでは、showDetail
コンポーネントを使用してファイル・プロパティを表示および非表示にしています。図9-29に示すように、コンポーネントは、ページが表示されたらプロパティが非表示になるように構成されています。
ユーザーが切替えアイコンをクリックすると、図9-30に示されているようにプロパティが表示されます。
表示されているテキストおよび非表示のテキストを表示するために、outputText
コンポーネントより複雑なコンポーネントを使用する場合は、コンポーネントをshowDetail
コンポーネントのprompt
ファセットに追加できます。表示に設定すると、promptファセットのコンテンツが、表示されているテキストおよび非表示のテキストの値と置き換えられます。showDetail
コンポーネントの使用方法は、9.8.1項「showDetailコンポーネントの使用方法」を参照してください。
showDetail
コンポーネントと同じように、showDetailHeader
コンポーネントでもコンテンツの表示を切り替えられますが、showDetailHeader
コンポーネントにはヘッダーにラベルと切替えアイコンがあり、メニュー・バー、ツールバーおよびテキスト用のファセットも用意されています。
ヒント: showDetailHeader コンポーネントは、表示イベントを処理することを除き、panelHeader コンポーネントと同じです。panelHeader コンポーネントの詳細は、9.10項「静的ボックスの項目の表示」を参照してください。 |
タイトル行のすべてのファセットにすべてを表示するのに十分な領域がない場合、showDetailHeader
テキストが切り捨てられ、省略記号が表示されます。ユーザーが切り捨てられたテキスト上にカーソルを起動すると、図9-31に示すように、ツールチップに完全なテキストが表示されます。
コンテンツを表示するのに十分な領域がある場合は、図9-32に示すように、context
ファセットとツールバーの間に追加の領域が配置されます。
また、showDetailHeader
コンポーネントをエラー、警告、情報または確認のメッセージとして使用するように構成できます。コンテンツは、ヘッダーの下で表示または非表示になります。たとえば、File ExplorerアプリケーションのnewFileItem
ページはshowDetailHeader
コンポーネントを使用して、新規ファイルの作成のヘルプを表示します。デフォルトでは、図9-30に示すようにヘルプは非表示になります。ユーザーがヘッダー内の切替えアイコンをクリックすると、図9-33に示すように、コンテンツが表示されます。
showDetailHeader
コンポーネントをpanelHeader
コンポーネントとともに使用してページをセクションとサブセクションに分割し、一部のコンテンツを非表示にできます。showDetailHeader
コンポーネントには、ツールバー・ファセットやメニュー・バー・ファセットなど、いくつかのファセットが含まれます。これらのファセットは、panelHeader
コンポーネントの場合と同じです。panelHeader
コンポーネントの詳細は、9.10項「静的ボックスの項目の表示」を参照してください。
showDetailHeader
コンポーネントをネストさせて、コンテンツの階層を作成できます。ネストされた各コンポーネントのヘッダーは、階層を示すために異なるスタイルになります。図9-34に、ネストした3つのshowDetailHeader
コンポーネントおよびその異なるスタイルを示します。
各ヘッダー・レベルで使用されているスタイルは、showDetailHeader
コンポーネントにスキンを適用することで変更できます。ADF Facesコンポーネントのスキンの詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
注意: テキストのスタイルはsize 属性を使用して強制できますが(最大のテキストが0の場合)、size 属性の値は階層には影響しません。影響を受けるのはテキストのスタイルのみです。階層は、コンポーネントのネストによって決定されます。 |
panelBox
コンポーネントは、ヘッダーの下に情報を表示または非表示にできるようにする場合、およびページのその他の情報と分けるためのボックスが必要な場合に使用します。File Explorerアプリケーションでは、図9-35
に示すように、properties.jspx
ページに2つのpanelBoxコンポーネントを使用して、属性およびファイルの履歴を表示します。
図9-36に、「履歴」panelBox
コンポーネントが非表示の状態になっている同じページを示します。
panelBox
コンポーネントに背景色を設定して、コンテンツをページの残りの部分とさらに区別することができます。2色の組合せ(ランプと呼ばれる)が用意されており、各組合せにはnone、light、mediumおよびdarkの4つの色のレベルがあります。図9-37に図9-35と同じパネル・ボックスを示しますが、下のpanelBox
コンポーネントはcoreランプの中間色が表示されるように構成されています。
panelBox
コンポーネントのサイズは、ピクセル・サイズを明示的に割り当てて設定することも、親に対する割合で設定することもできます。また、タイトルの位置を設定することも、アイコンを追加することもできます。また、panelBox
コンポーネントには、ボックスにツールバーおよびツールバー・ボタンを追加できるtoolbar
ファセットがあります。
showDetail
、showDetailHeader
およびpanelBox
コンポーネントはすべて、サーバー上の表示イベントを処理します。表示イベントは、ユーザーがコンポーネントの表示と非表示を切り替えるたびに送信されます。これは、データが送信または受信されない場合でも、サーバーとのラウンドトリップが必要であることを意味します。表示イベントをクライアント上で処理するようにこれらのコンポーネントを構成して、パフォーマンスを向上させることができます。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出するまでサーバーに送信されません。
コンテンツの複数の大きな領域を表示および非表示にする必要がある場合は、panelAccordion
およびpanelTabbed
コンポーネントの使用を検討してください。詳細は、9.9項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
showDetail
コンポーネントを使用して、コンテンツの1セットを表示および非表示にできます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.8項「コンテンツの動的な表示および非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
showDetailコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「詳細の表示」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。
コンポーネントの子コンポーネントを表示する場合は、Disclosedをtrue
に設定します。
注意: コンテンツを表示および非表示にすることで、ユーザーはdisclosed 属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
DisclosedTextを、コンテンツが開いた状態(表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「非表示」になります。
UndisclosedTextを、コンテンツが閉じた状態(非表示)の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「表示」になります。
注意: disclosedText には値を指定してundisclosedText には指定しない場合、ADF Facesにより、開いた状態および閉じた状態の両方にdisclosedText の値が自動的に使用されます。同様に、undisclosedText には値を指定してdisclosedText には指定しない場合、コンテンツが非表示または表示されると、undisclosedText の値が使用されます。
|
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、DisclosureListenerをDisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
表示イベントをクライアントで処理する場合は、HandleDisclosureをclient
に設定します。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。
表示イベントおよびリスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
注意: disclosureListener を、表示イベントを処理するリスナー・メソッドにバインドした場合、handleDisclosure 値は無視され、イベントはサーバーで処理されます。 |
パフォーマンスのヒント: コンポーネントでデータ変更を処理しない場合は、handleDisclosure 属性をclient に設定する必要があります。 |
コンテンツを追加するには、必要な子コンポーネントをshowDetail
コンポーネントに挿入します。
showDetailHeader
コンポーネントは、ヘッダーの下にコンテンツを1セット表示する必要がある場合や、表示または非表示にできるメッセージとしてコンテンツを使用する場合に使用します。showDetailHeader
コンポーネントは、コンテンツを非表示にできるようにする場合に、ヘッダーおよびコンテンツの階層を作成する際にも使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.8項「コンテンツの動的な表示および非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
showDetailHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「ディテール・ヘッダーの表示」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。Textをセクション・ヘッダーのラベルにするテキスト文字列に設定します。
Iconを、セクション・ヘッダーのアイコンに使用するイメージ・ファイルのURIに設定します。アイコン・イメージはヘッダー・ラベルの前に表示されます。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、MessageTypeを次のいずれかの値に設定します。
confirmation
: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error
: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info
: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
warning
: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
none
: デフォルト。icon
属性に指定されていないかぎり、アイコンは表示されません。
図9-38に、メッセージ・タイプに使用される各アイコンを示します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
コンポーネントの子コンポーネントを表示する場合は、「動作」セクションを開き、Disclosedをtrue
に設定します。
注意: コンテンツを表示および非表示にすることで、ユーザーはdisclosed 属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行するバッキングBeanで、DisclosureListenerをdisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
表示イベントをクライアントで処理する場合は、HandleDisclosureをclient
に設定します。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。
表示イベントおよびリスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
注意: disclosureListener を、表示イベントを処理するリスナー・メソッドにバインドした場合、handleDisclosure 値は無視され、イベントはサーバーで処理されます。 |
パフォーマンスのヒント: コンポーネントでデータ変更を処理しない場合は、handleDisclosure 属性をclient に設定する必要があります。 |
showDetailHeader
コンポーネントがジオメトリ管理を処理する方法を制御する場合は、「外観」セクションを開き、Typeを設定します。コンポーネントの拡大またはその子の拡大を行わない場合は、これをflow
に設定します。showDetailHeader
コンポーネントの高さは、その子によってのみ決定されます。コンポーネントの拡大およびその子の拡大を行う場合は、stretch
に設定します(単一の子コンポーネントのみ拡大されます)。showDetailHeader
コンポーネントの親コンポーネントでジオメトリ管理を決定する場合は、デフォルトに設定したままにします。ジオメトリ管理の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
ヘッダーにボタンまたはアイコンを追加するには、コンポーネント・パレットで、「レイアウト」パネルのメニューおよびツールバーパネルからtoolbar
コンポーネントをtoolbar
ファセットにドラッグ・アンド・ドロップします。その後、新しく挿入されたtoolbar
コンポーネントに、任意の数のcommandToolbarButton
またはcommandButton
コンポーネントを追加します。toolbar
コンポーネントの使用方法の詳細は、16.3項「ツールバーの使用方法」を参照してください。
注意: panelHeader コンポーネントでは、ツールバーのオーバーフローはサポートされていません。 |
ヘッダーにメニューを追加するには、menuBar
ファセットにmenuコンポーネントを挿入します。メニュー作成の詳細は、16.2項「メニュー・バーでのメニューの使用方法」を参照してください。
ヒント: toolbar ファセットにメニューを配置することも、menu ファセットにツールバー(およびツールボックス)を配置することも可能です。これらのファセットの主な違いは場所です。toolbar ファセットはmenu ファセットの前に配置されます。 |
サブセクション・ヘッダーを作成するには、既存のshowDetailHeader
コンポーネントに別のshowDetailHeader
コンポーネントを挿入します。
size
属性では、ヘッダー・レベルに使用する数値を指定します。最大の数字は0
で、これはH1ヘッダー・レベルに対応します。最小は5
で、H6ヘッダーに対応します。
デフォルトで、size
属性は-1
です。これは、ADF Facesにより、最上位の親コンポーネントからヘッダー数(および使用するヘッダー・レベルのスタイル)が自動的に計算されることを意味します。ネストされているコンポーネントを使用する場合は、size
属性を明示的に設定して、表示する適切なヘッダー・スタイルを取得する必要はありません。
注意: テキストのスタイルはsize 属性を使用して強制できますが(最大のテキストが0の場合)、size 属性の値は階層には影響しません。影響を受けるのはテキストのスタイルのみです。階層は、コンポーネントのネストによって決定されます。 |
ADF Facesにより使用されるデフォルトのスキンでは、サイズ3以上に使用されるスタイルがサイズ2と同じように表示されます。つまり、サイズ3、4または5のスタイルには違いがなく、すべてサイズ2と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
セクションまたはサブセクションにコンテンツを追加するには、必要な子コンポーネントをshowDetailHeader
コンポーネントに挿入します。
ページには、任意の数のpanelBox
コンポーネントを挿入できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.8項「コンテンツの動的な表示および非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelBoxコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・ボックス」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開き、使用するランプをRampで選択します。
core
ランプでは様々な青が使用され、highlight
ランプでは様々な黄色が使用されます。使用する色は、カスタム・スキンを作成することで変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
Backgroundをlight
、medium
、dark
またはdefault
のいずれかの値に設定します。デフォルトの背景色は透明です。
Textを、コンテナのヘッダー部分のタイトルとして表示するテキスト文字列に設定します。
Iconを、ヘッダー・テキストの前に表示するアイコン・イメージのURIに設定します。
注意: text およびicon 属性の両方が設定されていない場合、panelBox コンポーネントのヘッダー部分は表示されません。 |
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
TitleHalignをcenter
、start
、end
、left
またはright
のいずれかの値に設定します。この値により、コンテナのヘッダー部分のタイトルの横位置(アイコン・イメージを含む)が決定されます。
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListenerをDisclosureListener
メソッドに設定します。
表示イベントおよびリスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
表示イベントをクライアントで処理する場合は、HandleDisclosureをclient
に設定します。イベントは別のイベントが送信されるまで、またはコンポーネントがデータの変更を検出して更新が必要になるまでサーバーに送信されません。
表示イベントおよびリスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
注意: disclosureListener を、表示イベントを処理するリスナー・メソッドにバインドした場合、handleDisclosure 値は無視され、イベントはサーバーで処理されます。 |
パフォーマンスのヒント: コンポーネントでデータ変更を処理しない場合は、handleDisclosure 属性をclient に設定する必要があります。 |
ツールバー・ボタンを追加するには、コンポーネント・パレットで、「レイアウト」パネルのメニューおよびツールバーパネルから、「ツールバー」をtoolbar
ファセットにドラッグ・アンド・ドロップします。その後、toolbar
コンポーネントに、必要な数のcommandToolbarButton
コンポーネントを挿入します。toolbar
およびcommandToolbarButton
コンポーネントの使用方法の詳細は、16.3項「ツールバーの使用方法」を参照してください。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
表示するコンテナにコンテンツを追加するには、必要なコンポーネントをpanelBox
コンポーネントの子コンポーネントとして挿入します。
通常、panelBox
コンポーネントに子コンポーネントを1つ挿入し、その子コンポーネントに表示するコンテンツを挿入します。この子コンポーネントでコンテンツの表示方法を制御できますが、親のpanelBox
コンポーネントは制御できません。
panelBox
コンポーネントの幅を変更するには、inlineStyle
属性を希望する正確なピクセル・サイズに設定します。または、inlineStyle
属性を、panelBox
コンポーネントが含まれる外側の要素の割合に設定します。例9-12に、幅を変更するために使用するコードを示します。
disclosed
属性では、ヘッダーの下のコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed
属性はtrue
で、コンテンツが表示されます。この属性がfalse
に設定されていると、コンテンツは非表示になります。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
ユーザーが切替えアイコンをクリックしてコンテンツを表示または非表示にすると、デフォルトで、コンポーネントからサーバーにorg.apache.myfaces.trinidad.event.DisclosureEvent
イベントが送信されます。DisclosureEvent
イベントには、ソース・コンポーネントおよびその状態、つまり表示(開いている)または非表示(閉じている)に関する情報が含まれています。isExpanded()
メソッドは、ノードを開く(表示)か閉じる(非表示)かを決定するboolean
値を返します。コンポーネントにそのコンテンツの表示および非表示のみを行わせる場合は、コードを記述する必要はありません。
ただし、DisclosureEvent
イベントの特別な処理を実行する場合は、コンポーネントのdisclosureListener
属性をバッキングBeanのdisclosureListener
メソッドにバインドできます。ユーザーが表示されているまたは非表示のアイコンをクリックするたびに、DisclosureEvent
イベントへのレスポンスとしてdisclosureListener
メソッドが起動されます。
例9-13に示されているように、disclosureListener
メソッドは、単一のdisclosureEvent
イベント・オブジェクトを持つpublicメソッドで、戻りタイプがvoidである必要があります。
例9-13 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では属性値を変更して保持できるので、その値はユーザーのセッション中その状態のままになります。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
注意: showDetail 、showDetail Header 、panelBox コンポーネントなどのように、組込みのイベント機能のあるADF Facesコンポーネントは、form コンポーネントで囲む必要があります。 |
非表示および表示できるコンテンツの複数の領域を表示する必要がある場合は、panelAccordion
またはpanelTabbed
コンポーネントを使用できます。どちらのコンポーネントでも、showDetailItem
コンポーネントを使用して実際のコンテンツを表示します。
panelAccordion
コンポーネントを使用すると、開くことのできる一連のペインを作成できます。ユーザーが一度に複数のパネルを開くことや、一度に1つのパネルのみを開くことができるように設定可能です。複数のパネルを開いている場合は、showDetailItem
コンポーネントのヘッダーをドラッグして、パネルの高さを調整できます。
パネルが縮小されている場合は、パネル・ヘッダーのみ表示されます。パネルが展開されている場合は、パネル・コンテンツがパネル・ヘッダーの下に表示されます(ユーザーは、panelAccordion
コンポーネントのヘッダーまたは展開アイコンをクリックしてペインを展開できます)。図9-39に示されているように、File ExplorerアプリケーションではpanelAccordion
コンポーネントを使用して、「フォルダ」および「検索」ペインを表示しています。
実行時、使用可能なブラウザの領域が、開かれたパネルのコンテンツの表示に必要な領域より少ない場合、表示されていないパネルをユーザーが選択して移動できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。図9-40に、「検索」パネルを表示する十分な領域がない場合に、File Explorerアプリケーションの「フォルダ」パネルに表示されるオーバーフロー・アイコン(丸で囲まれている右下のアイコン)を示します。
ユーザーがオーバーフロー・アイコンをクリックすると、ユーザーが選択してナビゲートするためのオーバーフロー・ポップアップ・メニューが表示されます(図9-41を参照)。
図9-42に示すように、ペインをドラッグ・アンド・ドロップで再配置できるようにpanelAccordion
を構成することもできます。
順序が変更されると、showDetailItem
コンポーネントのdisplayIndex
属性も変更されて新しい順序を反映します。
注意: オーバーフローしている項目は並替えできません。 |
panelAccordion
コンポーネントの使用方法は、9.9.1項「panelAccordionコンポーネントの使用方法」を参照してください。
panelTabbed
コンポーネントを使用すると、タブ付きの一連のペインを作成できます。panelAccordion
ペインとは異なり、panelTabbed
ペインは閉じることも開くこともできません。かわりに、ユーザーがタブを選択すると、選択したタブのコンテンツが表示されます。タブは表示領域の上か、表示領域の下、あるいはその両方に表示されます。個々のタブを閉じられるようにpanelTabbed
コンポーネントを構成できます。このコンポーネントは、すべてのタブを閉じる、最後のタブを除いてすべて閉じる、またはタブを閉じないように構成できます。タブが削除されるように構成されている場合、タブの最後にXが表示されます。無効化されたX(削除はできるが現在無効であることを意味します)を表示するようにタブを構成することもできます。
各タブのコンテンツを含むshowDetailItem
がいつ作成されるかを構成できます。タブが少数の場合は、現在表示されているタブに関係なく、panelTabbed
コンポーネントが初めて作成されるときにすべてのshowDetailItem
コンポーネントを作成できます。ただし、panelTabbed
コンポーネントに多数のshowDetailItem
コンポーネントが含まれる場合は、ページのレンダリングが低速になることがあります。パフォーマンスを向上させるには、かわりに対応するタブが選択されたときにのみshowDetailItem
コンポーネントを作成するようpanelTabbed
コンポーネントを構成できます。さらに、アクセスされるたびに再作成する必要がないように、ユーザーが別のタブを選択した後でshowDetailItem
を破棄するか、コンポーネント・ツリーで選択されているshowDetailItem
コンポーネントを保持するように、配信メソッドを構成できます。
File ExplorerアプリケーションではpanelTabbed
コンポーネントを使用して、図9-43に示されているように、メインのパネルにコンテンツを表示しています。
panelTabbed
コンポーネントの使用方法は、9.9.2項「panelTabbedコンポーネントの使用方法」を参照してください。
ヒント: タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、ナビゲーション・パネル・コンポーネントを使用してナビゲーション・メニューを作成できます。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
panelAccordion
およびpanelTabbed
コンポーネントのどちらの場合でも、showDetailItem
コンポーネントを1つ使用して各パネルにコンテンツを配置します。たとえば、4つのペインを使用する場合、panelAccordion
またはpanelTabbed
コンポーネントのそれぞれにshowDetailItem
コンポーネントを4つ挿入します。showDetailItem
コンポーネントを使用するには、9.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。ツールバーをshowDetailItem
コンポーネントのtoolbar
ファセットに追加でき、ツールバーはパネルまたはタブが表示されると表示されます。図9-43に、File ExplorerアプリケーションのshowDetailItem
コンポーネントで使用されているツールバーを示します。
すべてのタブを表示できない場合、panelTabbed
コンポーネントでもオーバーフロー・アイコンがサポートされています。図9-44に、File Explorerアプリケーションのオーバーフロー・アイコンを示します。
パフォーマンスのヒント: panelAccordion またはpanelTabbed コンポーネント内の子コンポーネントの数、および子コンポーネントの複雑さが、オーバーフローのパフォーマンスに影響します。可能な場合は、オーバーフローしないように、panelAccordion またはpanelTabbed コンポーネントのサイズを設定します。 |
panelAccordion
およびpanelTabbed
コンポーネントを拡大するように構成することも、現在表示されているshowDetailItem
の子からディメンションを取得するように構成することもできます。
panelAccordion
またはpanelTabbed
コンポーネントを拡大するように構成した場合は、単一の子がshowDetailItem
コンポーネントの唯一の子であるかぎり、その単一の子を拡大するようにshowDetailItem
コンポーネントを構成できます。
1つのページで、通常はページの異なる領域にあるかネストされている複数のpanelAccordion
コンポーネントを使用できます。panelAccordion
コンポーネントを追加した後に、一連のshowDetailItem
コンポーネントを挿入して、1つのパネルに1つのshowDetailItem
を使用してペインを配置します。次に、各showDetailItem
にコンポーネントを挿入してパネル・コンテンツを配置します。showDetailItem
の使用手順は、9.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.9項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelAccordionコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・アコーディオン」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
ユーザーが同時に複数のパネルのコンテンツを開いて参照できるようにする場合は、DiscloseManyをtrue
に設定します。
デフォルト値はfalse
です。これは、一度に開くことのできるパネルが1つのみであることを意味します。たとえば、最初にページがロードされた際に、開いているパネルAと閉じているパネルBが1つずつあるとします。一度に開くことのできるパネルは1つのみであるため、ユーザーがパネルBを開くとパネルAが閉じます。
ユーザーがすべてのペインを閉じることができるようにする場合は、DiscloseNoneをtrue
に設定します。
デフォルト値はfalse
です。これは、必ず1つのパネルが開かれたままになることを意味します。
デフォルトでは、panelAccordion
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelAccordion
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelAccordion
コンポーネントが拡大を処理する方法を変更する必要があります。
コンポーネントが拡大されるか、dimensionsFrom
属性を使用しないかを構成します。DimensionsFromを次のいずれかの値に設定します。
children
: panelAccordion
コンポーネントは、現在表示されているshowDetailItem
コンポーネントからそのディメンションを取得します。
注意: この設定を使用する場合は、panelAccordion コンポーネントの高さを(たとえばinlineStyle またはstyleClass 属性を通じて)設定できません。設定すると、panelAccordion の高さと子コンポーネントの高さが競合する原因となります。
同様に、 |
parent
: panelAccordion
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelAccordion
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelAccordion
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelAccordion
コンポーネントはその子コンポーネントのサイズに基づきます。
注意: panelAccordion を拡大し、showDetailItem のコンテンツも拡大する場合は、特定の方法でshowDetailItem を構成する必要があります。詳細は、9.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。 |
ユーザーがドラッグ・アンド・ドロップによってペインを再配置できるようにする場合は、「動作」セクションを開き、Reorderをenabled
に設定します。デフォルトはdisabled
です。
注意: panelAccordion にshowDetailItem コンポーネント以外のコンポーネントがある場合(手順7のヒントを参照)、それらのコンポーネントはクライアントでのみ並べ替えることができます。したがって、新しい順序は保持されません。 |
デフォルトで、panelAccordion
コンポーネントの子コンポーネントとしてshowDetailItem
コンポーネントを使用すると、パネルが1つ追加されます。さらにペインを追加するには、panelAccordion
コンポーネントにshowDetailItem
コンポーネントを挿入します。必要な数だけペインを追加できます。
ヒント: 通常はアコーディオン・パネルの直接の子コンポーネントである子コンポーネントをiterator 、switcher およびgroup コンポーネントにラップすれば、アコーディオン・パネルにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。手順は、9.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelTabbed
コンポーネントを使用してタブ付きのペインを作成する方法は、panelAccordion
コンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelTabbed
コンポーネントを追加した後で、一連のshowDetailItem
コンポーネントを挿入して、表示するタブ付きのパネル・コンテンツを配置します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.9項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelTabbedコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「タブ付きパネル」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。
表示領域のコンテンツの下にタブをレンダリングする場合は、「Position」をbelow
に設定します。
デフォルトでは、値はabove
です。これは、タブが表示領域のコンテンツの上にレンダリングされることを意味します。使用できるその他の値はboth
で、この場合、タブは表示領域の上と下にレンダリングされます。
デフォルトでは、panelTabbed
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、panelTabbed
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、panelTabbed
コンポーネントが拡大を処理する方法を変更する必要があります。
コンポーネントが拡大されるか、dimensionsFrom
属性を使用しないかを構成します。そのためには、DimensionsFromを次のいずれかに設定します。
disclosedChild
: panelTabbed
コンポーネントは、現在表示されているshowDetailItem
コンポーネントからそのディメンションを取得します。
注意: この設定を使用する場合は、panelTabbed コンポーネントの高さを(たとえばinlineStyle またはstyleClass 属性を通じて)設定できません。設定すると、panelTabbed の高さと子コンポーネントの高さが競合する原因となります。 |
parent
: panelTabbed
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: panelTabbed
コンポーネントの親コンポーネントがその子の拡大を許可する場合、panelTabbed
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、panelTabbed
コンポーネントはその子コンポーネントのサイズに基づきます。
ユーザーがタブを閉じられる(削除できる)ようにするには、「動作」セクションを開き、TabRemovalを設定します。この属性を設定して、すべてのタブの削除、または最後のタブを除くすべてのタブの削除を許可できます。実際に削除するにはハンドラを実装し、関連するshowDetailItem
コンポーネントのリスナーを構成する必要があります。個々のタブを削除できない(閉じるアイコンが表示されない)ように、または閉じたアイコンが無効になるように、個々のshowDetailコンポーネントでこれをオーバーライドできます。詳細は、9.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
デフォルトでは、実行時に、panelTabbed
コンポーネントが作成されるとすべての子showDetailItem
コンポーネントが作成されます。大量の子がある場合に実行時のパフォーマンスを向上させるには、タブが選択されたときにのみ子showDetailItem
コンポーネントを作成するか、初めて選択されたときにのみ子showDetailItem
コンポーネントを作成し、それ以降は作成されたままにするように、panelTabbed
を構成できます。
childCreation
属性を使用して、子コンポーネントをいつ作成するかを構成します。そのためには、ChildCreationを次のいずれかに設定します。
immediate
: panelTabbed
コンポーネントが作成されるとすべてのshowDetailItem
コンポーネントが作成されます。
lazy
: 関連付けられたタブが選択されたときにのみshowDetailItem
コンポーネントが作成されます。タブが選択されると、showDetailItem
コンポーネントはコンポーネント・ツリーに作成されたままになります。
lazyUncached
: 関連付けられたタブが選択されたときにのみshowDetailItem
コンポーネントが作成されます。別のタブが選択されると、showDetailItem
コンポーネントは破棄されます。
デフォルトで、panelTabbed
コンポーネントの子としてshowDetailItem
コンポーネントを使用すると、タブ付きパネルが1つ作成されます。さらにペインを追加するには、panelTabbed
コンポーネントにshowDetailItem
コンポーネントを挿入します。必要な数だけタブ付きのペインを追加できます。
ヒント: 通常はpanelTabbed コンポーネントの直接の子コンポーネントである子コンポーネントをiterator 、switcher およびgroup コンポーネントにラップすれば、panelTabbed コンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
パネルに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。showDetailItem
の使用方法の詳細は、9.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
showDetailItem
コンポーネントは、panelAccordion
またはpanelTabbed
コンポーネントにのみ挿入します。各showDetailItem
コンポーネントは、各アコーディオン・パネルまたはタブ付きパネルに対応します。一般的に、親コンポーネントに2つ以上のshowDetailItem
コンポーネントを挿入します。表示する子コンポーネントをshowDetailItem
コンポーネントに挿入します。
showDetailItem
コンポーネントのdisclosed
属性では、対応するアコーディオン・パネルまたはタブのコンテンツを表示(開いた状態)または非表示(閉じた状態)のどちらにするかを指定します。デフォルトではdisclosed
属性はfalse
で、コンテンツは非表示(閉じた状態)になります。この属性がtrue
に設定されていると、コンテンツは表示(開いた状態)されます。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
次の手順では、9.9.1項「panelAccordionコンポーネントの使用方法」および9.9.2項「panelTabbedコンポーネントの使用方法」の説明に従って、JSFページにpanelAccordion
またはpanelTabbed
コンポーネントをそれぞれ追加済であると仮定しています。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.9項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
showDetailItemコンポーネントを使用してアコーディオン・パネルまたはタブ付きパネルのコンテンツを追加する手順:
コンポーネント・パレットの「レイアウト」パネルから「詳細アイテムの表示」コンポーネントをドラッグ・アンド・ドロップして、panelAccordion
やpanelTabbed
などの親コンポーネントに、showDetailItem
コンポーネントを1つ以上挿入します。
プロパティ・インスペクタで、「外観」セクションを開きます。
Textを、このパネルまたはタブに表示するラベルに設定します。
ラベルの前にアイコンを追加するには、Iconを、使用するイメージ・ファイルのURIに設定します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
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-41を参照)。また、パネルのflex
値がゼロ以外の場合は、その値が、その他のパネルがオーバーフロー・メニューに移動する前に、パネルが縮小される最低の高さになります。
StretchChildren: first
に設定されている場合、単一の子コンポーネントが拡大されます。ただし、拡大できる子コンポーネントであることが必要です。詳細は、9.9.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
たとえば、File Explorerアプリケーションでは、showDetailItem
コンポーネントを使用してナビゲータ・パネルにコンテンツが表示されています。両方のナビゲータが開かれている場合「検索」ナビゲータにはより多くの領域が必要なため、flex
属性は2に設定され、「フォルダ」ナビゲータのshowDetailItem
コンポーネントにはデフォルトのflex
値1が使用されています。この設定により、「検索」ナビゲータが開かれている場合は、「フォルダ」ナビゲータより大きくなります。
注意: File Explorerアプリケーションでは、flex 属性に直接値を設定するかわりに、値の決定に使用されるメソッドに解決されるEL式が使用されています。EL式を使用すると、メタデータを使用してモデル情報を指定することを後から決めた場合に、プログラムで値を変更できます。 |
ユーザーは、実行時にパネルの高さを変更して、flex
およびinflexibleHeight
属性の値を変更できます。これらの値は、ユーザーのセッション中に変わらないように永続化できます。詳細は、第32章「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.9.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
「動作」セクションを開きます。DisclosureListenerを、ユーザーがこのパネルまたはタブを選択した場合に実行するバッキングBeanのdisclosureListener
メソッドに設定します。
サーバーの表示イベントおよびイベント・リスナーの詳細は、9.8.4項「表示イベントについて」を参照してください。
このパネルまたはタブを無効(ユーザーがパネルまたはタブを選択できない状態)にする場合は、Disabledをtrue
に設定します。
このパネルまたはタブの子コンポーネントを表示する場合は、Disclosedをtrue
に設定します。
disclosed
属性は、デフォルトでfalse
に設定されています。これは、このパネルまたはタブのコンテンツが非表示になることを意味します。
注意: disclosed とrendered 属性の違いに注意してください。rendered 属性の値がfalse の場合、ユーザーはそのアコーディオン・ヘッダー・バーまたはタブ・リンク、およびその対応するコンテンツを使用できません。ただし、disclosed 属性がfalse に設定されている場合は、その項目のコンテンツが現在は非表示でも、アコーディオン・ヘッダー・バーまたはタブ・リンクが表示されているため、ユーザーは表示することが可能です。 |
disclosed
属性がtrue
に設定されているshowDetailItem
コンポーネントがない場合は、ADF Facesにより、最初に有効にされたshowDetailItem
コンポーネントのコンテンツが自動的に表示されます(panelAccordion
コンポーネントの子で、表示されないペインの設定が行われている場合を除きます)。
注意: コンテンツを表示または非表示にすることで、ユーザーはdisclosed 属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
panelAccordion
コンポーネントで使用されているshowDetailItem
コンポーネントの場合は、「動作」セクションを開き、showDetailItem
コンポーネントが表示される順序を反映するようにDisplayIndexを設定します。単純にページのコード内での順序で表示する場合は、デフォルトの-1
のままにします。
ヒント: 一部のshowDetailItem コンポーネントのdisplayIndex の値が-1 で、他のコンポーネントでは正の数である場合、-1 の値のコンポーネントは、正の数を持つコンポーネントより後に、ページのコードに出現する順序で表示されます。 |
ヒント: 親panelAccordion コンポーネントが並替えを許可するように構成されている場合は、この値を実行時に変更できます。 |
panelTabbed
コンポーネントのタブの削除を許可することを選択した場合は、「動作」セクションを展開し、Removeを次のいずれかに設定します。
inherit: 対応するタブは、親panelTabbed
コンポーネントで許可されている場合に削除できます。これがデフォルトです。
no: 対応するタブは削除できず、閉じるアイコンは表示されません。
disabled: 対応するタブには無効な閉じるアイコンが表示されます。
ItemListenerを、コンポーネントの実際の削除を処理するハンドラ・メソッドに解決されるEL式に設定します。
(panelAccordion
コンポーネントのみでサポートされている)パネルにツールバー・ボタンを追加するには、コンポーネント・パレットで、「レイアウト」パネルの「メニューおよびツールバー・コンテナ」グループから、そのパネルを定義するshowDetailItem
コンポーネントのtoolbar
ファセットに「ツールバー」を挿入します。その後、toolbar
コンポーネントに、必要な数のcommandToolbarButton
コンポーネントを挿入します。toolbar
ファセットがshowDetailItem
コンポーネントにある場合でも、ツールバーおよびボタンをレンダリングするのはpanelAccordion
コンポーネントです。toolbar
およびcommandToolbarButton
の使用方法の詳細は、16.3項「ツールバーの使用方法」を参照してください。
注意: アコーディオン・パネルが閉じている場合、ツールバーおよびそのボタンは表示されません。ツールバーおよびそのボタンは、パネルが開かれている場合にのみ、パネル・ヘッダーに表示されます。 |
パネルにコンテンツを追加するには、必要な子コンポーネントを各showDetailItem
コンポーネントに挿入します。
panelAccordion
またはpanelTabbed
コンポーネントは、子コンポーネントの拡大にジオメトリ管理を使用するコンポーネントに配置された場合、どちらも拡大されるように構成できます。ただし、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項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
panelAccordion
およびpanelTabbed
コンポーネント内のshowDetailItem
コンポーネントでは表示イベントのキューイングがサポートされるため、サーバーおよびクライアントで検証が適切に処理されます。
一般に、disclosed
属性を持つコンポーネントの場合、デフォルトで、クライアントのAdfDisclosureEvent
のイベント・ルートはイベントのソース・コンポーネントに設定されており、disclosed
属性がtrue
のパネルに対するイベントのみがサーバーに送信されます。ただし、panelTabbed
またはpanelAccordion
コンポーネント内に使用されているshowDetailItem
コンポーネントの場合、イベント・ルートはpanelTabbed
またはpanelAccordion
コンポーネントです(つまり、イベント・ソースの親コンポーネントではなく、イベント・ソース・コンポーネントです)。このため、前に開かれたパネルの値はサーバーに送信されません。
たとえば、panelTabbed
またはpanelAccordion
コンポーネント内にshowDetailItem
コンポーネントが2つあり、discloseMany
属性がfalse
に、discloseNone
属性がfalse
に設定されているとします。showDetailItem
1コンポーネントは開かれ、showDetailItem
2は開かれていないとします。このシナリオでは次のようになります。
クライアント:
ユーザーがshowDetailItem
2をクリックして表示すると、クライアントのみの表示イベントが発生して、showDetailItem
1コンポーネントのdisclosed
属性がfalse
に設定されます。この最初のイベントが取り消されない場合、別のクライアントの表示イベントが発生し、showDetailItem
2コンポーネントのdisclosed
属性がtrue
に設定されます。この2番目のイベントが取り消されない場合、イベントはサーバーに送信されます。それ以外の場合、表示はそれ以上変更されません。
サーバー:
サーバーの表示イベントが発生して、showDetailItem
2コンポーネントのdisclosed
属性がtrue
に設定されます。この最初のサーバー・イベントが取り消されない場合、別のサーバーの表示イベントが発生し、showDetailItem
1コンポーネントのdisclosed
属性がfalse
に設定されます。どちらのサーバー・イベントも取り消されない場合は、その新規状態がレンダリングされ、ユーザーはクライアントで新しく公開した状態を確認できます。それ以外の場合、クライアントは以前と同じように見えます。
discloseMany
属性がfalse
に、discloseNone
属性がtrue
に設定されているpanelAccordion
コンポーネントの場合、この情報が当てはまるのは、表示の変更が両方の変更を強制する場合(2つの表示状態が関連する場合)のみです。表示の変更が片方のみの場合、クライアントとサーバーの表示イベントは1つずつです。
discloseMany
属性がtrue
(および任意のdiscloseNone
設定)に設定されているpanelAccordion
の場合、実行される表示の変更は1つのみで、クライアントとサーバーの表示イベントは1つずつです。
表示イベントの詳細は、9.8.4項「表示イベントについて」を参照してください。
panelHeader
コンポーネントは、メッセージの表示や関連するヘルプ・トピックなどのヘッダー・タイプ機能が必要な場合に使用できますが、コンテンツの表示および非表示機能を指定する必要はありません。
ページの別のルック・アンド・フィールに遷移する必要がある場合は、decorativeBox
コンポーネントを使用できます。decorativeBox
コンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、使用しているスキンに応じて、デフォルトのテーマを使用する場合、decorativeBox
コンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。テーマおよびスキンの使用の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeader
コンポーネントには、特定タイプのコンポーネント用のファセットや、ヘッダーからヘルプ・トピックを起動する機能があります。次に、panelHeader
コンポーネントでサポートされているファセットを示します。
context
: ヘッダーのヘッダー・テキストの横に情報を表示します。
help
: ヘルプ情報を表示します。下位互換性が必要な場合にのみ使用します。かわりに、panelHeader
コンポーネントではhelpTopicId
属性を使用します。
info
: ヘッダー・テキストの下に情報を表示します。右揃えになります。
legend
: ヘルプ・テキストが存在する場合は、ヘルプ・コンテンツの左側でinfo
ファセットのコンテンツの下に情報が表示されます。ヘルプ・テキストが存在しない場合、legendコンテンツはヘッダーの下に直接レンダリングされます。
toolbar
: メニュー・バーの前にツールバーを表示します。
menuBar
: ツールバーの後ろにメニュー・バーを表示します。
図9-45に、panelHeader
コンポーネントの様々なファセットを示します。
タイトル行のすべてのファセットにすべてを表示するのに十分な領域がない場合、panelHeader
テキストが切り捨てられ、省略記号が表示されます。ユーザーが切り捨てられたテキスト上にカーソルを起動すると、図9-46に示すように、ツールチップに完全なテキストが表示されます。
コンテンツを表示するのに十分な領域がある場合は、図9-47に示すように、context
ファセットとツールバーの間に追加の領域が配置されます。
セクションの階層を表すようにpanelHeaders
コンポーネントを構成できます。たとえば、図9-48に示されているように、サブヘッダーのあるメイン・ヘッダーおよびサブヘッダーのあるヘッダー・レベル1を表示できます。
それぞれにpanelHeader
コンポーネントをネストさせてサブセクションを作成します。panelHeader
コンポーネントをネストさせると、階層に応じてヘッダー・テキストが自動的にサイズ調整され、一番外側のpanelHeader
コンポーネントのテキストが最も大きくなります。
注意: テキストのスタイルはsize 属性を使用して強制できますが(最大のテキストが0の場合)、size 属性の値は階層には影響しません。影響を受けるのはテキストのスタイルのみです。 |
panelHeader
コンポーネントの使用の詳細は、9.10.1項「panelHeaderコンポーネントの使用方法」を参照してください。
decorativeBox
コンポーネントには、テーマを使用したスタイル設定機能が用意されています。これには、topとcenterの2つのファセットがあります。topファセットは色のない領域を提供し、centerファセットは実際のボックスです。topファセットの高さは、コンポーネントがtopファセットに配置されているかどうかに依存します。ファセットが設定されていると、topHeight
属性を使用して、コンテンツが占めるサイズが指定されます。
centerファセットのボックスの色は、使用されるテーマとスキンによって決まります。図9-49に、デフォルトで使用できる様々なテーマを示します。
デフォルトでは、decorativeBox
コンポーネントは親コンポーネントに合せて拡大されます。子コンポーネントからディメンションを継承するようにdecorativeBox
コンポーネントを構成することもできます。たとえば、図9-50では、親に合せて拡大されるように構成されたミディアム・テーマのdecorativeBox
コンポーネントを示していますが、ダーク・テーマのdecorativeBox
は、最大で子outputText
コンポーネントと同じ大きさになるように構成されています。
スキンを使用して、decorativeBox
コンポーネントのスタイルをさらに制御できます。スキニング・キーは、次のコンポーネント領域に対して定義できます。
top-start
top
top-end
start
end
bottom-start
bottom
bottom-end
スキンの詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
panelHeader
コンポーネントを1つ使用して特定の情報を指定することも、一連のpanelHeader
コンポーネントをネストさせてコンテンツの階層組織を作成することもできます。コンテンツを表示および非表示にできるようにする場合は、かわりにshowDetailHeader
コンポーネントを使用します。詳細は、9.8.2項「showDetailHeaderコンポーネントの使用方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.10項「静的ボックスの項目の表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・ヘッダー」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「外観」セクションを開きます。
Textを、このパネルに表示するラベルに設定します。
ラベルの前にアイコンを追加するには、Iconを、使用するイメージ・ファイルのURIに設定します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
特定のメッセージ情報の表示にヘッダーを使用している場合は、MessageTypeを次のいずれかの値に設定します。
confirmation: 指定されたアイコン・イメージが確認アイコン(上に緑のチェックマークが表示されたメモ・ページ)に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン(中にxがある赤い丸)に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン(中にIがある青い丸)に置き換えられます。
none: デフォルト。アイコンは表示されません。
warning: 指定されたアイコン・イメージが警告アイコン(中に感嘆符がある黄色の三角)に置き換えられます。
図9-51に、様々なメッセージ・タイプに使用されるアイコンを示します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用します。アクセシビリティを考慮した方法で、このアイコンの意味を指定する必要があります。 |
ヘッダーにヘルプを表示するには、HelpTopicIdにトピックIDを入力します。ヘルプ・トピックの作成および使用方法の詳細は、19.5項「コンポーネントへのヘルプの表示」を参照してください。
panelHeader
コンポーネントがジオメトリ管理を処理する方法を制御する場合は、「外観」セクションを開き、Typeを次のいずれかに設定します。ジオメトリ管理の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
flow: コンポーネントは拡大されないか、子を拡大しません。panelHeader
コンポーネントの高さは、その子によってのみ決定されます。
stretch: コンポーネントは拡大され、その子の拡大します(単一の子コンポーネントのみ拡大します)。
default: panelHeader
コンポーネントの親コンポーネントでジオメトリ管理を決定する場合。
パネルにツールバー・ボタンを追加するには、toolbar
コンポーネントをtoolbar
ファセットに挿入します。その後、toolbar
コンポーネントに、必要な数のcommandToolbarButton
コンポーネントを挿入します。toolbar
およびcommandToolbarButton
の使用方法の詳細は、16.3項「ツールバーの使用方法」を参照してください。
注意: panelHeader コンポーネントでは、ツールバーのオーバーフローはサポートされていません。 |
パネルにメニューを追加するには、menuBar
ファセットにmenuコンポーネントを挿入します。メニュー・バーへのメニュー作成の詳細は、16.2項「メニュー・バーでのメニューの使用方法」を参照してください。
ヒント: toolbar ファセットにメニューを配置することも、menu ファセットにツールバー(およびツールボックス)を配置することも可能です。これらのファセットの主な違いは場所です。toolbar ファセットはmenu ファセットの前に配置されます。 |
必要に応じて、その他のファセットにコンテンツを追加します。
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
パネルにコンテンツを追加するには、必要な子コンポーネントをpanelHeader
コンポーネントに挿入します。
decorativeBox
コンポーネントを使用して、ページに色付きの領域またはボックスを配置します。このコンポーネントは、通常、タブを表示するように構成されているnavigationPane
コンポーネントのコンテナとして使用されます。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
decorativeBoxコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「装飾ボックス」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開き、Top Heightをtop
ファセットの高さに設定します。
デフォルトでは、decorativeBox
コンポーネントは使用可能なブラウザ領域に合せて拡大されます。かわりに、decorativeBox
コンポーネントを、子を拡大しないコンポーネントの子として使用する場合は、decorativeBox
コンポーネントが拡大を処理する方法を変更する必要があります。
コンポーネントが拡大されるか、dimensionsFrom
属性を使用しないかを構成します。DimensionsFromを次のいずれかの値に設定します。
children
: decorativeBox
コンポーネントは、子コンポーネントからディメンションを取得します。
注意: この設定を使用する場合は、top ファセットの高さの設定に割合を使用できません。使用すると、topファセットはこのdecorativeBox コンポーネントのサイズからディメンションを取得しようとしますが、decorativeBox コンポーネントはそのコンテンツから高さを取得するため取得できず、循環依存関係が発生します。割合が使用される場合、それは無視され、デフォルトの50px がかわりに使用されます。
同様に、 |
parent
: decorativeBox
コンポーネントのサイズは、次の順序で決定されます。
inlineStyle
属性から。
inlineStyle
の値が存在しない場合、親コンテナによってサイズが決定されます。
親コンテナが構成されていないか、その子を拡大できない場合は、サイズがスキンによって決定されます。
auto
: decorativeBox
コンポーネントの親コンポーネントがその子の拡大を許可する場合、decorativeBox
コンポーネントは親に合せて拡大されます。親がその子を拡大しない場合、decorativeBox
コンポーネントはその子コンポーネントのサイズに基づきます。
詳細は、9.10.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項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelList
コンポーネントは、図9-52に示されているように、それぞれの隣に黒丸が付いた子コンポーネントの垂直のリストを表示するためのレイアウト要素です。rendered
属性がtrue
に設定されている子コンポーネント、およびvisible
属性がtrue
に設定されている子コンポーネントのみが、リストの順で表示の対象となります。
注意: 動的データ(JSFバインディングによって実行時に決定されるデータのリストなど)を表示するには、11.6項「選択コンポーネントの使用方法」で説明されているように選択コンポーネントを使用します。モデル・レイヤーを変更するリストを作成する必要がある場合は、第13章「値リスト・コンポーネントの使用方法」を参照してください。 |
デフォルトで、黒丸は子コンポーネントのスタイルの設定に使用されます。四角や白丸など、使用できるスタイルは他にもあります。表示する項目のリストが非常に長い場合は、リストを列に分割することもできます。
項目のリストを1つ作成するには、panelList
コンポーネントを1つ使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.11項「1つ以上の列における箇条書きリストの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelListコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・リスト」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開き、listStyle
属性を、次のような有効なCSS 2.1のリスト・スタイル値のいずれかに設定します。
list-style-type: disc
list-style-type: square
list-style-type: circle
list-style-type: decimal
list-style-type: lower-alpha
list-style-type: upper-alpha
たとえば、list-style-type: disc
属性の値は黒丸に対応し、list-style-type: circle
値は白丸に対応します。
使用する有効なスタイル値の完全なリストは、次のサイトにある生成されたリストに関するCSS 2.1の仕様を参照してください。
http://www.w3.org/TR/CSS21/generate.html
ヒント: 一部のブラウザは、upper-roman 、lower-roman 、lower-greek など、他のブラウザよりも多くのスタイル・オプションをサポートします。これらの表示はWebブラウザ間で一貫性がないため、使用時には注意してください。 |
例9-14に、リストのスタイルをcircleに設定するコードを示します。
panelList
コンポーネントに(箇条書き項目として表示する)必要な数の子コンポーネントを挿入します。
ヒント: 通常はパネル・リストの直接の子コンポーネントである子コンポーネントをiterator 、switcher およびgroup コンポーネントにラップすれば、パネル・リストにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
たとえば、一連のcommandLink
コンポーネントまたはoutputFormatted
コンポーネントを挿入できます。
注意: ADF Facesでは、デフォルトで、panelList コンポーネントのレンダリングされたすべての子コンポーネントは単一の列に表示されます。リストを2列以上に分割する方法、およびrows およびmaxColumns 属性の使用方法の詳細は、9.6項「フォームでのコンテンツの配置」を参照してください。panelList およびpanelFormLayout コンポーネントでの列表示に対するrows およびmaxColumns 属性の使用の概念も同じです。 |
panelList
コンポーネントをネストさせて、リスト階層を作成できます。図9-53に示されているように、リスト階層には外部項目と内部項目があり、外部項目に属する内部項目は外部項目の下にインデント表示されます。内部項目の各グループは、ネストした単一のpanelList
コンポーネントによって作成されます。
図9-53のようなリスト階層を作成するには、group
コンポーネントを使用して、外部項目とその内部項目の各グループを構成するコンポーネントをラップします。例9-15に、4つの内部項目を持つ外部項目が1つと、2つの内部項目を持つ別の外部項目があるリスト階層の作成方法に関するコードを示します。
例9-15 ネストした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.12項「関連する項目のグループ化」を参照してください。
類似する項目を親コンポーネント内に保持するには、group
またはpanelGroupLayout
コンポーネントを使用します。group
コンポーネントは、意味的に関連のある子コンポーネントを集約またはグループ化します。panelGroupLayout
コンポーネントとは異なり、group
コンポーネントはその子コンポーネントのレイアウトを提供しません。単独で使用される場合、group
コンポーネントは何もレンダリングしません。実行時にgroup
コンポーネントの内部の子コンポーネントのみレンダリングされます。
関連するコンポーネントのグループ化には、任意の数のgroup
コンポーネントを使用できます。たとえば、panelFormLayout
コンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例9-16に、panelFormLayout
コンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。
例9-16 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-54に示すように、折り返さずに一連の子コンポーネントを縦または横に配置することも、折り返して続けて配置することもできます。layout
属性の値により子コンポーネントの配置が決定されます。
すべての配置において、panelGroupLayout
コンポーネントのseparator
ファセットを使用して、隣接する子コンポーネントの各ペアを線または空白で区切ることができます。詳細は、9.13項「空白または線を使用したコンテンツの分割」を参照してください。
横のレイアウトを使用する場合は、子コンポーネントを縦または横に並べることもできます。図9-55に示すように、上部の位置を合せて、高いコンポーネントの隣に低いコンポーネントを作成できます。
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-56に示すようにスクロールバーがレンダリングされます。
panelGroupLayout
コンポーネントは、必要なレイアウトにするためにいくつでもネストさせることができます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.12項「関連する項目のグループ化」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
panelGroupLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「パネル・グループ・レイアウト」をJSFページにドラッグ・アンド・ドロップします。
panelGroupLayout
コンポーネントに必要な子コンポーネントを挿入します。
ヒント: 通常はpanelGroupLayout コンポーネントの直接の子コンポーネントである子コンポーネントをiterator 、switcher およびgroup コンポーネントにラップすれば、panelGroupLayout コンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
隣接する子コンポーネントの間に間隔または区切り線を追加するには、separator
ファセットにspacer
またはseparator
コンポーネントを挿入します。
プロパティ・インスペクタで、「外観」セクションを開きます。子コンポーネントを希望のレイアウトに配置するには、Layoutを次のいずれかの値に設定します。
default: 折り返された連続のレイアウトです。
実行時、コンテンツがブラウザの使用可能な領域を超えると(子コンポーネントが親コンテナであるpanelGrouplayout
の幅より大きい場合)、すべての子コンポーネントが表示されるよう、ブラウザによりコンテンツが次の行に配置されます。
注意: ADF Facesでは、コンテンツの配置時に双方向のアルゴリズムが使用されます。右から左のコンテンツおよび左から右のコンテンツが混在し、コンテンツが連続して配置されない場合があります。 |
horizontal: 横のレイアウトになり、子コンポーネントは横に並べられます。コンテンツがブラウザの使用可能な領域を超えても折り返されません。
横のレイアウトでは、子コンポーネントを縦に並べることも横に並べることもできます。デフォルトで、horizontalの子コンポーネントは架空の水平線と垂直線を基準にしてそれぞれの中央に配置されます。horizontalコンポーネントの横および縦の配置を変更するには、次の属性を使用します。
halign: 横の配置を設定します。デフォルトは、center
です。使用できるその他の値はstart
、end
、left
、right
です。
たとえば、言語の読み方向が左から右の場合にhorizontalの子コンポーネントを常に左揃えにし、読み方向が右から左の場合には右揃えにするには、halign
をstart
に設定します。
valign: 縦の配置を設定します。デフォルトはmiddle
です。使用できるその他の値はtop
、bottom
、baseline
です。
テキストのフォント・サイズを変更した出力テキスト・コンポーネント(outputText
など)で、valign
をbaseline
に設定すると、図9-57に示されているように、文字が配置されている架空の線に沿ってテキストの文字が並べられます。そのようなテキスト・コンポーネントでvalign
をbottom
に設定した場合、bottom
の縦の配列ではすべての文字の一番下の部分が同じ架空の線上に配置されるため、結果は見栄えのよい外観にはなりません。
注意: layoutがhorizontalではない場合、halign およびvalign 属性は無視されます。 |
scroll: 縦のレイアウトになり、子コンポーネントは縦に並べられ、必要な場合には縦のスクロールバーが表示されます。
vertical: 縦のレイアウトになり、子コンポーネントは縦に並べられます。
ページ内に空白の部分を配置して、コンポーネントの間に間隔を設け、すべてのコンポーネントを互いのすぐ隣やすぐ下に詰めて配置した場合よりも見やすくすることができます。この目的で提供されているADF Facesコンポーネントは、spacer
コンポーネントです。
height
およびwidth
属性を使用して、縦または横、あるいはその両方の空白をページに組み込むことができます。
height
: ページに組み込む縦の空白の量を決定する属性。例9-17に、縦の空白を使用して、2つの長いoutputText
コンポーネントの間に一定の間隔を設けるよう設定されたページを示します。
例9-17 縦の空白
<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-58に、ブラウザで表示した場合に、spacer
コンポーネントがページ出力に及ぼす影響を示します。
width
属性は、コンポーネント間に組み込む横の空白の量を決定します。例9-18に、2つのコンポーネントの間に横方向の間隔を設けるよう設定されたページのソースの一部を示します。
例9-18 横の空白
<af:outputLabel value="Your credit rating is currently:"/> <af:spacer width="10"/> <af:outputText value="Level 8"/>
図9-59に、ブラウザで表示した場合の、横方向の間隔調整コンポーネントの影響を示します。
separator
コンポーネントを使用すると横線を作成できます。図9-60に、2つのpanelBox
コンポーネント間にseparator
コンポーネントを挿入した場合のproperties.jspx
ファイルの外観を示します。
通常、spacer
およびseparator
コンポーネントは、その他のレイアウト・コンポーネントのファセットに使用します。これにより、分割するコンポーネントに空白または線が表示されます。
ページには、必要な数だけspacer
コンポーネントを使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.13項「空白または線を使用したコンテンツの分割」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
spacerコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「スペーサ」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。必要に応じて幅と高さを設定します。
注意: 高さが指定されていて幅が指定されていない場合、ブロック・レベルのHTML要素がレンダリングされ、その近くに新しい行が表示されます。幅が指定されている場合、指定されている高さの値に関係なく、HTML標準を厳密にサポートするユーザー・エージェントに適用可能な行の高さより低くなりません。 |
ページには、必要な数だけseparator
コンポーネントを使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、9.13項「空白または線を使用したコンテンツの分割」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、9.1.1項「レイアウト・コンポーネントの追加機能」を参照してください。
separatorコンポーネントを作成および使用する手順:
コンポーネント・パレットで、「レイアウト」パネルから「セパレータ」をJSFページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、必要に応じてプロパティを設定します。