ウィザードを使用して、アプリケーションとプロジェクト、およびページ階層内で識別された各メニュー用の空白のADFアンバウンド・タスク・フローを素早く作成します。 ここで作成するのは、Home、Products、Saleという3つのメニューで構成されるページ階層をナビゲートするためのメニュー・システムです。
メイン・メニューから「File」→「New」を選択します。 New Galleryで、Generalカテゴリを開き、「Applications」を選択します。 Itemsリストで「Fusion Web Application (ADF)」を選択し、「OK」をクリックします。
このJDeveloperアプリケーションは、組織構造の最上位レベルに位置します。 アプリケーションの開発中に、操作しているオブジェクトの情報がここに格納されます。
詳細表示 同時に、プロジェクトとすべての環境設定が追跡記録されます。
JDeveloperアプリケーションでは、作成するアプリケーションのタイプ(WebアプリケーションやJavaアプリケーションなど)に応じて、あらかじめ構築されたテンプレートに基づいて、事前定義された環境のタイプを指定できます。 アプリケーション・テンプレートには適切な機能の組合せが事前に指定されているため、標準アプリケーションのプロジェクト構造を素早く作成できます。 また、使用している機能に合った選択肢のみが使用できるように、JDeveloperで実行する処理がアプリケーション・テンプレートによりフィルタリングされます。
このチュートリアルでは、データと密接に結合されたADF Webアプリケーションを構築するために構成されるFusion Web Application(ADF)テンプレートを使用します。 適切なテンプレートを使用してアプリケーションを作成した後も、新しいプロジェクトをアプリケーションに追加し、使用できるようにする機能を指定できます。 これを実行するには、アプリケーション・ナビゲータでアプリケーション名を右クリックして、「New Project」を選択します。 New Galleryでは、Itemsリストから任意のタイプのプロジェクトを選択できます。
例に合わせて、アプリケーション名としてMenuWebAppと入力します。
初期プロジェクト構造(アプリケーション・ワークスペース内の名前付きプロジェクト・フォルダ)および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。
詳細表示 関連する機能は、アプリケーション内のプロジェクトで定義されます。
JDeveloperプロジェクトは、関連するファイルを論理的にグループ化するときに使用します。ここでは、ソース・ファイル、パッケージ、クラス、イメージ、およびプログラムで必要になるその他の要素が管理されます。 プロジェクトでは、プログラムのコンパイル時や実行時に使用するソース・パスや出力パスなどの環境変数を管理します。 また、プロジェクトには、コンパイラ、ランタイム、デバッグに関するオプションが用意されており、プロジェクトごとにこれらのツールの動作をカスタマイズできます。
ソース・コードのアクセス、変更、再利用を簡単にするために、複数のプロジェクトをアプリケーションに追加できます。 それぞれのプロジェクトに含まれるファイルは、たとえば多層アプリケーションにおける各層に相当する場合もあれば、複雑なアプリケーションにおける各サブシステムに相当する場合もあります。 これらのファイルはどのディレクトリに配置されていても、1つのプロジェクトに含めることができます。
デフォルト値のままにして、「Finish」をクリックします。
新しいアプリケーションを作成すると、Application Overviewウィンドウがデフォルトでエディタ・ウィンドウ領域に開きます。 このアプリケーションのオブジェクトの作成では使用しないので、任意でこのウィンドウを閉じることができます。
-
記載されているとおりに手順を進めるために、チュートリアル全体を通じて、説明に示された値を入力してください。 まずは、以下の情報を読んで、この例で使用するページ階層について学習してください。
アプリケーションが複数のページで構成され、それらのページがツリー構造のような階層内で関連付けられ構造化される場合があります。このようなアプリケーションでは、ユーザーはノードのパスをドリルダウンして、ページ上の特定の情報にアクセスできます。
詳細表示
たとえば、以下の図は、最上位レベルのノード(Home)の下にノードが3つのレベルで存在するようなページ階層を示しています。 最上位レベルのノードは、ルートの親ページを表します。そのルート・ノードの下に第1レベルのノード(ProductsとShop)があり、第1レベルのノードの下に第2レベルのノード(NewとSale)があります。さらに第3レベルのノード(Electronics、Media、Office)があります。
ページ階層内の各ノードは、アプリケーション内の1ページに対応します。ルートのHomeノードを除く各ノードは、同時に親ノードにも子ノードにもなる場合があります。 たとえば、第1レベルのProductsノードは、第2レベルの子ノードであるNewとSaleに関する一般的な情報を記載した親ページです。 また、第2レベルのSaleノードも、第3レベルの子ノードであるElectronics、Media、Officeに関する一般的な情報を記載した親ノードとなります。
ページ階層内のナビゲーションでは、ノードの親子関係を辿ります。 たとえば、HomeページからElectronicsページにアクセスするには、Products、Saleの順にナビゲートします。 HomeからElectronicsまでの選択されたノードまたはリンクのパスは、ツリー内のフォーカス・パスと呼ばれます。
ページ階層内では、レベルや親を横断したナビゲーションも可能です。 たとえば、Electronicsページから第2レベルのNewページに移動し、さらに第1レベルのProductsページやShopページに移動できます。
HelpノードとPreferencesノードは、ルートのHomeノードと同じレベルにありますが、階層内の他のノードにはリンクされていません。このようなノードはグローバル・ノードです。 グローバル・ノードは、階層内のすべてのページからアクセスできるページを表します。
ページ階層をナビゲートするためのメニュー・システムを効率的に作成する方法は、メニュー・モデルを使用することです。 ADFメニューは、ADF Controller機能とXMLメニュー・モデルをともに使用して、ページ階層に関連付けられたナビゲーション・メニューを構築します。
上のページ階層では、図の赤のアウトラインで示される親ノードとその子ノードにより1つのメニューが構成されます。 そのため、このチュートリアルでは、Home、Products、Saleという3つのメニューを作成します。 ルートのHomeメニューにはProductsとShopという2つのメニュー項目があり、ProductsメニューにはNewとSaleという2つのメニュー項目があります。さらに、Saleメニューには、Electronics、Media、Officeという3つのメニュー項目があります。
-
アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「ADF Task Flow」の順に選択して、「OK」をクリックします。

ADFタスク・フローは、Fusion Webアプリケーションにコントロール・フローを定義するためのモジュール・アプローチを提供します。 アプリケーションを1つの大きなJSFページ・フローとして表現する代わりに、再利用可能な複数のタスク・フローに分割できます。
詳細表示
タスク・フローには次の2種類があります。
アンバウンド・タスク・フロー: ユーザーのタスクを完了するために相互作用するアクティビティ、コントロール・フロー・ルール、マネージドBeanのセットです。 アンバウンド・タスク・フローは、バウンド・タスク・フロー内には含まれない、アプリケーション内のすべてのアクティビティおよびコントロール・フローで構成されています。
バウンド・タスク・フロー: 特殊な形式のタスク・フローであり、アンバウンド・タスク・フローとは対照的に1つのエントリ・ポイントとゼロまたは1つ以上のエグジット・ポイント(出口点)を含みます。 バウンド・タスク・フローには、独自のプライベート・コントロール・フロー・ルール、アクティビティ、マネージドBeanのセットが含まれます。 バウンド・タスク・フローでは再利用、パラメータ、トランザクション管理、再入力が可能になります。
ページ階層内では、1つのメニューは必ず1つのアンバウンド・タスク・フローに関連付けられます。 一般的なFusion Webアプリケーションは、1つのアンバウンド・タスク・フローと1つ以上のバウンド・タスク・フローで構成されますが、1つのアプリケーションに複数のアンバウンド・タスク・フローを含めることもできます。
Fusion Web Application(ADF)テンプレートに基づいてアプリケーションを作成した場合は、デフォルトのアンバウンド・タスク・フローであるadfc-config.xmlが自動的に配置されます。 階層内のルートのHomeメニューは、常にデフォルトのadfc-config.xmlによって表されます。 そのため、このチュートリアルで必要な作業は、他の2つのアンバウンド・タスク・フロー(Productsメニュー用とSaleメニュー用)を作成することだけです。
File Nameフィールドに、adfc-sale-config.xmlと入力します。これは、Saleメニューを表すアンバウンド・タスク・フローになります。 「Create as Bounded Task Flow」の選択を解除して、「OK」をクリックします。

アンバウンド・タスク・フロー用のソース・ファイルはXMLで記述されます。 各ソース・ファイルには一意のファイル名を指定する必要があります。
詳細表示
ファイル名にはadfc-xxx-config.xmlという形式を使用します。ここで、xxxはメニュー名を表します(例:adfc-sale-config.xml)。 アンバウンド・タスク・フロー用のすべてのソース・ファイル名に接頭辞adfcを付けることで、ファイルが(バウンド・タスク・フローの定義ではなく)アンバウンド・タスク・フローのソースであると識別できます。
ルートのHomeメニュー以外のメニューに対しては、ファイル名adfc-config.xmlを使用しないでください。
adfc-config.xmlは、Fusion Web Application(ADF)テンプレートを使用してアプリケーションを作成した際にJDeveloperによって自動作成されるデフォルトのアンバウンド・タスク・フローです。 adfc-config.xmlは、アプリケーション内の他のメニューを含むアプリケーションのルート・メニューになります。
アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「ADF Task Flow」の順に選択して、「OK」をクリックします。
File Nameフィールドに、adfc-products-config.xmlと入力します。これは、Productsメニューを表すアンバウンド・タスク・フローになります。 「Create as Bounded Task Flow」の選択を解除して、「OK」をクリックします。
アンバウンド・タスク・フローの作成時に、JDeveloperによって次の処理が実行されます。
詳細表示
アンバウンド・タスク・フロー用のXMLソース・ファイルを作成します。
デフォルト(ルート)のアンバウンド・タスク・フローのソース・ファイル(adfc-config.xml)を更新します。
タスク・フロー・ダイアグラマでアンバウンド・タスク・フローを開きます(デフォルト)。 ダイアグラムは最初、空白のキャンバスです。 ダイアグラマが現在のエディタでない場合、エディタ・ウィンドウの一番下にある「Diagram」タブをクリックします。
このXMLソース・ファイルは、アプリケーション・ナビゲータのViewControllerプロジェクト内にあるWeb Contentの/WEB-INFフォルダに追加されます。
アプリケーションのルートにあるHomeメニューを表すデフォルトのadfc-config.xmlを開くと、次の<metadata-resource>要素が追加されていることを確認できます。 <adfc-config xmlns="http://xmlns.oracle.com/adf/controller" version="1.2">
<metadata-resource..>/WEB-INF/adfc-sale-config.xml</metadata-resource>
<metadata-resource..>/WEB-INF/adfc-products-config.xml</metadata-resource>
</adfc-config>
1つのメニューまたはアンバウンド・タスク・フロー内にメニュー構造全体を作成できますが、 メニュー構造を複数のメニューまたはアンバウンド・タスク・フローに分割することで、メンテナンスが容易になります。 さらに、メニュー構造を複数の小さなメニューに分割することで、別々の開発チームがそれぞれ担当のメニューを開発できます。 共有ノードを使用して、これらの個別のメニューを後で統合し、完全なメニュー構造を作成できます。
エディタ・ウィンドウで、ドキュメント・タブの「adfc-sale-config.xml」をクリックして、Saleアンバウンド・タスク・フロー・ダイアグラムを前面に表示します。

各アンバウンド・タスク・フロー内で、メニュー内のページを表すViewアクティビティを追加します。
詳細表示
もっとも重要なタスク・フロー・アクティビティ・タイプはViewです。Viewアクティビティはアンバウンド・タスク・フロー内のJSFページを表示します。
ページ階層内では、各ノードに1つのViewアクティビティが対応します(Help、Preferencesなどのグローバル・ページも含まれます)。
注: この例ではアンバウンド・タスク・フローとViewアクティビティのみを使用しますが、バウンド・タスク・フローを定義して、アンバウンド・タスク・フロー内からタスク・フロー・コールを実行することもできます。 このXMLメニュー・モデルは、バウンド・タスク・フローへの参照やバウンド・タスク・フローからの制御の戻りをサポートしています。
コンポーネント・パレットのADF Task FlowページにあるComponentsパネルの「
」View
をダイアグラム上にドラッグ・アンド・ドロップし、Viewアクティビティの名前を変更します。 Saleメニュー内の各ページに対応する次のViewアクティビティ名を使用して、同じ操作を4回繰り返します。
sale
electronics
office
media

エディタ・ウィンドウで、ドキュメント・タブ「adfc-products-config.xml」をクリックして、Productsダイアグラムを前面に表示します。
コンポーネント・パレットのADF Task FlowページにあるComponentsパネルの「
」View
をダイアグラム上にドラッグ・アンド・ドロップし、Viewアクティビティの名前を変更します。 Productsメニュー内の各ページに対応する次のViewアクティビティ名を使用して、同じ操作を2回繰り返します。
products
new
メニュー内のページを表すViewアクティビティを追加する際に、子を持つ子ノード用のViewアクティビティを追加する必要はありません。
詳細表示
たとえば、ページ階層でSaleはProductsの下にあるノードですが、ProductsメニューでSale用のViewアクティビティを追加する必要はありません。 これは、Saleに子ノードがあり、Sale用のViewアクティビティがSaleアンバウンド・タスク・フロー(adfc-sale-config.xml)で定義されているからです。
アプリケーション・ナビゲータで「adfc-config.xml」をダブルクリックし、ダイアグラマで開きます。
コンポーネント・パレットのADF Task FlowページにあるComponentsパネルの「
」Viewをダイアグラム上にドラッグ・アンド・ドロップし、Viewアクティビティの名前を変更します。 各ページに対応する次のViewアクティビティ名を使用して、同じ操作を4回繰り返します。
home
help
preferences
shop
adfc-config.xmlはページ階層内のルートのHomeメニューに対応しており、このメニューにはアプリケーション内の他のメニューまたはアンバウンド・タスク・フローに対する参照が含まれています。
詳細表示
ProductsはHomeの下にある子ノードですが、Products用のViewアクティビティを追加する必要はありません。 これは、Products用のViewアクティビティがProductsアンバウンド・タスク・フロー(adfc-products-config.xml)で定義されているからです。 ただし、アプリケーションのグローバル・ページ(HelpとPreferences)を表すViewアクティビティは追加する必要があります。
「
」Save Allをクリックして作業内容を保存します。
デフォルト(ルート)のadfc-config.xml用のダイアグラマは、次のようになります。

最初にページ用のViewアクティビティを追加すると、ダイアグラム上のページ・アイコンが警告を表す黄色の記号付きで表示されます。
詳細表示 黄色の警告記号は、Viewアクティビティに物理的なJSFページ・ファイルがまだ関連付けられていないことを示します。 後でページ・ファイルを作成すると、黄色の警告記号はページ・アイコン上に表示されなくなります。
ページ用のViewアクティビティを追加すると、メタデータがアンバウンド・タスク・フローのソース・ファイルに自動的に追加されます。 たとえば、adfc-products-config.xmlには次のメタデータが追加されます。
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller"...>
<view id="products"></view>
<view id="new"></view>
</adfc-config>
id要素は、Viewアクティビティを識別します。 後でこのViewアクティビティに対応する物理的なページを作成したときに、物理的なJSFページ・ファイル名を識別するメタデータがさらに追加されます。 次に例を示します。
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller"...>
<view id="products">
<page>/products.jsf</page>
</view>>
<view id="new">
<page>/new.jsf</page>
</view>
</adfc-config>
Structureウィンドウに、各アンバウンド・タスク・フローに対応する構造が表示されます。 たとえば、adfc-sale-config.xmlの構造は次のように表示されます。
Structureウィンドウ内の警告は、<view>要素が不完全であり、物理的なJSFページ・ファイルを識別する必須の子要素がまだ作成されていないことを表しています。
-
階層内の最下位レベルのメニューから作業を開始します。アプリケーション・ナビゲータで「adfc-sale-config.xml」を右クリックし、コンテキスト・メニューから「Create or Update ADF Menu Model」を選択します。

ADFメニューは、メニュー内に必要とされるすべての情報(メニュー内の該当するページにナビゲートするためのラベルや値など)を含むXMLメタデータ・リソースです。
詳細表示
JDeveloperでADFメニューを作成する際に、メニューに子のサブメニューが含まれる場合は、階層内の最下位レベルのメニューから作業を開始することをお勧めします。 たとえば、Productsメニューには子のSaleサブメニューがあります。 この場合、サブメニューを先に作成してから、その親メニューを作成し、その後ルートのHomeメニューを作成する方が良いでしょう。
そのため、このチュートリアルでは、アプリケーション内の各アンバウンド・タスク・フロー用のADFメニューを次の順序で作成します。
adfc-sale-config.xml
adfc-products-config.xml
adfc-config.xml
File Nameフィールドに、メニュー・メタデータ・ファイル名としてsale_menuと入力します。

Create ADF Menu Modelダイアログに入力したファイル名がADFメニュー・メタデータ・ファイルになります。このファイルはXML形式で作成されます。
詳細表示
SaleメニューまたはProductsメニューに対しては、デフォルトのファイル名であるroot_menuを使用しないでください。 root_menuという名前は、ルートのHomeメニュー(adfc-config.xml)用に予約されています。
-
デフォルト値はそのままにして、「OK」をクリックします。
Create ADF Menu Modelダイアログを使用すると、次の処理が自動的に実行されます。
詳細表示
メニュー・モデル用のXMLソース・ファイル(例:sale_menu.xml)を作成します。このファイルには、メニュー・モデルのメタデータが含まれます。 sale_menu.xmlの構造は、Structureウィンドウで確認できます。
ソース・エディタでメニュー・モデル・メタデータ・ファイルを開きます。 itemNode要素は、関連するアンバウンド・タスク・フロー内のViewアクティビティごとに1つ存在します。 次に例を示します。
<itemNode id="itemNode_sale" label="label_sale"
action="adfMenu_sale" focusViewId="/sale"/>
制御フロー・ルールとマネージドBeanの情報を使用して、関連するアンバウンド・タスク・フロー(例:adfc-sale-config.xml)を更新します。
ワイルドカードのcontrol-flow-rule要素に、アンバウンド・タスク・フロー内の各Viewアクティビティ用の制御フロー・ケースを指定します。
<control-flow-rule..>
<from-activity-id>*</from-activity-id>
<control-flow-case..>
<from-outcome>adfMenu_sale</from-outcome>
<to-activity-id>sale</to-activity-id>
</control-flow-case>
<control-flow-case..>
<from-outcome>adfMenu_electronics</from-outcome>
<to-activity-id>electronics</to-activity-id>
</control-flow-case>
...
</control-flow-rule>
managed-bean要素に、メニュー・モデルに使用するマネージドBeanの名前とクラスを指定します。
<managed-bean..>
<description>Menu Model Managed Bean</description>
<managed-bean-name>sale_menu</managed-bean-name>
<managed-bean-class>
oracle.adf.view.rich.model.MDSMenuModel</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
...
</managed-bean>
-
アプリケーション・ナビゲータで「adfc-products-config.xml」を右クリックして、「Create or Update ADF Menu Model」を選択します。 メニュー・メタデータ・ファイル名としてproducts_menuと入力して、「OK」をクリックします。
products_menu.xmlの構造がStructureウィンドウに表示されます。
-
アプリケーション・ナビゲータで「adfc-config.xml」を右クリックして、「Create or Update ADF Menu Model」を選択します。 デフォルトのメニュー・メタデータ・ファイル名(root_menu)のままにして、「OK」をクリックします。
ルートのADFメニュー・モデル(ページ階層内のルートのHomeメニューをXML形式で表したもの)は、Structureウィンドウで次のように表示されます。
詳細表示 JDeveloperでは、ユーザーがアンバウンド・タスク・フロー内のViewアクティビティとしてメニュー・ページを追加すると、すべてのメタデータが自動的に作成されるため、必要なADFメニューを容易に作成できます。 ラベル文字列やアクション結果を表す文字列などのメタデータを編集しない場合は、メニュー・モデル・メタデータの作成や編集を手動で行う必要はありません。
デフォルトでは、ソース・エディタでメニュー・モデル・メタデータ・ファイルが開きます。 たとえば、root_menu.xmlのコードは次のようになります。
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<itemNode id="itemNode_home" label="label_home" action="adfMenu_home"
focusViewId="/home"/>
<itemNode id="itemNode_help" label="label_help" action="adfMenu_help"
focusViewId="/help"/>
<itemNode id="itemNode_preferences" label="label_preferences"
action="adfMenu_preferences" focusViewId="/preferences"/>
<itemNode id="itemNode_shop" label="label_shop" action="adfMenu_shop"
focusViewId="/shop"/>
</menu>
ルート要素のmenuには、メニューに関するすべてのメタデータが含まれます。 メニュー・モデル・メタデータ・ファイル内では1つのみのmenu要素が許可されます。 itemNode子要素は、メニュー内の1つのメニュー項目(またはページ)を表します。 itemNode要素は、関連するアンバウンド・タスク・フロー内のViewアクティビティごとに1つ存在します。
各itemNode要素には次の属性が含まれます。
id: 必須。 メニュー項目の一意の識別子。
-
label: メニュー項目に表示するラベル・テキスト。 後で、ADFメニューの作成時に生成されたデフォルトのラベル・テキストを変更します。
-
action: 結果文字列、または結果文字列を返すELメソッドのバインディング式。 どちらの場合も、アンバウンド・タスク・フロー・ファイル(例:adfc-config.xml)内に構成されているそのメニュー項目に対応する制御フロー・ケースのfrom-outcome値と、この結果文字列が一致している必要があります。
-
destination: ノードの選択時の移動先となるページのURI。 例:http://www.oracle.com 移動先がJSFページの場合のURIは/facesから始まる必要があります。 actionとdestinationの両方を指定した場合は、actionよりもdestinationの方が優先されます。
focusViewId: 必須。 メニュー項目のナビゲーション結果に一致するページのURI。このナビゲーション結果は、アンバウンド・タスク・フローのソース・ファイル(例:adfc-config.xml)内のそのメニュー項目に対応する制御フロー・ケースのto-activity-id値に指定されている値です。
アプリケーション・ナビゲータで、メニュー・メタデータ・ファイルの「sale_menu.xml」を選択します。
sale_menu.xmlの構造がStructureウィンドウに表示されます。

-
Structureウィンドウで、各項目ノードを選択して、プロパティ・インスペクタで「Label」属性値を変更します。 項目ラベルに次の値を使用します。
Sale
Electronics
Office
Media
各アンバウンド・タスク・フロー用のADFメニューを作成した後、プロパティ・インスペクタを使用して、各メニュー内のノードに対して自動的に生成されたデフォルトのラベルを変更します。
詳細表示
たとえば、ラベル変更後のsale_menu.xmlのコードは次のようになります。
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<itemNode id="itemNode_sale" label="Sale"
action="adfMenu_sale" focusViewId="/sale"/>
<itemNode id="itemNode_electronics" label="Electronics"
action="adfMenu_electronics" focusViewId="/electronics"/>
<itemNode id="itemNode_office" label="Office"
action="adfMenu_office" focusViewId="/office"/>
<itemNode id="itemNode_media" label="Media"
action="adfMenu_media" focusViewId="/media"/>
</menu>
ADFメニュー・メタデータ・ファイル内のメニュー項目用のラベルをハードコーディングする代わりに、リソース・バンドルを使用できます。 リソース・バンドルを使用する場合は、menu要素に次の属性を追加します。
-
resourceBundle: 使用するリソース・バンドル。 例:org.apache.myfaces.demo.xmDemo.resource.MenuBundle
-
var: EL式でバンドルを参照するために使用するid。 例:bundle この設定後、メニュー項目のlabel EL式でリソース・バンドル内の文字列を参照する場合に、次のような式を使用します。 label="#{bundle.somelabel}"
-
アプリケーション・ナビゲータで、「products_menu.xml」を選択します。 Structureウィンドウで、各項目ノードを選択して、プロパティ・インスペクタでLabel値を変更します。 項目ラベルに次の値を使用します。
Products
New
-
アプリケーション・ナビゲータで、「root_menu.xml」を選択します。 Structureウィンドウで、各項目ノードを選択して、プロパティ・インスペクタでLabel値を変更します。 項目ラベルに次の値を使用します。
Home
Help
Preferences
Shop
アプリケーション・ナビゲータで、再度「root_menu.xml」を選択します。 Structureウィンドウで、「itemNode - itemNode_help」を選択します。

-
プロパティ・インスペクタで、Destinationフィールドにhttp://www.oracle.comと入力し、[Enter]を押します。
「
」Save Allをクリックして作業内容を保存します。
アプリケーション・ナビゲータで、「sale_menu.xml」を選択します。 Structureウィンドウで、itemNode_saleを親ノードとして使用し、次の項目ノードを1つずつitemNode_saleにドラッグ・アンド・ドロップします。
itemNode_electronics
itemNode_office
itemNode_media

ページ階層内で、Saleはメニュー・ノードとして識別されるため、
sale_menu.xml内の親の下に子の項目をグループ化する際には、
itemNode_saleが親ノードとなります。
詳細表示
子の項目を親ノードにドラッグ・アンド・ドロップした後のsale_menu.xmlのStructureウィンドウは、次のようになります。
sale_menu.xmlのStructureウィンドウで、親ノードの「itemNode_sale」を右クリックします。 コンテキスト・メニューから「Convert To groupNode」を選択します。

ADFメニュー・メタデータ・ファイルで、ルート要素の
menuに次の子要素を追加できます。
詳細表示
menu要素には、itemNodeとsharedNodeの他に、groupNodeも追加できます。 groupNodeには1つ以上の子のitemNode要素、別のgroupNode、またはこの両方が含まれます。
groupNode Propertiesダイアログで、デフォルトのid値(必須)のままにします。 idrefフィールドの最後にある「
」をクリックします。 最初の項目ノードの「itemNode_electronics」を選択します。

groupNodeには必須の
idref属性があります。この属性では、子の
itemNodeまたは別の
groupNodeのidを参照する必要があります。
詳細表示
itemNode要素とは異なり、groupNode要素はナビゲーションを実行しません。そのため、action属性やdestination属性はありません。 ナビゲーションは、グループ・ノードのidref属性で参照されている、子のitemNode上のアクション結果または移動先URIを通じて、間接的に実行されます。 idrefで、子のgroupNodeが参照されている場合は、子のitemNodeに到達するまで、ノードに対するナビゲーション検索が実行されます。
idrefプロパティを編集すると、選択のために、子の項目ノードが実行時にメニュー内に表示される項目順で表示されます。
この例では、groupNodeが子のElectronics itemNodeを指すように構成します。 この結果、実行時にエンドユーザーがSaleメニューを選択すると、アプリケーションにはElectronicsページが表示され、Saleページが作成されている場合でもそのSaleページは無視されます。
「OK」を2回クリックします。 確認画面が表示されたら、「OK」をクリックしてこの変換処理を確定します。
itemNode要素とは異なり、
groupNode要素には
action属性や
focusViewId属性はありません。
詳細表示 代わりに、groupNode要素には次の属性が含まれています。
id: 必須。 グループ・メニュー項目の一意の識別子。
-
label: グループ・メニュー項目に表示するラベル・テキスト。 リソース・バンドル内の文字列を示すEL式を指定することもできます。例:#{bundle.somelabel}(bundleはルートのmenu要素のvar属性値)
-
idref: 必須。 子ノードのid。itemNodeまたはgroupNodeのいずれかです。
変換後、ADFメニュー・メタデータ・ファイル内にgroupNode要素が追加されます。 次に例を示します。
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<groupNode id="itemNode_sale" label="Sale" idref="itemNode_electronics">
<itemNode id="itemNode_electronics" label="Electronics"
action="adfMenu_electronics" focusViewId="/electronics"/>
<itemNode id="itemNode_office" label="Office"
action="adfMenu_office" focusViewId="/office"/>
<itemNode id="itemNode_media" label="Media"
action="adfMenu_media" focusViewId="/media"/>
</groupNode>
</menu>
sale_menu.xmlのStructureウィンドウで、グループ・ノードを開くと、次のように子の項目ノードが表示されます。
アプリケーション・ナビゲータで、「products_menu.xml」を選択します。 Structureウィンドウで、itemNode_productsを親ノードとして使用し、「itemNode_new」を親ノードにドラッグ・アンド・ドロップします。

-
products_menu.xmlのStructureウィンドウで、親ノードの「itemNode - itemNode_products」を右クリックし、「Insert Inside itemNode」→「sharedNode」を選択します。

共有ノードは、サブメニューを参照するためにADFメニュー内で使用されます。
詳細表示
ページ階層内で、ルートのHomeメニューに子のProductsサブメニューがあり、Productsメニューには子のSaleサブメニューがあります。 この理由で、ProductsメニューとSaleメニューを、それぞれの親のADFメニュー内に共有ノードとして追加する必要があります。 たとえば、Saleを共有ノードとしてProductsメニュー内部に追加し、Productsを共有ノードとしてルートのHomeメニュー内に追加する必要があります。
適切なサブメニューを共有ノードとしてproducts_menu.xmlとroot_menu.xmlに挿入することで、実行時に、参照先のADFメニューが作成され、サブメニューとして親のADFメニューに挿入されて、レンダリングされます。
Insert sharedNodeダイアログで、「
」ドロップダウン・メニューをクリックし、「Expression Builder」を選択します。

-
ADF Managed Beansを開き、「sale_menu」を選択します。
EL式#{sale_menu}がExpressionボックス内に自動的に入力されます。

EL式を直接
refフィールドに入力するか、Expression Builderを使用してEL式を作成できます。 EL式ではサブメニューのマネージドBean名を参照する必要があります。
詳細表示
ADFメニューのマネージドBean名は、サブメニューのアンバウンド・タスク・フローのXMLソース・ファイル内にあるmanaged-bean要素で構成します。 たとえば、Saleメニューを表すadfc-sale-config.xmlには、sale_menuというマネージドBean名を含むmanaged-bean要素があります。
<managed-bean..>
<description>Menu Model Managed Bean</description>
<managed-bean-name>sale_menu</managed-bean-name>
<managed-bean-class>
oracle.adf.view.rich.model.MDSMenuModel</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property..>
<property-name>createHiddenNodes</property-name>
<value>false</value>
</managed-property>
<managed-property..>
<property-name>source</property-name>
<property-class>java.lang.String</property-class>
<value>/WEB-INF/sale_menu.xml</value>
</managed-property>
</managed-bean>
Create ADF Menu Modelダイアログを使用してADFメニューを作成したときに、メニュー・メタデータ・ファイル用のマネージドBeanが自動的に構成されています。この際、指定したメタデータ・ファイル名がマネージドBean名として使用されています。 また、デフォルトで使用されるマネージドBeanクラスはoracle.adf.view.rich.model.MDSMenuModel、マネージドBeanスコープはrequestです。これらは必須であり、変更はできません。
さらに、各メニュー・モデルのマネージドBeanに対して、次のマネージド・プロパティが追加されています。
createHiddenNodes: trueの場合は、コンポーネントのrendered属性がfalseの場合でも、階層ノードを作成する必要があることを示します。 createHiddenNodes値は、ソース・メニュー・メタデータ・ファイルを開いて解析した際に取得され、利用可能になります。 createHiddenNodesプロパティはsourceプロパティの前に配置する必要があります。この配置は、マネージドBeanが自動的に構成されたときに、自動的に実行されます。 sourceマネージド・プロパティから、メニューのXMLメタデータを適切に解析して作成するためには、ADFメニュー・モデルでこの値が設定されている必要があります。
source: ADFメニュー・モデルに使用するメニュー・メタデータのXMLソース・ファイルを指定します。
-
「OK」を2回クリックします。

共有ノードを挿入すると、ADFメニュー・メタデータのソース・ファイル内に
sharedNode要素が自動的に追加されます。
詳細表示 sharedNode要素の属性は1つのみです(ref)。この属性はEL式を使用し、親のADFメニューに含まれるサブメニューのマネージドBean名を参照します。 次に例を示します。
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<itemNode id="itemNode_products" label="Products"
action="adfMenu_products" focusViewId="/products">
<itemNode id="itemNode_new" label="New"
action="adfMenu_new" focusViewId="/new"/>
<sharedNode ref="#{sale_menu}"/>
</itemNode>
</menu>
アプリケーション・ナビゲータで、「root_menu.xml」を選択します。 Structureウィンドウで、「itemNode_shop」のみを親ノードのitemNode_homeにドラッグ・アンド・ドロップします。
itemNode_helpとitemNode_preferencesは、itemNode_homeと同じレベルにあるグローバル・ノードであるため、これらを移動する必要はありません。

-
Structureウィンドウで、親ノードの「itemNode_home」を右クリックし、「Insert Inside itemNode」→「sharedNode」を選択します。 refフィールドに、EL式#{products_menu}を入力します。このEL式は、ホームページに表示されるProductsメニューのマネージドBean名を参照します。 「OK」をクリックします。

root_menu.xmlのStructureウィンドウで、「sharedNode - #(products_menu}」をドラッグして、itemNode_shopの前に配置します。

「
」Save Allをクリックして作業内容を保存します。
root_menu.xmlのエディタ・ウィンドウに、Productsメニュー用のマネージドBean名を参照する
sharedNode要素が表示されます。
詳細表示
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<itemNode id="itemNode_home" label="Home"
action="adfMenu_home" focusViewId="/home">
<sharedNode ref="#{products_menu}"/>
<itemNode id="itemNode_shop" label="Shop"
action="adfMenu_shop" focusViewId="/shop">
</itemNode>
<itemNode id="itemNode_help" label="Help"
action="adfMenu_help" focusViewId="/help"
destination="http://www.oracle.com"/>
<itemNode id="itemNode_preferences" label="Preferences"
action="adfMenu_preferences" focusViewId="/preferences"/>
</menu>
itemNode_helpノードとitemNode_preferencesノードは、アプリケーション階層内のすべてのページからアクセスできるグローバル・ページを表します。そのため、これらのノードは親のitemNode_homeと同じレベルにあります。 また、これまでの手順で、itemNode_homeはgroupNodeに変換していません。 これは、ホームページの実行時に第1レベルのメニュー(ProductsとShop)が表示されるようにするためです。
-
アプリケーション・ナビゲータで「ViewController」プロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「ADF Page Template」の順に選択して、「OK」をクリックします。

この例に従って操作を実行してきた場合、この時点ではアプリケーション・ナビゲータにはJSFページは含まれていません。
詳細表示 実際のアプリケーションでは、この時点ですでに作成したページがアプリケーション・ナビゲータに表示されている可能性があります。 その場合、各アンバウンド・タスク・フロー・ダイアグラム上のViewアクティビティを、これらの作成済みのページに関連付けます。 この関連付けは、アプリケーション・ナビゲータのページをダイアグラム上の該当するViewにドラッグ・アンド・ドロップして行います。
JSFページには、ADFメニュー・モデルにバインドされたナビゲーション・コンポーネントが含まれます。 実行時に、各ページ上で適当な数とタイプのメニュー・ナビゲーション項目が生成されます。 自分で作成した各ページ上で、ナビゲーション・コンポーネントをメニュー・モデルにバインドすることも可能ですが、この作業はエラーが発生しやすく時間もかかります。 そのため通常は、ページ・テンプレート上でナビゲーション・コンポーネントを作成してバインドし、そのテンプレートを使用してページを作成します。 ページ・テンプレートを使用することで、複数のアプリケーション・ページで同一のレイアウトとルック・アンド・フィールを適用することもできます。
Create ADF Page Templateダイアログで、File NameフィールドにmyTemplate.jsfと入力します。
ドキュメント・タイプとしてFaceletsが選択されていること、およびUse a Quick Start Layoutが選択されていないことを確認します。
Facet Definitionsタブを前面に表示して、「
」をクリックし、ファセットを追加します。 Nameフィールドにbodyと入力して、「OK」をクリックします。

ページ・テンプレートは、XML形式で記述されたテンプレート定義ファイルです。
詳細表示 テンプレートは、テンプレート定義ファイル内の2つのセクションで表現します。 1つは、テンプレートのすべてのメタデータ(テンプレート表示名など)を含むメタデータ・セクション、もう1つは、テンプレート・ページ・レイアウトを構成する個々のADF Facesコンポーネントをすべて含んだレイアウト・セクションです。
Create ADF Page Templateダイアログを使用すれば、テンプレート専用のメタデータ(テンプレートの表示名など)や、テンプレートに含まれる可能性のある属性とファセットの定義を作成できます。
ページ作成者に対して、テンプレート・レイアウト内にあるコンポーネントのプロパティの設定や編集を許可する場合は、ページ・テンプレート内に1つ以上の属性を定義します。 ページ・テンプレートのユーザーに対して、独自コンテンツの追加を許可する場合は、1つ以上のファセットを、今後のコンテンツを保持するためのプレースホルダとして定義します。
たとえば、テンプレートにDecorative Boxコンポーネントが含まれており、ページ作成者が、そのDecorative Boxのcenterファセット内部の任意の場所に独自コンテンツを追加できるようにする場合は、box-contentsという名前のファセット定義を追加します。 次に、ページ・テンプレートのレイアウト設計の際に、ページ作成者に対して、コンテンツをDecorative Boxのcenterファセットにドロップする操作を許可するために、そのDecorative Boxのcenterファセット内にaf:facetRefタグを挿入し、そのタグでbox-contentsファセット名を参照します。 次に例を示します。
<af:decorativeBox>
<f:facet name="center">
<af:facetRef facetName="box-contents"/>
</f:facet>
</af:decorativeBox>
ページ作成者はページの設計時に、独自のページ・コンテンツをbox-contentsファセット内に追加します。
-
エディタ・ウィンドウの上部にあるドキュメント・タブの「myTemplate.jsf」をクリックし、ビジュアル・エディタがフォーカスされていることを確認します。

-
コンポーネント・パレットのADF FacesページにあるLayoutパネルの「
」Panel Stretch Layoutを、ビジュアル・エディタの空白ページにドラッグ・アンド・ドロップします。
-
パレットのLayoutパネルのInteractive Containers and Headersセクションから、「
」Panel Headerを、今追加したPanel Stretch Layoutのtopファセットにドラッグ・アンド・ドロップします。
ファセットにコンポーネントをドラッグすると、Facet topという名前の長方形の領域がページに表示されます。これは、今ドラッグしているコンポーネントがそのターゲット内に挿入されることを意味しています。

-
プロパティ・インスペクタのCommonセクションで、Text属性値をADF Menu Exampleに変更し、[Enter]を押します。
「
」Save Allをクリックして作業内容を保存します。
ビジュアル・エディタは、次のように表示されます。
ここでは、3つのNavigation Paneコンポーネントを挿入して、1つのレベルのグローバル・ボタンと、2つのレベルのタブで構成される、3つのレベルのナビゲーション項目を作成します。
-
エディタ・ウィンドウで、ドキュメント・タブの「myTemplate.jsf」をクリックし、テンプレート・ページがフォーカスされていることを確認します。 必要に応じて、ウィンドウ下部の「Design」タブをクリックして、ビジュアル・エディタを使用します。
-
コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Navigation Paneを、ビジュアル・エディタ内にあるパネル・ヘッダーのmenuBarファセットにドラッグ・アンド・ドロップします。

Navigation Paneコンポーネントは、ADFメニュー・モデルにバインドする場合に、ページ階層内の1つのレベルのメニュー・ナビゲーション項目を作成するために使用します。
詳細表示 ナビゲーション項目には、タブ、バー、ボタンなどを設定できます。 ナビゲーション項目のタイプは、Navigation Paneコンポーネントのhint属性により決定されます。 hintの値を指定しない場合のデフォルトはタブです。
ここでは、3つのNavigation Paneコンポーネントを挿入して、階層内の3つのレベルのナビゲーション項目を作成します。
3つのレベルに対して、次のタイプのナビゲーション項目を追加します。 グローバル・ボタン(レベル0)
第1レベル・タブ(レベル1)
第2レベル・タブ(レベル2)
プロパティ・インスペクタのCommonセクションで、Hintドロップダウン・リストから「buttons」を選択します。
-
Levelフィールドが0であることを確認します。
1つのNavigation Paneコンポーネントを使用して、ページ階層内の1つのレベル用のナビゲーション項目を作成するため、
level属性で、各コンポーネント上で使用するレベルを指定する必要があります。
詳細表示 デフォルトのレベルは0(ゼロ)です。
level属性値は、0から始まるインデックス番号であり、root_menu.xmlファイル内の項目の該当するレベルを指します。 次のStructureウィンドウの図に示すように、root_menu.xmlはProducts共有ノード(products_menu.xml)を参照し、このProducts共有ノードはSale共有ノード(sale_menu.xml)を参照します。
level属性は、root_menu.xml内のグローバル・ノード(つまり、homeノードと同じレベルにあるmenu要素の下のノード)で始まります。そのレベルのlevel属性は0(ゼロ)、次のレベルは1、その次のレベルは2となります。
任意のナビゲーション項目タイプを使用して、ページ階層内のノードの1つのレベルを表すことができます。 この例では、レベル1ノードにはtabsを、レベル2ノードにはtabsを、レベル3ノードにはlistを使用します。 階層内のあらゆるページからアクセスできるページ(HelpページやPreferencesページなど)には、レベル0のグローバル・ノードを示すbuttonsを使用します。
Dataセクションを開きます。 Varフィールドに、menuInfoと入力します。 次に、Valueフィールドの横にある「
」ドロップダウン・メニューから「Expression Builder」を選択します。

ADF Managed Beansを開き、「root_menu」を選択します。 「OK」をクリックします。

Navigation Paneコンポーネントは、一連のCommand Navigation Itemコンポーネントを子要素として受け入れることができ、各Command Navigation Itemコンポーネントは1つのメニュー項目を表します。
詳細表示
次に例を示します。
<af:navigationPane hint="buttons"..>
<af:commandNavigationItem text="Home"../>
<af:commandNavigationItem text="Help"../>
</af:navigationPane>
ただし、ADFメニューを使用する場合は、一連のCommand Navigation Itemコンポーネントを子要素として挿入しないでください。 代わりに、Navigation PaneコンポーネントをADFメニュー・モデルにバインドし、そのNavigation PaneコンポーネントのnodeStampファセットを使用して、子要素を生成してください。
Structureウィンドウで、「af:navigationPane」を右クリックし、コンテキスト・メニューから「Facets」→「Navigation Pane」→「Node Stamp」を選択します。

コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Navigation Itemを、nodeStampファセットにドラッグ・アンド・ドロップします。

-
Navigation Itemのプロパティ・インスペクタのCommonセクションで、次の属性値を入力します。
| 属性 |
値 |
| Text |
#{menuInfo.label} |
| Destination |
#{menuInfo.destination} |
| Action |
#{menuInfo.doAction} |
バインドされたNavigation Paneコンポーネントのコードは次のようになります。
詳細表示
<af:navigationPane var="menuInfo" value="#{root_menu}"
hint="buttons"..>
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
action="#{menuInfo.doAction}"
destination="#{menuInfo.destination}"../>
</f:facet>
</af:navigationPane>
注: level属性が指定されていない場合のデフォルトのレベルは0(ゼロ)です。
Navigation Paneのvalue属性には、メニュー用に構成されたマネージドBeanの名前を指定します。 通常は#{root_menu}と指定します。これは、adfc-config.xmlで定義されているルート・メニュー用に構成されたマネージドBeanの名前です。 ただし、共有ノード経由で参照される他のメニュー・モデル用のマネージドBean名を指定することもできます。 共有ノードを参照する場合は、該当する構成ファイル内で、その共有ノード用の2つ目のマネージドBeanを(1つ目のBeanとは異なる名前を使用して)構成する必要があります。
var属性値は、root_menu.xmlファイル(または、共有ノード用のXMLメニュー・メタデータ・ファイル)内の項目を参照するために使用するEL変数名です。 EL変数名には任意の名前を使用できます。
nodeStampファセット、およびそのファセットの単一のCommand Navigation Itemは、次の操作を実行します。
あるレベル内のメニュー・ナビゲーション項目を適当な数にまで削除します。
メニュー・モデル・メタデータに定義された正確なラベル・テキストやその他のプロパティを表示します。
EL変数名のmenuInfoを使用して、単一のCommand Navigation Itemの属性に対するEL式で、ADFメニュー・モデル内の該当するメニュー項目プロパティを参照します。 たとえば、EL式#{menuInfo.label}は、ナビゲーション項目に使用する正確なラベル・テキストを取得します。また、#{menuInfo.doAction}は、その同じ項目に定義されたアクション結果へと評価されます。 階層内の項目のレベルについては、これらのEL式で変更されることはありません。 実行時に、nodeStampはそのレベルのナビゲーション項目を適当な数にまで削除します。
フォーカス・パス内の現在の項目を"選択済み"としてマークします (フォーカス・パスとは、ルートのホームページから現在表示されているページまでのノードまたはページのパスのことです)。
コンポーネント・パレットのLayoutパネルにある「
」Decorative Boxを、ビジュアル・エディタ内の(Panel Stretch Layoutの)centerファセットにドラッグ・アンド・ドロップします。

-
コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Navigation Paneを、今追加したDecorative Boxのtopファセットにドラッグ・アンド・ドロップします。
-
Navigation Paneのプロパティ・インスペクタで、次の属性値を選択するか入力します。
| セクション |
属性 |
値 |
| Common |
Hint |
tabs |
| |
Level |
1 |
| Data |
Value |
#{root_menu} |
| |
Var |
menuInfo |
手順7~9を繰り返して、Navigation ItemコンポーネントをNavigation PaneのnodeStampファセットに挿入し、そのコンポーネントをメニュー・モデルにバインドします。
Navigation Itemコンポーネントをバインドした後のビジュアル・エディタは、次のようになります。

Navigation PaneをADFメニュー・モデルにバインドし、
nodeStampファセットを使用してコマンド・ナビゲーション項目数を削除することで、実質的に、どのメニュー・レベルのNavigation Paneコンポーネントに対しても同じコードを使用できます。
詳細表示 変更するNavigation Paneコンポーネントの属性値は、level値とhint値のみです。
たとえば、レベル0ボタンを生成するためのコードは次のようになります。
<af:navigationPane var="menuInfo" value="#{root_menu}"
level="0" hint="buttons"..>
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
action="#{menuInfo.doAction}"
destination="#{menuInfo.destination}"../>
</f:facet>
</af:navigationPane>
また、レベル1タブを生成するためのコードは次のようになります。
<af:navigationPane var="menuInfo" value="#{root_menu}"
level="1" hint="tabs"..>
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
action="#{menuInfo.doAction}"
destination="#{menuInfo.destination}"../>
</f:facet>
</af:navigationPane>
XMLエディタでの編集に慣れている場合は、Navigation Paneコード全体をコピーして貼り付け、特定のレベルに関するlevelとhintの属性値を書き換えます (Navigation PaneおよびCommand Navigation Itemのid値が設定されている場合は、この値を一意の値に書き換える必要もあります)。
注: ADFメニュー・モデル内のメタデータに特定のレベル用の項目が含まれていない場合は、Oracle ADF Facesでそのコードが無視され、そのレベル用の項目数は削除されません。 そのため、テンプレート内にすべてのレベルに関するコードを記述し、そのテンプレートを使用してJSFページを作成できます。 その後、JSFページのページ作成者がページ固有のコンテンツを追加します。この際に、Navigation Paneコンポーネントのメニュー・モデルへの追加やバインドについて考慮する必要はありません。
コンポーネント・パレットのLayoutパネルにある「
」Decorative Boxを、ビジュアル・エディタ内のページ上にある(1つ目のDecorative Boxの)centerファセットにドラッグ・アンド・ドロップします。

-
コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Navigation Paneを、今追加したDecorative Boxのtopファセットにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、次の属性値を選択するか入力します。
| セクション |
属性 |
値 |
| Common |
Hint |
tabs |
| |
Level |
2 |
| Data |
Value |
#{root_menu} |
| |
Var |
menuInfo |
手順7~9を繰り返して、Navigation ItemコンポーネントをNavigation PaneのnodeStampファセットに挿入し、そのコンポーネントをメニュー・モデルにバインドします。
「
」Save Allをクリックして作業内容を保存します。
これまでの作業で、3つのNavigation Paneコンポーネント(レベル0ボタン用、レベル1タブ用、レベル2タブ用)を追加しました。 これら3つのコンポーネントはすべて、同じADFメニュー・モデルにバインドされます。

ここでは、Bread Crumbsコンポーネントを挿入し、現在のページからホームページに戻るリンクのパスを作成します。
-
エディタ・ウィンドウで、ドキュメント・タブの「myTemplate.jsf」をクリックし、テンプレート・ページがフォーカスされていることを確認します。 必要に応じて、ウィンドウ下部の「Design」タブをクリックして、ビジュアル・エディタを使用します。
-
コンポーネント・パレットのLayoutパネルにある「
」Decorative Boxを、ビジュアル・エディタ内のページ上にあるcenterファセットにドラッグ・アンド・ドロップします。

コンポーネント・パレットのGeneral ControlsパネルのLocationセクションにある「
」Bread Crumbsを、今追加したDecorative Boxのtopファセットにドラッグ・アンド・ドロップします。
Bread Crumbsコンポーネントは、現在のページからルート・ページに戻るリンクのパスを作成する場合に使用します。
詳細表示 たとえば、Electronicsページのブレッドクラムは、Home > Products > Sale > Electronicsのようになります。 リンクをクリックすると、アプリケーション内のそのページに移動します。 リンクのパスは、フォーカス・パスとも呼ばれます。
Navigation Paneコンポーネントと同様に、Bread Crumbsは一連のCommand Navigation Itemコンポーネントを子要素として受け入れることができ、各Command Navigation Itemは1つのリンクを表します。
<af:breadCrumbs>
<af:commandNavigationItem text="Crumb 1"../>
<af:commandNavigationItem text="Crumb 2"../>
<af:commandNavigationItem text="Crumb 3"../>
</af:breadCrumbs>
ただし、ADFメニューを使用する場合は、Bread Crumbsコンポーネントを、Navigation Paneコンポーネントを使用する場合と同じADFメニュー・モデルにバインドします。 また、Command Navigation Itemコンポーネントを個々に使用してブレッドクラム・リンクを表す代わりに、nodeStampファセットとCommand Navigation Itemを1つだけ使用すれば、現在のページのブレッドクラム・リンクを適当な数にまで削除できます。
プロパティ・インスペクタのDataセクションで、Valueフィールドに#{root_menu}と入力します。 次に、VarフィールドにmenuInfoと入力します。

Structureウィンドウで、「af:breadcrumbs」を右クリックし、コンテキスト・メニューから「Facets - Bread Crumbs」→「Node Stamp」を選択します。
コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Navigation Itemを、nodeStampファセットにドラッグ・アンド・ドロップします。

プロパティ・インスペクタのCommonセクションで、次の属性値を入力します。
| 属性 |
値 |
| Text |
#{menuInfo.label} |
| Destination |
#{menuInfo.destination} |
| Action |
#{menuInfo.doAction} |
「
」Save Allをクリックして作業内容を保存します。
ビジュアル・エディタは、次のように表示されます。
root_menu.xmlファイルのメタデータを使用して、適切なブレッドクラム・リンクを生成する、Bread CrumbsコンポーネントのXMLコード全体は次のとおりです。
詳細表示
<af:breadCrumbs var="menuInfo" value="#{root_menu}"..>
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
action="#{menuInfo.doAction}"
destination="#{menuInfo.destination}"../>
</f:facet>
</af:breadCrumbs>
value属性には、(adfc-config.xmlで定義されている)ルート・メニュー用に構成されたマネージドBeanの名前を指定します。 var属性値は、root_menu.xmlファイル内の項目を参照するために使用する任意のEL変数名です。
デフォルトでは、ブレッドクラム・リンクは横線で表示されます。Bread Crumbsコンポーネントのorientation属性をverticalに設定すると、縦線のステップ・リストに変更できます。
<af:breadCrumbs orientation="vertical" .../>
ここでは、さらに別のNavigation Paneコンポーネントを挿入して、最後のレベルのナビゲーション項目を作成します。
-
エディタ・ウィンドウで、ドキュメント・タブの「myTemplate.jsf」をクリックし、テンプレート・ページがフォーカスされていることを確認します。 必要に応じて、ウィンドウ下部の「Design」タブをクリックして、ビジュアル・エディタを使用します。
-
コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Panel Splitterを、ビジュアル・エディタ内にあるページ上のcenterファセットにドラッグ・アンド・ドロップします。

「
」Navigation Paneを、今追加したパネル・スプリッタのfirstファセットにドラッグ・アンド・ドロップします。
このステップでは、ページ階層内のレベル3リスト・ナビゲーション項目を生成する4つ目のNavigation Paneコンポーネントを挿入し、バインドします。
詳細表示
プロパティ・インスペクタのCommonセクションで、次の属性値を選択するか入力します。
| セクション |
属性 |
値 |
| Common |
Hint |
list |
| |
Level |
3 |
| Data |
Value |
#{root_menu} |
| |
Var |
menuInfo |
Structureウィンドウで、「af:navigationPane」を右クリックし、コンテキスト・メニューから「Facets - Navigation Pane」→「Node Stamp」を選択します。
コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「
」Navigation Itemを、nodeStampファセットにドラッグ・アンド・ドロップします。
プロパティ・インスペクタのCommonセクションで、次の属性値を入力します。
| 属性 |
値 |
| Text |
#{menuInfo.label} |
| Destination |
#{menuInfo.destination} |
| Action |
#{menuInfo.doAction} |
コンポーネント・パレットのLayoutパネルのCore Structureセクションにある「
」Facetを、ページ上のパネル・スプリッタのsecondファセットにドラッグ・アンド・ドロップします。
ドロップダウン・リストから「body」を選択し、「OK」をクリックします。
bodyファセットはページ・テンプレート定義内で定義されており、ページ作成者がページ・テンプレートを使用してページを作成する際に、このファセットに独自のコンテンツを追加できます。
必要に応じて、ページ・テンプレート定義を検証するためのサンプル・コードを使用します。
<?xml version='1.0' encoding='UTF-8'?>
<af:pageTemplateDef xmlns:f="http://java.sun.com/jsf/core"
var="attrs" definition="private"
xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:panelStretchLayout id="pt_psl1">
<f:facet name="bottom"/>
<f:facet name="center">
<af:decorativeBox id="pt_db1">
<f:facet name="center">
<af:decorativeBox id="pt_db2">
<f:facet name="center">
<af:decorativeBox id="pt_db3">
<f:facet name="center">
<af:panelSplitter id="pt_ps1">
<f:facet name="first">
<af:navigationPane id="pt_np4" hint="list"
level="3"
var="menuInfo"
value="#{root_menu}">
<f:facet name="nodeStamp">
<af:commandNavigationItem
text="#{menuInfo.label}"
id="pt_cni5"
destination="#{menuInfo.destination}"
action="#{menuInfo.doAction}"/>
</f:facet>
</af:navigationPane>
</f:facet>
<f:facet name="second">
<af:facetRef facetName="body"/>
</f:facet>
</af:panelSplitter>
</f:facet>
<f:facet name="top">
<af:breadCrumbs id="pt_bc1" var="menuInfo"
value="#{root_menu}">
<f:facet name="nodeStamp">
<af:commandNavigationItem
text="#{menuInfo.label}"
id="pt_cni4"
destination="#{menuInfo.destination}"
action="#{menuInfo.doAction}"/>
</f:facet>
</af:breadCrumbs>
</f:facet>
</af:decorativeBox>
</f:facet>
<f:facet name="top">
<af:navigationPane id="pt_np3" hint="tabs" level="2"
var="menuInfo" value="#{root_menu}">
<f:facet name="nodeStamp">
<af:commandNavigationItem
text=" #{menuInfo.label}"
id="pt_cni3"
destination="#{menuInfo.destination}"
action="#{menuInfo.doAction}"/>
</f:facet>
</af:navigationPane>
</f:facet>
</af:decorativeBox>
</f:facet>
<f:facet name="top">
<af:navigationPane id="pt_np2" hint="tabs" level="1"
var="menuInfo" value="#{root_menu}">
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
id="pt_cni2"
destination="#{menuInfo.destination}"
action="#{menuInfo.doAction}"/>
</f:facet>
</af:navigationPane>
</f:facet>
</af:decorativeBox>
</f:facet>
<f:facet name="start"/>
<f:facet name="end"/>
<f:facet name="top">
<af:panelHeader text="ADF Menu Example" id="pt_ph1">
<f:facet name="context"/>
<f:facet name="menuBar">
<af:navigationPane id="pt_np1" hint="buttons"
var="menuInfo" value="#{root_menu}">
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
id="pt_cni1"
destination="#{menuInfo.destination}"
action="#{menuInfo.doAction}"/>
</f:facet>
</af:navigationPane>
</f:facet>
<f:facet name="toolbar"/>
<f:facet name="legend"/>
<f:facet name="info"/>
</af:panelHeader>
</f:facet>
</af:panelStretchLayout>
<af:xmlContent>
<afc:component>
<afc:display-name>myTemplate</afc:display-name>
<afc:facet>
<afc:facet-name>body</afc:facet-name>
</afc:facet>
</afc:component>
</af:xmlContent>
</af:pageTemplateDef>
「
」Save Allをクリックして作業内容を保存します。
ビジュアル・エディタは、次のように表示されます。
レベル3用のNavigation Paneコードは、他のレベルとほぼ同じです。
詳細表示 ただし、hintとlevelの属性値のみが異なります。
<af:navigationPane hint="list" level="3"
value=#{root_menu} var="menuInfo"..>
<f:facet name="nodeStamp">
<af:commandNavigationItem text="#{menuInfo.label}"
destination="#{menuInfo.destination}"
action="#{menuInfo.doAction}"../>
</f:facet>
</af:navigationPane>
テンプレート内のbodyファセット定義を参照するコードは、次のとおりです。
<af:facetRef facetName="body"/>
-
エディタ・ウィンドウで、「adfc-config.xml」タブをクリックして、アンバウンド・タスク・フロー・ダイアグラムを前面に表示します (まだ開いていない場合は、アプリケーション・ナビゲータで「adfc-config.xml」をダブルクリックし、ダイアグラマで開きます)。

この例に従って操作を実行してきた場合、この時点ではアプリケーション・ナビゲータにはJSFページは含まれていません。
詳細表示 実際のアプリケーションでは、この時点ですでに、作成したページがアプリケーション・ナビゲータに表示されている可能性があります。 その場合、各バウンド・タスク・フロー・ダイアグラム上のViewアクティビティを、これらの作成済みのページに関連付けます。 この関連付けは、アプリケーション・ナビゲータのページをダイアグラム上の該当するViewにドラッグ・アンド・ドロップして行います。
ダイアグラムで、Viewアクティビティ(例:home)をダブルクリックし、Create JSF Pageダイアログを開きます。
ドキュメント・タイプとして「Facelets」を選択し、デフォルトのファイル名(例:home.jsf)のままにします。
Page Layoutページで「Page Template」を選択し、ドロップダウン・リストから「myTemplate」を選択します。

「Managed Bean」をクリックし、「Do Not Automatically Expose UI Components in a Managed Bean」を選択します。
Create JSF Pageダイアログでは、UIコンポーネントをプログラムで操作できるようにするために、ページ上のUIコンポーネントをマネージドBean内に公開するかどうかをオプションで指定できます。
詳細表示
デフォルトでは、コンポーネントはマネージドBeanに対して公開されません。 コンポーネントをマネージドBeanにバインドする場合は、このダイアログのManaged Beanページでいずれかの自動バインディング・オプションを選択します。
既存のマネージドBeanに対するバインド方法のオプションを選択できるのは、アプリケーションにマネージドBeanが構成されている場合のみです。
UIコンポーネントをマネージドBean内で自動的に公開するように指定すると、新規のJSFページを作成するたびに自動的にバッキングBeanが作成されます。 ページ上にコンポーネントをドロップすると、各コンポーネントにBeanプロパティが挿入され、コンポーネント・インスタンスとプロパティはbinding属性を使用してバインドされます。これにより、Beanでコンポーネント・インスタンスを受け取ったり返したりできるようになります。
注:ページにADFバインディングを追加する場合は、自動バインディング機能を使用しないでください。 自動バインディング機能を使用した場合は、ADFバインディングを追加した後でマネージドBeanバインディングを削除することが必要になります。
「OK」をクリックします。
ビジュアル・エディタにページが表示されます。 ページ・テンプレートに定義されたナビゲーション・コンポーネントがページ上に表示されます。

-
ビジュアル・エディタで、ADF Facesコンポーネントをbodyファセットに挿入して、コンテンツをページに追加します。
テンプレートをもとにページを作成した後は、該当するADF Facesコンポーネントを
bodyファセットに挿入することで、作成中のページ固有のコンテンツを追加できます。
詳細表示
これは例に過ぎませんので、ページ・レイアウトは自由に設計できます。 通常は、Panel Stretch Layout、Decorative Box、Panel Group Layoutなどのコンテナ・コンポーネントを挿入し、その後、必要な子コンポーネントをそのコンテナ・コンポーネントに挿入します。
この例では、単純にOutput Textコンポーネントを挿入できます。 次に、プロパティ・インスペクタで、valueプロパティを、作成中のページを表す何らかの文字列に変更します。 たとえば、ホームページを作成している場合は、ValueフィールドにHomeと入力します。
そのページのXMLエディタで、bodyファセット内に自動的に追加されたコードを確認できます。 <af:pageTemplate viewId="/myTemplate.jsf"..>
<f:facet name="body">
<af:outputText value="Home"../>
</f:facet>
</af:pageTemplate>
ダイアグラム上の残りのViewアクティビティのそれぞれについて、手順2~7を繰り返します。
次に、残りのアンバウンド・タスク・フロー(adfc-products-config.xmlとadfc-sale-config.xml)に対して、これまでの操作(手順1~8)を繰り返します。
「
」Save Allをクリックして作業内容を保存します。
エディタ・ウィンドウで、「adfc-config.xml」タブをクリックして、ルートのアンバウンド・タスク・フロー・ダイアグラムを前面に表示します。
各アンバウンド・タスク・フロー・ダイアグラムは次のように表示されます。この段階では、Viewアクティビティ・アイコンの黄色の警告記号が消えています。

ダイアグラムで、「home」Viewアクティビティ・アイコンを右クリックし、「Run」を選択します。
Create Default Domainダイアログが表示されたら、PasswordフィールドとConfirm Passwordフィールドにデフォルト・パスワード(例:weblogic1)を入力し、「OK」をクリックします。
次のようなホームページがブラウザに表示されます。

デフォルトでJDeveloperは、IDEにバンドルされたOracle WebLogic Serverのユーザー固有のインスタンスを参照する、Integrated WebLogic Serverという名前の統合サーバーを自動的に構成します。
詳細表示
Integrated WebLogic Serverは、パッケージ化されたアーカイブ・デプロイメント用のJava EEランタイム・サービスです。 ゼロコピー・デプロイメントに基づき、Integrated WebLogic Serverでは、アプリケーションとそのプロジェクトのJava EEアプリケーションとしての実行とテストをJava EEコンテナ内で行えます。 Integrated WebLogic Serverの使用に際し、特別な接続設定は必要ありません。 アプリケーション全体、プロジェクト、または個別のJSFページを実行できます。
IDEでJSFアプリケーションを実行すると、次の処理が自動的に実行されます。
まだ実行中でない場合は、Integrated WebLogic Serverを起動します。
アプリケーションをコンパイルして、Integrated WebLogic Serverにデプロイします。
次のデフォルトのアドレスを使用して、デフォルトのブラウザ内でアプリケーションを起動します。 http://<your_machine_IP_address>:<http_port>/<your_application_name>-<your_project_name>-context-root>/faces/<path_to_the_page>
アプリケーションを終了する場合は、JDeveloperで「
」Terminateをクリックし、ドロップダウン・メニューからアプリケーション・バウンド・インスタンス「MenuWebApp」を選択します。
注: アプリケーションを終了すると、アプリケーションは停止し、Integrated WebLogic Serverからアンデプロイされますが、Integrated WebLogic Serverは終了されません。
「Products」タブをクリックし、「New」をクリックします。
タブ(およびその下の任意のナビゲーション項目)をクリックすると、スプリット・ペインの上にブレッドクラム・リンクが表示されます。

ブレッドクラムは、現在のページからルートのホームページに戻るリンクのパスを示します。
詳細表示 たとえば、Productsページのブレッドクラム・リンクは、Home > Products > Newのようになります。
最後のブレッドクラム・リンクは常に現在のページとなり、このリンクはアクティブにはなりません。 レンダラまたはクライアントのデバイス・タイプによっては、最後のブレッドクラム項目が表示されない場合があります。
「Sale」をクリックします。
Sale Viewアクティビティ用のSaleページを作成した場合でも、直接Electronicsページに移動します。

これは、Sale ADFメニュー(
sale_menu.xml)で親の
groupNodeを使用しており、この
groupNodeが、
idref属性を通じてElectronicsページを参照しているからです。
詳細表示
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<groupNode id="itemNode_sale" label="Sale" idref="itemNode_electronics">
<itemNode id="itemNode_electronics" label="Electronics"
action="adfMenu_electronics" focusViewId="/electronics"/>
<itemNode id="itemNode_office" label="Office" action="adfMenu_office"
focusViewId="/office"/>
<itemNode id="itemNode_media" label="Media" action="adfMenu_media"
focusViewId="/media"/>
</groupNode>
</menu>
右上隅の「Help」をクリックします。
作成したHelpページではなく、オラクルのWebページが表示されます。
itemNodeに
action属性と
destination属性の両方が指定されている場合(次の
root_menu.xmlコードを参照)、
actionよりも
destinationの方が優先されます。
詳細表示
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<itemNode id="itemNode_home" label="Home" action="adfMenu_home"
focusViewId="/home">
<sharedNode ref="#{products_menu}"/>
<itemNode id="itemNode_shop" label="Shop" action="adfMenu_shop"
focusViewId="/shop"/>
</itemNode>
<itemNode id="itemNode_help" label="Help" action="adfMenu_help"
focusViewId="/help" destination="http://www.oracle.com"/>
<itemNode id="itemNode_preferences" label="Preferences"
action="adfMenu_preferences" focusViewId="/preferences"/>
</menu>
このチュートリアルでは、アプリケーションのページ階層をナビゲートするためのユーザー・インタフェースを作成しました。 このチュートリアルで学習した内容は、以下のとおりです。
- JDeveloperのウィザードおよびダイアログを使用して、アプリケーション、タスク・フロー、ページ・テンプレート、初期ページを作成する
- ページ階層内で識別されたメニュー用のアンバウンド・タスク・フローを定義する
- ADF Controller機能をXML Menu Modelとともに使用して、さまざまなレベルのメニューを構築する
- Navigation PaneコンポーネントとBread CrumbsコンポーネントをADFメニュー・モデルにバインドする
- Integrated WebLogic Serverを使用してFusion Webアプリケーションを実行する
Fusion Webアプリケーションの開発およびOracle ADF Faces使用の詳細については、下記を参照してください。
すべて表示 |
すべて非表示
Copyright © 2011, Oracle and/or its affiliates. All rights reserved.