20 ページでのレイアウト・コンポーネントの使用

この章では、ページ・インフラストラクチャをサポートするものの、リソース・カタログでは使用できないレイアウト・コンポーネントのタイプについて説明します。これらのコンポーネントは、ページ編集モードのソース・ビューで公開されます。

• 第20.1項「レイアウト・コンポーネントの基本」

• 第20.2項「panelGroupLayoutプロパティの設定」

• 第20.3項「panelStretchLayoutプロパティの設定」

• 第20.4項「panelTabbedプロパティの設定」

• 第20.5項「showDetailFrameプロパティの設定」

• 第20.6項「sidebarItemプロパティの設定」

• 第20.7項「spacer/セパレータ・プロパティの設定」

対象読者

この章は、アプリケーションレベルの権限であるPages: Create, Edit, and Delete Pagesまたはスペースレベルの権限であるBasic Services: Edit Page Access, Structure, and Contentを付与されたユーザーが対象となっています。

アプリケーション管理者には、アプリケーション・リソースを公開または非表示にする権限や、デフォルトの権限を変更する権限があります。この章で説明するタスクは、関連するリソースが非表示の場合や、そのタスクの実行権限がない場合には使用できません。

20.1 レイアウト・コンポーネントの基本

一部のページ・レイアウト・コンポーネントは、リソース・カタログでの使用のために公開されていません。それらは、ページのコンポーネントに関連付けられており、ソース・ビューでページを編集する際に構成できます(図20-1)。

図20-1 ソース・ビューのレイアウト・コンポーネント

「図20-1 ソース・ビューのレイアウト・コンポーネント」の説明

表20-1は、ページ編集モードのソース・ビューに表示される可能性があるレイアウト・コンポーネントをリストして説明しています。

表20-1 レイアウト・コンポーネント

レイアウト・コンポーネント	説明
panelGroupLayout	一連の子コンポーネントを垂直方向または水平方向(折返しなし)に配置するか、あるいは連続して(折返しあり)配置できます。Layoutプロパティにより、子コンポーネントの配置を決定します。詳細は、第20.2項「panelGroupLayoutプロパティの設定」を参照してください。
panelStretchLayout	ページの定義された領域にコンテンツを配置できます。ブラウザのサイズ変更時にコンテンツをストレッチできるようにする場合に役に立ちます。詳細は、第20.3項「panelStretchLayoutプロパティの設定」を参照してください。
panelTabbed	タブ・セットの親コンポーネントです。詳細は、第20.4項「panelTabbedプロパティの設定」を参照してください。
showDetailFrame	ユーザーによる一部の操作の実行を可能にするアイコンを含む子コンポーネントおよびヘッダーの周囲に枠線、すなわちクロムをレンダリングします。これらには、コンポーネントをそのコンテンツとともにページの新しい場所に移動するオプションの付いたメニュー・アイコンが含まれます。showDetailFrameコンポーネントは、ページのpanelCustomizableコンポーネント間でドラッグ・アンド・ドロップできます。showDetailFrameは、その移動を可能にするためには、panelCustomizableコンポーネント内に含める必要があることに注意してください。 詳細は、第20.5項「showDetailFrameプロパティの設定」を参照してください。
sidebarItem	タブ・セット(panelTabbed)の子コンポーネントです。詳細は、第20.6項「sidebarItemプロパティの設定」を参照してください。
spacer	ページに空きスペースを組み込むことによって、すべてのコンポーネントが互いにすぐ隣やすぐ下に表示される場合より、すっきりとページを表示できます。詳細は、第20.7項「spacer/セパレータ・プロパティの設定」を参照してください。

20.2 panelGroupLayoutプロパティの設定

関連項目: ページ上のコンポーネントのプロパティへのアクセスおよびその設定の詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照してください。

panelGroupLayoutコンポーネントでは、一連の子コンポーネントを垂直方向または水平方向(折返しなし)に配置するか、あるいは連続して(折返しあり)配置できます。コンポーネントのLayoutプロパティにより、子コンポーネントの配置を決定します。

panelGroupLayoutコンポーネントのプロパティには、コンポーネント・コンテンツの非表示、表示および再配置用のオプションが付いた「子コンポーネント」タブがあります。詳細は、第18.6.5項「子コンポーネントの使用」を参照してください。

表20-2は、「コンポーネント・プロパティ」ダイアログの「表示オプション」タブに表示されたpanelGroupLayoutプロパティをリストして説明しています。

表20-2 panelGroupLayoutの表示オプション

プロパティ	説明
Halign	コンポーネント・コンテンツの水平位置合せを表す手段 次のいずれかを選択します。 start: コンテンツを開始位置から水平方向に揃えます。 この方向は、現在のコンテキストが左読みの言語に対してローカライズされているか、右読みの言語に対してローカライズされているかによって、左または右に指定されます。 center: コンテンツを中央から水平方向に揃えます。 end: コンテンツを終了位置から水平方向に揃えます。 この方向は、現在のコンテキストが左読みの言語に対してローカライズされているか、右読みの言語に対してローカライズされているかによって、右または左に指定されます。 left: コンテンツを左から水平方向に揃えます。 right: コンテンツを右から水平方向に揃えます。
Landmark	Web Accessibility Initiative for Accessible Rich Internet Applications(WAI-ARIA)で説明されているユーザー・アクセシビリティの向上のための手段各オプションは、コンテンツ領域の対象のロールについて説明し、ページのナビゲーション・ランドマークとしてその領域の使用を支援します。 スクリーン・リーダーおよびその他の支援テクノロジでは、ページ・ナビゲーション内でこれらのランドマークを使用できます。 次のオプションを選択して、コンテンツ領域のコンテンツのロールまたは目的を明確にします。 none: ページのナビゲーション・ランドマークの対象ではないコンテンツ領域 banner: ページ固有のコンテンツではなく、会社のロゴやポータル全体の検索機能など、主にサイト向けのコンテンツを含むコンテンツ領域 通常、バナーはページの上部に表示され、ページ幅いっぱいに広がります。 complementary: ページ上で類似したレベルのメイン・コンテンツを補うように設計されているものの、メイン・コンテンツから分離されても有効な、関連ドキュメントなどのサポート・コンテンツ contentinfo: 著作権情報、プライバシ情報など、アプリケーションに関する情報を含むコンテンツ領域 main: ページのメイン・コンテンツ領域 navigation: ページまたは関連ページをナビゲートするナビゲーション要素(通常はリンク)のコレクション search: 検索の定義または実行に使用する1つ以上のウィジェットを含むコンテンツ領域
Layout	コンポーネント・コンテンツの向きを指定する手段。次のいずれかを選択します。 default: コンテンツを垂直方向に揃えます。 horizontal: コンテンツを水平方向に揃えます。 vertical: コンテンツを垂直方向に揃えます。 scroll: コンテンツをスクロールバーを使用して垂直方向に揃えます。 スクロールバーは、コンポーネント・コンテンツの高さ/幅がコンポーネントの高さまたは幅を超えたときにレンダリングされます。
Short Desc	コンポーネントのALTテキストを入力するフィールド ALTテキストは、マウス・ポインタをコンポーネント上に置いた際にツールチップとして表示されます。
Show Component	ページ上のコンポーネントを表示または非表示にするオプション コンポーネントを選択して表示します。 コンポーネントを選択解除して非表示にします。 この方法でコンポーネントを非表示にすると、子コンポーネントもすべて非表示になります。コンポーザのソース・ビューではコンポーネントを再び表示できます。ソース・ビューで、非表示のコンポーネントを右クリックし、表示されるコンテキスト・メニューから「コンポーネントの表示」を選択します。
Theme	このコンポーネントの子に適用されるコンポーネント・スタイルのテーマです。このプロパティを使用すると、関連付けられたスキンを変更することなくテーマを変更できます。アプリケーション・スキンはテーマのソースです。一部のスキンにはテーマの定義がない場合もあります。 次のいずれかを入力します。 dark medium light デフォルトは、テーマなし(none)です。
Valign	コンポーネント・コンテンツの垂直位置合せを表す手段 次のいずれかを選択します。 middle: コンテンツを親コンポーネントの中央に揃えます。 top: コンテンツを親コンポーネントの上部に揃えます。 bottom: コンテンツを親コンポーネントの下部に揃えます。 baseline: コンテンツを親コンポーネントのベースラインに揃えます。

関連項目: 表示オプション・プロパティでは、式言語(EL)エディタにアクセスすることもできます。このエディタを使用すると、EL値の入力およびテストができます。詳細は、付録B「式言語(EL)式」を参照してください。

20.3 panelStretchLayoutプロパティの設定

関連項目: ページ上のコンポーネントのプロパティへのアクセスおよびその設定の詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照してください。

panelStretchLayoutコンポーネントでは、ページで定義された領域にコンテンツを配置できます。このコンポーネントは、ブラウザのサイズ変更時にコンテンツをストレッチできるようにする場合に役に立ちます。

panelStretchLayoutコンポーネントの定義された領域はファセット(図20-2)と呼ばれます。

図20-2 panelStretchLayoutコンポーネントのファセット

「図20-2 panelStretchLayoutコンポーネントのファセット」の説明

注意: 図20-2は、アプリケーションにおける言語の読みの方向が左から右に構成されている場合のファセットを示しています。言語の方向が右から左の場合は、開始ファセットと終了ファセットが入れ替わります。

ファセットは、「表示オプション」プロパティに入力する値によって制御します。上部ファセットおよび下部ファセットの高さを設定すると、その高さに合せて含まれるすべてのコンポーネントがストレッチされます。同様に、開始ファセットと終了ファセットの幅を設定すると、その幅に合せてファセット内に含まれるすべてのコンポーネントがストレッチされます。ファセットに配置されているコンポーネントがない場合は、ファセットはスペースを占有しません。

表20-3は、「コンポーネント・プロパティ」ダイアログの「表示オプション」タブに表示されるpanelStretchLayoutプロパティをリストして説明しています。

注意: panelStretchLayoutの高さファセットおよび幅ファセットはauto値を取りますが、autoを使用するとページ・パフォーマンスが低下します。

表20-3 panelStretchLayoutの表示オプション

プロパティ	説明
Bottom Height	下部ファセットの高さです。任意の標準的なCSS測定単位(pt、px、pc、liなど)を使用します。 Heightの値を割合で表示しないでください。ブラウザ間およびレイアウト・コンテナ間で違いがあるため、割合が予測したとおりに機能しません。コンポーネントでページの100%を占有する必要がある場合は、ストレッチ・ページ・スタイルを使用してページを作成し、コンポーネントをそのページに追加することを検討してください。
End Width	終了ファセットの幅です。任意の標準的なCSS測定単位(pt、px、pc、liなど)を使用します。
Short Desc	コンポーネントのツールチップ・テキストを入力するフィールド コンポーネント上にマウス・ポインタを移動すると、ツールチップが表示されます。
Show Component	ページ上のコンポーネントを表示または非表示にするオプション コンポーネントを選択して表示します。 コンポーネントを選択解除して非表示にします。 この方法でコンポーネントを非表示にすると、子コンポーネントもすべて非表示になります。コンポーザのソース・ビューではコンポーネントを再び表示できます。ソース・ビューで、非表示のコンポーネントを右クリックし、表示されるコンテキスト・メニューから「コンポーネントの表示」を選択します。
Start Width	開始ファセットの幅です。任意の標準的なCSS測定単位(pt、px、pc、liなど)を使用します。
Theme	このコンポーネントの子に適用されるコンポーネント・スタイルのテーマです。このプロパティを使用すると、関連付けられたスキンを変更することなくテーマを変更できます。アプリケーション・スキンはテーマのソースです。一部のスキンにはテーマの定義がない場合もあります。 次のいずれかを入力します。 dark medium light デフォルトは、テーマなし(none)です。
Top Height	上部ファセットの高さです。任意の標準的なCSS測定単位(pt、px、pc、liなど)を使用します。 Heightの値を割合で表示しないでください。ブラウザ間およびレイアウト・コンテナ間で違いがあるため、割合が予測したとおりに機能しません。コンポーネントでページの100%を占有する必要がある場合は、ストレッチ・ページ・スタイルを使用してページを作成し、コンポーネントをそのページに追加することを検討してください。

関連項目: 表示オプション・プロパティでは、式言語(EL)エディタにアクセスすることもできます。このエディタを使用すると、EL値の入力およびテストができます。詳細は、付録B「式言語(EL)式」を参照してください。

20.4 panelTabbedプロパティの設定

関連項目: ページ上のコンポーネントのプロパティへのアクセスおよびその設定の詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照してください。

panelTabbedレイアウト・コンポーネントはタブまたはタブ・セットの親コンポーネントです。その固有の表示オプション・セットにより、タブ作成の背後にあるメソッド、タブ・ディメンションのソース、タブの位置などを制御します。

表20-4は、panelTabbedレイアウト・コンポーネントに関連付けられた表示オプションをリストして説明しています。

表20-4 panelTabbedの表示オプション

プロパティ	説明
Child Creation	タブ・コンテンツをレンダリングするタイミングを指定します。 immediate: ページにアクセスするとすぐにすべてのタブ・コンテンツがレンダリングされます。 lazy: タブを前面に表示し、その後キャッシュに維持するときにタブ・コンテンツがレンダリングされます。これを選択すると、コンテンツをキャッシュからフェッチする際のパフォーマンスが強化されます。 lazyUncached: タブが前面に表示され、タブが前面にない場合は削除される可能性があるときにタブ・コンテンツがレンダリングされます。
Dimensions From	コンポーネントに適用されるディメンションのソースを指定します。 auto: panelTabbed親コンテナに応じて、parentまたはdisclosedChildのいずれかが指定されます。親のLayout属性がstretchに設定されている場合はparentが使用され、それ以外の場合はdisclosedChildが使用されます。 disclosedChild: 現在アクティブなタブからディメンションが取得されます。 parent(デフォルト): コンポーネント上の指定された値からディメンションを取得します。指定された値がない場合は、親から取得します。親に指定された値がない場合は、スキンから取得します。
Position	panelTabbedのタブ部分の位置 above(デフォルト): タブのコンテンツ領域の上にタブが表示されます。 below: タブのコンテンツ領域の下にタブが表示されます。 both: タブのコンテンツ領域の上と下にタブが表示されます。 アクセシビリティ・スクリーン・リーダー・モードでは、タブの位置は常にaboveです。
Short Desc	コンポーネントのツールチップ・テキストを入力するフィールド コンポーネント上にマウス・ポインタを移動すると、ツールチップが表示されます。
Show Component	ページ上のコンポーネントを表示または非表示にするオプション コンポーネントを選択して表示します。 コンポーネントを選択解除して非表示にします。 この方法でコンポーネントを非表示にすると、子コンポーネントもすべて非表示になります。コンポーザのソース・ビューではコンポーネントを再び表示できます。ソース・ビューで、非表示のコンポーネントを右クリックし、表示されるコンテキスト・メニューから「コンポーネントの表示」を選択します。
Tab Removal	一部のタブが削除可能なのか、すべてのタブが削除可能なのか、どのタブも削除可能ではないのかを指定します。 none: タブ・セットからタブを削除できません。 all: タブ・セットからすべてのタブを削除できます。 allExceptLast: 最後のタブ以外のすべてのタブをタブ・セットから削除できます。 注意: allExceptLastを選択すると、最後のタブ以外のすべてのタブにマウス・ポインタを置いた際に「閉じる」アイコンがレンダリングされます。「閉じる」アクションを実行可能にするには、panelTabbedコンポーネントに追加のコーディングが必要です。 開発者は、showDetailItemのitemListener属性に添付されているリスナーを使用してItemEventに応答するコードを記述する必要があります。例: <af:panelTabbed tabRemoval="allExceptLast" id="pt1"> <af:showDetailItem itemListener="myBean.onRemove" id="sdi1"> … onRemoveメソッドを使用して、myBeanという名前のJavaBeanに削除コードを記述します。

関連項目: タブの使用の詳細は、第18.4.5項「タブを使用した階層化されたコンテンツ・リージョンの作成」を参照してください。

20.5 showDetailFrameプロパティの設定

関連項目: ページ上のコンポーネントのプロパティへのアクセスおよびその設定の詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照してください。

showDetailFrameコンポーネントでは、ユーザーによる一部の操作を実行可能にするアイコンを含む子コンポーネントおよびヘッダーの周囲に枠線、すなわちクロムをレンダリングします。これらには、コンポーネントをそのコンテンツとともにページの新しい場所に移動するオプションの付いたメニュー・アイコンが含まれます。showDetailFrameコンポーネントは、ページのpanelCustomizableコンポーネント間でドラッグ・アンド・ドロップできます。showDetailFrameは、その移動を可能にするためには、panelCustomizableコンポーネント内に含める必要があることに注意してください。

showDetailFrameコンポーネントでは次のアクションが可能です。

• コンポーネントを縮小および展開します。

• コンテンツをページの別の位置に移動します。

• 「アクション」メニューのオプションを使用してタスク・フローを再配置します。

• テキスト・エディタでテキストを編集して保存します。

showDetailFrameに関連付けられた表示オプションは他の多くの種類のコンポーネントに共通しており、そのリストは、表18-1「表示オプション・プロパティ」に示されています。ただし、showDetailFrameレイアウト・コンポーネントは、Allow Child Selectionプロパティを公開しません。

showDetailFrameの表示オプションは、「基本」および「詳細設定」の2つのサブタブに表示されます(図20-3)。

図20-3 「基本」および「詳細設定」の表示オプション

「図20-3 「基本」および「詳細設定」の表示オプション」の説明

20.6 sidebarItemプロパティの設定

関連項目: ページ上のコンポーネントのプロパティへのアクセスおよびその設定の詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照してください。

sidebarItemコンポーネントは、panelTabbedの子コンポーネントです(第20.4項を参照)。タブ・セットに関連付けられたすべてのプロパティを提供するpanelTabbedとは異なり、sidebarItemでは単一のタブに関連付けられたすべてのプロパティが提供されます。

表20-5は、「コンポーネント・プロパティ」ダイアログの「表示オプション」タブに表示されるsidebarItemプロパティについて説明しています。

表20-5 sidebarItemの表示オプション

プロパティ	説明
Disclosed	現在のアクティブなタブ、つまり前面にあるタブを示します。 この値は、選択したタブが前面にあるかどうかに応じてデフォルトで設定されます。この値を変更しても何の影響もありません。
アイコン	イメージのURL 任意のアクセス可能な場所にあるWeb互換イメージを使用します。つまり、認証を必要とする外部サーバーにあるイメージへのパスは挿入しないでください。 完全なURLまたはアプリケーション・ルートとの相対URLを入力します。CSS書式設定を使用します。たとえば、次のように入力します。 url(http://www.abc.com/image.jpg)
Inflexible Height	複数の兄弟アイテムにサイズを割り当てるコンテナにおいてコンポーネントが使用するピクセル数 コンポーネントの要求が設定された制限を超えている場合は、その兄弟コンポーネントがオーバーフロー・メニューにプッシュされます。デフォルトは100ピクセルです。 注意: 親コンテナがpanelAccordionコンポーネントの場合にのみこの属性が有効になります。
Short Desc	コンポーネントのツールチップ・テキストを入力するフィールド コンポーネント上にマウス・ポインタを移動すると、ツールチップが表示されます。
Show Component	ページ上のコンポーネントを表示または非表示にするオプション コンポーネントを選択して表示します。 コンポーネントを選択解除して非表示にします。 この方法でコンポーネントを非表示にすると、子コンポーネントもすべて非表示になります。コンポーザのソース・ビューではコンポーネントを再び表示できます。ソース・ビューで、非表示のコンポーネントを右クリックし、表示されるコンテキスト・メニューから「コンポーネントの表示」を選択します。
Text	タブ上にレンダリングされるテキスト デフォルト値であるEL式はNew Tabに評価されます。

関連項目: 表示オプション・プロパティでは、式言語(EL)エディタにアクセスすることもできます。このエディタを使用すると、EL値の入力およびテストができます。詳細は、付録B「式言語(EL)式」を参照してください。

20.7 spacer/セパレータ・プロパティの設定

関連項目: ページ上のコンポーネントのプロパティへのアクセスおよびその設定の詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照してください。

spacerコンポーネントでは、ページに空きスペースを組み込むことによって、すべてのコンポーネントがすぐ隣り合って表示される場合にページをよりすっきりと表示できます。

ヒント: リソース・カタログでは、このコンポーネントはセパレータと呼ばれます。

表20-6は、「コンポーネント・プロパティ」ダイアログの「表示オプション」タブに表示されるspacerプロパティをリストして説明しています。

表20-6 spacerの表示オプション

プロパティ	説明
Height	スペーサの高さを指定するフィールド 任意の標準的なCSS測定単位(pt、px、pc、liなど)を使用します。 Heightの値を割合で表示しないでください。ブラウザ間およびレイアウト・コンテナ間で違いがあるため、割合が予測したとおりに機能しません。
Short Desc	コンポーネントのツールチップ・テキストを入力するフィールド コンポーネント上にマウス・ポインタを移動すると、ツールチップが表示されます。
Show Component	ページ上のコンポーネントを表示または非表示にするオプション コンポーネントを選択して表示します。 コンポーネントを選択解除して非表示にします。 この方法でコンポーネントを非表示にすると、子コンポーネントもすべて非表示になります。コンポーザのソース・ビューではコンポーネントを再び表示できます。ソース・ビューで、非表示のコンポーネントを右クリックし、表示されるコンテキスト・メニューから「コンポーネントの表示」を選択します。
Width	スペーサの幅を指定するフィールド 任意の標準的なCSS測定単位(pt、px、pc、li、%など)を使用します。

関連項目: 表示オプション・プロパティでは、式言語(EL)エディタにアクセスすることもできます。このエディタを使用すると、EL値の入力およびテストができます。詳細は、付録B「式言語(EL)式」を参照してください。