| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
 戻る |
 次へ |
| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
戻る |
次へ |
この章では、ADF Facesのいくつかのレイアウト・コンポーネントを使用して、Webページ上のコンテンツを編成する方法を説明します。
この章に含まれる項は次のとおりです。
ADF Facesには、その他のコンポーネントをページに配置する際に使用可能なレイアウト・コンポーネントが多数用意されています。通常、これらのコンポーネントを使用してページの作成を開始します。その後、その他の機能（データやボタンのレンダリングなど）を提供するコンポーネントを、ファセット内またはレイアウト・コンポーネントの子コンポーネントとして追加します。
|
ヒント: アプリケーション内のすべてのページのレイアウトを一度に設計できるページ・テンプレートを作成できます。このテンプレートは、アプリケーション内のページに再利用できます。詳細は、第19章「フラグメント、テンプレート、コンポーネントの作成および再利用」を参照してください。 |
コンテナとして機能するレイアウト・コンポーネントに加え、ADF Facesには、コンテンツの表示や非表示、またはセクション、リスト、空白の表示が可能な対話型のレイアウト・コンポーネントもあります。一部のレイアウト・コンポーネントには、ウィンドウのサイズが変更された場合にブラウザ・ウィンドウに合せてコンテンツが拡大する機能や、拡大するコンポーネント内に配置された場合には拡大する機能などのジオメトリ管理機能もあります。レイアウト・コンポーネントの拡大およびジオメトリ管理機能の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。表8-1では、ADF Facesの各レイアウト・コンポーネントを簡単に説明しています。
| コンポーネント | 説明 | 子の拡大 | 拡大 | |
|---|---|---|---|---|
|
ページ管理コンポーネント |
||||
|
|
HTMLページの標準の各ルート要素（ |
X |
||
|
|
HTMLの |
|||
|
ページ・レイアウト・コンテナ |
||||
|
|
|
X |
X |
|
|
|
再配置可能な仕切線を使用してリージョンを2つの部分（ |
X |
X |
|
|
|
子コンポーネントを使用できます。子コンポーネントはこのコンポーネントの中央に配置され、その他のコンポーネントを配置できる12のファセットもあります。これらのファセットが中央部分を囲みます。詳細は、8.5項「事前定義済領域へのページ・コンテンツの配置」を参照してください。 |
|||
|
|
子コンポーネント（通常は |
X |
X |
|
|
|
ラベルやフィールドが縦に並ぶように、 |
|||
|
表示/非表示機能のあるコンポーネント |
||||
|
|
トグル・アイコンを介してコンテンツを表示または非表示にします。詳細は、8.8項「コンテンツの動的な表示および非表示」を参照してください。 |
|||
|
|
ヘッダーの下のコンテンツを表示または非表示にできます。通常、 |
|||
|
|
子コンポーネントが含まれ、色を分けることができます。toolbarファセットがあります。詳細は、8.8項「コンテンツの動的な表示および非表示」を参照してください。 |
X |
||
|
|
|
X |
||
|
|
タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、かわりにナビゲーション・メニューのナビゲーション・ペイン・コンポーネントを使用できます。詳細は、18.4項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
X |
||
|
|
|
X（含まれる子コンポーネントが1つのみの場合） |
||
|
その他のコンテナ |
||||
|
|
子コンポーネントが含まれ、メッセージ、ツールバーおよびヘルプ・トピックを含むヘッダーを表示します。詳細は、8.10項「コンテンツ・コンテナの項目の表示」を参照してください。 |
|||
|
|
各子コンポーネントをリスト項目として出力し、隣に黒丸をレンダリングします。ネストさせて階層リストを作成できます。詳細は、8.11項「1つ以上の列における箇条書きリストの表示」を参照してください。 |
|||
|
|
インライン・フレーム・タグを作成します。 |
X |
||
|
|
コンテナ・コンポーネントを作成します。このコンポーネントのファセットは、スタイル・テーマを使用して、その子に枠の外観を適用します。通常、このコンポーネントは、タブを表示するために構成されている |
X（中央ファセット内） |
X |
|
|
|
ナビゲーション階層の1レベルを表す一連のナビゲーション・アイテムを作成します。詳細は、18.4項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
X（タブを表示するように構成されている場合） |
||
|
|
|
X（表、ツリーまたはツリー表が1つのみの場合） |
X |
|
|
|
ポップアップ・ウィンドウ内に子コンポーネントを表示します。詳細は、13.2項「ポップアップ要素の作成」を参照してください。 |
|||
|
|
子のtoolbarおよびmenuコンポーネントを一緒に表示します。詳細は、14.3項「ツールバーの使用方法」を参照してください。 |
|||
|
グループ化コンテナ |
||||
|
|
子コンポーネントを縦または横にグループ化します。詳細は、8.12項「関連する項目のグループ化」を参照してください。 |
X（レイアウトがscrollまたはverticalに設定されている場合のみ） |
||
|
|
グループの親コンポーネントに管理されている場合を除き、レイアウトに関係なく子コンポーネントをグループ化します。このコンポーネントは、グループ化された子コンポーネントの処理が特殊なコンポーネントに配置されている場合に便利です。詳細は、8.12項「関連する項目のグループ化」を参照してください。 |
|||
|
間隔調整コンポーネント |
||||
|
|
項目間に水平線を作成します。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
|
|
空白の領域を作成します。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。 |
|||
ADF Facesコンポーネントを使用するすべてのJSFページには、次の例に示すように、viewタグで囲んだdocumentタグが必要です。
<f:view> <af:document/> </f:view>
|
注意: locale属性がviewタグに設定されている場合（f:view locale='ko_KR'など）、どのモデル・プロジェクトのリソース・バンドルも初期レンダリングでは指定されたロケールを選択しません（ページの後続のレンダリングは正常に行われます）。これはJSFの制限です。モデル・プロジェクトのリソース・バンドルにページのロケールを認識させるために、PhaseId.RESTORE_VIEWフェーズのフェーズ・リスナーを作成できます。afterPhaseメソッドで、UIViewRootに必要なロケールを設定します。フェーズ・リスナーの作成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADFページのライフサイクルのカスタマイズに関する項を参照してください。 |
ページを構成するその他すべてのコンポーネントが、<af:document>および</af:document>の間に入ります。documentタグは、ページ内のその他のコンポーネントを表示できる非表示のページ・インフラストラクチャや、ブラウザのタイトル・テキストをレンダリングします。実行時に、documentタグによりクライアント・ページのルート要素が作成されます。たとえば、HTML出力では、<html>、<head>および<body>などのHTMLページの標準のルート要素が生成されます。
documentタグを構成して、使用可能なブラウザの領域を埋めるために拡大可能なコンポーネント拡大できるようにし、ページのレンダリング時に特定のコンポーネントにフォーカスする、あるいは失敗した接続のメッセージまたはデータが送信される前のナビゲートに関する警告を表示できるようにします。詳細は、8.2.5項「documentタグの構成方法」を参照してください。
通常、次に使用されるコンポーネントは、ADF Faces formコンポーネントです。このコンポーネントは、ユーザーによるページ・データの操作を可能にするコントロールを含むことができるHTMLのform要素を作成します。
JDeveloperで新規ギャラリ・ウィザードを使用して、ADF Facesテクノロジが使用されているプロジェクトにJSFページを作成すると、例8-1に示されているように、デフォルトでview、documentおよびformタグが自動的に挿入されます。詳細は、2.4項「JSFページの作成」を参照してください。
例8-1 JDeveloperのウィザードで作成された最初のJSFページ
<?xml version='1.0' encoding='windows-1252'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <jsp:directive.page contentType="text/html;charset=windows-1252"/> <f:view> <af:document> <af:form/> </af:document> </f:view> </jsp:root>
これらのタグがページに配置されたら、レイアウト・コンポーネントを使用して、ページ上のその他のコンポーネントをレンダリングする方法と場所を制御できます。その他すべてのコンポーネントを保持するコンポーネントは、ルート・コンポーネントとみなされます。ルート・コンポーネントとして使用するコンポーネントの選択は、含まれているコンポーネントのコンテンツをブラウザ・ウィンドウに合せて拡大されるように表示するか、ウィンドウに収まらないコンテンツにアクセスするためにスクロールバーを使用してコンテンツを移動できるようにするかによって異なります。
|
ヒント: レイアウトを自分で作成するかわりに、JDeveloperのクイック・レイアウト・テンプレートを使用できます。このテンプレートには、正確に構成されたコンポーネントが用意されており、好みのレイアウトでページを表示できます。詳細は、8.2.3項「クイック・レイアウトの使用」を参照してください。 |
ジオメトリ管理は、ユーザー、親コンポーネントおよび子コンポーネントが、アプリケーション内のコンポーネントの実際のサイズと場所を調整するプロセスです。RCFのジオメトリ管理ソリューションの中核は、サイズ変更通知メカニズムです。このメカニズムにより、ジオメトリ管理に対応しているコンポーネントにブラウザのサイズ変更アクティビティが通知されます。次のようなシナリオで通知が行われます。
ロード: ページ・コンテンツが初めてロードされる場合。最初のサイズ設定が行われます。
ブラウザのサイズ変更: ブラウザ・ウィンドウのサイズが変更された場合。
部分的な置換え: 部分的なページのレンダリングでページの一部が更新された場合。新しく挿入されたすべてのコンポーネントが通知され、必要なジオメトリ管理が実行されます。
可視性の変更: 最初は非表示に構成されていたコンポーネントが表示されるようになった場合（最初は非表示であったコンポーネントには通知は送信されません）。
明示的なサイズ変更: サイズ変更可能なコンポーネント（panelSplitterなど）がユーザーによってサイズ変更された場合。
documentコンポーネントがmaximizedに構成されていて（詳細は、8.2.5項「documentタグの構成方法」を参照）、有効なビジュアル・ルート・コンポーネントが1つのみである場合、そのコンポーネントがジオメトリ管理に対応していて、子コンポーネントを拡大できる場合には、そのルート・コンポーネントは自動的にブラウザの表示可能領域全体に拡大されます。ジオメトリ管理コンポーネントは、panelStretchLayoutおよびpanelSplitterなどです。
|
注意: フレームワークでは、ポップアップ・ダイアログ、ポップアップ・ウィンドウまたはインラインではないメッセージは、ルート・コンポーネントとみなされません。formコンポーネントがdocumentコンポーネントの直接の子コンポーネントである場合には、フレームワークにより、formタグ内のビジュアル・ルートの有無が確認されます。 |
ユーザーによりブラウザ・ウィンドウのサイズが変更され、documentコンポーネント内でmaximizedに設定されているルート・ビジュアル・コンポーネントが1つの場合、そのビジュアル・ルート・コンポーネントもブラウザ・ウィンドウに合せてサイズ変更されます。ルート・コンポーネントで子コンポーネントの拡大がサポートされている場合（および、子コンポーネントでも拡大がサポートされている場合）、配置レイアウト領域（子コンポーネントの拡大がサポートされていない領域）に達するまで、コンポーネント階層を下がって子コンポーネントのサイズが再計算されます。拡大を有効化するためにコードを記述する必要はありません。
表8-1に示されているように、それ自体とその子コンポーネントも拡大できるコンポーネントはpanelStretchLayout、panelSplitterおよびpanelDashboardコンポーネントのみです。また、panelAccordionまたはpanelTabbedコンポーネントの直接の子としてshowDetailItemコンポーネントが使用されている場合は、showDetailItemコンポーネントのコンテンツを拡大できます。そのため、ページのコンテンツをブラウザ・ウィンドウに合せる必要がある場合には、showDetailItemコンポーネントを含むpanelStretchLayout、panelSplitter、panelDashboard、panelAccordionコンポーネント、およびshowDetailItemコンポーネントを含むpanelTabbedコンポーネントをルート・コンポーネントとして使用する必要があります。
例として、図8-1に、panelStretchLayoutコンポーネントの中央ファセットに配置された表を示します。表にはすべての行および列が表示されています。表全体がブラウザ・ウィンドウに収まらない場合は、表のデータ本体部分にスクロールバーが追加されます。
図8-2に、子コンポーネントを拡大できないpanelGroupLayoutコンポーネント内にネストしている同じ表を示します。表コンポーネントでは、表のプロパティで設定されている一部の列および行のみが表示されています。
ジオメトリ管理コンポーネントにより子コンポーネントが拡大されていますが、コンポーネント自体は拡大されていません。そのため、ページのルート・コンポーネントとしてジオメトリ管理コンポーネントを使用する場合は、documentタグのmaximized属性がtrueに設定されていることを確認してください。
子コンポーネントを拡大できるコンポーネントを選択しても、実際に拡大されるのは次のコンポーネントのみです。
decorativeBox
panelAccordion
panelBox
panelCollection
panelDashboard
panelGroupLayout（layout属性がscrollまたはverticalに設定されている場合）
panelSplitter
panelStretchLayout
panelTabbed
region
table
tree
treeTable
次のコンポーネントは、子コンポーネントを拡大するコンポーネントのファセット内に配置しても拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout（layout属性がdefaultまたはhorizontalに設定されている場合）
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout（MyFaces Trinidadコンポーネント）
これらのコンポーネントは拡大されないため、子コンポーネントを拡大するコンポーネントのファセットには配置できません。そのため、子コンポーネントを拡大するコンポーネントのファセット内でこれらのコンポーネントのいずれかを使用する場合は、拡大可能で、子コンポーネントを拡大しないコンポーネントでラップします。ラップしないと、コンポーネントのレンダリング時に予期しない結果になる場合があります。
たとえば、ページの最初のコンポーネントとしてpanelStretchLayoutがあるとします。次にpanelSplitterコンポーネントを追加します。さらに、panelSplitterコンポーネントの左側のファセットに、layout属性がscroll（拡大可能）に設定されているpanelGroupLayoutコンポーネントを追加し、その中にpanelCollectionコンポーネント、最後にtableコンポーネントを追加するとします。右のファセットには、図8-3に示すように、panelCollectionおよびtableコンポーネントのみを追加するとします。
図8-4に示すように、ページが実行されると、panelSplitterコンポーネントに直接配置されているコンポーネントは拡大されているのに対して、panelGroupLayout内のpanelCollectionおよびtableコンポーネントは拡大されません。
panelStretchLayoutコンポーネントは子コンポーネントを拡大でき、panelSplitterコンポーネントも拡大可能であるため、両方が使用可能なブラウザの領域全体に拡大されます。panelSplitterコンポーネントは子コンポーネントを拡大でき、layout属性がscrollに設定された左側のpanelGroupLayoutコンポーネントも、右側のpanelCollectionコンポーネントも拡大可能であるため、両方が使用可能なブラウザの領域全体に拡大されます。ただし、panelCollectionコンポーネントは単一の表を拡大できるのに対し、panelGroupLayoutコンポーネントは子コンポーネントを拡大できません。そのため、親は拡大されていても、左側のpanelCollectionコンポーネントは拡大されません。
|
ヒント: 拡大できないコンポーネントのリストにあるコンポーネントを、幅を100%に設定して拡大しないでください。予期しない結果になる場合があります。前述したように、これらのコンポーネントのいずれかを拡大する必要がある場合は、拡大可能なコンポーネントでラップする必要があります。 |
左側にtableコンポーネントではなく、panelListコンポーネントを追加するとします。panelListコンポーネントはpanelSplitterコンポーネントの直接の子になります。panelSplitterコンポーネントは子コンポーネントの拡大が可能で、panelListコンポーネントは拡大できないため、（scrollに設定されている）panelGroupLayoutはそのままにして、panelListコンポーネントをpanelGroupLayoutコンポーネントの子として配置します。
このようにすると、panelSplitterコンポーネント内のpanelGroupLayoutコンポーネントは拡大されますが、panelGroupLayoutコンポーネントはpanelListコンポーネントの拡大を試行しません。panelGroupLayoutコンポーネントは拡大できますが、子コンポーネントを拡大しないため、拡大を行うレイアウトと配置を行うレイアウトとの移行が可能です。
新規ギャラリ・ウィザードを使用してJSFページ（またはページ・フラグメント）を作成する場合、様々な事前定義済のレイアウトから選択できます。それらのレイアウトの1つを選択すると、JDeveloperによって必要なコンポーネントが追加され、ユーザーが希望する外観と動作が得られるようにそれらのコンポーネントの属性が設定されます。1列、2列および3列の形式から選択できます。それらの形式では、各列に表示する独立したペインの数、およびそれらのペインを拡大可能にするか固定サイズのままにするかを選択できます。図8-5に、2列形式で使用可能な様々なレイアウトを示します。
クイック・レイアウトを使用すると、時間を節約できるのに加え、レイアウト・コンポーネントが正しく連携して使用されるので希望どおりの結果を得ることができます。クイック・レイアウトを使用したページの作成の詳細は、2.4項「JSFページの作成」を参照してください。
ページがすべてのブラウザで予想どおりに表示されるようにするには、ページの作成時にJDeveloperに用意されているクイック・レイアウトの1つを使用するのがベスト・プラクティスです。クイック・レイアウトを使用すると、正しいコンポーネントが使用されて正確に構成されます。詳細は、8.2.3項「クイック・レイアウトの使用」を参照してください。
ただし、自分でレイアウトを作成する場合のために、拡大されるコンポーネントと配置されるコンポーネントの両方を含むレイアウトを作成する際のベスト・プラクティスを次に示します。
documentタグのmaximized属性がtrueに設定されていることを確認します（これはデフォルトです）。属性の設定の詳細は、8.2.5項「documentタグの構成方法」を参照してください。
ジオメトリ管理機能のあるルート・コンポーネント内（showDetailItemを含むpanelStretchLayout、panelSplitter、panelAccordion、またはshowDetailItemを含むpanelTabbed）にページ・コンテンツを配置します。
パーセント単位で高さの値を指定しないでください。かわりに、拡大がサポートされているコンポーネントや、子コンポーネントを拡大するコンポーネントの外にコンポーネント構造を作成します。
layout属性がscrollに設定されているpanelGroupLayoutコンポーネントを使用するなどして、拡大可能な構造内に、拡大できないコンポーネントまたは配置が行われるコンポーネントのグループを作成します。このコンポーネントでは拡大がサポートされていますが、子コンポーネントは拡大されないため、拡大されるコンポーネントと配置が行われるコンポーネントの移行が可能です。
どのWebブラウザでも一貫して機能するわけではないため、拡大できないコンテナまたは配置が行われるコンテナ内で、縦方向の拡大を試行しないでください。
positionスタイルは使用しないでください。
この章の残りの部分では、ADF Facesのレイアウト・コンポーネント、およびそれらを使用してページを設計する方法を説明しています。各コンポーネントで拡大が処理される方法の詳細は、それぞれの「ジオメトリ管理について」の項に記載されています。
documentタグには、ページの動作を制御するために構成できる多数の属性が含まれています。たとえば、ページを初めてレンダリングするときに1つのコンポーネントにフォーカスするようにタグを構成できます。また、ユーザーがページから移動しようとしたときにデータがまだ送信されていない場合に、警告メッセージを表示するようにタグを構成することもできます。
documentタグを構成する手順:
構造ウィンドウで、af:documentノードを選択します。
プロパティ・インスペクタで、「共通」セクションを開いて次の設定を行います。
initialFocusId: ドロップダウン・メニューを使用して「編集」を選択します。「プロパティの編集」ダイアログで、ページを初めてレンダリングするときにフォーカスするコンポーネントを選択します。
このフォーカスはクライアントで行われるため、選択するコンポーネントには対応するクライアント・コンポーネントが必要です。詳細は、3.4項「クライアント側コンポーネントのインスタンス化」を参照してください。
maximized: ルート・コンポーネントを拡張して使用可能なすべてのブラウザ領域に合せる場合はtrueに設定します。documentタグのmaximized属性がtrueに設定されていると、フレームワークにより単一のビジュアル・ルート・コンポーネントが検索され、そのコンポーネントが拡大可能な場合は、ブラウザの表示可能領域全体にコンポーネントが拡大されます。これに対応しているコンポーネントは、panelStretchLayoutおよびpanelSplitterです。documentタグのmaximized属性は、デフォルトでtrueに設定されています。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
title: ブラウザのタイトル・バーに表示するテキストを入力します。
「外観」セクションを開き、failedConnectionText属性に、サーバーに接続できない場合に表示するテキストを入力します。
「その他」セクションを開き、uncommitedDataWarning属性に、次のいずれかを選択します。
on: データがコミットされていないことがアプリケーションによって検出された場合、ユーザーに警告メッセージが表示されます。警告メッセージは、ユーザーがデータをコミットせずにページを終了しようとする場合、またはサーバーにコミットされていないデータがある場合に表示されます。
off: メッセージは表示されません。これがデフォルトです。
コンテンツをページの定義済領域に配置し、ブラウザがサイズ変更されたらコンテンツが拡大されるようにする必要がある場合には、panelStretchLayoutコンポーネントを使用します。panelStretchLayoutコンポーネントは、ファセット内に配置されたコンポーネントが拡大されるコンポーネントの1つです。図8-6に、コンポーネントのファセットを示します。
topおよびbottomファセットの高さを設定すると、含まれるコンポーネントはその高さに合うように拡大されます。同様に、startおよびendファセットの幅を設定すると、それらのファセットに含まれるコンポーネントはその幅まで拡大されます。それらのファセットに配置されているコンポーネントがない場合、ファセットはレンダリングされません。つまり、ファセットは領域を占有しません。設定した領域をファセットで占有し、空白のままにする場合は、spacerコンポーネントを挿入します。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。centerファセットの子コンポーネントは、残りの領域に合うよう拡大されます。コンポーネント拡大の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
Topまたはbottomのファセットの高さ、あるいはstartまたはendファセットの幅を設定するかわりに、高さまたは幅をautoに設定できます。これにより、ファセットの子コンポーネントに必要な正確な領域を使用するように、ファセット自体がサイズを設定できます。領域は、Webブラウザがファセットのコンテンツの表示に必要だと判断する領域の量に基づいて割り当てられます。
|
注意: 幅または高さの値としてautoを使用するファセット内の子コンポーネントは、親コンテナの幅に依存しない、一定のスタンドアロンの幅を使用する必要があります。
たとえば、子コンポーネントを自動的に拡大するコンポーネントでは また、 |
File Explorerアプリケーションでは、テンプレートのルート・コンポーネントとしてpanelStretchLayoutコンポーネントが使用されています。子コンポーネントは、centerおよびbottomファセットにのみ配置されています。そのため、centerファセット内のすべてのコンポーネントは、ウィンドウの幅全体、およびウィンドウの上部から、高さがbottomHeight属性で指定されているbottomファセットの上部までの大きさに合うように拡大されます。例8-2に、fileExplorerTemplateファイルの省略形のコードを示します。
例8-2 File Explorerのテンプレート・ファイルのpanelStretchLayout
<af:panelStretchLayout
bottomHeight="#{attrs.footerGlobalSize}">
<f:facet name="center">
<af:panelSplitter orientation="vertical" ...>
.
.
.
</af:panelSplitter
</f:facet>
<f:facet name="bottom">
<af:panelGroupLayout layout="vertical">
.
.
.
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
テンプレートではEL式を使用して、bottomHeight属性の値が指定されています。この式により、テンプレートに定義されたfooterGlobalSize属性の値（デフォルトは0）に解決されます。テンプレートが使用されているページでは、この値がオーバーライドされます。たとえば、index.jspxページではこのテンプレートを使用して、値が30に設定されています。そのため、File Explorerアプリケーションによりレンダリングされると、panelStretchLayoutコンポーネントのコンテンツはページの上部30ピクセルの場所から開始されます。
panelStretchLayoutコンポーネントには、直接の子コンポーネントを配置できません。かわりに、ファセット内にコンポーネントを配置します。panelStretchLayoutは、ブラウザに合せて子コンポーネントが拡大されるコンポーネントの1つです。panelStretchLayoutコンポーネントはネスト可能です。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelStretchLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・ストレッチ・レイアウト」をドラッグ・アンド・ドロップして、panelStretchLayoutコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。
top、bottom、startおよびendファセットに子コンポーネントが存在する場合は、それらのコンポーネントにより、topHeight、bottomHeight、startWidthおよびendWidth属性で定義されている領域が占有されます。たとえば、topHeight属性はtopファセットの高さを、startWidth属性はstartファセットの幅を指定します。topおよびbottomファセットの子コンポーネントは、topHeightとbottomHeight属性で設定されている高さまでそれぞれ拡大され、startおよびendファセットの子コンポーネントは、startWidthとendWidth属性で設定されている幅までそれぞれ拡大されます。数値で大きさを設定するかわりに、topHeight、bottomHeight、startWidthおよびendWidth属性をautoに設定すると、ファセットのコンテンツの表示に必要な領域の量がブラウザにより決定されます。
値を明示的に指定しない場合、topHeight、bottomHeight、startWidthおよびendWidth属性の値は、それぞれデフォルトで50ピクセルになります。topとbottomファセットの幅、およびstartとendファセットの高さは、panelStretchLayoutの親コンポーネントの幅と高さから導出されます。
|
ヒント: ファセットに子コンポーネントが含まれない場合はレンダリングが行われないため、領域は占有されません。構成した領域を占有するには、ファセットに子コンポーネントを配置する必要があります。 |
コンポーネントにコンテンツを配置するには、必要なコンポーネントを任意のファセットにドラッグ・アンド・ドロップします。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、8.3.2項「ジオメトリ管理およびpanelStretchLayoutコンポーネントについて」を参照してください。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネント（panelGroupLayoutコンポーネントなど）で子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。
panelStretchLayoutコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次に、panelStretchLayoutコンポーネントのファセット内で拡大できるコンポーネントを示します。
decorativeBox
panelAccordion
panelBox
panelCollection
panelDashboard
panelGroupLayout（layout属性がscrollまたはverticalに設定されている場合のみ）
panelSplitter
panelStretchLayout
panelTabbed
region
table
tree
treeTable
panelStretchLayoutコンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout（layout属性がdefaultまたはhorizontalに設定されている場合のみ）
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout（MyFaces Trinidadコンポーネント）
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、panelStretchLayoutコンポーネントのファセットに拡大できないコンポーネントに配置する必要がある場合は、拡大できる遷移コンポーネントでそのコンポーネントをラップします。
たとえば、panelStretchLayoutコンポーネントのファセット内のpanelBoxコンポーネント（拡大しない）にコンテンツを配置する場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをpanelStretchLayoutコンポーネントのファセットに配置し、panelBoxコンポーネントをそのpanelGroupLayoutコンポーネントに配置します。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
ユーザーに表示する一意のコンテンツのグループがある場合は、調整可能なスプリッタで区切られた複数のペインの使用を検討します。File ExplorerではpanelSplitterを使用して、図8-7に示されているように、ナビゲーション・ツリーとフォルダ・コンテンツを分割しています。ユーザーは、スプリッタをドラッグしてペインのサイズを変更できます。また、ディレクトリを表示するペインを閉じることや、元のサイズに戻すこともできます。ペインが閉じている場合は、ペインのコンテンツは表示されません。ペインを元のサイズに戻すとコンテンツが表示されます。
panelSplitterコンポーネントを使用すると、調整可能なスプリッタで分割された2つのペインにコンテンツを編成できます。ペインは、（図8-7に示されているスプリッタのように）横に並べることも、縦に並べることもできます。File Explorerアプリケーションでは、panelSplitterコンポーネントを使用して、ページ本体からアプリケーションのヘッダー・コンテンツが分割されます。図8-8に、ヘッダー・コンテンツを表示するために開かれたpanelSplitterコンポーネントを示します。ヘッダー・コンテンツには、OracleのロゴとFile Explorerの名前が表示されています。
スプリッタの矢印ボタンをクリックすると、ヘッダー・コンテンツが表示されているペインが閉じられ、図8-9に示すように、ロゴと名前が表示されなくなります。
panelSplitterコンポーネントのファセットにコンポーネントを配置します。panelSplitterコンポーネントではジオメトリ管理を使用して、実行時に子コンポーネントを拡大します。つまり、ユーザーがペインを1つ閉じると、使用可能な領域に合うように別のペインのコンテンツが明示的にサイズ変更されます。
|
注意: ユーザーはsplitterPositionおよびcollapsed属性の値を変更できますが、アプリケーションが変更の永続性を使用するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。変更の永続性の有効化および使用方法の詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
単一のJSFページに1つ以上のpanelSplitterコンポーネントを使用して、複数グループのペインを作成できます。panelSplitterコンポーネントを使用すると、スプリッタで分割された2つのペインを作成できます。それぞれのスプリッタ・コンポーネントには、firstおよびsecondという2つのファセットがあり、それぞれ第1ペインと第2ペインに対応します。子コンポーネントが存在できるのはファセット内のみです。3つ以上のペインを作成するには、panelSplitterコンポーネントをネストします。
panelSplitterコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・スプリッタ」をドラッグ・アンド・ドロップして、panelSplitterコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開きます。
orientation属性をverticalに設定して、縦のペインを2つ作成します（一方をもう一方の上に配置）。デフォルトでは値はhorizontalで、この場合、横方向のペインは左から右（または言語の読み方向によっては右から左）に配置されます。
splitterPositionおよびpositionedFromEnd属性を設定して、スプリッタの最初の配置位置を決定します。デフォルトで、splitterPosition属性の値は200ピクセルで、positionedFromEnd属性はfalseです。この設定は、ADF Facesでは調整可能なスプリッタの初期位置が、（orientation属性の値に応じて）startまたはtopペインから計測されることを意味します。たとえば、orientation属性がhorizontalで、splitterPosition属性が200、positionedFromEnd属性がfalse（すべてデフォルト値）に設定されている場合、図8-10に示されているように、ADF Facesによりスプリッタはstartペインから200ピクセルの位置に配置されます。
positionedFromEnd属性がtrueに設定されている場合、ADF Facesではスプリッタの初期位置はend（またはorientationの値に応じてbottomペイン）から計測されます。図8-11に、endペインから200ピクセル計測したスプリッタの位置を示します。
collapsed属性を設定して、スプリッタを閉じた状態（非表示）にするかどうかを決定します。デフォルトではcollapsed属性はfalseで、どちらのペインも表示されます。ユーザーがスプリッタの矢印ボタンをクリックすると、collapsed属性がtrueに設定され、いずれかのペインが非表示になります。
ADF Facesでは、ユーザーがスプリッタの矢印ボタンをクリックした場合にどちらのペイン（第1ペインまたは第2ペイン）を非表示（閉じた状態）にするかを、collapsedおよびpositionedFromEnd属性を使用して決定します。collapsed属性がtrueでpositionedFromEnd属性がfalseに設定されている場合は、第1ペインが非表示になり、第2ペインが使用可能な領域に合せて拡大されます。collapsed属性がtrueでpositionedFromEnd属性がtrueの場合は、かわりに第2ペインが非表示になります。視覚的には、ボタンの矢印の方向を確認することで、ユーザーはどちらのペインが閉じるかを判断できます。ユーザーがスプリッタの矢印ボタンをクリックすると、矢印の方向にペインが閉じます。
コンポーネントにコンテンツを配置するには、必要なコンポーネントをfirstファセットおよびsecondファセットにドラッグ・アンド・ドロップします。orientationがhorizontalに設定されている場合、firstファセットがleftファセットになります。orientationがverticalに設定されている場合、firstファセットがtopファセットになります。子コンポーネントを拡大する場合には、拡大がサポートされているコンポーネントである必要があります。詳細は、8.4.2項「ジオメトリ管理およびpanelSplitterコンポーネントについて」を参照してください。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナ・コンポーネントで子コンポーネントをラップする必要があります。含まれているすべてのコンポーネントを拡大するには、そのコンポーネントも拡大できる必要があります。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
3つ以上のペインを作成するには、別のパネル・スプリッタ・コンポーネントをファセットに挿入し、ネストされたスプリッタ・ペインを作成します（図8-12を参照）。
例8-3に、スプリッタ・コンポーネントをネストする際に、JDeveloperによって生成されるコードを示します。
例8-3 ネストしたpanelSplitterコンポーネント
<af:panelSplitter ...>
<f:facet name="first">
<!-- first pane child components components here -->
</f:facet>
<f:facet name="second">
<!-- Contains nested splitter component -->
<af:panelSplitter orientation="vertical" ...>
<f:facet name="first">
<!-- first pane child components components here -->
</f:facet>
<f:facet name="second">
<!-- second pane child components components here -->
</f:facet>
</af:panelSplitter>
</f:facet>
</af:panelSplitter>
ユーザーがペインを開閉する際にいくつかの操作を実行する必要がある場合は、clientListenerタグを使用して、collapsed属性およびpropertyChangeイベント・タイプにクライアント・サイドのJavaScriptスクリプトをアタッチします。クライアント・サイドのイベントの詳細は、第5章「イベントの処理」を参照してください。
panelSplitterコンポーネントは子コンポーネントを拡大することができ、このコンポーネント自体も拡大できます。次に、panelSplitterコンポーネントの第1または第2ファセット内で拡大できるコンポーネントを示します。
decorativeBox
panelAccordion
panelBox
panelCollection
panelDashboard
panelGroupLayout（layout属性がscrollまたはverticalに設定されている場合のみ）
panelSplitter
panelStretchLayout
panelTabbed
region
table
tree
treeTable
panelSplitterコンポーネントのファセット内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout（layout属性がdefaultまたはhorizontalに設定されている場合のみ）
panelHeader
panelLabelAndMessage
panelList
showDetail
showDetailHeader
tableLayout（MyFaces Trinidadコンポーネント）
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントのファセットに配置することはできません。そのため、panelSplitterコンポーネントのファセットに拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない別のコンポーネントでそのコンポーネントをラップします。
たとえば、panelBoxコンポーネントにコンテンツを配置し、panelSplitterコンポーネントのファセットに配置するように設定する場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをpanelSplitterコンポーネントのファセットに配置し、panelBoxコンポーネントをそのpanelGroupLayoutコンポーネントに配置します。詳細は、8.2.2項「拡大可能なコンポーネントへのコンポーネントのネスト」を参照してください。
panelBorderLayoutコンポーネントではファセットを使用して、ページの事前定義済領域にコンポーネントを配置します。centerファセットではなく、panelBorderレイアウト・コンポーネントに直接の子コンポーネント（索引付きの子とも呼ばれる）を0〜n配置します。この子コンポーネントは連続して中央にレンダリングされます。子コンポーネントはファセットで囲まれます。
図8-13に、panelBorderLayoutコンポーネントのファセットを示します。
panelBorderLayoutコンポーネントのサポートされている12のファセットは次のとおりです。
top: 中央領域の上に子コンポーネントがレンダリングされます。
bottom: 中央領域の下に子コンポーネントがレンダリングされます。
start: 複数の読み方向がサポートされます。クライアント・ブラウザの読み方向が左から右の場合、このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の左側に子コンポーネントをレンダリングします。読み方向が右から左の場合、子コンポーネントは中央領域の右側にレンダリングされます。アプリケーションで両方の読み方向をサポートする必要がある場合は、このファセットを使用すると、方向が変更されてもコンテンツが適切な場所に表示されます。両方の方向をサポートする必要がない場合は、leftまたはrightファセットを使用します。
end: 複数の読み方向がサポートされます。クライアント・ブラウザの読み方向が左から右の場合、このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の右側に子コンポーネントをレンダリングします。読み方向が右から左の場合、子コンポーネントは中央領域の左側にレンダリングされます。アプリケーションで両方の読み方向をサポートする必要がある場合は、このファセットを使用すると、方向が変更されてもコンテンツが適切な場所に表示されます。両方の方向をサポートする必要がない場合は、leftまたはrightファセットを使用します。
left: 1つの読み方向のみがサポートされます。このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の左側に子コンポーネントをレンダリングします。読み方向が左から右で、leftおよびstartファセットの両方が使用されている場合には、leftファセットがstartファセットより優先されます（つまり、startファセットのコンテンツは表示されません）。読み方向が右から左で、leftおよびendファセットの両方が使用されている場合にも、leftファセットがendファセットより優先されます。
right: 1つの読み方向のみがサポートされます。このファセットは、topおよびbottomファセットの子コンポーネントの間にある中央領域の右側に子コンポーネントをレンダリングします。読み方向が左から右で、rightおよびendファセットの両方が使用されている場合は、rightファセットがendファセットより優先されます。読み方向が右から左で、rightおよびstartファセットの両方が使用されている場合は、rightファセットがstartファセットより優先されます。
innerTop: 中央領域の上でtopファセットの子コンポーネントの下に子コンポーネントがレンダリングされます。
innerBottom: 中央領域の下でbottomファセットの子コンポーネントの上に子コンポーネントがレンダリングされます。
innerLeft: leftファセットと同じように子コンポーネントをレンダリングしますが、innerTopとinnerBottomファセット、およびleftファセットと中央領域の間にレンダリングします。
innerRight: rightファセットと同じように子コンポーネントをレンダリングしますが、innerTopファセットとinnerBottomファセット、およびrightファセットと中央領域の間にレンダリングします。
innerStart: 読み方向が左から右の場合は、innerLeftファセットと同じように子コンポーネントをレンダリングします。読み方向が右から左の場合は、innerRightファセットと同じように子コンポーネントをレンダリングします。
innerEnd: 読み方向が左から右の場合は、innerRightファセットと同じように子コンポーネントをレンダリングします。読み方向が右から左の場合は、innerLeftファセットと同じように子コンポーネントをレンダリングします。
panelBorderLayoutコンポーネントでは子コンポーネントの拡大がサポートされておらず、子コンポーネントが拡大されるコンポーネント内に配置されても拡大しません。そのため、各ファセットのサイズは、このコンポーネントに含まれているコンポーネントのサイズで決定されます。コンテンツをブラウザ・ウィンドウに合せて拡大する場合は、かわりにpanelStretchLayoutコンポーネントを使用することを検討してください。詳細は、8.3項「コンテンツをページ全体に拡大するための設定」を参照してください。
JSFページに使用できるpanelBorderLayoutコンポーネントの数に制限はありません。
panelBorderLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル枠線レイアウト」をドラッグ・アンド・ドロップして、panelBorderLayoutコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
コンポーネント・パレットから、panelBorderLayoutコンポーネントの子コンポーネントとして、ウィンドウ中央へのコンテンツの表示に使用するコンポーネントをドラッグ・アンド・ドロップします。
子コンポーネントは、挿入した順番で連続して表示されます。他のタイプのレイアウトで子コンポーネントを表示する場合は、panelGroupLayoutコンポーネントにそのコンポーネントをラップします。詳細は、8.12項「関連する項目のグループ化」を参照してください。
中央を囲むコンテンツを配置するには、必要なコンポーネントを各ファセットにドラッグ・アンド・ドロップします。
ファセットに配置できる子コンポーネントは1つのみであるため、複数の子コンポーネントを追加する場合は、コンテナで子コンポーネントをラップします。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
ファセットのコンテンツの印刷を可能にするには、コンポーネント・パレットから印刷可能ページ表示動作コンポーネントをドラッグし、対象のファセットにドロップします。
panelFormLayoutコンポーネントを使用すると、入力フィールドや選択リスト・フィールドなど、複数のフォーム入力コンポーネントを1つ以上の列に配置できます。File Explorerアプリケーションでは、panelFormLayoutコンポーネントを使用してファイル・プロパティが表示されています。図8-14に示されているように、コンポーネントはラベルが右揃えになるように構成されています。
図8-15に、ラベルがフィールドの上に表示されるように構成されているコンポーネントを使用した同じページを示します。
panelFormLayoutコンポーネントを構成して、ラベル付きのフィールドを1列以上表示できます。フォームの各フィールドは、panelFormLayoutコンポーネントの子コンポーネントです。必要な行数を設定します。子コンポーネントが行より多い場合、残りの子コンポーネントは新しい列に配置されます。たとえば、25の子コンポーネントがあり、15行表示されるようにコンポーネントを設定した場合、残りの10のコンポーネントは2列目に表示されます。
ただし、それぞれに表示される行数は、構成された行数によってのみ決定されるわけではありません。panelFormLayoutコンポーネントは、デフォルトで、4列以上レンダリングしないように設定されています（PDAアプリケーションの場合は2列）。この値により、実際に行数が決定されます。たとえば、25の子コンポーネントがあり、5行表示するようにコンポーネントを設定し、デフォルトの最大列数を3に設定したままにした場合、5行表示するように設定しても、実際はコンポーネントにより9行表示されます。これは、最大列数が設定された行数をオーバーライドするためです。最大3列のみに設定されているため、すべての子コンポーネントを表示するには9行使用する必要があります。コンポーネントで5行のみが表示されるようにするには、最大列数を5に設定する必要があります。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用されます。幅は、ピクセル単位の絶対数またはパーセント値を使用して指定します。ラベルの長さが合ない場合は、テキストが折り返されます。
|
ヒント: ページが英語以外の言語で表示される場合は、異なる言語および文字で使用するためにラベルに余分な空白を残す必要があります。 |
ページに1つ以上のpanelFormLayoutコンポーネントを使用して、必要なフォーム・レイアウトを作成できます。
panelFormLayoutを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・フォーム・レイアウト」をドラッグ・アンド・ドロップして、panelFormLayoutコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開いてラベルの位置を設定します。
デフォルトで、子の入力コンポーネントのフィールド・ラベルはフィールドの横に表示されます。フィールドの上にラベルを配置するには、labelAlignment属性をtopに設定します。
|
注意: panelFormLayoutコンポーネントを別のpanelFormLayoutコンポーネントにネストすると、ネストされたレイアウトのラベルの位置はtopになります。 |
rowsおよびmaxColumns属性を設定して、フォーム内の行および列の数を指定します。
rows属性の値は、ADF Facesにより、その後から新しい列が開始される行の番号として使用される数値です。デフォルトでは、2147483647（Integer.MAX_VALUE）に設定されています。これは、rendered="true"およびvisible="true"に設定されているすべての子コンポーネントが、単一の列にレンダリングされることを意味します。
フォームに複数の列を含める場合は、rows属性をレンダリングされる子コンポーネントの倍数に設定し、maxColumns属性をフォームに表示する最大列数に設定します。maxColumnsのデフォルト値は3です。（PDAの場合、デフォルトは2です。）
|
注意: panelFormLayoutコンポーネントが別のpanelFormLayoutコンポーネント内に存在している場合、内側のpanelFormLayoutコンポーネントのmaxColumns値は常に1です。 |
たとえば、rows属性が6に設定されていて、レンダリングされた子が1〜6ある場合、リストは1列に表示されます。レンダリングされた子コンポーネントが7〜12ある場合、リストは2列に表示されます。子コンポーネントが13以上ある場合、リストは3列に表示されます。レンダリングされたすべての子コンポーネントを1列に表示するには、rows属性をデフォルトの値に設定しなおします。
レンダリングされた子コンポーネントの数に、maxColumn属性で許可されている数を超える列が必要な場合には、rows属性の値がオーバーライドされます。たとえば、レンダリングされた子コンポーネントが100あり、rows属性が30に設定されていて、maxColumns属性が3（デフォルト）の場合、リストは3列34行で表示されます。maxColumns属性が2に設定されている場合、リストは2列51行で表示されます。
|
ヒント: レンダリングされた子コンポーネントが参照するのは、フォームの直接の子コンポーネントのみです。そのため、複数の行をレンダリングするコンポーネント（selectManyCheckboxなど）が子の場合は、そのすべての行がレンダリングされた単一の子とみなされ、別々の列に分割できません。 |
fieldWidthおよびlabelWidth属性を必要に応じて設定します。
ADF Facesでは、ブラウザの標準のHTMLフローで決定されたデフォルトのラベル幅およびフィールド幅が使用されます。また、ラベルおよびフィールドに使用する明示的な幅を指定できます。
panelFormLayoutコンポーネントのlabelWidth属性ではラベルの優先幅を、fieldWidth属性ではフィールドの優先幅を設定できます。
|
注意: labelWidthコンポーネントに指定する値は、labelAlignment属性がtopに設定されていて、ラベルがフィールドの上に表示されるレイアウトでは無視されます。 |
フォーム・レイアウト内の列数にかかわらず、指定する幅はすべてのラベルとフィールドに適用されます。つまり、列ごとに別々の幅を設定することはできません。幅は、CSS単位（em、pxまたは%など）を使用して指定します。使用する単位は、labelWidthおよびfieldWidth属性の両方で同一にする必要があります。
パーセント値を使用する場合は次のようにします。
指定するパーセント幅は、表示される列数に関係なく、panelFormLayoutコンポーネントが占有する幅全体のパーセントです。
labelWidthおよびfieldWidthのパーセントの合計は、100%になる必要があります。合計が100%未満の場合、幅は100%になるように正規化されます。たとえば、labelWidthを10%に、fieldWidthを30%に設定した場合、実行時にlabelWidthは33%に、fieldWidthは67%になります。
一方の幅を明示的に設定してもう一方の幅を指定しない場合（labelWidthのパーセントは指定してfieldWidthは指定しないなど）、指定されていないパーセント幅がADF Facesにより自動的に計算されます。
|
注意: フォームに複数の列とフッターが含まれている場合、パーセントの分数分割がサポートされていない一部のWebブラウザでは、メインのフォーム項目とフッター項目の位置の間にわずかにオフセットが生じることがあります。この影響を最小限にするために、labelWidthのパーセントは、列数で均等に分割できるようにすることをお薦めします。 |
panelFormLayoutコンポーネントの幅が領域の600ピクセルを占有し、labelWidth属性が50%に設定されているとします。1列に表示される場合、ラベル幅もフィールド幅も300ピクセルになります。2列に表示される場合は、各列が300ピクセルであるため、列の各ラベル幅とフィールド幅は150ピクセルになります。
ラベル・テキストの長さが指定されたラベル幅の1行に収まらない場合は、ADF Facesによりラベル・テキストが自動的に折り返されます。指定されたフィールド幅がpanelFormLayoutコンポーネントに配置した子コンテンツの最低サイズより狭い場合は、子コンテンツの最低サイズがフィールド幅として自動的に使用されます。
|
注意: 割り当てられた領域よりフィールドが広い場合、ブラウザはフィールドを切り捨てず、ラベル列の領域を使用します。これが原因で、ラベルが予想以上に折り返される可能性があります。この場合は、フィールド・コンテンツの幅を狭くすることを検討してください（inputTextコンポーネントに、幅がより狭いcontentStyleを使用するなど）。 |
必要な子コンポーネントを挿入します。
通常は、入力テキストやチェック・ボックスを複数選択などのラベル付きのフォーム入力コンポーネント、およびユーザーの入力を可能にするその他の類似のコンポーネントを挿入します。
|
ヒント: 通常はpanelFormLayoutコンポーネントの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、panelFormLayoutコンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
例8-4に、図8-14に表示されているFile Explorerアプリケーションのproperties.jspxページで使用されているpanelFormLayoutコンポーネントを示します。
例8-4 panelFormLayoutコンポーネント
<af:panelFormLayout rows="5" labelAlignment="top">
<af:inputText value="#{fileItemProperties.type}"
label="#{explorerBundle['fileproperties.type']}"
readOnly="true"/> <af:inputText value="#{fileItemProperties.location}"
label="#{explorerBundle['fileproperties.currentpath']}"
readOnly="true"/>
<af:inputText value="#{fileItemProperties.size}"
label="#{explorerBundle['fileproperties.size']}"
readOnly="true"/>
<af:inputText value="#{fileItemProperties.contains}"
label="#{explorerBundle['fileproperties.contains']}"
readOnly="true"/>
</af:panelFormLayout>
|
ヒント: 入力以外のコンポーネント（label属性がない）を使用する場合、またはpanelFormLayoutコンポーネント内の単一のラベルで複数の入力コンポーネントをグループ化する場合は、まずpanelLabelAndMessageコンポーネントにコンポーネントをラップします。panelLabelAndMessageコンポーネントの使用方法の詳細は、17.4項「単一のラベルおよびメッセージを使用したコンポーネントのグループ化」を参照してください。 |
フォーム・レイアウトに意味的に関連する入力コンポーネントをグループ化するには、groupコンポーネントを使用してグループに属するコンポーネントをラップします。groupにコンポーネントを配置すると、panelFormLayoutコンポーネントによりグループの上下に区切り線が引かれます。
groupコンポーネントの使用方法の詳細は、8.6.2項「groupコンポーネントをpanelFormLayoutコンポーネントとともに使用する方法について」を参照してください。
子の入力コンポーネントの下にコンテンツを追加するには、必要なコンポーネントをfooterファセットに挿入します。
ファセットに使用できる子コンポーネントは1つのみです。footerファセットに複数のコンポーネントを挿入する必要がある場合は、panelGroupLayoutコンポーネントまたはgroupコンポーネントを使用してfooterの子コンポーネントをラップします。例8-5に、panelFormLayoutコンポーネントにpanelGroupLayoutコンポーネントを使用してfooterの子コンポーネントを配置するサンプル・コードを示します。
例8-5 水平に配置されたpanelFormLayoutのfooterの子コンポーネント
<af:panelFormLayout>
<f:facet name="footer">
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Save"/>
<af:commandButton text="Cancel"/>
<f:facet name="separator">
<af:spacer width="3" height="3"/>
</f:facet>
</af:panelGroupLayout>
</f:facet>
.
.
.
</af:panelFormLayout>
groupコンポーネント自体は何もレンダリングしませんが、panelFormLayoutコンポーネントの子として使用すると、各groupコンポーネントの子コンポーネントの周辺にセパレータが表示されます。たとえば、panelFormLayoutコンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例8-15に、panelFormLayoutコンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。
例8-6 panelFormLayoutの子コンポーネントのグループ化
<af:panelFormLayout binding="#{editor.component}" rows="10" labelWidth="33%"
fieldWidth="67%" testId="panelFormLayout1">
<af:inputText columns="5" label="label 1"/>
<af:group>
<af:inputText columns="5" label="grouped 1" shortDesc="This one is secret!"
secret="true"/>
<af:inputText columns="5" label="grouped 2"/>
<af:inputText columns="5" label="grouped 3"/>
</af:group>
<af:inputDate id="df1" label="label 2"/>
<af:panelLabelAndMessage label="label 3" labelStyle="vertical-align: middle;">
<af:commandButton text="Submit"/>
</af:panelLabelAndMessage>
<af:selectOneListbox id="sol" label="label 4" shortDesc="Select One Option">
<af:selectItem label="option 1"/>
<af:selectItem label="option 2"/>
<af:selectItem label="option 3"/>
<af:selectItem label="option 4"/>
</af:selectOneListbox>
<af:selectManyListbox id="rs" label="label 5" shortDesc="Select Option">
<af:selectItem label="option 1"/>
<af:selectItem label="option 2"/>
<af:selectItem label="option 3"/>
<af:selectItem label="option 4"/>
</af:selectManyListbox>
</panelFormLayout>
図8-16に示されているように、例8-15のサンプル・コードでは、実行時にpanelFormLayoutコンポーネントにより子コンポーネントの1つ目のgroupの前後に点線のセパレータがレンダリングされます。
8.6項「フォームでのコンテンツの配置」に説明されているように、panelFormLayoutコンポーネントでは特定のコンポーネント属性を使用して、列および行に子コンポーネント（グループ化された子およびグループ化されていない子）を表示する方法を決定します。子コンポーネントを複数列に表示するpanelFormLayoutコンポーネントの関連するコンポーネントをgroupコンポーネントを使用してグループ化すると、groupコンポーネントの子コンポーネントは同じ列に表示されます。つまり、groupコンポーネント内の子コンポーネントが別々の列に分割されることはありません。
groupコンポーネントで子コンポーネントのレイアウトを設定することはできませんが、基礎となるHTML要素で、groupコンポーネント内の子コンポーネントを必要なレイアウトに設定できます。たとえば、groupコンポーネントの子のボタン・コンポーネントをフォーム・レイアウト内に水平に配置する場合は、panelGroupLayoutコンポーネントを使用してボタンをラップし、panelGroupLayoutコンポーネントのlayout属性をhorizontalに設定します。その後、例8-7に示すように、groupコンポーネントにpanelGroupLayoutコンポーネントを挿入します。
例8-7 groupコンポーネント内のpanelGroupLayout
<af:group>
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Save" ../>
<af:commandButton text="Cancel" ../>
<f:facet name="separator">
<af:spacer width="3"/>
</f:facet>
</af:panelGroupLayout>
</af:group>
panelFormLayoutコンポーネントのfooterファセットの子コンポーネントをgroupコンポーネントを使用してグループ化する場合は、例8-8に示すように、すべてのgroupコンポーネントおよびグループ化されていないその他の子コンポーネントを、1つのルートgroupコンポーネントに配置する必要があります。
例8-8 ルートgroupコンポーネントが1つ含まれるpanelFormLayoutのfooterファセット
<af:panelFormLayout ...>
<f:facet name="footer">
<!-- One root group component needed -->
<af:group>
<af:outputText value="Footer item 1"/>
<!-- One group -->
<af:group>
<af:outputText value="Group 1 item 1"/>
<af:outputText value="Group 1 item 2"/>
</af:group>
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Save"/>
<af:commandButton text="Cancel"/>
<f:facet name="separator">
<af:spacer width="3"/>
</f:facet>
</af:panelGroupLayout>
</af:group>
</f:facet>
.
.
.
</af:panelFormlayout>
図8-17に示されているように、panelFormLayoutコンポーネントのグループ化された子コンポーネントと同じように、panelFormLayoutコンポーネントにより、実行時にfooterファセットの各groupコンポーネントの子コンポーネントの周辺に点線のセパレータがレンダリングされます。
|
注意: panelFormLayoutコンポーネントのfooterファセットでサポートされているのは、2レベルのグループ化されたコンポーネントのみで、footerファセットに3レベル以上ネストしたgroupコンポーネントを配置することはできません。たとえば、次のコードは無効です。
<f:facet name="footer">
<!-- Only one root group -->
<af:group>
<af:outputText value="Footer item 1"/>
<!-- Any number of groups at this level -->
<af:group>
<af:outputText value="Group 1 item 1"/>
<af:outputText value="Group 1 item 2"/>
<!-- But not another nested group. This is illegal. -->
<af:group>
<af:outputText value="Nested Group 1 item 1"/>
<af:outputText value="Nested Group 1 item 2"/>
</af:group>
</af:group>
<af:outputText value="Another footer item"/>
</af:group>
</f:facet>
|
panelFormLayoutコンポーネントのfooterファセットと本体のどちらにコンポーネントをグループ化しているかにかかわらず、panelFormLayoutコンポーネントかfooterファセットの最初または最後の子がgroupコンポーネントの場合、そのgroupの子コンポーネントの周辺にはセパレータは表示されません。たとえば、例8-9のどちらのコード例でも、実行時に生成される外観は同じです。
例8-9 同じ外観を生成するコード
<!-- Example 1: Group of buttons is last child in root group -->
<f:facet name="footer">
<af:group>
<af:outputText value="Footer text item 1"/>
<af:outputText value="Footer text item 2"/>
<af:group>
<af:inputText label="Nested group item 1"/>
<af:inputText label="Nested group item 2"/>
</af:group>
<af:group>
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Cancel"/>
<af:commandButton text="Save"/>
</af:panelGroupLayout>
</af:group>
</af:group>
</f:facet>
<!-- Example 2: panelGroupLayout of buttons is last child in root group-->
<f:facet name="footer">
<af:group>
<af:outputText value="Footer text item 1"/>
<af:outputText value="Footer text item 2"/>
<af:group>
<af:inputText label="Nested group item 1"/>
<af:inputText label="Nested group item 2"/>
</af:group>
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Cancel"/>
<af:commandButton text="Save"/>
</af:panelGroupLayout>
</af:group>
</f:facet>
panelDashboardコンポーネントでは、panelFormコンポーネントと同様に、行および列にその子コンポーネントを配置できます。ただし、図8-18に示されているように、panelDashboardの子は、テキスト・コンポーネントではなく、コンテンツを含むpanelBoxコンポーネントです。
panelDashboardコンポーネントでは、宣言的なドラッグ・アンド・ドロップ動作もサポートされており、ユーザーは子コンポーネントを再配置できます。図8-19に示されているように、ユーザーは、たとえばpanelBox 10をpanelBox 4とpanelBox 5の間に移動できます。ボックスをドロップできる場所にはシャドウが表示されます。
panelDashboardコンポーネントを追加する場合、コンポーネントに含まれる列数および各行の高さを構成します。ダッシュボードは、子を拡大して構成済の領域を埋めます。すべての子コンポーネントが、指定した列数と行の高さ内に収まらない場合、panelDashboardコンポーネントにスクロールバーが表示されます。
panelDashboardコンポーネントには、子コンポーネントを移動できる機能に加え、APIも用意されています。このAPIにアクセスして、ユーザーが子コンポーネントをレンダリングするかレンダリングしないかを切り替えられるようにし、挿入または削除されているpanelBoxの外観を提供できます。ダッシュボードでは、部分ページ・リフレッシュによって新しい一連の子コンポーネントが再描画されるので、ページ全体を再描画する必要がありません。
panelDashboardBehaviorタグを使用して、コンポーネントのレンダリングの応答性を向上させることができます。このタグを使用すると、コマンド・コンポーネントをアクティブ化し、視覚的な変更をダッシュボードに適用してから、アプリケーション・コードでサーバーのコンポーネント・ツリーを変更できます。アクション・イベントがサーバーに送信される前に、この領域の拡大が行われるため、コマンド・コンポーネントのアクション・リスナーがコンポーネント・ツリーを変更し、ダッシュボードでの挿入の最適化されたエンコーディングを準備している間に、ユーザーはすぐにフィードバックを確認できます。
たとえば、図8-20は、panelSplitterコンポーネントの右ペインで使用されるpanelDashboardコンポーネントを示しています。左ペインにリンクとして表示されているリスト項目は、panelDashboardの各panelBoxコンポーネントを表しています。すべてのpanelBoxコンポーネントが表示されている場合、リンクはすべて非アクティブです。ただし、ユーザーがpanelBoxコンポーネントの1つを削除すると、対応するリンクがアクティブになります。ユーザーはそのリンクをクリックして、panelBoxを再挿入できます。panelDashboardBehaviorタグをcommandLinkコンポーネントとともに使用することで、ユーザーは挿入済ボックスの描画を確認できます。
このタグを使用しない場合、アクション・リスナーが処理している間、ユーザーがダッシュボード構造に対する変更を確認できるまで多少の遅延があります。
図8-21は、panelDashboardコンポーネントを使用した実際的な例を示しています。ページの上部にあるリンクの1つを選択すると、ダッシュボードに表示されるpanelBoxesが変わります。ページの左側にある関連リンクをクリックして、panelBoxを追加することもできます。
panelDashboardコンポーネントをページに追加したら、列数および行の高さを構成します。その後、子コンポーネントを追加し、コンポーネントを再配置できるようにする場合は、子コンポーネントにもcomponentDragSourceタグを追加します。コンポーネントの挿入および削除を許可する場合は、アクションを処理するためのリスナーを実装します。panelDashboardBehaviorタグを使用して、panelDashboardコンポーネントでの挿入への応答性を向上させることもできます。
panelDashboardコンポーネントを使用する手順:
コンポーネント・パレットからページにパネル・ダッシュボードをドラッグ・アンド・ドロップして、panelDashboardコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開きます。
columns属性を、子コンポーネントを表示するために使用する列数に設定します。子コンポーネントは各列に合せて拡大されます。
rowHeight属性を、各行の高さのピクセル数に設定します。子コンポーネントは、この高さまで拡大されます。
コンポーネント・パレットからpanelBox子コンポーネントをドラッグ・アンド・ドロップします。
|
ヒント: panelDashboardコンポーネントでは、regionコンポーネントも子コンポーネントとしてサポートされています。 |
ユーザーが子コンポーネントを並べ替えられるようにするには、コンポーネント・パレットで「操作」セクションを開き、コンポーネント・ドラッグ・ソース・タグを各子コンポーネントの子としてドラッグ・アンド・ドロップします。
コンポーネントを追加および削除できるようにする場合は、マネージドBeanを作成し、子の追加またはドロップ時に子の並替えを行うハンドラ・メソッドを実装します。このイベントはドロップ・イベントとみなされるため、ドラッグ・アンド・ドロップ・フレームワークを使用する必要があります。ドロップ・イベントのハンドラの作成の詳細は、第32章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
最適化されたライフサイクルを使用するには、ハンドラにpanelDashboardコンポーネントのprepareOptimizedEncodingOfInsertedChild()メソッドをコールさせます。これにより、挿入された子コンポーネントのみがレンダリングのためにダッシュボードから送信されます。
|
注意: panelDashboardBehaviorタグを使用する予定の場合は、関連付けられているコマンド・コンポーネントのactionListenerハンドラからこのAPIをコールする必要があります。 |
手順6でcomponentDragSourceタグを追加した場合、panelDashboardのDropEventハンドラも実装する必要があります。panelDashboardコンポーネントを選択している状態で、「動作」セクションを開き、DropListener属性をハンドラ・メソッドにバインドします。
panelDashboardBehaviorタグを使用する場合は、挿入を開始するために使用するコマンド・コンポーネントをドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、コンポーネント・ツリーに対する変更を処理するマネージドBeanのハンドラに、コマンド・コンポーネントのactionListenerをバインドします。ハンドラにpanelDashboardコンポーネントのprepareOptimizedEncodingOfInsertedChild()メソッドをコールさせます。これにより、挿入された子コンポーネントのみがレンダリングのためにダッシュボードから送信されます。例8-10に、子コンポーネントの挿入を処理するマネージドBeanのコードを示します。
例8-10 「挿入」ボタンのアクション・リスナー・コード
public void handleInsert(ActionEvent e)
{
UIComponent eventComponent = e.getComponent();
String panelBoxId = eventComponent.getAttributes().get("panelBoxId").toString();
UIComponent panelBox = _dashboard.findComponent(panelBoxId);
// Make this panelBox rendered:
panelBox.setRendered(true);
// Becaue the dashboard is already shown, perform an optimized
// render so the whole dashboard does not have to be re-encoded:
int insertIndex = 0;
List<UIComponent> children = _dashboard.getChildren();
for (UIComponent child : children)
{
if (child.equals(panelBox))
{
// Let the dashboard know that only the one child component should be
// encoded during the render phase:
_dashboard.prepareOptimizedEncodingOfInsertedChild(
FacesContext.getCurrentInstance(),
insertIndex);
break;
}
if (child.isRendered())
{
// Count only rendered children because that is all that the
// panelDashboard can see:
insertIndex++;
}
}
// Add the side bar as a partial target because we need to
// redraw the state of the side bar item that corresponds to the inserted item:
RequestContext rc = RequestContext.getCurrentInstance();
rc.addPartialTarget(_sideBar);
}
コンポーネント・パレットの「操作」セクションを開き、パネル・ダッシュボードの動作タグをコマンド・コンポーネントの子としてドラッグします。
プロパティ・インスペクタで次の入力を行います。
for: 関連するpanelDashboardコンポーネントのIDを入力します。
index: 挿入されるコンポーネントの索引を決定するメソッドに解決されるEL式を入力します。panelDashboardBehaviorタグを使用する場合、プレースホルダ要素がDOMツリーに挿入されます。このツリーで、実際のコンポーネントがサーバーから戻されるとレンダリングされます。挿入プレースホルダはサーバーで挿入が行われる前に追加されるため、子コンポーネントを挿入する場所を指定し、ユーザーがページを再ロードしても、子が同じ順序で表示されるようにする必要があります。
ユーザーがコンテンツの表示または非表示を選択できるようにすることが必要な場合があります。ユーザー・インタフェースのすべての機能を一度に表示する必要がなければ、ユーザーの意志でインタフェースの一部を表示および非表示にできるコンポーネントを使用して領域を節約できます。
showDetailコンポーネントを使用すると、ユーザーがラベルの下のコンテンツを開いた状態（表示）または閉じた状態（非表示）にすることが可能な切替えアイコン付きのラベルを作成できます。コンテンツが閉じた状態（非表示）の場合、デフォルトのラベルは「表示」で、切替えアイコンにはボックスの中にプラス記号が表示されます。コンテンツが開いた状態（表示）の場合、デフォルトのラベルは「非表示」で、切替えアイコンにはマイナス記号に変わります。
たとえば、File ExplorerアプリケーションのnewFileItemページでは、showDetailコンポーネントを使用してファイル・プロパティを表示および非表示にしています。図8-22に示すように、コンポーネントは、ページが表示されたらプロパティが非表示になるように構成されています。
ユーザーが切替えアイコンをクリックすると、図8-23に示されているようにプロパティが表示されます。
表示されているテキストおよび非表示のテキストを表示するために、outputTextコンポーネントより複雑なコンポーネントを使用する場合は、コンポーネントをshowDetailコンポーネントのpromptファセットに追加できます。表示に設定すると、promptファセットのコンテンツが、表示されているテキストおよび非表示のテキストの値と置き換えられます。showDetailコンポーネントの使用方法は、8.8.1項「showDetailコンポーネントの使用方法」を参照してください。
showDetailコンポーネントと同じように、showDetailHeaderコンポーネントでもコンテンツの表示を切り替えられますが、showDetailHeaderコンポーネントにはヘッダーにラベルと切替えアイコンがあり、メニュー・バー、ツールバーおよびテキスト用のファセットも用意されています。
|
ヒント: showDetailHeaderコンポーネントは、表示イベントを処理することを除き、panelHeaderコンポーネントと同じです。panelHeaderコンポーネントの詳細は、8.10項「コンテンツ・コンテナの項目の表示」を参照してください。 |
また、showDetailHeaderコンポーネントは、エラー、警告、情報または確認のメッセージとして使用するように構成できます。コンテンツは、ヘッダーの下で表示または非表示になります。たとえば、File ExplorerアプリケーションのnewFileItemページでは、showDetailHeaderコンポーネントを使用して、新しいファイルを作成するためのヘルプを表示しています。図8-23に示されているように、デフォルトではヘルプは表示されません。ユーザーがヘッダーの切替えアイコンをクリックすると、図8-24に示されているようにコンテンツが表示されます。
showDetailHeaderコンポーネントは、panelHeaderコンポーネントとともに使用して、ページをセクションおよびサブセクションに分割することもできます。このページでは、コンテンツの一部を非表示にできます。showDetailHeaderコンポーネントには、ツールバーやメニュー・バー・ファセットなど、多数のファセットが含まれます。これらのファセットは、panelHeaderコンポーネントのものと同じです。panelHeaderコンポーネントの詳細は、8.10項「コンテンツ・コンテナの項目の表示」を参照してください。
showDetailHeaderコンポーネントをネストさせて、コンテンツの階層を作成できます。ネストされた各コンポーネントのヘッダーは、階層を示すために異なるスタイルになります。図8-25に、ネストした3つのshowDetailHeaderコンポーネントおよびその異なるスタイルを示します。
各ヘッダー・レベルで使用されているスタイルは、showDetailHeaderコンポーネントにスキンを適用することで変更できます。ADF Facesコンポーネントのスキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
|
注意: テキストのスタイルはsize属性を使用して強制できますが（最大のテキストが0の場合）、size属性の値は階層には影響しません。影響を受けるのはテキストのスタイルのみです。 |
panelBoxコンポーネントは、ヘッダーの下に情報を表示または非表示にできるようにする場合、およびページのその他の情報と分けるためのボックスが必要な場合に使用します。File Explorerアプリケーションでは、図8-26に示すように、properties.jspxページに2つのpanelBoxコンポーネントを使用して、属性およびファイルの履歴を表示します。
図8-27に、「履歴」panelBoxコンポーネントが非表示の状態になっている同じページを示します。
panelBoxコンポーネントに背景色を設定して、コンテンツをページの残りの部分とさらに区別することができます。2色の組合せ（ランプと呼ばれる）が用意されており、各組合せにはnone、light、mediumおよびdarkの4つの色のレベルがあります。図8-28に図8-26と同じパネル・ボックスを示しますが、下のpanelBoxコンポーネントはcoreランプの中間色が表示されるように構成されています。
panelBoxコンポーネントのサイズは、ピクセル・サイズを明示的に割り当てて設定することも、親に対する割合で設定することもできます。また、タイトルの位置を設定することも、アイコンを追加することもできます。また、panelBoxコンポーネントには、ボックスにツールバーおよびツールバー・ボタンを追加できるtoolbarファセットがあります。
コンテンツの複数の大きな領域を表示および非表示にする必要がある場合は、panelAccordionおよびpanelTabbedコンポーネントの使用を検討してください。詳細は、8.9項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。
showDetailコンポーネントを使用して、コンテンツの1セットを表示および非表示にできます。
showDetailコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「詳細の表示」をドラッグ・アンド・ドロップして、showDetailコンポーネントを作成します。
|
ヒント: このコンポーネントは、コンポーネント・パレットのレイアウト・セクションではなく、「共通コンポーネント」セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開き、必要に応じて属性を設定します。
コンポーネントの子コンポーネントを表示する場合は、disclosed属性をtrueに設定します。
|
注意: コンテンツを表示および非表示にすることで、ユーザーはdisclosed属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
disclosedText属性を、コンテンツが開いた状態（表示）の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「非表示」になります。
undisclosedText属性を、コンテンツが閉じた状態（非表示）の場合に切替えアイコンの隣に表示するラベルに設定します。値が指定されない場合、ラベルはデフォルトで「表示」になります。
|
注意: disclosedTextには値を指定してundisclosedTextには指定しない場合、ADF Facesにより、開いた状態および閉じた状態の両方にdisclosedTextの値が自動的に使用されます。同様に、undisclosedTextには値を指定してdisclosedTextには指定しない場合、コンテンツが非表示または表示されると、undisclosedTextの値が使用されます。
|
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListener属性をdisclosureListenerメソッドに設定します。
表示イベントおよびリスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
コンテンツを追加するには、必要な子コンポーネントをshowDetailコンポーネントに挿入します。
showDetailHeaderコンポーネントは、ヘッダーの下にコンテンツを1セット表示する必要がある場合や、表示または非表示にできるメッセージとしてコンテンツを使用する場合に使用します。showDetailHeaderコンポーネントは、コンテンツを非表示にできるようにする場合に、ヘッダーおよびコンテンツの階層を作成する際にも使用できます。
showDetailHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに詳細表示ヘッダーをドラッグ・アンド・ドロップして、showDetailHeaderコンポーネントを作成します。
|
ヒント: レイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開きます。text属性をセクション・ヘッダーのラベルにするテキスト文字列に設定します。
icon属性を、セクション・ヘッダーのアイコンに使用するイメージ・ファイルのURIに設定します。アイコン・イメージはヘッダー・ラベルの前に表示されます。
特定のメッセージ情報の表示にヘッダーを使用している場合は、messageType属性を次のいずれかの値に設定します。
confirmation: 指定されたアイコン・イメージが確認アイコン（上に緑のチェックマークが表示されたメモ・ページ）に置き換えられます。
error: 指定されたアイコン・イメージがエラー・アイコン（中にxがある赤い丸）に置き換えられます。ヘッダー・ラベルも赤に変わります。
info: 指定されたアイコン・イメージが情報アイコン（中にIがある青い丸）に置き換えられます。
warning: 指定されたアイコン・イメージが警告アイコン（中に感嘆符がある黄色の三角）に置き換えられます。
none: デフォルト。icon属性に指定されていないかぎり、アイコンは表示されません。
図8-29に、メッセージ・タイプに使用される各アイコンを示します。
コンポーネントの子コンポーネントを表示する場合は、disclosed属性をtrueに設定します。
|
注意: コンテンツを表示および非表示にすることで、ユーザーはdisclosed属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListener属性をdisclosureListenerメソッドに設定します。
表示イベントおよびリスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
ヘッダーにボタンまたはアイコンを追加するには、toolbarファセットにtoolbarコンポーネントを挿入します。その後、新しく挿入されたtoolbarコンポーネントに、任意の数のcommandToolbarButtonまたはcommandButtonコンポーネントを追加します。toolbarコンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
注意: panelHeaderコンポーネントでは、ツールバーのオーバーフローはサポートされていません。 |
ヘッダーにメニューを追加するには、menuBarファセットにmenuコンポーネントを挿入します。メニュー作成の詳細は、14.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と同じスタイルで表示されます。これは、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
セクションまたはサブセクションにコンテンツを追加するには、必要な子コンポーネントをshowDetailHeaderコンポーネントに挿入します。
ページには、任意の数のpanelBoxコンポーネントを挿入できます。
panelBoxコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・ボックス」をドラッグ・アンド・ドロップして、panelBoxコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「外観」セクションを開き、ramp属性に使用するランプを選択します。
coreランプでは様々な青が使用され、highlightランプでは様々な黄色が使用されます。使用する色は、カスタム・スキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
background属性をlight、medium、darkまたはdefaultのいずれかの値に設定します。デフォルトの背景色は透明です。
text属性を、コンテナのヘッダー部分のタイトルとして表示するテキスト文字列に設定します。
icon属性を、ヘッダー・テキストの前に表示するアイコン・イメージのURIに設定します。
|
注意: textおよびicon属性の両方が設定されていない場合、panelBoxコンポーネントのヘッダー部分は表示されません。 |
titleHalign属性をcenter、start、end、leftまたはrightのいずれかの値に設定します。この値により、コンテナのヘッダー部分のタイトルの横位置（アイコン・イメージを含む）が決定されます。
「動作」セクションを開き、ユーザーがコンポーネントのコンテンツを表示または非表示にする際に実行する必要のあるバッキングBeanで、disclosureListener属性をdisclosureListenerメソッドに設定します。
表示イベントおよびリスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
ツールバー・ボタンを追加するには、toolbarコンポーネントをtoolbarファセットに挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarおよびcommandToolbarButtonコンポーネントの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
表示するコンテナにコンテンツを追加するには、必要なコンポーネントをpanelBoxコンポーネントの子コンポーネントとして挿入します。
通常、panelBoxコンポーネントに子コンポーネントを1つ挿入し、その子コンポーネントに表示するコンテンツを挿入します。この子コンポーネントでコンテンツの表示方法を制御できますが、親のpanelBoxコンポーネントは制御できません。
panelBoxコンポーネントの幅を変更するには、inlineStyle属性を希望する正確なピクセル・サイズに設定します。または、inlineStyle属性を、panelBoxコンポーネントが含まれる外側の要素の割合に設定します。例8-11に、幅を変更するために使用するコードを示します。
showDetail、showDetailHeaderおよびpanelBoxコンポーネントなどのように、組込みのイベント機能のあるADF Facesコンポーネントは、formコンポーネントで囲む必要があります。
これらのコンポーネントのdisclosed属性では、ヘッダーの下のコンテンツを表示（開いた状態）または非表示（閉じた状態）のどちらにするかを指定します。デフォルトではdisclosed属性はtrueで、コンテンツが表示されます。この属性がfalseに設定されていると、コンテンツは非表示になります。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
disclosed属性の値は実行時に永続可能であるため、ユーザーがコンテンツを表示または非表示にした場合、ADF Facesでは属性値を変更して保持できるので、その値はユーザーのセッション中その状態のままになります。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
ユーザーが切替えアイコンをクリックしてコンテンツを表示または非表示にすると、コンポーネントからサーバーにorg.apache.myfaces.trinidad.event.DisclosureEventイベントが送信されます。DisclosureEventイベントには、ソース・コンポーネントおよびその状態、つまり表示（開いている）または非表示（閉じている）に関する情報が含まれています。isExpanded()メソッドは、ノードを開く（表示）か閉じる（非表示）かを決定するブール値を返します。コンポーネントにそのコンテンツの表示および非表示のみを行わせる場合は、コードを記述する必要はありません。
ただし、DisclosureEventイベントの特別な処理を実行する場合は、コンポーネントのdisclosureListener属性をバッキングBeanのdisclosureListenerメソッドにバインドできます。ユーザーが表示されているまたは非表示のアイコンをクリックするたびに、DisclosureEventイベントへのレスポンスとしてdisclosureListenerメソッドが起動されます。
例8-12に示されているように、disclosureListenerメソッドは、単一のdisclosureEventイベント・オブジェクトを持つpublicメソッドで、戻りタイプがvoidである必要があります。
例8-12 disclosureListenerメソッド
public void some_disclosureListener(DisclosureEvent disclosureEvent) {
// Add event handling code here
}
コンポーネントのimmediate属性がtrueに設定されている場合以外、DisclosureEventイベントはデフォルトでは、アプリケーションの起動フェーズに送信されます。immediate属性がtrueに設定されている場合、イベントは可能なかぎり早期のフェーズ（通常はリクエスト値の適用フェーズ）で送信されます。
クライアント側のコンポーネントでは、AdfDisclosureEventイベントが起動されます。クライアントのAdfDisclosureEventイベントのイベント・ルートは、イベントのソース・コンポーネントに設定されており、disclosed属性がtrueのペインに対するイベントのみがサーバーに送信されます。クライアント側のイベントおよびイベント・ルートの詳細は、第5章「イベントの処理」を参照してください。
非表示および表示できるコンテンツの複数の領域を表示する必要がある場合は、panelAccordionまたはpanelTabbedコンポーネントを使用できます。どちらのコンポーネントでも、showDetailItemコンポーネントを使用して実際のコンテンツを表示します。
panelAccordionコンポーネントを使用すると、開くことのできる一連のペインを作成できます。ユーザーが一度に複数のペインを開くことや、一度に1つのペインのみを開くことができるように設定可能です。複数のペインを開いている場合は、showDetailItemコンポーネントのヘッダーをドラッグして、ペインの高さを調整できます。
ペインが閉じている場合はペイン・ヘッダーのみが表示され、ペインが開いている場合は、ペイン・ヘッダーの下にペイン・コンテンツが表示されます。図8-30に示されているように、File ExplorerアプリケーションではpanelAccordionコンポーネントを使用して、「フォルダ」および「検索」ペインを表示しています。
実行時、使用可能なブラウザの領域が、開かれたペインのコンテンツの表示に必要な領域より少ない場合、表示されていないペインをユーザーが選択して移動できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。図8-31に、「検索」ペインを表示する十分な領域がない場合に、File Explorerアプリケーションの「フォルダ」ペインに表示されるオーバーフロー・アイコン（丸で囲まれている右下のアイコン）を示します。
ユーザーがオーバーフロー・アイコンをクリックすると、ユーザーが選択してナビゲートするためのオーバーフロー・ポップアップ・メニューが表示されます（図8-32を参照）。
panelAccordionコンポーネントの使用方法は、8.9.1項「panelAccordionコンポーネントの使用方法」を参照してください。
panelTabbedコンポーネントを使用すると、タブ付きの一連のペインを作成できます。panelAccordionペインとは異なり、panelTabbedペインは閉じることも開くこともできません。かわりに、ユーザーがタブを選択すると、選択したタブのコンテンツが表示領域全体に表示されます。タブは表示領域の上か、表示領域の下、あるいはその両方に表示されます。個々のタブを閉じられるようにpanelTabbedコンポーネントを構成できます。このコンポーネントは、すべてのタブを閉じる、最後のタブを除いてすべて閉じる、またはタブを閉じないように構成できます。タブが削除されるように構成されている場合、タブの最後にXが表示されます。
File ExplorerアプリケーションではpanelTabbedコンポーネントを使用して、図8-33に示されているように、メインのペインにコンテンツを表示しています。
panelTabbedコンポーネントの使用方法は、8.9.2項「panelTabbedコンポーネントの使用方法」を参照してください。
|
ヒント: タブとナビゲーション階層を組み合せて使用する場合、たとえば、各タブが他のナビゲーション・アイテムのセットを含む別ページまたはリージョンである場合、ナビゲーション・ペイン・コンポーネントを使用してナビゲーション・メニューを作成できます。詳細は、18.4項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。 |
panelAccordionおよびpanelTabbedコンポーネントのどちらの場合でも、showDetailItemコンポーネントを1つ使用して各ペインにコンテンツを配置します。たとえば、4つのペインを使用する場合、panelAccordionまたはpanelTabbedコンポーネントのそれぞれにshowDetailItemコンポーネントを4つ挿入します。showDetailItemコンポーネントの使用方法は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。showDetailItemコンポーネントのtoolbarファセットにツールバーを追加でき、そのツールバーはペインまたはタブが開かれている場合に表示されます。図8-33に、File ExplorerアプリケーションのshowDetailItemコンポーネントで使用されているツールバーを示します。
すべてのタブを表示できない場合、panelTabbedコンポーネントでもオーバーフロー・アイコンがサポートされています。図8-34に、File Explorerアプリケーションのオーバーフロー・アイコンを示します。
panelAccordionおよびpanelTabbedコンポーネントのどちらも拡大可能ですが、showDetailItemコンポーネントはデフォルトで子コンポーネントを拡大しません。ただし、showDetailItemコンポーネントの子が1つのみである場合は、その子を拡大できます。そのため、拡大されたpanelAccordionまたはpanelTabbedコンポーネントに合せてshowDetailItemコンポーネントのコンテンツを拡大する場合は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」の説明に従って、特定の属性を明示的に設定する必要があります。
panelAccordionコンポーネントは、ページ内（一般的にはページの異なる領域）に複数使用することや、ネストさせることができます。panelAccordionコンポーネントを追加したら、一連のshowDetailItemコンポーネントを挿入してペインを作成します。各ペインにはshowDetailItemを1つ使用します。その後、各showDetailItemにコンポーネントを挿入して、ペイン・コンテンツを配置します。showDetailItemコンポーネントの使用手順は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelAccordionコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・アコーディオン」をドラッグ・アンド・ドロップして、panelAccordionコンポーネントを作成します。
|
ヒント: レイアウト・コンポーネントは、コンポーネント・パレットの「レイアウト」アコーディオン・ペインに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開きます。
ユーザーが同時に複数のペインのコンテンツを開いて参照できるようにする場合は、discloseMany属性をtrueに設定します。
discloseManyは、デフォルトでfalseです。これは、一度に開くことのできるペインが1つのみであることを意味します。たとえば、最初にページがロードされた際に、開いているペインAと閉じているペインBが1つずつあるとします。一度に開くことのできるペインは1つのみであるため、ユーザーがペインBを開くとペインAが閉じます。
ユーザーがすべてのペインを閉じることができるようにする場合は、discloseNone属性をtrueに設定します。
discloseNoneは、デフォルトでfalseです。これは、必ず1つのペインが開かれたままになることを意味します。
デフォルトで、panelAccordionコンポーネントの子コンポーネントとしてshowDetailItemコンポーネントを使用すると、ペインが1つ追加されます。さらにペインを追加するには、panelAccordionコンポーネントにshowDetailItemコンポーネントを挿入します。必要な数だけペインを追加できます。実行時にペインが表示される順番は、showDetailItemコンポーネントがページに追加される順序と同じです。
|
ヒント: 通常はアコーディオン・パネルの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、アコーディオン・パネルにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
ペインに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。手順は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
panelTabbedコンポーネントを使用してタブ付きのペインを作成する方法は、panelAccordionコンポーネントを使用したアコーディオン・ペインの作成方法に似ています。panelTabbedコンポーネントを追加した後に、一連のshowDetailItemコンポーネントを挿入して、表示するタブ付きのペイン・コンテンツを配置します。
panelTabbedコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・タブ」をドラッグ・アンド・ドロップして、panelTabbedコンポーネントを作成します。
|
ヒント: レイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
表示領域のコンテンツの下にタブをレンダリングする場合は、position属性をbelowに設定します。
positionは、デフォルトでaboveです。これは、タブが表示領域のコンテンツの上にレンダリングされることを意味します。使用できるその他の値はbothで、この場合、タブは表示領域の上と下にレンダリングされます。
ユーザーがタブを閉じられる（削除できる）ようにするには、「その他」セクションを開いて、tabRemoval属性を設定します。この属性を設定して、すべてのタブの削除、または最後のタブを除くすべてのタブの削除を許可できます。実際に削除するにはハンドラを実装し、関連するshowDetailItemコンポーネントのリスナーを構成する必要があります。詳細は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
デフォルトで、panelTabbedコンポーネントの子としてshowDetailItemコンポーネントを使用すると、タブ付きペインが1つ追加されます。さらにペインを追加するには、panelTabbedコンポーネントにshowDetailItemコンポーネントを挿入します。必要な数だけタブ付きのペインを追加できます。
|
ヒント: 通常はpanelTabbedコンポーネントの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、panelTabbedコンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
ペインに表示するコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。showDetailItemの使用方法の詳細は、8.9.3項「panelAccordionまたはpanelTabbedコンポーネントにコンテンツを表示するためのshowDetailItemコンポーネントの使用方法」を参照してください。
showDetailItemコンポーネントは、panelAccordionまたはpanelTabbedコンポーネントにのみ挿入します。各showDetailItemコンポーネントは、各アコーディオン・ペインまたはタブ付きペインに対応します。一般的に、親コンポーネントに2つ以上のshowDetailItemコンポーネントを挿入します。表示する子コンポーネントをshowDetailItemコンポーネントに挿入します。
showDetailItemコンポーネントのdisclosed属性では、対応するアコーディオン・ペインまたはタブのコンテンツを表示（開いた状態）または非表示（閉じた状態）のどちらにするかを指定します。デフォルトではdisclosed属性はfalseで、コンテンツは非表示（閉じた状態）になります。この属性がtrueに設定されていると、コンテンツは表示（開いた状態）されます。コンテンツが開いた状態と閉じた状態を相互に切り替えるためにコードを記述する必要はありません。切替えは、ADF Facesにより自動的に処理されます。
次の手順では、8.9.1項「panelAccordionコンポーネントの使用方法」および8.9.2項「panelTabbedコンポーネントの使用方法」の説明に従って、JSFページにpanelAccordionまたはpanelTabbedコンポーネントをそれぞれ追加済であると仮定しています。
showDetailItemコンポーネントを使用してアコーディオン・ペインまたはタブ付きペインのコンテンツを追加する手順:
まだ実行していない場合は、コンポーネント・パレットからshowDetailItemコンポーネントをドラッグ・アンド・ドロップし、panelAccordionまたはpanelTabbedなどの親コンポーネントに、showDetailItemコンポーネントを1つ以上挿入します。
プロパティ・インスペクタで、「外観」セクションを開きます。
ラベルの前にアイコンを追加するには、icon属性を、使用するイメージ・ファイルのURIに設定します。
showDetailItemコンポーネントがpanelAccordionコンポーネントに使用され、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により近くのコンテンツが自動的にオーバーフロー・メニューに移動されます（図8-32を参照）。また、ペインのflex値がゼロ以外の場合は、その値が、その他のペインがオーバーフロー・メニューに移動する前に、ペインが縮小される最低の高さになります。
stretchChildren: firstに設定されている場合、単一の子コンポーネントが拡大されます。ただし、拡大できる子コンポーネントであることが必要です。詳細は、8.9.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
たとえば、File Explorerアプリケーションでは、showDetailItemコンポーネントを使用してナビゲータ・ペインにコンテンツが表示されています。両方のナビゲータが開かれている場合「検索」ナビゲータにはより多くの領域が必要なため、flex属性は2に設定され、「フォルダ」ナビゲータのshowDetailItemコンポーネントにはデフォルトのflex値1が使用されています。この設定により、「検索」ナビゲータが開かれている場合は、「フォルダ」ナビゲータより大きくなります。
|
注意: File Explorerアプリケーションでは、flex属性に直接値を設定するかわりに、値の決定に使用されるメソッドに解決されるEL式が使用されています。EL式を使用すると、メタデータを使用してモデル情報を指定することを後から決めた場合に、プログラムで値を変更できます。 |
ユーザーは、実行時にペインの高さを変更できます。その結果、flex属性およびinflexibleHeight属性の値が変更されます。それらの値は、ユーザーのセッション中に変わらないように永続させることができます。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
フレキシブルなアコーディオン・ペイン・コンテンツに関する次の追加情報に注意してください。
ADF Facesでフレキシブルなコンテンツを有効にするには、flex値が0より大きいペイン（showDetailItemコンポーネント）が2つ以上必要です。これは、ADF Facesでは、ペイン・コンテンツにどのくらいの領域を割り当てるかの決定に、2つのコンポーネントのflexの割合が使用されているためです。実行時、フレキシブルなコンテンツの表示の結果を確認するには、2つ以上のペインが開かれている必要があります。
showDetailItemコンポーネントの子コンポーネントが1つのみでflex値がゼロ以外の場合、かつstretchChildren属性がfirstに設定されている場合、ADF Facesにより、panelAccordionコンポーネントのdiscloseMany属性の値にかかわらずその子コンポーネントが拡大されます。
showDetailItemコンポーネントのflex値がすべて0（ゼロ）で、そのペイン・コンテンツが開かれている場合、開かれているコンテンツがinflexibleに設定されていても、最後に開かれたshowDetailItemコンポーネントのコンテンツは、flex値が1に設定されているかのように拡大されます。ただし、これが行われるのはshowDetailItemコンポーネントの子が1つのみで、stretchChildren属性がfirstに設定されている場合のみです。最後に開かれたペインに複数の子コンポーネントがあるか、stretchChildren属性がnoneに設定されている場合、コンテンツは拡大されません。
flex属性が設定されていても、ジオメトリ管理に関する制限事項があります。詳細は、8.9.4項「ジオメトリ管理およびshowDetailItemコンポーネントについて」を参照してください。
「動作」セクションを開きます。disclosureListener属性を、ユーザーがこのペインまたはタブを選択した場合に実行するバッキングBeanのdisclosureListenerメソッドに設定します。
サーバーの表示イベントおよびイベント・リスナーの詳細は、8.8.4項「表示イベントについて」を参照してください。
このペインまたはタブを無効（ユーザーがペインまたはタブを選択できない状態）にする場合は、disabled属性をtrueに設定します。
ペインまたはタブの子コンポーネントを表示する場合は、disclosed属性をtrueに設定します。
disclosed属性は、デフォルトでfalseに設定されています。これは、このペインまたはタブのコンテンツが非表示になることを意味します。
|
注意: disclosedとrendered属性の違いに注意してください。rendered属性の値がfalseの場合、ユーザーはそのアコーディオン・ヘッダー・バーまたはタブ・リンク、およびその対応するコンテンツを使用できません。ただし、disclosed属性がfalseに設定されている場合は、その項目のコンテンツが現在は非表示でも、アコーディオン・ヘッダー・バーまたはタブ・リンクが表示されているため、ユーザーは表示することが可能です。 |
disclosed属性がtrueに設定されているshowDetailItemコンポーネントがない場合は、ADF Facesにより、最初に有効にされたshowDetailItemコンポーネントのコンテンツが自動的に表示されます（panelAccordionコンポーネントの子で、表示されないペインの設定が行われている場合を除きます）。
|
注意: コンテンツを表示または非表示にすることで、ユーザーはdisclosed属性の値を変更できますが、ユーザーがカスタマイズできるようにアプリケーションが構成されていないかぎり、ユーザーがページを終了するとその値は保持されません。詳細は、第31章「JSFページでのユーザー・カスタマイズの許可」を参照してください。 |
panelTabbedコンポーネントのタブを削除できるようにする場合、「その他」セクションを開き、itemListener属性を、コンポーネントの実際の削除を行うハンドラ・メソッドに解決するEL式に設定します。
panelAccordionコンポーネントのみでサポートされているペインにツールバー・ボタンを追加するには、そのペインを定義するshowDetailItemコンポーネントのtoolbarファセットにtoolbarコンポーネントを挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarファセットがshowDetailItemコンポーネントにある場合でも、ツールバーおよびボタンをレンダリングするのはpanelAccordionコンポーネントです。toolbarおよびcommandToolbarButtonの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
注意: アコーディオン・ペインが閉じている場合、ツールバーおよびそのボタンは表示されません。ツールバーおよびそのボタンは、ペインが開かれている場合にのみ、ペイン・ヘッダーに表示されます。 |
ペインにコンテンツを追加するには、必要な子コンポーネントを各showDetailItemコンポーネントに挿入します。
panelAccordionまたはpanelTabbedコンポーネントは、子コンポーネントの拡大にジオメトリ管理を使用するコンポーネントに配置された場合、どちらも拡大されます。ただし、panelAccordionコンポーネントでは、showDetailItemコンポーネントが拡大されるのは、panelAccordionコンポーネントのdiscloseMany属性がtrueに設定されている場合（つまり、フレキシブルでないコンテンツまたはフレキシブルなコンテンツを表示するために複数のペインが開かれる場合）、showDetailItemコンポーネントに含まれる子コンポーネントが1つのみの場合、およびshowDetailItemコンポーネントのstretchChildren属性がfirstに設定されている場合のみです。デフォルトでは、ペイン・コンテンツは拡大されません。次のような場合にはshowDetailItemコンポーネントが拡大されます。
含まれる子が1つのみの場合
stretchChildren属性がfirstに設定されている場合
子に幅、高さ、境界およびパディングが設定されていない場合
子が拡大可能である場合
前述の項目がすべてtrueの場合、showDetailItemコンポーネントは子コンポーネントを拡大できます。次に、showDetailItemコンポーネント内で拡大可能なコンポーネントを示します。
decorativeBox
panelAccordion
panelBox
panelCollection
panelDashboard
panelGroupLayout（layout属性がscrollまたはverticalに設定されている場合のみ）
panelSplitter
panelStretchLayout
panelTabbed
region
table
tree
treeTable
showDetailItemコンポーネント内に配置した場合、次のコンポーネントは拡大されません。
panelBorderLayout
panelFormLayout
panelGroupLayout（layout属性がdefaultまたはhorizontalに設定されている場合のみ）
panelHeader
panelLabelAndMessage
panelList
tableLayout（MyFaces Trinidadコンポーネント）
拡大できないコンポーネントを、子コンポーネントを拡大するコンポーネントの子として配置することはできません。そのため、showDetailItemコンポーネントの子として拡大できないコンポーネントのいずれかを配置する必要がある場合は、子コンポーネントを拡大しない別のコンポーネントでそのコンポーネントをラップする必要があります。
たとえば、panelListコンポーネントにコンテンツを配置し、showDetailItemコンポーネント内に表示されるようにする場合は、layout属性がscrollに設定されているpanelGroupLayoutコンポーネントをshowDetailItemコンポーネントの子として配置し、panelListコンポーネントをそのコンポーネントに配置します。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
panelAccordionおよびpanelTabbedコンポーネント内のshowDetailItemコンポーネントでは表示イベントのキューイングがサポートされるため、サーバーおよびクライアントで検証が適切に処理されます。
一般的に、disclosed属性が設定されているコンポーネントの場合、クライアントのAdfDisclosureEventのイベント・ルートはデフォルトでイベント・ソース・コンポーネントに設定されており、disclosed属性がtrueのペインに対するイベントのみがサーバーに送信されます。ただし、panelTabbedまたはpanelAccordionコンポーネント内に使用されているshowDetailItemコンポーネントの場合、イベント・ルートはpanelTabbedまたはpanelAccordionコンポーネントです（つまり、イベント・ソースの親コンポーネントではなく、イベント・ソース・コンポーネントです）。このため、前に開かれたペインの値はサーバーに送信されません。
たとえば、panelTabbedまたはpanelAccordionコンポーネント内にshowDetailItemコンポーネントが2つあり、discloseMany属性がfalseに、discloseNone属性がfalseに設定されているとします。showDetailItem 1コンポーネントは開かれ、showDetailItem 2は開かれていないとします。このシナリオでは次のようになります。
クライアント:
ユーザーがクリックしてshowDetailItem 2を開くと、クライアントのみの表示イベントが開始され、showDetailItem 1コンポーネントのdisclosed属性がfalseに設定されます。この最初のイベントが取り消されなければ、別のクライアントの表示イベントが開始され、showDetailItem 2コンポーネントのdisclosed属性がtrueに設定されます。この2番目のイベントが取り消されない場合、このイベントはサーバーに送信されます。取り消された場合、表示は変更されません。
サーバー:
サーバーの表示イベントが開始され、showDetailItem 2コンポーネントのdisclosed属性がtrueに設定されます。この最初のサーバー・イベントが取り消されなければ、別のサーバーの表示イベントが開始され、showDetailItem 1コンポーネントのdisclosed属性がfalseに設定されます。どちらのサーバー・イベントも取り消されない場合は、その新しい状態がレンダリングされ、ユーザーはクライアントで新しく開いた状態を確認できます。取り消された場合、クライアントの外観は以前と変わりません。
discloseMany属性がfalseに、discloseNone属性がtrueに設定されているpanelAccordionコンポーネントの場合、この情報が当てはまるのは、表示の変更が両方の変更を強制する場合（2つの表示状態が関連する場合）のみです。表示の変更が片方のみの場合、クライアントとサーバーの表示イベントは1つずつです。
discloseMany属性がtrue（および任意のdiscloseNone設定）に設定されているpanelAccordionの場合、実行される表示の変更は1つのみで、クライアントとサーバーの表示イベントは1つずつです。
表示イベントの詳細は、8.8.4項「表示イベントについて」を参照してください。
panelHeaderコンポーネントは、メッセージの表示や関連するヘルプ・トピックなどのヘッダー・タイプ機能が必要な場合に使用できますが、コンテンツの表示および非表示機能を指定する必要はありません。
panelHeaderコンポーネントには、特定タイプのコンポーネント用のファセットや、ヘッダーからヘルプ・トピックを起動する機能があります。次に、panelHeaderコンポーネントでサポートされているファセットを示します。
context: ヘッダーのヘッダー・テキストの横に情報を表示します。
help: ヘルプ情報を表示します。下位互換性が必要な場合にのみ使用します。かわりに、panelHeaderコンポーネントではhelpTopicId属性を使用します。
info: ヘッダー・テキストの下に情報を表示します。右揃えになります。
legend: ヘルプ・テキストが存在する場合は、ヘルプ・コンテンツの左側でinfoファセットのコンテンツの下に情報が表示されます。ヘルプ・テキストが存在しない場合、legendコンテンツはヘッダーの下に直接レンダリングされます。
toolbar: メニュー・バーの前にツールバーを表示します。
menuBar: ツールバーの後ろにメニュー・バーを表示します。
図8-35に、panelHeaderコンポーネントの様々なファセットを示します。
セクションの階層を表すようにpanelHeadersコンポーネントを構成できます。たとえば、図8-36に示されているように、サブヘッダーのあるメイン・ヘッダーおよびサブヘッダーのあるヘッダー・レベル1を表示できます。
それぞれにpanelHeaderコンポーネントをネストさせてサブセクションを作成します。panelHeaderコンポーネントをネストさせると、階層に応じてヘッダー・テキストが自動的にサイズ調整され、一番外側のpanelHeaderコンポーネントのテキストが最も大きくなります。
|
注意: テキストのスタイルはsize属性を使用して強制できますが（最大のテキストが0の場合）、size属性の値は階層には影響しません。影響を受けるのはテキストのスタイルのみです。 |
panelHeaderコンポーネントを1つ使用して特定の情報を指定することも、一連のpanelHeaderコンポーネントをネストさせてコンテンツの階層組織を作成することもできます。コンテンツを表示および非表示にできるようにする場合は、かわりにshowDetailHeaderコンポーネントを使用します。詳細は、8.8.2項「showDetailHeaderコンポーネントの使用方法」を参照してください。
panelHeaderコンポーネントを作成および使用する手順:
コンポーネント・パレットから「パネル・ヘッダー」をドラッグ・アンド・ドロップして、panelHeaderコンポーネントを作成します。
プロパティ・インスペクタで、「外観」セクションを開きます。
ラベルの前にアイコンを追加するには、icon属性を、使用するイメージ・ファイルのURIに設定します。
特定のメッセージ情報の表示にヘッダーを使用している場合は、messageType属性を次のいずれかの値に設定します。
error: 指定されたアイコン・イメージがエラー・アイコン（中にxがある赤い丸）に置き換えられます。ヘッダー・ラベルも赤に変わります。
warning: 指定されたアイコン・イメージが警告アイコン（中に感嘆符がある黄色の三角）に置き換えられます。
info: 指定されたアイコン・イメージが情報アイコン（中にIがある青い丸）に置き換えられます。
confirmation: 指定されたアイコン・イメージが確認アイコン（上に緑のチェックマークが表示されたメモ・ページ）に置き換えられます。
none: デフォルト。アイコンは表示されません。
図8-37に、様々なメッセージ・タイプに使用されるアイコンを示します。
ヘッダーにヘルプを表示するには、helpTopicId属性にトピックIDを入力します。ヘルプ・トピックの作成および使用方法の詳細は、17.5項「コンポーネントへのヘルプの表示」を参照してください。
ペインにツールバー・ボタンを追加するには、toolbarコンポーネントをtoolbarファセットに挿入します。その後、toolbarコンポーネントに、必要な数のcommandToolbarButtonコンポーネントを挿入します。toolbarおよびcommandToolbarButtonの使用方法の詳細は、14.3項「ツールバーの使用方法」を参照してください。
|
注意: panelHeaderコンポーネントでは、ツールバーのオーバーフローはサポートされていません。 |
ペインにメニューを追加するには、menuBarファセットにmenuコンポーネントを挿入します。メニュー・バーへのメニュー作成の詳細は、14.2項「メニュー・バーでのメニューの使用方法」を参照してください。
|
ヒント: toolbarファセットにメニューを配置することも、menuファセットにツールバー（およびツールボックス）を配置することも可能です。これらのファセットの主な違いは場所です。toolbarファセットはmenuファセットの前に配置されます。 |
必要に応じて、その他のファセットにコンテンツを追加します。
|
ヒント: ビジュアル・エディタに表示されないファセットがある場合は、次のようにします。
|
ペインにコンテンツを追加するには、必要な子コンポーネントをpanelHeaderコンポーネントに挿入します。
panelListコンポーネントは、図8-38に示されているように、それぞれの隣に黒丸が付いた子コンポーネントの垂直のリストを表示するためのレイアウト要素です。rendered属性がtrueに設定されている子コンポーネント、およびvisible属性がtrueに設定されている子コンポーネントのみが、リストの順で表示の対象となります。
|
注意: 動的データ（JSFバインディングによって実行時に決定されたデータのリストなど）を表示する必要がある場合は、9.6項「選択コンポーネントの使用」の説明に従って、選択コンポーネントを使用します。モデル・レイヤーを変更するリストを作成する必要がある場合は、第11章「値リスト・コンポーネントの使用方法」を参照してください。 |
デフォルトで、黒丸は子コンポーネントのスタイルの設定に使用されます。四角や白丸など、使用できるスタイルは他にもあります。表示する項目のリストが非常に長い場合は、リストを列に分割することもできます。
項目のリストを1つ作成するには、panelListコンポーネントを1つ使用します。
コンポーネント・パレットからJSFページに「パネル・リスト」をドラッグ・アンド・ドロップして、panelListコンポーネントを作成します。
|
ヒント: すべてのレイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開き、listStyle属性を、次のような有効なCSS 2.1のリスト・スタイル値のいずれかに設定します。
list-style-type: disc
list-style-type: square
list-style-type: circle
list-style-type: lower-alpha
list-style-type: upper-alpha
たとえば、list-style-type: disc属性の値は黒丸に対応し、list-style-type: circle値は白丸に対応します。
使用する有効なスタイル値の完全なリストは、次のサイトにある生成されたリストに関するCSS 2.1の仕様を参照してください。
http://www.w3.org/TR/CSS21/generate.html
例8-13に、リストのスタイルをcircleに設定するコードを示します。
panelListコンポーネントに（箇条書き項目として表示する）必要な数の子コンポーネントを挿入します。
|
ヒント: 通常はパネル・リストの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、パネル・リストにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
たとえば、一連のcommandLinkコンポーネントまたはoutputFormattedコンポーネントを挿入できます。
|
注意: ADF Facesでは、デフォルトで、panelListコンポーネントのレンダリングされたすべての子コンポーネントは単一の列に表示されます。リストを2列以上に分割する方法、およびrowsとmaxColumns属性の使用方法の詳細は、8.6項「フォームでのコンテンツの配置」を参照してください。panelListおよびpanelFormLayoutコンポーネントにおける縦表示でのrowsとmaxColumns属性の使用方法は同じです。 |
panelListコンポーネントをネストさせて、リスト階層を作成できます。図8-39に示されているように、リスト階層には外部項目と内部項目があり、外部項目に属する内部項目は外部項目の下にインデント表示されます。内部項目の各グループは、ネストした単一のpanelListコンポーネントによって作成されます。
図8-39のようなリスト階層を作成するには、groupコンポーネントを使用して、外部項目とその内部項目の各グループを構成するコンポーネントをラップします。例8-14に、4つの内部項目を持つ外部項目が1つと、2つの内部項目を持つ別の外部項目があるリスト階層の作成方法に関するコードを示します。
例8-14 ネストしたpanelListコンポーネント
<af:panelList>
<!-- First outer item and its four inner items -->
<af:group>
<af:commandLink text="item 1"/>
<af:panelList>
<af:commandLink text="item 1.1"/>
<af:commandLink text="item 1.2"/>
<af:commandLink text="item 1.3"/>
<af:commandLink text="item 1.4"/>
</af:panelList>
</af:group>
<!-- Second outer item and its two inner items -->
<af:group>
<af:commandLink text="item 2"/>
<af:panelList>
<af:commandLink text="item 2.1"/>
<af:commandLink text="item 2.2"/>
</af:panelList>
</af:group>
</af:panelList>
デフォルトで、外部リスト項目（item 1およびitem 2など）は黒丸の箇条書きスタイルで、内部リスト項目（item 1.1およびitem 2.1など）は白丸の箇条書きスタイルで表示されます。
panelGroupLayoutコンポーネントの詳細は、8.12項「関連する項目のグループ化」を参照してください。
親コンポーネント内で類似の項目をまとめる必要がある場合は、groupまたはpanelGroupLayoutコンポーネントを使用します。groupコンポーネントは、意味的に関連する子コンポーネントを集約またはグループ化します。panelGroupLayoutコンポーネントとは異なり、groupコンポーネントでは子コンポーネントをレイアウトできません。単独で使用した場合、groupコンポーネントでは何もレンダリングされません。groupコンポーネント内の子コンポーネントのみが実行時にレンダリングされます。
関連するコンポーネントのグループ化には、任意の数のgroupコンポーネントを使用できます。たとえば、panelFormLayoutコンポーネントによって作成されたフォーム・レイアウト内のいくつかの入力フィールドをグループ化するとします。例8-15に、panelFormLayoutコンポーネント内の2セットの子コンポーネントをグループ化するサンプル・コードを示します。
例8-15 panelFormLayoutの子コンポーネントのグループ化
<af:panelFormLayout>
<af:inputDate label="Pick a date"/>
<!-- first group -->
<af:group>
<af:selectManyCheckbox label="Select all that apply">
<af:selectItem label="Coffee" value="1"/>
<af:selectItem label="Cream" value="1"/>
<af:selectItem label="Low-fat Milk" value="1"/>
<af:selectItem label="Sugar" value="1"/>
<af:selectItem label="Sweetener"/>
</af:selectManyCheckbox>
<af:inputText label="Special instructions" rows="3"/>
</af:group>
<!-- Second group -->
<af:group>
<af:inputFile label="File to upload"/>
<af:inputText label="Enter passcode"/>
</af:group>
<af:inputText label="Comments" rows="3"/>
<af:spacer width="10" height="15"/>
<f:facet name="footer"/>
</af:panelFormLayout>
panelGroupLayoutコンポーネントを使用すると、図8-40に示すように、折り返さずに一連の子コンポーネントを縦または横に配置することも、折り返して続けて配置することもできます。layout属性の値により子コンポーネントの配置が決定されます。
すべての配置において、panelGroupLayoutコンポーネントのseparatorファセットを使用して、隣接する子コンポーネントの各ペアを線または空白で区切ることができます。詳細は、8.13項「空白または線を使用したコンテンツの分割」を参照してください。
横のレイアウトを使用する場合は、子コンポーネントを縦または横に並べることもできます。図8-41に示すように、上部の位置を合せて、高いコンポーネントの隣に低いコンポーネントを作成できます。
panelSplitterまたはpanelStretchLayoutコンポーネントとは異なり、panelGroupLayoutコンポーネントでは子コンポーネントは拡大されません。ページのルート・コンポーネントとしてpanelSplitterまたはpanelStretchLayoutコンポーネントを使用し、配置するが拡大しない子コンポーネントが多数あるとします。子コンポーネントを配置する際にスクロールバーを表示するには、layout属性がscrollに設定されたpanelGroupLayoutコンポーネントで子コンポーネントをラップし、そのpanelGroupLayoutコンポーネントをpanelSplitterまたはpanelStretchLayoutコンポーネントのファセットに配置します。
panelGroupLayoutコンポーネントでlayout属性がscrollに設定されていて、panelGroupLayoutコンポーネントに含まれているコンテンツがpanelGroupLayoutコンポーネント自体より大きい場合、ADF Facesでは、実行時に自動的にスクロールバーが表示されます。スクロールバーを有効にするコードを記述する必要も、オーバーフローを制御するインライン・スタイルを設定する必要もありません。
たとえば、ユーザーによる子コンポーネントのコンテンツの表示や非表示を可能にするpanelSplitterコンポーネントなどのレイアウト・コンポーネントを使用する際には、コンテンツが表示された場合にスクロールバーを表示するためのコードや、コンテンツが非表示にされた場合にスクロールバーを非表示にするためのコードを記述する必要はありません。表示するコンテンツを単純にpanelGroupLayoutコンポーネントにラップし、layout属性をscrollに設定します。
File Explorerアプリケーションには、検索条件を表示および非表示にするために使用されるpanelSplitterコンポーネントが含まれています。検索条件が非表示で、検索結果が領域に収まらない場合は、図8-42に示すようにスクロールバーがレンダリングされます。
panelGroupLayoutコンポーネントは、必要なレイアウトにするためにいくつでもネストさせることができます。
panelGroupLayoutコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「パネル・グループ・レイアウト」をドラッグ・アンド・ドロップして、panelGroupLayoutコンポーネントを作成します。
|
ヒント: レイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
panelGroupLayoutコンポーネントに必要な子コンポーネントを挿入します。
|
ヒント: 通常はpanelGroupLayoutコンポーネントの直接の子コンポーネントである子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、panelGroupLayoutコンポーネントにもこれらのコンポーネントを直接の子コンポーネントとして使用できます。 |
隣接する子コンポーネントの間に間隔または区切り線を追加するには、separatorファセットにspacerまたはseparatorコンポーネントを挿入します。
プロパティ・インスペクタで、「外観」セクションを開きます。子コンポーネントを希望のレイアウトに配置するには、layout属性を次のいずれかの値に設定します。
vertical: 縦のレイアウトになり、子コンポーネントは縦に並べられます。
scroll: 縦のレイアウトになり、子コンポーネントは縦に並べられ、必要な場合には縦のスクロールバーが表示されます。
default: 折り返された連続のレイアウトです。
実行時、コンテンツがブラウザの使用可能な領域を超えると（子コンポーネントが親コンテナであるpanelGrouplayoutの幅より大きい場合）、すべての子コンポーネントが表示されるよう、ブラウザによりコンテンツが次の行に配置されます。
|
注意: ADF Facesでは、コンテンツの配置時に双方向のアルゴリズムが使用されます。右から左のコンテンツおよび左から右のコンテンツが混在し、コンテンツが連続して配置されない場合があります。 |
horizontal: 横のレイアウトになり、子コンポーネントは横に並べられます。コンテンツがブラウザの使用可能な領域を超えても折り返されません。
横のレイアウトでは、子コンポーネントを縦に並べることも横に並べることもできます。デフォルトで、horizontalの子コンポーネントは架空の水平線と垂直線を基準にしてそれぞれの中央に配置されます。horizontalコンポーネントの横および縦の配置を変更するには、次の属性を使用します。
halign: 横の配置を設定します。デフォルトは、centerです。使用できるその他の値はstart、end、left、rightです。
たとえば、言語の読み方向が左から右の場合にhorizontalの子コンポーネントを常に左揃えにし、読み方向が右から左の場合には右揃えにするには、halignをstartに設定します。
valign: 縦の配置を設定します。デフォルトはmiddleです。使用できるその他の値はtop、bottom、baselineです。
テキストのフォント・サイズを変更した出力テキスト・コンポーネント（outputTextなど）で、valignをbaselineに設定すると、図8-43に示されているように、文字が配置されている架空の線に沿ってテキストの文字が並べられます。そのようなテキスト・コンポーネントでvalignをbottomに設定した場合、bottomの縦の配列ではすべての文字の一番下の部分が同じ架空の線上に配置されるため、結果は見栄えのよい外観にはなりません。
|
注意: layoutがhorizontalではない場合、halignおよびvalign属性は無視されます。 |
コンポーネント間に一定の間隔を設けるために、ページに空白を組み込むことができます。これにより、すべてのコンポーネントが互いに前後左右に近接しているよりも、ページは乱雑に見えなくなります。spacerコンポーネントは、特にこの目的のために用意されたADF Facesコンポーネントです。
heightおよびwidth属性を使用して、縦または横、あるいはその両方の空白をページに組み込むことができます。
height: ページに組み込む縦の空白の量を決定する属性。例8-16に、縦の空白を使用して、2つの長いoutputTextコンポーネントの間に一定の間隔を設けるよう設定されたページを示します。
例8-16 縦の空白
<af:panelGroupLayout layout="vertical"> <af:outputText value="This is a long piece of text for this page..."/> <af:spacer height="10"/> <af:outputText value="This is some more lengthy text ..."/> </af:panelGroupLayout>
図8-44に、ブラウザで表示した場合に、spacerコンポーネントがページ出力に及ぼす影響を示します。
width属性は、コンポーネント間に組み込む横の空白の量を決定します。例8-17に、2つのコンポーネントの間に横方向の間隔を設けるよう設定されたページのソースの一部を示します。
例8-17 横の空白
<af:outputLabel value="Your credit rating is currently:"/> <af:spacer width="10"/> <af:outputText value="Level 8"/>
図8-45に、ブラウザで表示した場合の、横方向の間隔調整コンポーネントの影響を示します。
separatorコンポーネントを使用すると横線を作成できます。図8-46に、2つのpanelBoxコンポーネント間にseparatorコンポーネントを挿入した場合のproperties.jspxファイルの外観を示します。
通常、spacerおよびseparatorコンポーネントは、その他のレイアウト・コンポーネントのファセットに使用します。これにより、分割するコンポーネントに空白または線が表示されます。
ページには、必要な数だけspacerコンポーネントを使用できます。
spacerコンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページにスペーサをドラッグ・アンド・ドロップして、spacerコンポーネントを作成します。
|
ヒント: レイアウト・コンポーネントは、コンポーネント・パレットのレイアウト・セクションに表示されます。 |
プロパティ・インスペクタで、「共通」セクションを開きます。必要に応じて幅と高さを設定します。
|
注意: 高さが指定されていて幅が指定されていない場合、ブロック・レベルのHTML要素がレンダリングされ、その近くに新しい行が表示されます。幅が指定されている場合、指定されている高さの値に関係なく、HTML標準を厳密にサポートするユーザー・エージェントに適用可能な行の高さより低くなりません。 |
