プライマリ・コンテンツに移動
Oracle® Fusion Middleware Oracle JDeveloperによるWebCenter Portalアセットとカスタム・コンポーネントの開発
12c (12.2.1.2.0)
E82735-01
目次へ移動
目次

前
次

7 ページ・テンプレートの開発

この章では、Oracle JDeveloperを使用して、WebCenter Portalで使用するためのページ・テンプレートを作成、編集および公開する方法について説明します。

ページ・テンプレートでは、ポータル・ページでの共通領域の構造が提供されます。Oracle JDeveloperを使用すると、WebCenter Portalで表示されるポータル・ページのページ・テンプレートを設計および開発できます。

この章の内容は次のとおりです。

7.1 ページ・テンプレートの開発の概要

この項には次のトピックが含まれます:

7.1.1 ページ・テンプレートの理解

ページ・テンプレートでは、ユーザーの画面における個々のページおよびページ・グループの表示方法を定義し、ポータル・ページの構造とレイアウトの点における一貫性を確保します。

つまり、ページ・テンプレートを変更すると、そのテンプレートを参照するすべてのページで自動的にその変更が継承されます。

注意:

ページ・テンプレートの一般的な情報は、『Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発』のページ・テンプレートの使用方法に関する項を参照してください。

Oracle WebCenter Portalで使用するためのページ・テンプレートの作成に関するヒントおよびベスト・プラクティスは、「ページ・テンプレートの開発のベスト・プラクティス」を参照してください。Oracle JDeveloperを使用して、WebCenter Portalで使用するためのページ・テンプレートを開発することをお薦めします。ページ・テンプレートはWebCenter Portalで開発することもできますが、編集機能が制限されます。

開発が完了したページ・テンプレートは、共有アセットとしてWebCenter Portalに直接公開するか、特定のポータルに公開してすぐに使用したり、テストしたりできます。詳細は、「ページ・テンプレートの公開」を参照してください。

7.1.2 ページ・テンプレートの構造の理解

ページ・テンプレートの標準的な要素は次のとおりです。

  • ヘッダー、コンテンツ領域(各ページで異なる)およびフッター。ヘッダーとフッターには、一般にブランド固有の要素が含まれます。たとえば、ヘッダーには通常、ロゴや、場合によってはスローガンが含まれます。フッターには通常、連絡先および著作権情報が含まれます。

  • ナビゲーション。ページ・テンプレートは、ポータルのナビゲーションをいくつかの方法で公開できます。たとえば、モバイル・デバイスの場合、ポータル・ナビゲーションは、ポップアップまたはスライド・イン/アウトとして表示されることがあります。デスクトップ・ブラウザの場合、通常、ポータル・ナビゲーションは、ページの上部(横並び)またはページの横側(縦並び)に表示されます。

  • ブランド要素。たとえば、ページ・テンプレートには、会社のロゴ、スローガン、または著作権に関するメッセージが含まれる場合があります。

  • リンクとアクション。たとえば、ログイン/ログアウトのリンク、ドロップダウン・メニュー、またはグローバル・リンク(Web管理者へのメール・メッセージの送信やプライバシ情報の表示などへのリンク)。

  • 条件要素。たとえば、ページの一部の要素は、ユーザーがパブリック・ユーザーか認証されたユーザーかによって、あるいは、ユーザーのロールおよび権限によってそれぞれ異なります。

図7-1に、これらの要素を示すページ・テンプレートに基づいたサンプル・アプリケーションを示します。

図7-1 ページ・テンプレートを使用するサンプル・ポータル

図7-1の説明が続きます
「図7-1 ページ・テンプレートを使用するサンプル・ポータル」の説明

7.1.3 ページ・テンプレートのレイアウトの理解

ページ・テンプレートの設計で最も重要な側面の1つは、テンプレートとページ・コンテンツの両方の要素でコンポーネントをどのようにレイアウトするかという点です。

基本的に次の2つの方針があります。

  • 最も一般的なレイアウトは、フロー・レイアウトです。コンポーネントは、隣合せまたは縦並びで配置され、元々のサイズで表示されます。ページのコンテンツがブラウザ・ウィンドウのサイズを超えた場合、ブラウザのページにはスクロール・バーが表示されます。

  • ストレッチ・レイアウトは、ページ・コンテンツが大きな領域を占める場合や、ブラウザ・ウィンドウのサイズに応じてページ・コンテンツを拡大および縮小する場合に適している可能性があります。コンポーネントは、ページ上の使用可能なスペースいっぱいに表示されるようストレッチされます。たとえば、ストレッチ・レイアウトは、ページに表またはグラフが含まれていて、そのサイズにかかわらずコンテンツ領域全体にこれを表示する場合に適しています。また、編集領域が含まれるページで、コンテンツ領域と同じ高さと幅でエディタを使用する必要がある場合にも適しています。このレイアウトにはページ・コンテンツ用の領域があり、ブラウザ・ウィンドウのサイズ内にコンテンツが収まらない場合は、ページ上の領域にスクロール・バーが追加されます。つまり、個々のコンポーネントにスクロール・バーが表示されます(1ページ上に複数のスクロール・バーが表示されることがあります)。

    ストレッチにより、表示可能な領域を最大限使用できるようになります。タブ、アコーディオン、メニュー、ポップアップを使用して、表示可能な領域を拡張できます。ページにスクロール・バーが追加されると、コンテンツ領域がスクロールされる間、ナビゲーション領域、ページ・ヘッダーおよびページ・フッターはそのままビューに残ります。

ほとんどのWebサイトではフロー・レイアウトが使用されており、ユーザーが親しみやすく感じる見込みが高いため、フロー・レイアウトを使用することもできます。ただし、種類が豊富なダッシュボードとアプリケーション向けの場合やデスクトップ操作を模倣する必要がある場合には、ストレッチ・レイアウトが優れています。同一ページでフロー・レイアウトとストレッチ・レイアウトを結合することも可能です。

垂直方向の動作

レイアウトがフローであるかまたはストレッチであるかに応じて、次に示すようにページの垂直方向の動作が異なります。

  • フロー・レイアウト:

    • ヘッダーまたはフッターは常に表示されているわけではありません

    • ページの高さはページのコンテンツに基づいて計算されます

    • コンテンツが垂直方向にストレッチされることはありません

    • ブラウザにスクロール・バーが表示されることもあります

  • ストレッチ・レイアウト:

    • ヘッダーおよびフッターは常に表示されます

    • ページの高さはブラウザ・ウィンドウにより決まります

    • コンテンツは垂直方向にストレッチされます

    • コンテンツ領域にスクロール・バーが表示されることがあります。

水平方向の動作

レイアウトがフローであるかまたはストレッチであるかに応じて、次に示すようにページの水平方向の動作が異なります。

  • フロー・レイアウト:

    • ページにサイド・バー(左側のナビゲーションなど)がある場合でも、サイド・バーは常に表示されているわけではありません

    • ページの幅はコンポーネントに基づいて計算されます

    • 一部のコンポーネントは、既存スペースを満たすようにストレッチされることがあります

    • ブラウザにスクロール・バーが表示されることもあります

  • ストレッチ・レイアウト:

    • ページにサイド・バー(左側のナビゲーションなど)がある場合、サイド・バーは常に表示されています

    • ページの幅はブラウザ・ウィンドウにより決まります

    • コンテンツは水平方向にストレッチされます

    • コンテンツにスクロール・バーが表示されることもあります。

7.1.4 ページ・テンプレートのレイアウト・コンポーネントの理解

ページ・テンプレートの基礎となる構造は、Oracle Application Development Framework (ADF)のレイアウト・コンポーネントによって指定されます。

ページ・テンプレートで使用するのに適したレイアウトを決定したら(「ページ・テンプレートのレイアウトの理解」を参照)、ADFレイアウト・コンポーネントを使用してページ・テンプレートを作成します。これは複雑なタスクで、必要な構造とレイアウトを実現するためのADFコンポーネントと、採用するベスト・プラクティス(「ページ・テンプレートの開発のベスト・プラクティス」を参照)について理解する必要があります。

注意:

図7-2および図7-3に、ページ・テンプレートのレイアウトで使用されている一般的なADFコンポーネントと、ページ・テンプレートのコード、さらに生成されたレイアウトを示します。

  • af:panelGridLayout—行(gridRow)およびセル(gridCell)を使用して構造化レイアウトを定義する、汎用性のあるレイアウト・コンポーネント。このコンポーネントは、小規模なクライアント側フットプリントを提供すると同時にレイアウト機能において非常に柔軟性があるため、優先される一般的なレイアウト・コンポーネントです。また、このコンポーネントを使用すると、行および列の形式で必要なレイアウトに一致するように、ページ領域を無理なく定義できます。panelGridLayoutを指定すると、固定または可変の列幅(%またはピクセル)を簡単に指定できますが、他のレイアウト・コンポーネントを使用した場合ほど簡単には実行できません。図7-2を参照してください。

  • af:panelGroupLayout—水平、垂直、またはスクロール可能な構造に配置されたコンポーネントのフロー・シリーズ。通常、panelGroupLayoutは、フロー・レイアウト、およびストレッチ・レイアウト内部のフロー・コンテンツとともに使用されます。また、コンテンツが使用可能なスペースに適合していない場合は、垂直および水平方向のスクロール・バーを表示します。図7-2および図7-3を参照してください。

  • af:panelSplitter—ユーザーによる変更が可能な2つのセクションに分割されたストレッチ・ボックス。図7-3を参照してください。

図7-2 ページ・テンプレートのコードと生成されたストレッチ・レイアウト: 例1

図7-2の説明が続きます
「図7-2 ページ・テンプレートのコードと生成されたストレッチ・レイアウト: 例1」の説明

図7-3 ページ・テンプレートのコードと生成されたストレッチ・レイアウト: 例2

図7-3の説明が続きます
「図7-3 ページ・テンプレートのコードと生成されたストレッチ・レイアウト: 例2」の説明

7.2 ページ・テンプレートの開発のベスト・プラクティス

ページ・テンプレートはポータルのすべてのページに存在するため、ページ・テンプレートを設計する際は、そのパフォーマンスを最適化してベスト・プラクティスに適合するように注意深く計画を立てる必要があります。

この項では、WebCenter Portal用(共有アセット)または特定のポータル用にページ・テンプレートを開発する際のヒントについて説明します。

注意:

JDeveloperを使用して、ポータル用のページ・テンプレートを開発することをお薦めします。ページ・テンプレートはOracle WebCenter Portalで開発することもできますが、編集機能が制限されます。

開発が完了したページ・テンプレートは、共有アセットとしてWebCenter Portalに公開するか、特定のポータルに公開してすぐに使用したり、テストしたりできます。または、ページ・テンプレートをファイルにエクスポートして、後でWebCenter Portalにアップロードできます。

詳細は、「ページ・テンプレートの作成」「「ページ・テンプレートの編集」」および「ページ・テンプレートの公開」を参照してください。

表7-1に、ページ・テンプレートから最良の結果を実現するための考慮事項およびガイダンスのクイック・リファレンス・サマリーを示します。

表7-1 ページ・テンプレートのベスト・プラクティスのサマリー

考慮事項 ベスト・プラクティス

パフォーマンス

この項の内容はすべてページ・テンプレートのパフォーマンスを向上させることを目的としており、ベスト・プラクティス全体にわたって留意する必要がある一般的なヒントがいくつかあります。

  • 埋込みタスク・フローの使用は最小限に留めます。たとえば、WebCenter Portalに組み込まれている設定なしで使用できる最新のページ・テンプレートを参照してください(詳細は、『Oracle Fusion Middleware Oracle WebCenter Portalでのポータルの構築』のWebCenter Portalの組込みページ・テンプレートの概要に関する項を参照)。

  • panelGridLayoutを使用して、ADFレイアウト・コンポーネントの使用を最小限にし、ページ・テンプレート構造を実装します。ADFレイアウト・コンポーネントの数が少なければ、スキンの適用が簡単になります。

  • 装飾を目的とするイメージは使用しないでください(角が丸められた四角形など)。イメージではなく、CSSの使用を検討してください。

  • 可能な場合は、メニューやダイアログなどのADFコンポーネントのロードは先に延ばします。この処理は、contentDeliverychildCreationなどのADFを使用して制御できます。

  • ページ・テンプレートのレンダリングの際に余分な時間を要する要素は使用せず、かわりに処理時間が短くて済む要素を使用するようにしてください。

レイアウト

ページ・テンプレートの設計で最も重要な側面の1つは、テンプレートとページ・コンテンツの両方の要素でコンポーネントをどのようにレイアウトするかという点です。ページ・テンプレートでは、フロー・レイアウトまたはストレッチ・レイアウトが使用できます。これら2つの戦略の詳細は、「ページ・テンプレートのレイアウトの理解」を参照してください。

ページ・テンプレート開発者は、コンテンツ・ファセットをページのストレッチ領域またはフロー領域のいずれに配置するかを制御できます。したがって、ページ・コンテンツは、レイアウト戦略を考慮に入れて作成する必要があります。

ページ・テンプレートに関する最適な戦略を決定したら、選択したレイアウトを作成する際のヒントについて次の各項を参照してください。

ナビゲーション

ページ・テンプレートは、ポータルのナビゲーションをいくつかの方法で公開できます。たとえば、デスクトップ・ブラウザの場合、通常、ポータル・ナビゲーションは、ページの上部(横並び)またはページの横側(縦並び)に表示されます。

  • トップ・ナビゲーション・ページ・テンプレートは、ヘッダー領域にポータル・ナビゲーションを公開します。トップ・ナビゲーションの場合、ページの水平方向の領域を有効に使用できるため、ポータル・ナビゲーションのトップ・レベル・ページが7レベル以下の場合は、この方式をお薦めします。このページ・テンプレートの設計には、通常、ヘッダー、ページおよびフッターのセクションが含まれ、フロー・レイアウトが必要なサイトの開始点に適しています。

  • サイド・ナビゲーション・ページ・テンプレートは、ページの左側のサイドバーにポータル・ナビゲーションを公開します。サイド・ナビゲーションは垂直方向に表示され、ナビゲーション・アイテムのリストが長くても対応できるため、ポータル・ナビゲーションのトップ・レベル・ページが7レベルを超える場合は、この方式をお薦めします。ナビゲーション・モデルが複雑な場合は、サイド・ナビゲーション・テンプレートを選択します。

デバイスごとに、異なるナビゲーションを公開できます。たとえば、モバイル・デバイスに対して最適化されたページ・テンプレートの場合、ナビゲーションは、ポップアップまたはスライド・イン/アウトとして表示できます。

スキン

各ページ・テンプレートは、スキンとともに機能して、ポータル内のページのルック・アンド・フィール全体を決定します。ページ・テンプレートはページ上のコンポーネントの構造を制御し、スキンは色、フォントなどのコンポーネントの視覚的な外観、およびページ上のコンポーネントの位置、高さ、幅などのその他の要素を制御します。

各ページ・テンプレートで優先スキンを定義すると、それぞれのページ・テンプレートで最適に機能するスキンを指定できます。そのページ・テンプレートをポータルのデフォルト・ページ・テンプレートとして選択したり、システムのデフォルトとして選択すると、デフォルトのスキンは自動的にそのページ・テンプレートの優先スキンに更新されます。

詳細は、「スキンの開発」を参照してください。

実行時の動作

実行時に認可ユーザーがコンポーザで編集できるページ・テンプレートをJDeveloperで開発する場合は、「実行時に編集できるページ・テンプレートの開発のベスト・プラクティス」に記載されているヒントに従ってください。

コンポーネント

ADFレイアウト・コンポーネントごとの外観の詳細は、ADF Facesリッチ・クライアントのデモ・オンライン・ツール(http://jdevadf.oracle.com/adf-richclient-demo/faces/visualDesigns/index.jspx)を参照してください。コンポーネントの「ソースの表示」メニューから「ページ」または「ページ・テンプレート」を選択し、使用されているタグと属性およびコンポーネント構造のページの外観を確認します。

ページ・テンプレート・レイアウトは変更される可能性があるため、ページの作成およびカスタム・コンポーネントの設計では、フローおよびストレッチのコンテキストで適切に表示されるようにします。

コンポーネントの外観のカスタマイズに関するヒントは、「コンポーネントの外観のカスタマイズのベスト・プラクティス」を参照してください。

スクロール

スクロールバーは、フロー・アイランド・コンテンツの周囲にのみ追加できます。スクロールバーの実装に関するヒントは、「ページ・テンプレートでのスクロールの定義のベスト・プラクティス」を参照してください。

余白、境界線およびパディング

ブラウザのCSSボックス・モデル・ルールのため、コンポーネント上の余白、境界線、パディングの定義が複雑になる場合があります。コンポーネントに対する余白、境界線、パディングの複雑さの解決に関するヒントは、「余白、境界線、パディングの定義のベスト・プラクティス」を参照してください。

属性

ページ・テンプレートまたはページ・テンプレートを使用するページで設定できる属性について検討してください。たとえば、showFooterは、ページ・フッターを表示するかどうかを指定します。

属性を持たないページ・テンプレートは構文的に正しいものです。ただし、テンプレートのレンダリングが多少異なる複数のページに対して1つのページ・テンプレートを使用する場合は、ページ・テンプレートの属性が役に立ちます。

ページ・テンプレートでの属性の使用に関する情報は、「ページ・テンプレートの作成」など、この章の全体にわたって記載されています。

リンク

ページ・テンプレートにリンクを追加するには、すぐに使用できるページ・テンプレートで提供されているコンポーネントをコピーして、リンク・ナビゲーション、メニュー、ブレッドクラム、ボタンおよびイメージを組み込みます。

goButtongoLinkなどのgoコンポーネントは、クライアント側の機能を実行しないため、クライアント側のフットプリントはほとんど用意されていません。また、これらのコンポーネントは、検索エンジン用に最適化されたURLを使用できるため、ポータル内の一般的なナビゲーションではcommandコンポーネント(commandButtoncommandLink)よりも優先されます。

国際化

国際化手法を考慮したページ・テンプレートを作成する場合、リソース・バンドル・ファイルへの静的テキストの格納などの推奨されるプラクティスに関する詳細は、「複数言語に対応したポータル構築のガイドライン」を参照してください。

ページ・テンプレートの命名(表示名)

表示名は、新規ページの作成の際にユーザーに公開されます。このため、テンプレートの使用対象のページ・タイプをユーザーが簡単に識別できるようなページ・テンプレート名にする必要があります。

7.2.1 ストレッチ・レイアウトの作成のベスト・プラクティス

ページ・テンプレートがストレッチ・レイアウトに最適である場合、レイアウトの開発に際して次のヒントに従ってください。

様々なレイアウトの詳細は、「ページ・テンプレートのレイアウトの理解」を参照してください。

  • 作成する外部構造に格納されたコンテナは、ストレッチでき、その子をストレッチできます。documentコンポーネントの内部で、たとえばコンテナpanelGridLayout (図7-2)を行(gridRow)およびセル(gridCell)とともに使用するか、コンテナpanelSplitter (図7-3)を使用します。

    注意:

    各レイアウトまたはパネル・コンポーネントのタグ・ドキュメントでは、ストレッチできるかどうか、およびそのコンポーネントの「形状管理」ドキュメントでストレッチを実現する方法が識別されます。一部のコンポーネントには、子をストレッチさせるかどうかを決定する属性が含まれています。例: documentにはmaximized属性が、showDetailItemにはstretchChildren属性が含まれます。

  • フロー・アイランドを作成します。ストレッチ可能な外部構造の内部に、フロー(ストレッチでない)コンポーネントのアイランドを作成します。これをストレッチからフローへ遷移させるには、この遷移ではストレッチ対象となっていてもその子をストレッチさせないため、panelGroupLayoutlayout="scroll"またはlayout="vertical"と一緒に使用します。

  • ストレッチ・コンポーネントでは、dimensionsFrom="auto"と設定することにより、ストレッチ・コンポーネント(panelStretchLayoutなど)自身がストレッチされる場合は、その子のみをストレッチしようと試みます。ストレッチされない場合は、その子をフロー(ストレッチではなく)します。

  • フロー・コンテナ内部では、何かを垂直方向にストレッチ(高さにパーセント値を使用して)させないでください。

  • inlineStyleposition CSSプロパティは使用しないでください。使用すると、このプロパティをスキンで指定したスタイルでオーバーライドする機能が動作しなくなります。

注意:

次のコンポーネントは、信頼できる状態でストレッチできないコンポーネントのごく一部です。

  • 大半の入力コンポーネント

  • panelBorderLayout

  • panelFormLayout

  • panelGroupLayout (layout="default"とともに)

  • panelGroupLayout (layout="horizontal"とともに)

  • panelHeader (type="flow"とともに)

  • panelLabelAndMessage

  • panelList

  • panelGrid

7.2.2 フロー・レイアウトの作成のベスト・プラクティス

ページ・テンプレートがフロー・レイアウトに最適である場合、レイアウトの開発に際して次のヒントに従ってください。

様々なレイアウトの詳細は、「ページ・テンプレートのレイアウトの理解」を参照してください。

  • panelGridLayoutを行(gridRow)およびセル(gridCell)とともに使用して、フローする構造化レイアウトを定義します。

  • スクロール・バーが複数になることを避けるため、layout="vertical"を使用するかわりに、スクロールのpanelGroupLayoutコンポーネントをネストしないでください。

  • 大半のストレッチ可能なADFコンポーネントは、dimensionsFrom="auto"でのフロー・コンテキストでも機能します。

  • コンポーネントを水平にストレッチさせるには、styleClass="AFStretchWidth"を(inlineStyle="width:100.0%"のかわりに)使用します。

カスタマイズ可能なコンポーネントの使用:

  • panelCustomizableで、layout="auto"を使用してその子をストレッチするかどうかを調べます。

  • フロー・レイアウトまたはストレッチ・レイアウトをサポートするには、showDetailFramestretchChildren="auto"と指定して使用します。

7.2.3 実行時に編集できるページ・テンプレートの開発のベスト・プラクティス

実行時に(Oracle WebCenter Portalで)編集可能にするのに適したページ・テンプレートを設計時に(Oracle JDeveloperで)作成するには、次のヒントに従ってください。

  • コンポーザ・グループのコンポーネントをコンポーネント・パレットに追加します。

  • ページ・テンプレートにpageCustomizableは追加しないでください。

  • 他のコンポーネントを保持している水平または垂直方向のレイアウトをコンテナに提供する、最低1つのpanelCustomizableコンポーネントを追加します。

  • panelCustomizableコンポーネントの内部で、コンポーネントに対して表示、非表示、移動などのアクションを追加できるクロムを提供するshowDetailFrame内のADFコンポーネント(outputTextrichTextEditorgoLinkなど)を追加します。フレームまたは埋込みコンポーネント・プロパティを編集できます。

    注意:

    showDetailFrameコンポーネントは処理時間に影響を与えるため、この手法は慎重に使用してください。エンド・ユーザーがコンポーネントを移動させることができない場合は、コンポーネントをshowDetailFrameにラップしないでください。

設計時にページに追加するために使用できるコンポーネントの大部分は、実行時にリソース・カタログでも使用できます。表7-2では、設計時コンポーネントを実行時コンポーネントにマップしています。

表7-2 設計時から実行時へのコンポーネント・マッピング

設計時(JDeveloper) 実行時(WebCenter Portal)

panelCustomizable

Box

outputText

HTML Markup

goLink

Hyperlink

goImageLink

Image

showDetailFrame

Movable Box

richTextEditor

Text

inlineFrame

Web Page

7.2.4 コンポーネントの外観のカスタマイズのベスト・プラクティス

コンポーネントの外観をカスタマイズするには、次のヒントに従ってください。

  • カスタム・スタイルには、メンテナンスが簡単で、ページ・テンプレートのソースを変更しなくても変更可能なCascading Style Sheets (CSS)を使用します。たとえば、CSSコードbackground-color: blueを使用して、ページの背景色を青色に変更します。

  • 既存のスキンに必要なすべてが備わっていない場合には、一貫した外観の変更に対してカスタム・スキンを使用します。

  • インスタンス固有の代替スタイルには、styleClass属性を使用します。対応するスタイル定義は、カスタム・スキン(推奨)、af:resourceタグにより提供されるスタイルなどの管理しやすい場所に保存します。

  • 最後の手段として、inlineStylecontentStylelabelStyleなどのコンポーネントの属性を使用します。これらの属性は、単一のスタイル・シートに収集されているのではなくコンポーネント全体にわたって散在しているため、より多くのページのRaw HTMLサイズを使用し、前述のメカニズムを1つ以上使用している場合には不要なこともあります。スタイルはWebブラウザで直接処理されるため、非常に強力ですが、エラーが発生しやすいという代償を伴います。

  • ブラウザではすべての要素のすべてのスタイルがサポートされていませんし、スタイルの特定の組合せでは明確でない結果となります。次のスタイル構成は回避してください。

    • %単位のheight値を持つinlineStyle

    • 90%から100%width値を持つinlineStyle (かわりにstyleClass="AFStretchWidth"またはstyleClass="AFAuxiliaryStretchWidth"を使用してください)

    • heighttopおよびbottom値を持つinlineStyle

    • widthleftおよびright値を持つinlineStyle

    • position値を持つinlineStyle

    • 親コンポーネントによりストレッチされた子の場合、width値またはheight値を持つinlineStyle

7.2.5 ページ・テンプレートでのスクロールの定義のベスト・プラクティス

ページ・テンプレートでスクロールを定義するには、次のヒントに従ってください。

  • ページ・コンテンツが使用可能な画面サイズ全体を占めるように設計を行うことにより、エンド・ユーザーが水平方向にスクロールしないで済むようにしてください。

  • スクロールバーは、フロー・アイランド・コンテンツの周囲にのみ追加できます。ストレッチ外部フレームからフロー・アイランドへの切替え用遷移コンポーネントには、panelGroupLayoutlayout="scroll"を含めることをお薦めします。このpanelGroupLayoutのコンテンツが割り当てられたスペースの大きさに合わない場合、ブラウザではスクロールバーが必要かどうかが判断され、自動的に追加されます。

  • スクロールpanelGroupLayoutコンポーネントをネストすると、ユーザーには複数のスクロールバーが表示されるため、ネストしないでください。また、これはストレッチ領域からフロー領域への遷移でのみ使用され、フロー領域内部にストレッチ領域がないため、通常、ネストされたスクロールバーを使用して終了できません。最もよいのは、ユーザーが検索している項目を表示するためにスクロールする必要がある領域の数を、最小限にすることです。ユーザーが必要とするスクロールについて十分検討してください。不要なスクロールバーが存在する場合、そのpanelGroupLayoutlayout属性をverticalに変更する必要がある場合があります。

7.2.6 余白、境界線、パディングの定義のベスト・プラクティス

ブラウザのCSSボックス・モデル・ルールのため、コンポーネント上の余白、境界線、パディングの定義が複雑になる場合があります。多くの場合、このようなスタイルを適用するには、複数のコンポーネントを一緒に使用する必要があります。

  • スクロール領域では、追加のpanelGroupLayoutlayout="vertical"でパディングを定義し、外側のpanelGroupLayoutlayout="scroll"を指定して、その内部に追加する必要があります。

  • ストレッチ領域では、panelGroupLayoutコンポーネントをpanelGridLayoutの内部にラップし、gridCellコンポーネントの内部にスペーサを指定することが必要になる場合があります。図7-2を参照してください。

注意:

様々なメカニズムをパディングに適用するには、ナビゲーション-マスター-ディテール、タイル・フロー、タイル・ストレッチのレイアウト・パターン例を参照してください。

http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutBasicTest.jspx

7.3 ページ・テンプレートの作成

この項には次のサブセクションが含まれます:

7.3.1 ページ・テンプレートの作成について

ページ・テンプレートを設計するには、まずページ・テンプレート用にWebCenter Portalアセット・アプリケーションを作成する必要があります。

ページ・テンプレートを作成する前に、必ず「ページ・テンプレートの開発のベスト・プラクティス」に目を通しておいてください。

注意:

JDeveloperを使用して、Oracle WebCenter Portal用のページ・テンプレートを開発することをお薦めします。ページ・テンプレートはWebCenter Portalで開発することもできますが、編集機能が制限されます。

開発が完了したページ・テンプレートは、共有アセットとしてWebCenter Portalに直接公開するか、特定のポータルに公開してすぐに使用したり、テストしたりできます。または、ページ・テンプレートをファイルにエクスポートして、後でWebCenter Portalにアップロードできます。

詳細は、「ページ・テンプレートの編集」および「ページ・テンプレートの公開」を参照してください。

独自のページ・テンプレートに組み込める機能の例は、WebCenter Portalに付属する組込みページ・テンプレート特に、最新のレスポンシブ・ページ・テンプレート(「モザイク」および「ユニコーン」)と、タスク・フローの使用を最小限に抑え、パフォーマンスを最適化するpanelGridLayoutコンポーネント(行(gridRow)およびセル(gridCell)を使用して構造化レイアウトを定義)を含むその他のテンプレートを参照してください。『Oracle Fusion Middleware Oracle WebCenter Portalでのポータルの構築』のWebCenter Portalの組込みページ・テンプレートの概要に関する項を参照してください。

組込みテンプレートの1つをJDeveloperにコピーして貼り付けて始めるか、最初から新しいページ・テンプレート全体を構築できます。組込みページ・テンプレートに基づいてページ・テンプレートを作成するのではない場合でも、組込みページ・テンプレートはアイデアをつかむ上で検討に値します。たとえば、組込みページ・テンプレートには、ログイン・フォーム、およびナビゲーションの視覚化に関して役に立つ例が含まれており、このテンプレートは要件に合わせて変更できます。

7.3.2 ページ・テンプレートの作成方法

この項では、新しいページ・テンプレート用にWebCenter Portalアセット・アプリケーションを作成する方法について説明します。

カスタム・ページ・テンプレートを作成するには:

  1. 「アセット・タイプ」「ページ・テンプレート」を選択して、アセット用にWebCenter Portalアセット・アプリケーションを作成します。

    図7-4 「ページ・テンプレート」アセット・タイプ

    図7-4の説明が続きます
    「図7-4 「ページ・テンプレート」アセット・タイプ」の説明

    WebCenter Portalアセット・アプリケーションの作成の詳細は、「WebCenter Portalアセット・アプリケーションの作成」を参照してください。

    ページ・テンプレートのJSPXファイルが作成されます。

    図7-5 ページ・テンプレートのJSPXファイル

    図7-5の説明が続きます
    「図7-5 ページ・テンプレートのJSPXファイル」の説明

    新しいページ・テンプレート用にアセット・アプリケーションを作成する際に作成されるアーティファクトの詳細は、「ページ・テンプレートのアーティファクトに関する必知事項」を参照してください。

  2. 続いて「ページ・テンプレートの編集」の説明に従ってJSPXファイルの内容を編集します。

7.3.3 ページ・テンプレートのアーティファクトに関する必知事項

ページ・テンプレート・アセット・アプリケーションを作成すると、次のアーティファクトとともにデフォルト・テンプレートが生成されます。

  • ページ・テンプレートのページ要素が含まれるJSPXファイル(PageTemplate1.jspxなど)

  • ページ・テンプレートの対応するページ定義ファイル(PageTemplate1PageDef.xmlなど)

どちらのファイルも図7-6に示すようにアプリケーション・ナビゲータに表示されます。

図7-6 ページ・テンプレート・アセット・アプリケーションのアーティファクト

図7-6の説明が続きます
「図7-6 ページ・テンプレート・アセット・アプリケーションのアーティファクト」の説明

7.4 ページ・テンプレートの編集

WebCenter Portalアセット・アプリケーションおよび初期ページ・テンプレートを作成したら、続いて要素を追加または変更できます。

ページ・テンプレートを編集するには:

  1. アプリケーション・ナビゲータで、編集するページ・テンプレートのJSPXファイルを右クリックし、「開く」を選択します。
  2. エディタで、コンポーネント・パレットからコンポーネントをドラッグしてページ・テンプレートのレイアウトやコンテンツに必要な変更を加えます。

    ページ・テンプレートの構築方法の詳細は、「ページ・テンプレートの開発の概要」および「ページ・テンプレートの開発のベスト・プラクティス」を参照してください。

    組込みページ・テンプレートはページ・テンプレートの有用な例となるため、「ページ・テンプレートのチュートリアルと例」も参照してください。

    JSFページ・テンプレートの一般的な情報は、『Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発』のページ・テンプレートの使用方法に関する項を参照してください。

  3. 変更を保存します。

7.5 ページ・テンプレートへのフローティング・ツールバーの追加

「ページ・コンテンツのコントリビュート」権限を持つユーザーがページを表示すると、ページ・テンプレートにツールバーが組み込まれている場合、「コントリビュート」オプションとともにフローティング・ツールバーが表示されます。

カスタム・ページ・テンプレートにフローティング・ツールバーを追加するには:
  1. 次のxml名前空間の宣言を含めます(まだ指定されていない場合)。
  2. xml名前空間の宣言内に、次のフローティング・ツールバーへの参照を含めます。
    <wcdc:portalToolbar id="ptbdc"/>

    図7-7に、ページ・テンプレートにツールバーが組み込まれている場合に、「コントリビュート」オプションとともにフローティング・ツールバーが表示される様子を示します。

    図7-7 フローティング・ツールバーの「コントリビュート」ボタン

    フローティング・ツールバーの「コントリビュート」ボタン。
詳細は、『Oracle Fusion Middleware Oracle WebCenter Portalでのポータルの構築』のコンテンツのコントリビュートと公開に関する項を参照してください。

7.6 ページ・テンプレートの公開

ページ・テンプレートを作成し、JSPXファイルを編集したら、次の工程はテンプレートを公開してWebCenter Portalでテストします。

ページ・テンプレートを共有アセットとして公開する、または特定のポータルにポータル・アセットとして公開する方法の詳細は、「WebCenter Portalアセットの公開」を参照してください。

7.7 ページ・テンプレートのチュートリアルと例

この項で示す補足チュートリアルと例は、ページ・テンプレートに関する追加情報です。

  • ページ・テンプレートの調査。推奨されるプラクティスを含め、単純なページ・テンプレートの詳細を分析します。

    http://www.oracle.com/technetwork/middleware/webcenter/portal/learnmore/dissectingapagetemplate-1926909.pdf

  • Oracle WebCenter Portalオンライン・トレーニング。Oracle WebCenter Portalアプリケーションでのページ・テンプレートの作成と使用。以前のリリースでポータルのページ・テンプレートを作成して使用するための記録済プレゼンテーションおよびスライドを示します。

    http://www.oracle.com/technetwork/middleware/webcenter/portal/learnmore/pagetemplates-1438595.pdf

  • WebCenter Portalのモバイル配信の最適化。ページ重みに関連するWebCenter Portalの一般的なパフォーマンスのボトルネックを識別して分析し、パフォーマンスとレスポンス時間を向上させると同時にポータルを合理化するための一般的な方法について説明します。ページ・テンプレート開発のコンテキストで特に興味深いのは、「ページの設計とコンポーネントの選択」に関する項です。アプリケーションのサンプルをダウンロードできます。

    http://www.ateam-oracle.com/webcenter-mobile-delivery/

  • WebCenterアプリケーションでのリンクの使用。リンクを使用する際の考慮事項について説明します。ページ・テンプレートに関連するのは、メニュー、ブレッドクラム、ボタンおよびイメージ内のリンクです。

    http://www.ateam-oracle.com/working-with-links-in-webcenter-application/