Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
![]() 前 |
![]() 次 |
この章では、再利用可能なコンテンツを作成し、それらを使用してJSFページの一部またはページ全体を作成する方法を説明します。
この章では、次の項目について説明します。
アプリケーションにJSFページを作成する場合、一部のページが複雑で長くなり、編集が込み入って煩雑になることがあります。非常に特有なレイアウトに配置されたコンポーネントのグループが常にページに含まれる場合や、ページの複数の部分で特定のコンポーネントのグループを使用する場合もあります。あるいは、ページの一部またはページ全体を、他の開発者と共有する必要がある場合もあります。どのような場合でも、UIに変更が発生すると、多くの場所とページに変更内容を反映する必要があります。それらすべてのページを作成して維持し、構造やレイアウトの一部またはすべてが一貫していることを確認するのは、非効率的な作業になっていく可能性があります。
個々のUIコンポーネントを使用してページを作成するかわりに、ページのビルディング・ブロックを使用してページの一部またはページ全体を作成できます。ビルティング・ブロックには、頻繁にまたは一般的に使用されるUIコンポーネントが含まれており、アプリケーションの1つ以上のページで使用するための再利用可能なコンテンツを作成できます。アプリケーションに応じて、1つ以上のページに、1つのタイプのみのビルディング・ブロックを使用することも、すべてのタイプを使用することもできます。また、複数のビルディング・ブロックをアプリケーション全体で共有できます。ビルディング・ブロックに変更を加えた場合は、再利用可能なコンテンツを使用しているJSFページも自動的に更新されます。このため、アプリケーションで再利用可能なコンテンツを作成および使用することで、構造とレイアウトが常に一貫したWebユーザー・インタフェースと、スケーラブルで拡張可能なアプリケーションを作成できます。
ADF Facesには、次のタイプの再利用可能なビルディング・ブロックがあります。
ページ・フラグメント: ページ・フラグメントを使用すると、ページの一部を作成できます。JSFページは、1つ以上のページ・フラグメントで構成されます。たとえば、大規模なJSFページは、複数の小規模なページ・フラグメントに分割するとより簡単にメンテナンスできます。ページ・フラグメントの作成および使用方法の詳細は、ページ・フラグメントの使用に関する項を参照してください。
ページ・テンプレート: ページ・テンプレートを作成すると、個々のコンポーネントおよびページ・フラグメントを使用して、ページ全体のレイアウトを作成できます。たとえば、複数のJSFページに特定の方法で複数のコンポーネントを繰り返しレイアウトする場合には、それらのページ用にページ・テンプレートを作成することを検討します。ページの作成にページ・テンプレートを使用すると、アプリケーション全体の構造およびレイアウトで常にページの一貫性を保つことができます。ページ・テンプレートの作成および使用方法の詳細は、ページ・テンプレートの使用およびページ・テンプレートに基づくJSFページの作成方法に関する項を参照してください。
宣言コンポーネント: 宣言コンポーネント機能を使用すると、個々の既存のUIコンポーネントを、1つ以上のページで宣言的に使用できる再利用可能な1つのコンポジット・コンポーネントにアセンブルできます。たとえば、複数の場所にコンポーネントのグループを挿入する場合、個々のコンポーネントを構成するコンポジット宣言コンポーネントを作成し、その宣言コンポーネントをアプリケーション全体の複数の場所に再利用することを検討します。宣言コンポーネントは、ページ・テンプレートでも使用できます。宣言コンポーネントの作成および使用方法の詳細は、宣言コンポーネントの使用に関する項を参照してください。
ヒント: アプリケーションにADFコントローラやADFモデル・レイヤーが使用されている場合は、ADFリージョンも使用できます。ADFバインド・タスク・フローとともに使用されるリージョンは、ビジネス・ロジック、プロセス・フローおよびUIコンポーネントのすべてを、アプリケーション全体で再利用可能な1つのパッケージにカプセル化します。ADFバインド・タスク・フローをリージョンとして作成および使用する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「タスク・フローのリージョンとしての使用」を参照してください。 |
ページ・テンプレート、宣言コンポーネントおよびリージョンにより、javax.faces.component.NamingContainer
インタフェースが実装されます。実行時に、再利用可能なコンテンツを使用するページで、ページ・テンプレート、宣言コンポーネントまたはリージョンによりコンポーネントのサブツリーが作成され、使用ページの単一のJSFコンポーネント・ツリーに挿入されます。使用ページには独自のネーミング・コンテナがあるため、ページに再利用可能なコンテンツを追加する場合、partialTargets
やfindComponent()
などのメカニズムを使用する際には、ページに表示される様々なコンポーネントの異なるネーミング・コンテナを考慮する必要があるため、十分に注意してください。ネーミング・コンテナの詳細は、3.5項「ページでのクライアント・コンポーネントの検索」を参照してください。
CSSまたはJavaScriptなどのリソースを含める場合、af:resource
タグを使用して、リソースをページに追加できます。このタグがページ・テンプレートおよび宣言コンポーネントで使用される場合、指定されたリソースがJSP実行時に使用ページに追加されます。詳細は、ページへのリソースの追加に関する項を参照してください。
アプリケーションのWebページを作成して短時間で、一部のページが大規模で管理不能になることがあります。複雑なページの作成およびメンテナンスのプロセスを簡略化する1つの方法は、ページ・フラグメントの使用です。
大規模で複雑なページを複数の小規模なページ・フラグメントに分割すると、メンテナンスしやすくなります。ページの設計方法によっては、あるページに作成されたページ・フラグメントを別のページで再利用できます。たとえば、複数ページの異なる部分に同じフォームを使用する場合、フォームにそれらのコンポーネントを含むページ・フラグメントを作成し、それらのページ・フラグメントをいくつかのページに再利用すると便利です。1つ以上の複雑なページにページ・フラグメントをいくつ作成するかの判断は、アプリケーション、ページの一部を複数のページで再利用する程度、および複雑なページを簡略化する要望によって異なります。
ページ・フラグメントは不完全なJSFページです。ADF Facesを使用する完全なJSFページでは、document
タグがf:view
タグで囲まれている必要があります。ページ全体のコンテンツは、document
タグで囲まれます。一方、ページ・フラグメントは完全なページの一部を表し、f:view
またはdocument
タグを含みません。ページ・フラグメントのコンテンツは、jsp:root
タグで囲まれます。
ページ・フラグメントを使用してJSFページを作成する際には、ページの異なる部分を定義する1つ以上のページ・フラグメントを使用できます。同じページ・フラグメントを、1つのページで複数回使用することも、複数のページで使用することもできます。
注意: ページのすべてのview部分(フラグメント、宣言コンポーネントおよびメイン・ページ)では、同じリクエスト・スコープが共有されます。このため、1つのページに同じフラグメントまたは宣言コンポーネントを複数回使用すると競合が発生し、そのフラグメントまたはコンポーネントでバッキングBeanが共有されます。スコープの詳細は、オブジェクト・スコープ・ライフサイクルに関する項を参照してください。 |
たとえば、File Explorerアプリケーションには、次のページ・フラグメントを含むメイン・ページ(index.jspx
)が1つ使用されています。
popups.jspx
: アプリケーションで使用されるすべてのポップアップ・コードが含まれます。
help.jspx
: ヘルプ・コンテンツが含まれます。
header.jspx
: アプリケーションのツールバーおよびメニューが含まれます。
navigators.jspx
: アプリケーションのフォルダ階層を表示するツリーが含まれます。
contentViews.jspx
: ナビゲーション・ペインで選択されたフォルダのコンテンツが含まれます。
例19-1に、含まれるheader.jspx
ページ・フラグメントの省略形のコードを示します。f:view
またはdocument
タグが含まれていないことに注意してください。
例19-1 header.jspxページ・フラグメント
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core"> <af:panelStretchLayout id="headerStretch"> <f:facet name="center"> <!-- By default, every toolbar is placed on a new row --> <af:toolbox id="headerToolbox" binding="#{explorer.headerManager.headerToolbox}"> . . . </af:toolbox> </f:facet> </af:panelStretchLayout> </jsp:root>
JSFページでページ・フラグメントを使用するには、index.jspx
ページの省略形のコードである例19-2に示すように、ページ・フラグメント・コンテンツを使用するページの部分に、jsp:include
タグを挿入し、必要なページ・フラグメント・ファイルを指定します。
例19-2 フラグメントを含むFile Explorerの索引JSFページ
<?xml version='1.0' encoding='utf-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:trh="http://myfaces.apache.org/trinidad/html"> <jsp:directive.page contentType="text/html;charset=utf-8"/> <f:view> . . . <af:document id="fileExplorerDocument" title="#{explorerBundle['global.branding_name']}"> <af:form id="mainForm"> <!-- Popup menu definition --> <jsp:include page="/fileExplorer/popups.jspx"/> <jsp:include page="/fileExplorer/help.jspx"/> . . . <f:facet name="header"> <af:group> <!-- The file explorer header with all the menus and toolbar buttons --> <jsp:include page="/fileExplorer/header.jspx"/> </af:group> </f:facet> <f:facet name="navigators"> <af:group> <!-- The auxiliary area for navigating the file explorer --> <jsp:include page="/fileExplorer/navigators.jspx"/> </af:group> </f:facet> <f:facet name="contentViews"> <af:group> <!-- Show the contents of the selected folder in the folders navigator --> <jsp:include page="/fileExplorer/contentViews.jspx"/> </af:group> </f:facet> . . . </af:form> </af:document> </f:view> </jsp:root>
ページ・フラグメントを変更すると、ページ・フラグメントを使用するページが自動的に変更内容で更新されます。ページ・フラグメントから作成されたページでは、レイアウトを変更すると、ページ・フラグメントを変更するだけでは不十分なことがあります。ページ・フラグメントを使用するすべてのページを変更する必要があります。
注意: 使用ページでADFモデル・データ・バインディングが使用されている場合、含まれるページ・フラグメントでは、使用するページのバインディング・コンテナが使用されます。ADFの無制限タスク・フローの一部として作成されたページ・フラグメントにのみ、独自のバインディング・コンテナを使用できます。ADFの無制限タスク・フローの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「ADFタスク・フローの概説」を参照してください。 |
例19-3に示すように、完全なJSFページ同様、ページ・フラグメントもページ・テンプレートをベースにすることができます。ページ・テンプレートの作成および適用方法の詳細は、19.3項「ページ・テンプレートの使用」および19.3.3項「ページ・テンプレートに基づくJSFページの作成方法」を参照してください。
例19-3 テンプレートに基づくページ・フラグメント
<?xml version='1.0' encoding='windows-1252'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core"> <af:pageTemplate viewId="/someTemplateDefinition.jspx"> . . . </af:pageTemplate> </jsp:root>
ページ・フラグメントは、f:view
またはdocument
タグをしない点以外は、JSFページと同様です。JSFページ・フラグメントの作成ウィザードを使用して、ページ・フラグメントを作成できます。ウィザードを使用してページ・フラグメントを作成すると、JDeveloperでは、ページ・フラグメント・ファイルに拡張子.jsff
が使用されます。ウィザードを使用しない場合、.jspx
をファイル拡張子として使用できます(File Explorerアプリケーションと同様)。JDeveloperのアプリケーション・ナビゲータでの作業時に完全なJSFページとページ・フラグメントをすばやく区別できる以外に、.jsff
を使用する特別な理由はありません。
ページ・フラグメントを作成する手順:
アプリケーション・ナビゲータで、ページ・フラグメントを作成および格納するフォルダを右クリックし、「新規」を選択します。
「カテゴリ」ツリーで「JSF」ノードを選択し、「項目」ペインで「JSFページ・フラグメント」を選択して「OK」をクリックします。
ページ・フラグメント・ファイルの名前を入力します。
ページ・フラグメント用のデフォルトのディレクトリをそのまま使用するか、新しい場所を選択します。
JDeveloperでは、デフォルトで、ファイルシステム内のプロジェクトの/public_html
ディレクトリにページ・フラグメントが保存されます。たとえば、デフォルトのディレクトリを/public_html/fragments
に変更できます。
テンプレートまたはクイック・スタート・レイアウトを使用して、フラグメントを事前に設計できます。
ページ・テンプレートに基づいたページ・フラグメントを作成する場合、「ページ・テンプレート」ラジオ・ボタンを選択し、ドロップダウン・リストからテンプレート名を選択します。ページ・テンプレートの使用方法の詳細は、ページ・テンプレートに基づくJSFページの作成方法に関する項を参照してください。
クイック・スタート・レイアウトを使用する場合は、「クイック・スタート・レイアウト」ラジオ・ボタンを選択し、「参照」をクリックして、フラグメントで使用するレイアウトを選択します。クイック・スタート・レイアウトには、特定の動作および外観を得るために必要な正確に構成されたレイアウト・コンポーネントが用意されています。詳細は、8.2.3項「クイック・スタート・レイアウトの使用」を参照してください。
ページ・フラグメントの作成が完了すると、JDeveloperにより、ビジュアル・エディタにページ・フラグメント・ファイルが表示されます。
ページ・フラグメントのコンテンツを定義するには、ページにコンポーネント・パレットから必要なコンポーネントをドラッグ・アンド・ドロップします。
table
、panelHeader
またはf:facet
など、任意のADF Facesコンポーネントまたは標準のJSFコンポーネントを使用できます。
例19-4に、menuコンポーネントを含むページ・フラグメントの例を示します。
例19-4 ページ・フラグメントのサンプル
<?xml version='1.0' encoding='windows-1252'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <!-- page fragment contents start here --> <af:menu id="viewMenu" <af:group> <af:commandMenuItem type="check" text="Folders"/> <af:commandMenuItem type="check" text="Search"/> </af:group> <af:group> <af:commandMenuItem type="radio" text="Table"/> <af:commandMenuItem type="radio" text="Tree Table"/> <af:commandMenuItem type="radio" text="List"/> </af:group> <af:commandMenuItem text="Refresh"/> </menu> </jsp:root>
JDeveloperでは、ページ・フラグメント・ファイルが通常のJSFページと異なるファイル拡張子を使用するので、アプリケーションで.jsff
ファイルを認識および解釈するために、構成エントリがweb.xml
ファイルに追加されます。例19-5に、.jsff
ファイルで必要なweb.xml
の構成エントリを示します。これは、ウィザードを使用して最初にページ・フラグメントを作成したときに、JDeveloperによって追加されます。
例19-5 .jsffファイルを認識および解析するためのweb.xmlのエントリ
<jsp-config> <jsp-property-group> <url-pattern>*.jsff</url-pattern> <is-xml>true</is-xml> </jsp-property-group> </jsp-config>
*.jsff
にurl-pattern
サブ要素を指定し、jsp-property-group
要素のis-xml
サブ要素をtrue
に設定することで、アプリケーションは拡張子が.jsff
のファイルが実際はJSPドキュメントであることを認識します。そのため、このファイルは、XMLドキュメントとして解析される必要があります。
JSFページでページを使用するには、コンポーネント・パレットまたはアプリケーション・ナビゲータのいずれかを使用して、ページを追加します。
jsp:include
タグを使用して目的のページ・フラグメント・ファイルを含めることができます。
コンポーネント・パレットを使用してページ・フラグメントを追加する手順:
コンポーネント・パレットでドロップダウン・メニューを使用して「JSP」を選択します。
コンポーネント・パレットから「インクルード」をドラッグ・アンド・ドロップして、jsp:include
タグを追加します。
「インクルードの挿入」ダイアログでドロップダウン・リストを使用して、含めるJSFページを選択します。オプションで、ページが含まれる前にバッファをフラッシュするかどうかを選択します。詳細は、ダイアログの「ヘルプ」をクリックしてください。
ページ・テンプレートでは、ページの特定の属性値など、ページ・レイアウト全体を定義できます。テンプレートを使用してページを作成すると、すべてのページで定義済のレイアウトが継承されます。テンプレートのレイアウトを変更すると、そのテンプレートを使用するすべてのページにレイアウトの変更が自動的に反映されます。テンプレートのレイアウトは、自分で作成することも、多数あるクイック・レイアウト設計の1つを使用して作成することもできます。これらの事前定義済レイアウトを使用すると、必要なレイアウトの外観および動作を実装するために必要となる適切なコンポーネントが自動的に挿入されて構成されます。たとえば、1つの列の幅はロックし、他の列は拡大してブラウザの使用可能な領域を埋めることができます。図19-1に、2番目の列が2つのペインに分割されている2列レイアウトで使用可能なクイック・レイアウトを示します。レイアウト・コンポーネントの詳細は、第8章「Webページ上のコンテンツの編成」を参照してください。
アプリケーションにページ・テンプレートを使用するには、まず、ページ・テンプレート定義を作成します。ページ・テンプレートにはXMLコンテンツが埋め込まれているため、ページ・テンプレート定義は、XML構文で記述されたJSFドキュメント(ファイル拡張子は.jspx
)である必要があります。ページのすべてのコンポーネントをf:view
タグで囲む必要のある通常のJSFページとは対照的に、ページ・テンプレート定義にはf:view
タグを含めることができず、ルート・タグとしてpageTemplateDef
が必要です。テンプレートを使用するテンプレートまたはページのどちらにもdocument
タグが含まれている必要がありますが、どちらもそのタグを含めることができません(JDeveloperにより、デフォルトで使用ページにdocument
タグが追加されます)。
ページ・テンプレートには、固定コンテンツ領域および動的コンテンツ領域を作成できます。たとえば、「Help」ボタンを必ずページ上部の右端に配置する場合、そのボタンをテンプレート・レイアウトに定義すれば、ページ作成者がそのテンプレートを使用してページを作成する際に、「Help」ボタンを追加および構成する必要はありません。一方、動的コンテンツ領域は、ページ作成者がテンプレートの定義済のファセット内にコンテンツを追加することや、作成中のページのタイプに固有のプロパティ値を設定することが可能なテンプレートの領域です。
ページ・テンプレートの完全な説明は、2つのセクションがあるpageTemplateDef
タグ内に定義されています。セクションのうちの1つはxmlContent
タグにあり、これには、テンプレートのサポートされているコンテンツ領域(ファセットで定義済)および使用可能なプロパティ(属性として定義済)を記述する、すべてのページ・テンプレート・コンポーネント・メタデータが含まれています。2つ目のセクション(xmlContent
タグの外)は、テンプレートの実際のページ・レイアウトを構成するすべてのコンポーネントが定義される場所です。レイアウト・セクションのコンポーネントは、ページ・テンプレートのコンテンツをレンダリングするために使用するJSFコンポーネントのサブツリーを提供します。
ファセットは、ページ上のコンテンツのプレースホルダとして機能します。テンプレートを使用するページでは、ページ作成者がテンプレートにコンテンツを挿入できるのは、すでに定義済の名前付きファセットに対してのみです。これは、ページ・テンプレートを設計する際には、各名前付きファセットのfacet
要素を使用して、xmlContent
タグ内に使用可能なすべてのファセットを定義する必要があることを意味します。ページ・テンプレート定義のレイアウト・セクションで、様々なコンポーネントを使用してテンプレート・レイアウトを作成する場合には、facetRef
タグを使用して、ページ作成者がテンプレートにコンテンツを挿入できるそれらのコンポーネント内の名前付きファセットを参照します。
たとえば、fileExplorerTemplate
テンプレートには、例19-6に示すように、コピーライト情報用のファセット、およびアプリケーション情報用の別のファセットが含まれます。
例19-6 テンプレートのファセット定義
<facet> <description> <![CDATA[Area to put a commandLink to more information about the application.]]> </description> <facet-name>appAbout</facet-name> </facet> <facet> <description> <![CDATA[The copyright region of the page. If present, this area typically contains an outputText component with the copyright information.]]> </description> <facet-name>appCopyright</facet-name> </facet>
例19-7に示されているテンプレートのレイアウト・セクションでは、セルにappCopyright
ファセットへの参照が含まれる表と、appAbout
ファセットへの参照が含まれる別のファセットがpanelGroupLayout
コンポーネントに含まれています。これは、ページ開発者がコンテンツの配置を許可される場所です。
例19-7 ページ・テンプレート内のファセット参照
<af:panelGroupLayout layout="vertical"> <afh:tableLayout width="100%"> <afh:rowLayout> <afh:cellFormat> <af:facetRef facetName="appCopyright"/> </afh:cellFormat> </afh:rowLayout> </afh:tableLayout> <af:facetRef facetName="appAbout"/> </af:panelGroupLayout>
注意: 実行時にコンポーネントIDの競合を回避するには、ページ・テンプレート定義のレイアウト・セクションにおける各名前付きファセットの参照を一度のみにします。つまり、同じテンプレート定義には、同じ |
pageTemplateDef
タグは、ページ・テンプレート定義に必要なすべての情報およびコンポーネントを記述しますが、ページ・テンプレートを使用するJSFページでは、pageTemplate
タグを使用して、ページ・テンプレート定義を参照します。例19-7に、index.jspx
ページがfileExplorerTemplate
テンプレートを参照し、テンプレートの属性に値を指定して、テンプレートのファセット定義内にコンテンツを配置する方法を示します。
設計時、テンプレートを使用するページ開発者は、例19-8に示すように、f:facet
タグを使用してappCopyright
ファセットにコンテンツを挿入できます。
例19-8 JSFページでのページ・テンプレート・ファセットの使用
<af:pageTemplate id="fe"
viewId="/fileExplorer/templates/fileExplorerTemplate.jspx">
<f:attribute name="documentTitle"
value="#{explorerBundle['global.branding_name']}"/>
<f:attribute name="headerSize" value="70"/>
<f:attribute name="navigatorsSize" value="370"/>
.
.
.
<f:facet name="appCopyright">
<!-- Copyright info about File Explorer demo -->
<af:outputFormatted value="#{explorerBundle['about.copyright']}"/>
</f:facet>
.
.
.
</af:pageTemplate>
実行時、テンプレート定義のaf:facetRef facetName="appCopyright"
に示されているように、挿入されたコンテンツはページの適切な場所に表示されます。
注意: ページ・テンプレートをJDeveloperの実行ターゲットとして実行できません。ページ・テンプレートを使用するページを実行できます。 |
ページ・テンプレート属性は、テンプレートで設定または変更できるコンポーネント・プロパティ(headerGlobalSize
など)を指定します。facet
要素の情報は、テンプレートのどこにコンテンツを挿入できるかを指定するために使用されますが、attribute
要素の情報は、テンプレートへの受渡しに使用可能なページ属性、およびテンプレート・プロパティを設定または変更するために、それらの属性を使用できるテンプレートの場所の指定に使用されます。
ページ・テンプレートでそのテンプレート自体の属性を参照する場合には、pageTemplateDef
タグに、テンプレートに定義された各属性を参照するためのEL変数名が含まれるvar
属性が必要です。たとえば、fileExplorerTemplate
テンプレートでは、pageTemplateDef
タグのvar
の値はattrs
に設定されています。テンプレートのレイアウト・セクションで、ページ作成者が独自の値の指定や、デフォルト値の変更を実行できるそれらのコンポーネント属性に、#{attrs.someAttributeName}
などのEL式を使用します。
たとえば、fileExplorerTemplate
テンプレート定義ではヘッダー・サイズの属性が定義されますが、例19-9に示すように、デフォルトのint
値である100
ピクセルが設定されています。
例19-9 ページ・テンプレートの属性の定義
<attribute> <description> Specifies the number of pixels tall that the global header content should consume. </description> <attribute-name>headerGlobalSize</attribute-name> <attribute-class>int</attribute-class> <default-value>100</default-value> </attribute>
次のコードに示すように、テンプレートのレイアウト・セクションでは、panelSplitter
コンポーネントのsplitterPosition
属性が、EL式#{attrs.headerGlobalSize}
でheaderGlobalSize
属性を参照しています。
<af:panelSplitter splitterPosition="#{attrs.headerGlobalSize}" ../>
ページ作成者はこのテンプレートを使用すると、次のコードに示すように、f:attribute
を使用してheaderGlobalSize
を変更できます。
<af:pageTemplate ..> <f:attribute name="headerGlobalSize" value="50"/> . . . </af:pageTemplate>
実行時、属性名を参照するEL式が示すように、指定された属性値はテンプレートの適切な部分に置き換えられます。
ヒント: ページ・テンプレートのリソース・バンドルを定義すると、テンプレートを使用するページでもリソース・バンドルを使用できるようになります。リソース・バンドルの使用の詳細は、リソース・バンドルおよびロケールの手動での定義に関する項を参照してください。 |
単純なページ・テンプレートの場合、レイアウト・セクション全体のすべてのコンポーネントをページ・テンプレート定義ファイルに配置するだけでかまいません。より複雑なページ・テンプレートの場合は、メンテナンスしやすいようレイアウト・セクションを複数の小規模なフラグメント・ファイルに分割し、jsp:include
タグを使用して、様々なフラグメント・ファイルを組み入れて連携させます。
ページ・テンプレートのレイアウト・セクションを複数の小さなフラグメント・ファイルに分割する場合、すべてのページ・テンプレート・コンポーネント・メタデータをメインのページ・テンプレート定義ファイルのxmlContent
タグに含める必要があります。pageTemplateDef
タグ内にxmlContent
タグは1つのみ存在できます。フラグメント・ファイルにページ・テンプレート・コンポーネント・メタデータを含めることはできません。フラグメント・ファイルには、ページ・テンプレート・レイアウト・コンポーネントの一部のみを含めることができます。
注意: ページ・テンプレートを、その他のページ・テンプレートにネストさせることはできません。 |
テンプレートに、CSSに定義されているカスタム・スタイルまたはJavaScriptなどのリソースが必要な場合は、af:resource
タグを使用して、使用ページにそれらのリソースを含める必要があります。詳細は、ページへのリソースの追加に関する項を参照してください。
JDeveloperでページ・テンプレート定義の作成を簡略化するには、JSFページ・テンプレートの作成ウィザードを使用します。これによって、名前付きファセットおよび属性を宣言的に追加して、テンプレート・コンポーネント・メタデータ・セクションを作成できます。メタデータ・コードの作成だけでなく、JDeveloperでは、プロジェクトで作成するすべてのページ・テンプレートを追跡するpagetemplate-metadata.xml
ファイルの作成および変更も行われます。
パフォーマンスのヒント: ページ・テンプレートはすべてのアプリケーション・ページで使用される可能性があるため、共通のオーバーヘッドを回避できるよう最適化する必要があります。オーバーヘッドの一例は、ボックスなどの丸い角で、オーバーヘッドはかなり大きいです。これをテンプレートに追加することは、各ページにオーバーヘッドを追加することになります。 |
ページ・テンプレート定義を作成する手順:
アプリケーション・ナビゲータで、ページ・テンプレートを作成および格納するフォルダを右クリックし、「新規」を選択します。
「カテゴリ」ツリーで「JSF」ノードを選択し、「項目」ペインで「JSFページ・テンプレート」を選択して「OK」をクリックします。
ページ・テンプレート定義の名前を入力します。ページ・テンプレート定義にはXMLコンテンツが埋め込まれているため、ページ・テンプレート定義は、XMLドキュメント(ファイル拡張子は.jspx
)である必要があります。
パフォーマンスのヒント: サーバー側、ネットワーク・トラフィックおよびクライアント処理に影響があるため、長い名前にしないでください。 |
テンプレート定義用のディレクトリ名をそのまま使用するか、新しい場所を選択します。
ページ・テンプレート定義のページ・テンプレート名を入力します。
事前定義済のクイック・レイアウトのいずれかを使用する場合は、「クイック・スタート・レイアウトの使用」を選択し、「参照」をクリックして、使用するレイアウトを選択します。
名前付きファセットを追加するには、「ファセット定義」タブをクリックし、「追加」アイコンをクリックします。
ファセットは、ページ・テンプレートの事前定義済領域で、テンプレートを使用してページを作成する際にコンテンツを挿入できます。各ファセットには一意の名前が必要です。たとえば、ページのメインのコンテンツ領域にはmain
というファセットを、ページのブランド領域にはbranding
というファセットを定義できます。
属性を追加するには、「属性」タブをクリックし、「追加」アイコンをクリックします。
属性はUIコンポーネント属性で、テンプレートを使用してページを作成する際にページに渡すことができます。各属性には名前とクラス・タイプが必要です。属性(手順12で構成するコンポーネントの属性など)を使用するものは、そのタイプを使用できる必要があります。デフォルト値を割り当て、「必須」
チェック・ボックスを選択することで、値が必須であることを指定できます。
ページ・テンプレート・コンテンツにADFモデル・データ・バインディングが使用されている場合は、「関連ADFmページ定義の作成」チェック・ボックスを選択し、「モデル・パラメータ」をクリックして1つ以上のモデル・パラメータを追加します。モデル・パラメータおよびADFモデル・データ・バインディングの使用方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「ページ・テンプレートの使用」を参照してください。
ウィザードを完了すると、JDeveloperにより、ビジュアル・エディタにページ・テンプレート定義ファイルが表示されます。例19-10に、ウィザードを使用してページ・テンプレート定義のメタデータを定義する際に、JDeveloperにより追加されるコードを示します。このコードは、ソース・エディタで表示できます。
ヒント: テンプレートを作成したら、構造ウィンドウで |
注意: テンプレート・コンポーネント・メタデータのファセット名や属性名を変更または削除する場合は、そのテンプレートを使用するJSFページのみでなく、テンプレート定義のレイアウト・セクションで参照されているファセットや属性名を手動で変更または削除する必要があります。 |
例19-10 ページ・テンプレート定義のコンポーネント・メタデータ
<af:pageTemplateDef var="attrs"> <af:xmlContent> <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component"> <display-name>sampleTemplateDef1</display-name> <facet> <facet-name>main</facet-name> </facet> . . . <attribute> <attribute-name>Title</attribute-name> <attribute-class>java.lang.String</attribute-class> <default-value>Replace title here</default-value> <required>true</required> </attribute> . . . </component> </af:xmlContent> . . . </af:pageTemplateDef>
コンポーネント・パレットからコンポーネントをドラッグし、ビジュアル・エディタのページにドロップします。
ページ・テンプレートを使用するJSFページですでに使用されているため、ページ・テンプレート定義のレイアウト・セクション(またはレイアウト・セクションの一部を含むフラグメント・ファイル)では、f:view
タグを使用できません。
ベスト・プラクティスのヒント: テンプレートには、 |
レイアウト・セクションには、コンポーネントをいくつでも追加できます。クイック・スタート・レイアウトを使用しない場合、通常は、panelStretchLayout
またはpanelGroupLayout
などのパネル・コンポーネントを追加してから、そのパネル・コンポーネントにレイアウトを定義するコンポーネントを追加します。詳細は、第8章「Webページ上のコンテンツの編成」を参照してください。
宣言コンポーネントおよびデータ・バインドされたコンポーネントは、レイアウト・セクションで使用されます。宣言コンポーネントの使用の詳細は、宣言コンポーネントの使用に関する項を参照してください。ページ・テンプレート内のデータ・バインドされたコンポーネントの使用方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のページ・テンプレートの使用に関する項を参照してください。
ページ作成者がテンプレートを使用してコンテンツを挿入できる(レイアウト・セクション内の)コンポーネントで、コンポーネント・パレットからFacetRefをドラッグして、ページの必要な場所にドロップします。
たとえば、ページ・テンプレートのメインのコンテンツ領域にmain
ファセットを定義した場合、panelStretchLayout
コンポーネントのcenter
ファセットにfacetRef
タグを子として追加し、main
ファセットを参照します。設計時、ページ作成者がmain
ファセットにコンテンツをドロップすると、そのコンテンツはテンプレートに定義されているように、ページの適切な場所に配置されます。
適切な名前付きファセットを参照するためにfacetRef
タグを使用すると、JDeveloperにより「facetRefの挿入」ダイアログが表示されます。そのダイアログで、ドロップダウン・リストからファセット名を選択するか、ファセット名を入力します。ページ・テンプレート定義ファイルのコンポーネント・メタデータにまだ定義されていないファセット名を入力すると、JDeveloperにより、xmlContent
タグ内のコンポーネント・メタデータに新しいファセット定義用のエントリが自動的に追加されます。
注意: ページ・テンプレート定義のレイアウト・セクションで、各ファセットを参照できるのは一度のみです。つまり、同じテンプレート定義には、同じ |
ページ・テンプレートのどこに属性を使用するかを指定するには、ページ・テンプレートのvar
属性値を使用して、レイアウト・セクションの適切なコンポーネントにある関連する属性を参照します。
pageTemplateDef
タグのvar
属性では、ページ・テンプレートの独自の属性へのアクセスに使用するEL変数名を指定します。例19-10に示すように、JDeveloperにより使用されるvar
のデフォルト値はattrs
です。
たとえば、title
属性を定義し、panelHeader
コンポーネントを追加した場合は、次のコードに示すように、panelHeader
コンポーネントのtext
値にEL式#{attrs.title}
を使用して、title
の値を参照します。
<af:panelHeader text="#{attrs.title}">
テンプレート・レイアウトに別のファイルを指定するには、次のコードに示すように、subview
タグでラップされたjsp:include
タグを使用してフラグメント・ファイルを参照します。
<f:subview id="secondaryDecoration"> <jsp:include page="fileExplorerSecondaryDecoration.jspx"/> </f:subview>
指定されたフラグメント・ファイルも、階層の先頭にjsp:root
のみを含むXMLドキュメントである必要があります。フラグメントの使用方法の詳細は、JSFページでのページ・フラグメントの使用方法に関する項を参照してください。
コンポーネントにテンプレート・レイアウトを定義する複数のフラグメント・ファイルを作成し、ページ・テンプレート定義にフラグメント・ファイルを指定することにより、大規模なテンプレート・ファイルをメンテナンスしやすい小規模なファイルに分割できます。
注意: ページ・テンプレートのコンポーネントにADFモデル・データ・バインディングが使用されている場合、またはテンプレートの作成時にADFページ定義を関連付けることを選択した場合は、JDeveloperにより、ADFモデルに関連するファイルおよびフォルダが自動的に作成されます。ページ・テンプレートおよびADFモデル・データ・バインディングとともに使用されるファイルの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「ページ・テンプレートの使用」を参照してください。 |
初めてウィザードを使用してプロジェクトにJSFページ・テンプレートを作成する際には、ファイルシステムの/ViewController/src/META-INF
ディレクトリに格納されるpagetemplate-metadata.xml
ファイルが自動的に作成されます。
ウィザードを使用して定義する各ページ・テンプレートに対して、JDeveloperにより、ページ・テンプレート定義ファイル(sampleTemplateDef1.jspx
など)が作成され、pagetemplate-metadata.xml
ファイルにエントリが追加されます。例19-11に、pagetemplate-metadata.xml
ファイルの例を示します。
例19-11 pagetemplate-metadata.xmlファイルのサンプル
<pageTemplateDefs xmlns="http://xmlns.oracle.com/adf/faces/rich/pagetemplate"> <pagetemplate-jsp-ui-def>/sampleTemplateDef1.jspx</pagetemplate-jsp-ui-def> <pagetemplate-jsp-ui-def>/sampleTemplateDef2.jspx</pagetemplate-jsp-ui-def> </pageTemplateDefs>
注意: アプリケーション・ナビゲータでページ・テンプレートの名前の変更または削除を実行すると、JDeveloperにより、ファイルシステムのページ・テンプレート定義ファイルの名前の変更または削除が行われますが、 |
pagetemplate-metadata.xml
ファイルには、プロジェクトに作成したすべてのページ・テンプレートの名前およびパスが含まれます。このファイルは、ウィザードを使用してテンプレートベースのJSFページを作成する場合、およびページ・テンプレート定義を含むプロジェクトをデプロイする場合に、使用可能なページ・テンプレートを判断するために使用されます。
通常、JSFページは、ページ・テンプレート定義が作成および格納されているのと同じプロジェクトに作成します。テンプレートに基づくページを作成するのと同じプロジェクトにページ・テンプレートが存在しない場合は、まず、ページ・テンプレート・プロジェクトをADFライブラリJARにデプロイします。プロジェクトのデプロイの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アプリケーション・コンポーネントの再利用」を参照してください。ページ・テンプレート・プロジェクトをデプロイすると、アプリケーションで作業している他の開発者とページ・テンプレートを共有できます。
注意: テンプレートに |
ページ・テンプレートを使用して、JSFページまたはページ・フラグメントを作成できます。後からページ・テンプレートのレイアウト・セクションを変更すると、そのテンプレートを使用するすべてのページまたはページ・フラグメントがレイアウトの変更内容で自動的に更新されます。
テンプレートを使用するページで、pageTemplate
タグの前後にコンテンツを追加できます。一般的に、pageTemplate
タグはページに1つのみ使用しますが、複数使用することに対する制限はありません。
JDeveloperでは、JSFページの作成ウィザード、またはJSFページ・フラグメントの作成ウィザードにテンプレートの選択オプションが用意されているため、ページ・テンプレートに基づくJSFページの作成が簡略化されます。
ページ・テンプレートに基づくJSFページまたはページ・フラグメントを作成する手順:
JSF JSPページの作成方法に関する項の手順に従って、「JSFページの作成」ダイアログを開きます。ダイアログで、「ページ・テンプレートの使用」ドロップダウン・リストから使用するページ・テンプレートを選択します。
ヒント: 選択できるのは、JDeveloperのテンプレート・ウィザードを使用して作成されたページ・テンプレートのみです。「ページ・テンプレートの使用」ドロップダウン・リストが無効化されている場合、新しいページを作成しているプロジェクトでページ・テンプレートを使用できないことを意味します。 |
デフォルトでは、JDeveloperにより、ビジュアル・エディタに新しいページまたはページ・フラグメントが表示されます。ページ・テンプレートで定義されたファセットはビジュアル・エディタで名前付きのボックスとして表示されます。ページ・テンプレートにデフォルト値が含まれる場合、プロパティ・インスペクタに値が表示されます。デフォルト値にビジュアル表示(たとえば、サイズなど)が含まれる場合、それは、ページ・テンプレート定義のレイアウト・セクションで定義されたコンポーネントによってレンダリングされるコンテンツとともに、ビジュアル・エディタに反映されます。
構造ウィンドウで、(af:formの下の)af:pageTemplateが表示されるまでjsp:rootを開きます。
form
タグ内で、pageTemplate
タグの前後にコンテンツをドロップできます。
コンポーネント・パレットからテンプレートのファセットにコンポーネントをドラッグ・アンド・ドロップして、コンポーネントを追加します。構造ウィンドウのaf:pageTemplate内に、ページ・テンプレート定義のコンポーネント・メタデータ・セクションに事前に定義されているファセット(f:facet - mainなど)が表示されます。
ファセットにドロップできるコンポーネントのタイプは、ページ・テンプレート定義のfacetRef
タグの場所によって異なります。たとえば、facetRef
タグがページ・テンプレート定義のtable
コンポーネント内に配置されるよう定義した場合、table
コンポーネントに子として使用できるのはcolumn
コンポーネントのみであるため、ファセットにドロップできるのはcolumn
コンポーネントのみです。
ヒント: テンプレート・ファセットにドロップするコンテンツには、ADFモデル・データ・バインディングが含まれている可能性があります。つまり、「データ・コントロール」パネルから項目をドラッグ・アンド・ドロップできます。ADFモデル・データ・バインディングの使用方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』を参照してください。 |
構造ウィンドウで、af:pageTemplateを選択します。これにより、プロパティ・インスペクタに、ページ・テンプレート定義に事前に定義されているすべての属性が表示されます。事前定義済の属性にはデフォルト値があります。
事前定義済の属性に静的値を割り当てることも、EL式(#{myBean.somevalue}
など)を使用することもできます。属性に値を入力すると、JDeveloperによりコードにf:attribute
タグが追加され、(存在する場合は)属性のデフォルト値が割り当てた値に置き換えられます(例19-12を参照)。
実行時、デフォルトまたは割り当てられた属性値が、属性名を参照するEL式(#{attrs.someAttributeName}
など)によってページ・テンプレート定義に指定されているように、テンプレートの適切な部分に使用または表示されます。
注意: 事前定義済のテンプレート定義属性のみでなく、
|
CSSまたはJavaScriptなどのリソースを含めるには、af:resource
タグを使用する必要があります。詳細は、ページへのリソースの追加に関する項を参照してください。
テンプレートを使用してページを作成すると、JDeveloperにより、例19-12に示すように、ページ・テンプレート定義を参照するpageTemplate
タグが挿入されます。テンプレートのファセットに追加されるコンポーネントでは、ファセットの参照にf:facet
タグが使用されます。指定した属性値はすべて、f:attribute
タグに表示されます。
例19-12 ページ・テンプレートを参照する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:af="http://xmlns.oracle.com/adf/faces/rich"> <jsp:directive.page contentType="text/html;charset=windows-1252"/> <f:view> <af:document> <af:form> . . . <af:pageTemplate viewId="/sampleTemplateDef1.jspx" id="template1"> <f:attribute name="title" value="Some Value"/> <f:facet name="main"> <!-- add contents here --> </f:facet> </af:pageTemplate> . . . </af:form> </af:document> </f:view> </jsp:root>
ページ・テンプレートを使用するJSFページが実行されると、次の処理が行われます。
使用ページのpageTemplate
コンポーネントでは、viewId
属性(<af:pageTemplate viewId="/sampleTemplateDef1.jspx"/>
など)を使用して、テンプレート・コンポーネント・メタデータおよびレイアウトが含まれるページ・テンプレート定義ファイルが特定されます。
pageTemplateDef
タグのレイアウト・セクションに定義されたコンポーネント・サブツリーがインスタンス化され、ページのpageTemplate
タグで識別される場所にある使用ページのコンポーネント・ツリーに挿入されます。
使用ページにより、ファセット・コンテンツがfacet
タグを使用してテンプレートに渡されます。各facet
タグのファセット・コンテンツは、pageTemplateDef
タグのレイアウト・セクションにある対応するfacetRef
タグで指定されているように、テンプレートの適切な場所に挿入されます。
使用ページにより、値がattribute
タグを使用してテンプレートに渡されます。pageTemplateDef
タグにより、pageTemplate
タグが内部的に独自のパラメータを参照できるように、var
属性の値が設定されます。pageTemplate
タグにより設定されるのはパラメータのみで、それらのパラメータはランタイムによりpageTemplateDef
タグに定義されている属性にマップされます。
テンプレート・コンポーネント・メタデータを使用して、pageTemplate
タグにより属性にデフォルト値が適用され、必要な値が確認されます。
注意: ページ・テンプレートは、JSFの処理中ではなく、JSPの実行中(つまり、コンポーネント・ツリーの作成中)に処理されます。これは、コンポーネント・ツリーの作成が必要なタグ内に、ページ・テンプレートから作成されるフラグメントを使用できないことを意味します。たとえば、 |
ページ・テンプレートにADFモデル・データ・バインディングが使用される場合の処理の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「ページ・テンプレートの使用」を参照してください。
pageTemplate
コンポーネントは、(テンプレート定義の直接のコンテンツであるか、jsp:include
アクションを使用して含められるフラグメント・コンテンツであるかに関係なく)テンプレートのすべてのコンテンツのネーミング・コンテナとして機能します。テンプレートに基づくページのクライアント側のイベントを処理している場合、コンポーネントを特定するコードを使用する際には、テンプレートのIDを指定する必要があります。詳細は、ネーミング・コンテナの使用に関する項を参照してください。
宣言コンポーネントは、その他の既存のADF Facesコンポーネントで構成される再利用可能なコンポジットUIコンポーネントです。様々な状況で、同じコンポーネントを繰り返し再利用しているとします。一般的に使用されるUI要素を繰り返しコピーして貼り付けるかわりに、それらのコンポーネントを構成する宣言コンポーネントを定義し、そのコンポジット宣言コンポーネントを複数の場所またはページに再利用できます。
注意: ページのすべてのview部分(フラグメント、宣言コンポーネントおよびメイン・ページ)では、同じリクエスト・スコープが共有されます。このため、1つのページに同じフラグメントまたは宣言コンポーネントを複数回使用する場合や、バッキングBeanが共有される場合に競合が発生する可能性があります。スコープの詳細は、オブジェクト・スコープ・ライフサイクルに関する項を参照してください。 |
アプリケーションに宣言コンポーネントを使用するには、まず、XML構文で記述されたJSFドキュメントであるXMLベースの宣言コンポーネント定義(ファイル拡張子は.jspx
)を作成します。宣言コンポーネントJSFファイルには、f:view
およびdocument
タグが含まれず、ルート・タグとしてcomponentDef
が必要です。
宣言コンポーネントの完全な説明は、2つのセクション内に定義されています。1つのセクションはxmlContent
で、宣言コンポーネントのサポートされているコンテンツ領域を説明するすべてのページ・テンプレート・コンポーネント・メタデータが含まれています。宣言コンポーネントのメタデータには次のものが含まれます。
ファセット: ファセットは、宣言コンポーネントを構成する個々のコンポーネントに配置されるコンテンツに対してプレースホルダとして機能します。各コンポーネントは1つのファセットを参照します。ページの設計者が宣言コンポーネントを使用する場合、コンテンツをファセットに挿入します。このファセットにより、コンテンツをコンポーネントに挿入できるようになります。
ヒント: ファセットは、宣言コンポーネント内でコンテンツを含むことのできる唯一の領域です。つまり、JSFページに使用した場合、宣言コンポーネントに子がない可能性もあります。コンテンツが必要なすべての領域にファセットを作成します。 |
属性: 個々のコンポーネントに属性を移入するために値を使用できる属性を定義します。たとえば、宣言コンポーネントにpanelHeader
コンポーネントが使用されている場合に、Title
という名前の属性を作成するとします。次に、Title
属性の値が、panelHeader
コンポーネントのtext
属性の値として使用されるように宣言コンポーネントを設計します。ユーザーがオーバーライドできる属性にデフォルト値を指定できます。
ヒント: 宣言コンポーネントのユーザーは、個々のコンポーネントに直接属性を設定できないため、ユーザーによる設定またはデフォルト値のオーバーライドが可能なすべての属性に、必ず属性を作成する必要があります。 また、宣言コンポーネントでクライアント側の属性( |
メソッド: 組み込まれるコンポーネントのいずれかにあるプロパティをバインドできるメソッドを定義できます。たとえば、宣言コンポーネントにボタンが含まれる場合、メソッド名およびシグネチャを宣言し、actionListener
属性をその宣言済メソッドにバインドできます。ページ開発者が宣言コンポーネントを使用する際には、コンポーネントに必要なロジックが含まれるマネージドBeanのメソッドにリバインドします。
たとえば、宣言コンポーネントに、actionEvent
メソッドを起動する必要があるボタンが含まれるとします。シグネチャvoid method(javax.faces.event.ActionEvent)
を使用するmethod1
という名前の宣言メソッドを作成します。次に、ボタンのactionListener
属性を、宣言済メソッドにバインドします。ページ開発者が宣言コンポーネントを使用する際には、JDeveloperにより、同じシグネチャを使用するバッキングBeanにメソッドを指定するよう求められます。
タグ・ライブラリ: すべての宣言コンポーネントは、アプリケーションで使用するためにインポートするタグ・ライブラリに含まれている必要があります。
2つ目のセクション(xmlContent
タグの外)は、宣言コンポーネントを構成するすべてのコンポーネントが定義される部分です。各コンポーネントには、コンポーネントへのコンテンツの追加に使用されるファセットへの参照が含まれます。
宣言コンポーネントをプロジェクトで使用するには、最初に宣言コンポーネントをADFライブラリとして含むライブラリをデプロイする必要があります。次に、デプロイ済ADFライブラリJARをプロジェクトのプロパティに追加します。これにより、自動的にJSPタグ・ライブラリがプロジェクトのプロパティに挿入されます。これによって、コンポーネント・パレットにコンポーネントが表示され、JSFページにドラッグ・アンド・ドロップできるようになります。
たとえば、panelBox
コンポーネントを使用する宣言コンポーネントを作成するとします。panelBox
コンポーネントのツールバーに、バッキングBeanのactionEvent
メソッドの起動に使用できる3つのボタンを含めるとします。これを実行するには、次のものを作成します。
panelBox
コンポーネントのコンテンツを保持するためのContent
という名前のファセットを1つ。
panelBox
コンポーネントのタイトルとして表示するテキストを決定するTitle
という名前の属性を1つ。
各ボタンに表示するテキストを決定する属性を3つ(各ボタンに1つずつで、buttonText1
、buttonText2
およびbuttonText3
という名前)。
ボタンをレンダリングするかどうかを決定する属性を3つ(各ボタンに1つずつで、display1
、display2
およびdisplay3
という名前)。これは、コンポーネントが使用されるたびに3つのボタンすべてが必要であるかどうかがわからないためです。
それぞれがactionEvent
メソッド・シグネチャを使用する宣言メソッドを3つ(各ボタンに1つずつで、method1
、method2
およびmethod3
という名前)。
text
属性が作成したTitle
属性にバインドされ、Content
ファセットを参照するpanelBox
コンポーネントを1つ。
toolbarButton
コンポーネントを3つ。それぞれのtext
属性は対応するbuttonText
属性に、render
属性は対応するdisplay
属性に、actionListener
属性は対応するmethod
名にバインドされます。
図19-2に、このような宣言コンポーネントがビジュアル・エディタでどのように表示されるかを示します。
ページ開発者が必要な属性またはメソッドを含む宣言コンポーネントをページにドロップすると、値を要求するダイアログが開きます。
開発者がレンダリングされる初めの2つのボタンにのみ値を設定し、出力テキストを含むpanelGroupLayout
コンポーネントを追加した場合、ページは図19-3のようにレンダリングされます。
注意: 宣言コンポーネントのコンポーネント・レイアウトには、フラグメントまたはADFのデータ・バインドされたコンポーネントは使用できません。いくつかのコンポーネントをADFモデル・レイヤーにバインドする必要がある場合は、バインド先のコンポーネント属性用に属性を作成します。宣言コンポーネントのユーザーは、それらの属性をADFモデル・レイヤーに手動でバインドできます。 また、宣言コンポーネントは外部のJARファイルで送信され、参照ファイルを見つけられないため、 |
宣言コンポーネントに、CSSに定義されているカスタム・スタイルまたはJavaScriptなどのリソースが必要な場合は、af:resource
タグを使用して、使用ページにそれらのリソースを含める必要があります。詳細は、ページへのリソースの追加に関する項を参照してください。
JDeveloperでは、JSF宣言コンポーネントの作成ウィザードを使用するため、宣言コンポーネント定義の作成が簡略化されます。このウィザードでは、ファセットの作成や宣言コンポーネントの属性およびメソッドの定義を行うことができます。ウィザードでは、宣言コンポーネントのタグ・ライブラリ情報を記述するcomponent-extension
タグにメタデータも作成されます。タグ・ライブラリ・メタデータは、宣言コンポーネントのJSPタグ・ライブラリを作成するために使用されます。
まず、componentDef
タグのxmlContent
セクション内にあるファセットおよび属性に、テンプレート・コンポーネント・メタデータを追加します。ファセットおよび属性に必要なコンポーネント・メタデータをすべて追加したら、xmlContent
の外のセクションに、宣言コンポーネントの実際のレイアウトを定義するコンポーネントを追加します。
ベスト・プラクティスのヒント: 宣言コンポーネントのタグ・ライブラリ定義(TLD)はコンポーネントを使用する前に生成する必要があるため、使用される前にコンポーネントをJARファイルにデプロイする必要があります。宣言コンポーネントのみが含まれるアプリケーションを作成することをお薦めします。これにより、単一ライブラリのすべての宣言コンポーネントをデプロイして、複数のアプリケーションで使用できます。 |
宣言コンポーネント定義を作成する手順:
アプリケーション・ナビゲータで、宣言コンポーネントを作成および格納するフォルダを右クリックし、「新規」を選択します。
「カテゴリ」ツリーで「JSF」ノードを選択し、「項目」ペインで「JSF宣言コンポーネント」を選択して「OK」をクリックします。
宣言コンポーネントの名前およびファイル名を入力します。
指定する名前は、コンポーネント・パレットにおける宣言コンポーネントの表示名、およびコンポーネント・タグ用に生成されたJavaクラスの名前として使用されます。宣言コンポーネントの名前に使用できるのは、SampleName
またはSampleName1
などの英数字のみです。
ファイル名は、宣言コンポーネント定義ファイル(componentDef1.jspx
など)の名前です。宣言コンポーネント定義ファイルはXMLドキュメントである必要があるため、JDeveloperでは、デフォルトで.jspx
がファイル拡張子として使用されます。
宣言コンポーネント用のデフォルトのディレクトリ名をそのまま使用するか、新しい場所を選択します。
JDeveloperでは、デフォルトで、ファイルシステムの/ViewController/public_html
ディレクトリに宣言コンポーネント定義が保存されます。たとえば、すべての宣言コンポーネント定義を/View Controller/public_html/declcomps
ディレクトリに保存できます。
パッケージ名(dcomponent1
など)を入力します。JDeveloperでは、宣言コンポーネントのJavaクラスの作成時にパッケージ名が使用されます。
新しい宣言コンポーネントを含むタグ・ライブラリを選択します。タグ・ライブラリが存在しない場合、または新しいライブラリを作成する場合は、「タグ・ライブラリの追加」をクリックし、次の操作を実行してタグ・ライブラリのメタデータを作成します。
宣言コンポーネントを格納するJSPタグ・ライブラリの名前(dcompLib1
など)を入力します。
タグ・ライブラリのURI(/dcomponentLib1
など)を入力します。
タグ・ライブラリに使用する接頭辞(dc
など)を入力します。
宣言コンポーネントへのカスタム・ロジックの追加を可能にする場合は、「カスタム・コンポーネント・クラスの使用」チェック・ボックスを選択してクラス名を入力します。
名前付きファセットを追加するには、「ファセット定義」タブをクリックし、「追加」アイコンをクリックします。
宣言コンポーネントのファセットは、コンテンツが挿入される事前定義済の領域です。宣言コンポーネントを作成するために使用するコンポーネントはファセットを参照します。ページの開発者が宣言コンポーネントを使用する場合、コンテンツをファセットに配置します。このファセットにより、コンテンツを個々のコンポーネントに挿入できるようになります。各ファセットには一意の名前が必要です。たとえば、宣言コンポーネントにpanelBox
コンポーネントがある場合、panelBox
コンポーネントのコンテンツ領域にbox-main
という名前のファセットを定義できます。
属性を追加するには、「属性」をクリックし、「追加」をクリックします。
属性は、宣言コンポーネントに渡すことのできるUIコンポーネント属性です。各属性には名前とクラス・タイプが必要です。使用可能なクラス・タイプは、java.lang.String
、int
、boolean
およびfloat
です。デフォルト値を割り当て、「必須」チェック・ボックスを選択することで、値が必須であることを指定できます。
ヒント: ユーザーが値の設定や変更を行える組込みコンポーネントの属性用に属性を作成する必要があります。 ドラッグ・アンド・ドロップ機能に使用される |
宣言メソッドを追加するには、「メソッド」タブをクリックし、「追加」アイコンをクリックします。
宣言メソッドを使用すると、コマンド・コンポーネントのアクションまたはアクション・リスナーをメソッド・シグネチャにバインドできます。これは、後からコンポーネントが使用されるページのバッキングBeanにある同じシグネチャの実際のメソッドに解決されます。省略ボタンをクリックすると、「メソッド・シグネチャ」ダイアログを開くことができます。このダイアログにより、シグネチャを検索し、作成できます。
ダイアログを完了すると、JDeveloperにより、ビジュアル・エディタに宣言コンポーネント定義ファイルが表示されます。
ヒント: 宣言コンポーネントを作成したら、構造ウィンドウで |
コンポーネント・パレットからコンポーネントをドラッグし、構造ウィンドウのcomponentDef
タグに子としてドロップします。
panelBox
コンポーネントをドロップしたとします。構造ウィンドウでは、JDeveloperにより、xmlContent
タグの後ろにコンポーネントが追加されます。xmlContent
タグの前後のどこにレイアウトするコンポーネントを配置するかは問題ではありませんが、一貫性を保つことをお薦めします。
宣言コンポーネントのコンポーネント・レイアウトには、任意の数のコンポーネントを使用できます。通常、panelFormLayout
またはpanelGroupLayout
などのコンポーネントを追加してから、そのパネル・コンポーネントにレイアウトを定義するコンポーネントを追加します。
注意: 宣言コンポーネントのコンポーネント・レイアウトには、フラグメントまたはADFのデータ・バインドされたコンポーネントは使用できません。いくつかのコンポーネントをADFモデル・レイヤーにバインドする必要がある場合は、それらのコンポーネント属性用に属性を作成します。宣言コンポーネントのユーザーは、それらの属性をADFモデル・レイヤーに手動でバインドできます。ADFモデル・レイヤーの使用方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のFusion WebアプリケーションでのOracle ADFモデルの使用に関する項を参照してください。 また、宣言コンポーネントは外部のJARファイルで送信され、参照ファイルを見つけられないため、 |
ページ作成者がコンポーネントを使用してコンテンツを挿入できる(レイアウト・セクション内の)コンポーネントで、facetRef
タグを使用して適切な名前付きファセットを参照します。
たとえば、メインのコンテンツ領域にcontent
ファセットを定義した場合、panelBox
コンポーネントにfacetRef
タグを子として追加し、content
ファセットを参照します。設計時、ページ開発者がcontent
ファセットにコンポーネントをドロップすると、そのコンポーネントはpanelBox
コンポーネントに配置されます。
コンポーネント・パレットからFacetRefをドラッグして、ページの目的の場所にドロップすると、JDeveloperにより「FacetRefの挿入」ダイアログが表示されます。そのダイアログで、ドロップダウン・リストからファセット名を選択するか、ファセット名を入力します。定義ファイルのコンポーネント・メタデータにまだ定義されていないファセット名を入力すると、JDeveloperにより、xmlContent
タグ内のコンポーネント・メタデータに新しいファセット定義用のエントリが自動的に追加されます。
注意: 各ファセットを参照できるのは一度のみです。つまり、同じ宣言コンポーネント定義には、同じ |
宣言コンポーネントのどこに属性を使用するかを指定するには、プロパティ・インスペクタと式ビルダーを使用して、作成した属性にコンポーネントの属性値をバインドします。
たとえば、title
属性を定義し、panelBox
をコンポーネントとして追加した場合は、図19-4に示すように、プロパティ・インスペクタでテキスト属性の隣にあるドロップダウン・メニューを使用して式ビルダーを開きます。
式ビルダーで、JSPオブジェクト→「attrs」ノードを開き、プロパティ・インスペクタで属性値に使用する作成済の属性を選択します。たとえば、図19-5に、式ビルダーで選択したtitle属性を示します。「式に挿入」ボタンをクリックして「OK」をクリックし、属性値として式を追加します。
宣言コンポーネントのコマンド・ボタンで起動するメソッドを指定するには、そのコンポーネントのactionListener
属性の隣にあるドロップダウン・メニューを使用し、「編集」を選択して「プロパティの編集」ダイアログを開きます。このダイアログを使用すると、宣言コンポーネントに作成した宣言メソッドのいずれかを選択できます。
ダイアログで「宣言コンポーネント・メソッド」を選択し、ドロップダウン・リストから宣言メソッドを選択して「OK」をクリックします。
JSF宣言コンポーネントの作成ウィザードを初めて使用する際、JDeveloperでは、ユーザーがウィザードに入力した名前を使用してメタデータ・ファイルが作成されます。コンポーネントのすべての定義は、componentDef
タグに含まれています。このタグでは2つの属性が使用されます。1つ目はvar
で、属性値にアクセスするために個々のコンポーネントにより使用される変数です。デフォルトで、var
の値はattrs
です。2つ目の属性はcomponentVar
で、メソッドにアクセスするために個々のコンポーネントにより使用される変数です。デフォルトで、componentVar
の値はcomponent
です。
ファセット、属性およびメソッドを説明するメタデータは、xmlContent
タグに含まれます。ファセット情報はfacet
タグに、属性情報はattribute
タグに、メソッド情報はライブラリ情報同様にcomponent-extension
タグに含まれます。例19-13に、図19-2に示されている宣言コンポーネントの省略形のコードを示します。
例19-13 xmlContentタグの宣言コンポーネント・メタデータ
<af:xmlContent> <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component"> <display-name>myPanelBox</display-name> <facet> <description>Holds the content in the panel box</description> <facet-name>Content</facet-name> </facet> <attribute> <attribute-name>title</attribute-name> <attribute-class>java.lang.String</attribute-class> <required>true</required> </attribute> <attribute> <attribute-name>buttonText1</attribute-name> <attribute-class>java.lang.String</attribute-class> </attribute> . . . <component-extension> <component-tag-namespace>component</component-tag-namespace> <component-taglib-uri>/componentLib1</component-taglib-uri> <method-attribute> <attribute-name>method1</attribute-name> <method-signature> void method(javax.faces.event.ActionEvent) </method-signature> </method-attribute> <method-attribute> <attribute-name>method2</attribute-name> <method-signature> void method(javax.faces.event.ActionEvent) </method-signature> </method-attribute> . . . </component-extension> </component> </af:xmlContent>
組込みコンポーネントのメタデータは、xmlContent
タグの後ろに含まれます。これらのコンポーネントのコードは、コンポーネントに直接設定した属性値を含み、標準JSFページのものと同じです。属性またはメソッドに作成したバインドでは、バインドにコンポーネントの変数が使用されます。例19-14に、ツールバーに3つのボタンがあるpanelBox
コンポーネントのコードを示します。facetRef
タグがpanelBox
コンポーネントの子であるため、ページ開発者が追加するすべてのコンテンツがpanelBox
コンポーネントの子になることに注意してください。
例19-14 宣言コンポーネント内のコンポーネント
<af:panelBox text="#{attrs.title}" inlineStyle="width:25%;"> <f:facet name="toolbar"> <af:group> <af:toolbar> <af:commandToolbarButton text="#{attrs.buttonText1}" actionListener="#{component.handleMethod1}" rendered="#{attrs.display1}"/> <af:commandToolbarButton text="#{attrs.buttonText2}" rendered="#{attrs.display2}" actionListener="#{component.handleMethod2}"/> <af:commandToolbarButton text="#{attrs.buttonText3}" rendered="#{attrs.display3}" actionListener="#{component.handleMethod3}"/> </af:toolbar> </af:group> </f:facet> <af:facetRef facetName="Content"/> </af:panelBox>
初めてウィザードを使用してプロジェクトに宣言コンポーネントを作成する際に、JDeveloperにより、ファイルシステムの/ViewController/src/META-INF
ディレクトリに格納されるdeclarativecomp-metadata.xml
ファイルが自動的に作成されます。
ウィザードを使用して定義する各宣言コンポーネントに対して、JDeveloperにより、宣言コンポーネント定義ファイル(componentDef1.jspx
など)が作成され、declarativecomp-metadata.xml
ファイルにエントリが追加されます。例19-15に、declarativecomp-metadata.xml
ファイルの例を示します。
例19-15 declarativecomp-metadata.xmlファイルのサンプル
<declarativeCompDefs xmlns="http://xmlns.oracle.com/adf/faces/rich/declarativecomp"> <declarativecomp-jsp-ui-def> /componentDef1.jspx </declarativecomp-jsp-ui-def> <declarativecomp-taglib> <taglib-name> dCompLib1 </taglib-name> <taglib-uri> /dcomponentLib1 </taglib-uri> <taglib-prefix> dc </taglib-prefix> </declarativecomp-taglib> </declarativeCompDefs>
注意: アプリケーション・ナビゲータで宣言コンポーネントの名前の変更または削除を実行すると、JDeveloperにより、ファイルシステムの宣言コンポーネント定義ファイルの名前の変更または削除が行われますが、 |
declarativecomp-metadata.xml
ファイルには、プロジェクトに作成したすべての宣言コンポーネントの名前、パスおよびタグ・ライブラリの情報が含まれます。プロジェクトのデプロイ時には、JDeveloperによりメタデータが使用され、宣言コンポーネントのJSPタグ・ライブラリおよびJavaクラスが作成されます。
宣言コンポーネントを表示するには、タグ・ライブラリ定義(TLD)が必要です。プロジェクトをデプロイすると、JDeveloperにより自動的にTLDが生成されます。このため、宣言コンポーネントを使用するには、まず、宣言コンポーネントを含むプロジェクトをデプロイする必要があります。これは、プロジェクトに宣言コンポーネントを使用する前、または他の開発者と宣言コンポーネントを共有する前に、ADFライブラリJARに宣言コンポーネント定義プロジェクトをデプロイする必要があることを意味します。プロジェクトをADFライブラリJARにデプロイする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アプリケーション・コンポーネントの再利用」の章を参照してください。
簡単に説明すると、宣言コンポーネント定義を含むプロジェクトをデプロイすると、JDeveloperにより次の項目がADFライブラリJARに追加されます。
各宣言コンポーネント定義(つまり、各componentDef
コンポーネント)用のコンポーネント・タグ・クラス(componentDef1Tag.class
など)
プロジェクトdeclarativecomp-metadata.xml
ファイルの情報を使用した、宣言コンポーネント用の1つ以上のJSP TLDファイル
使用プロジェクトで宣言コンポーネントを使用するには、デプロイ済のADFライブラリJARをプロジェクトのプロパティに追加します。ADFライブラリJARを追加する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アプリケーション・コンポーネントの再利用」の章を参照してください。デプロイ済のJARを追加すると、JDeveloperにより、プロジェクトのプロパティに(再利用可能な宣言コンポーネントを含む)1つ以上のJSPタグ・ライブラリが自動的に挿入され、コンポーネント・パレットに表示されます。
JDeveloperで、コンポーネント・パレットからコンポーネントを選択およびドラッグし、ページの目的の場所にドロップして、その他のUIコンポーネントと同じように宣言コンポーネントをJSFページに追加します。宣言コンポーネントは、そのユーザー独自のタグ・ライブラリ用のパレットのページに表示されます。例19-6に、宣言コンポーネントを含むライブラリのコンポーネント・パレットのページを示します。
必要な属性を含む宣言コンポーネントをページにドラッグすると、定義済の属性に値を入力できるダイアログが開きます。
宣言コンポーネントをページに追加したら、宣言メソッドをマネージドBeanの実際のメソッドに手動でバインドする必要があります。
次の手順を実行する前に、宣言コンポーネントを使用するJSFページを作成中のプロジェクトに、宣言コンポーネントを含むADFライブラリJARを追加しておく必要があります。ADFライブラリJARを追加する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アプリケーション・コンポーネントの再利用」の章を参照してください。
JSFページで宣言コンポーネントを使用する手順:
アプリケーション・ナビゲータで、JSFページ(またはJSFページ・テンプレート)をダブルクリックし、ビジュアル・エディタで開きます。
コンポーネント・パレットで、ドロップダウン・リストから、宣言コンポーネント・タグ・ライブラリの名前を選択します。ページに必要な宣言コンポーネントをドラッグ・アンド・ドロップします。同じページに同じ宣言コンポーネントを複数回追加できます。
宣言コンポーネント定義に必須属性が含まれる場合は、JDeveloperにより、挿入する宣言コンポーネントの必須の値を入力するためのダイアログが開かれます。
注意: 属性の値としてADFモデル・レイヤー・バインディングを使用する場合は、式ビルダーを使用してこれらのバインディングを手動で作成し、必要なバインディング・プロパティを特定します。 |
コンポーネント・パレットからテンプレートのファセットにコンポーネントをドラッグ・アンド・ドロップして、コンポーネントを追加します。構造ウィンドウで、宣言コンポーネントの要素(たとえば、dc:myPanelBox
など)が表示されるまで、構造を展開します。ここで、dc
はタグ・ライブラリの接頭辞で、myPanelBox
は宣言コンポーネント名です。
その下に、宣言コンポーネント定義に定義されているファセット(f:facet - content
など)があります。これらのファセットにコンポーネントを追加します。
コンテンツを直接宣言コンポーネントに追加できません。コンテンツをドロップできるのは名前付きファセットに対してのみです。ファセットにドロップできるコンポーネントのタイプは、宣言コンポーネント定義のfacetRef
タグの場所によって異なります。たとえば、宣言コンポーネント定義のtable
の子になるようにfacetRef
を定義した場合、table
がcolumn
の子のみを受け入れるため、ファセットにドロップできるのはcolumn
コンポーネントのみです。
注意: 宣言コンポーネントの直接の子として配置できるコンポーネントはありません。宣言コンポーネントに表示するコンテンツはすべて、宣言コンポーネントのファセットに配置する必要があります。 |
構造ウィンドウで、宣言コンポーネント要素(dc:myPanelBox
など)を再度選択します。プロパティ・インスペクタに、宣言コンポーネント定義に事前に定義したすべての属性およびメソッド(title
など)が表示されます。属性にはデフォルト値があります。
属性に静的値を割り当てることも、EL式(#{myBean.somevalue}
など)を使用することもできます。どのメソッドも、宣言コンポーネントに定義されている宣言済メソッドと同じシグネチャを使用するメソッドにバインドする必要があります。
実行時、属性名を参照するEL式(#{attrs.someAttributeName}
など)によって宣言コンポーネント定義に指定されているとおりに、属性値が適切な部分に表示されます。
CSSまたはJavaScriptなどのリソースを含める必要がある場合は、af:resource
タグを使用してそれらのリソースを含める必要があります。詳細は、ページへのリソースの追加に関する項を参照してください。
ページに宣言コンポーネントを追加したら、宣言コンポーネント定義のコンポーネント・レイアウト・セクションに定義されているコンポーネントによってレンダリングされるコンテンツとともに、コンポーネントの定義済ファセットが名前付きのボックスとしてビジュアル・エディタに表示されます。
その他のUIコンポーネントと同じように、ページに初めて宣言コンポーネントを追加すると、次に示すように、JDeveloperにより、宣言コンポーネント・タグ・ライブラリの名前空間および接頭辞がページのjsp:root
タグに追加されます。
<jsp:root xmlns:dc="/dcomponentLib1: ..>
この例で、dc
はタグ・ライブラリの接頭辞で、/dcomponentLib1
は名前空間です。
JDeveloperにより、ページに宣言コンポーネントのタグが追加されます。タグには、コンポーネントの追加時にダイアログに設定したように、コンポーネントの属性値が含まれます。例19-16に、3つのoutputFormatted
コンポーネントが含まれ、ユーザーがpanelGroupLayout
コンポーネントを追加したMyPanelBox
宣言コンポーネントのコードを示します。
例19-16 コンテンツを含む宣言コンポーネントのJSFコード
<dc:myPanelBox title="My Panel Box" buttonText1="Button 1" display1="true" display2="true" buttonText2="Button 2" display3="false"> <f:facet name="Content"> <af:panelGroupLayout layout="scroll"> <af:outputFormatted value="outputFormatted1" styleUsage="instruction"/> <af:outputFormatted value="outputFormatted2" styleUsage="instruction"/> <af:outputFormatted value="outputFormatted3" styleUsage="instruction"/> </af:panelGroupLayout> </f:facet> </dc:myPanelBox>
宣言コンポーネントを使用するJSFページが実行されると、次の処理が行われます。
使用ページの宣言コンポーネント・タグにより、宣言コンポーネント・タグ・クラスと、宣言コンポーネントのメタデータおよびレイアウトを含む定義ファイルが特定されます。
componentDef
タグのレイアウト・セクションに定義されたコンポーネント・サブツリーがインスタンス化され、ページの宣言コンポーネント・タグで識別される場所にある使用ページのコンポーネント・ツリーに挿入されます。
componentDef
タグにより、宣言コンポーネントが内部的に独自の属性を参照できるように、var
属性の値が設定されます。宣言コンポーネントにより設定されるのは属性値のみで、それらの値はランタイムによりcomponentDef
タグに定義されている属性にマップされます。
宣言コンポーネント・メタデータを使用して、宣言コンポーネントにより属性にデフォルト値が適用され、必要な値が確認されます。
使用ページにより、ファセット・コンテンツがfacet
タグを使用して宣言コンポーネントに渡されます。各facet
タグのファセット・コンテンツは、componentDef
タグのレイアウト・セクションにある対応するfacetRef
タグで指定されているように、宣言コンポーネントの適切な場所に挿入されます。
af:resource
タグを使用して、CSSまたはJavaScriptをページ、ページ・テンプレートまたは宣言コンポーネントに追加する必要があります。リソースは(HTML head要素にある)ページのみに追加できるため、このタグはページ・テンプレートおよび宣言コンポーネントに有用です。このタグをページ・テンプレートおよび宣言コンポーネントで使用する場合、リソースはJSP実行時に使用ページに追加されます。このタグを使用しない場合、スタイル・タグやリンク・タグを使用する場合はいつも、ブラウザでは、ページ・テンプレートおよび宣言コンポーネントを使用するページのレイアウトの再設定が必要になることがあります。リソースは、ページ・リクエストの間、ページに追加できますが、ドキュメント・コンポーネントがレンダリングされる前に追加する必要があります。
リソース・タグはPPRを使用して追加できます。PPR中は、次の要件が適用されます。
URLリソースは、ページに追加される前にクライアント上で比較されます。これにより、複製は追加されません。
CSSリソースは、PPRナビゲーション中にページから削除されます。新しいページには新しいCSSリソースがあります。
af:resource
タグを使用してリソースの場所を定義します。その後、使用ページのドキュメント・ヘッダーにリソースが追加されます。
リソースを追加する手順:
コンポーネント・パレットの「操作」セクションから、使用ページの任意の場所に「リソース」タグをドラッグ・アンド・ドロップします。
「リソースの挿入」ダイアログで、css
またはjavascript
を選択します。
プロパティ・インスペクタで、source
属性の値としてリソースのURIを入力します。URIをコンテキストに相対させる必要がある場合は、URIの先頭にフォワード・スラッシュ(/)を1つ付けます。URIをサーバーに相対させる必要がある場合は、URIの先頭にフォワード・スラッシュ(/)を2つ付けます。URIの先頭を1つまたは2つのスラッシュ以外のものにした場合、URIはブラウザのURIの相対的な場所に解決されます。