ウィザードを使用して、アプリケーションとプロジェクト、およびページ階層内で識別された各メニュー用の空白のADFアンバウンド・タスク・フローを素早く作成します。 ここで作成するのは、Home、Products、Saleという3つのメニューで構成されるページ階層をナビゲートするためのメニュー・システムです。
詳細を表示/非表示詳細表示
目的 所要時間 アプリケーション
このチュートリアルでは、ページ階層をナビゲートするメニュー・システムを生成するための、アンバウンド・タスク・フローとXMLメニュー・モデル・メタデータの作成方法を説明します。 これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍してください。 50分 menuwebapp.zipのダウンロード
ステップ1: 新規アプリケーションおよびプロジェクトの作成
  1. メイン・メニューから「File」→「New」を選択します。 New Galleryで、Generalカテゴリを開き、「Applications」を選択します。 Itemsリストで「Fusion Web Application (ADF)」を選択し、「OK」をクリックします。

    New Gallery、General、Applications
  2. このJDeveloperアプリケーションは、組織構造の最上位レベルに位置します。 アプリケーションの開発中に、操作しているオブジェクトの情報がここに格納されます。 詳細を表示/非表示詳細表示
  3. 例に合わせて、アプリケーション名としてMenuWebAppと入力します。

    Create Fusion Web Application
  4. 初期プロジェクト構造(アプリケーション・ワークスペース内の名前付きプロジェクト・フォルダ)および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。 詳細を表示/非表示詳細表示
  5. デフォルト値のままにして、「Finish」をクリックします。

    新しいアプリケーションを作成すると、Application Overviewウィンドウがデフォルトでエディタ・ウィンドウ領域に開きます。 このアプリケーションのオブジェクトの作成では使用しないので、任意でこのウィンドウを閉じることができます。

    Application Overviewウィンドウの一部

  6. このウィンドウの各ファイル概要ページには、JDeveloper内で作成されるすべてのオブジェクトがオブジェクト・タイプごとに分類されて表示されます。 新規作成したファイルとアーチファクトは、ステータスやプロジェクトでフィルタして表示できます。 詳細を表示/非表示詳細表示
ステップ2: 各メニュー用のアンバウンド・タスク・フローの作成
  1. 記載されているとおりに手順を進めるために、チュートリアル全体を通じて、説明に示された値を入力してください。 まずは、以下の情報を読んで、この例で使用するページ階層について学習してください。

  2. アプリケーションが複数のページで構成され、それらのページがツリー構造のような階層内で関連付けられ構造化される場合があります。このようなアプリケーションでは、ユーザーはノードのパスをドリルダウンして、ページ上の特定の情報にアクセスできます。 詳細を表示/非表示詳細表示
  3. アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「ADF Task Flow」の順に選択して、「OK」をクリックします。

    New Gallery、Web Tier、JSF/Facelets
  4. ADFタスク・フローは、Fusion Webアプリケーションにコントロール・フローを定義するためのモジュール・アプローチを提供します。 アプリケーションを1つの大きなJSFページ・フローとして表現する代わりに、再利用可能な複数のタスク・フローに分割できます。 詳細を表示/非表示詳細表示
  5. File Nameフィールドに、adfc-sale-config.xmlと入力します。これは、Saleメニューを表すアンバウンド・タスク・フローになります。 「Create as Bounded Task Flow」の選択を解除して、「OK」をクリックします。

    Create ADF Task Flowダイアログ
  6. アンバウンド・タスク・フロー用のソース・ファイルはXMLで記述されます。 各ソース・ファイルには一意のファイル名を指定する必要があります。 詳細を表示/非表示詳細表示
  7. アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「ADF Task Flow」の順に選択して、「OK」をクリックします。

  8. File Nameフィールドに、adfc-products-config.xmlと入力します。これは、Productsメニューを表すアンバウンド・タスク・フローになります。 「Create as Bounded Task Flow」の選択を解除して、「OK」をクリックします。

  9. アンバウンド・タスク・フローの作成時に、JDeveloperによって次の処理が実行されます。 詳細を表示/非表示詳細表示
  10. エディタ・ウィンドウで、ドキュメント・タブの「adfc-sale-config.xml」をクリックして、Saleアンバウンド・タスク・フロー・ダイアグラムを前面に表示します。

    タスク・フロー・ダイアグラマとコンポーネント・パレット
  11. 各アンバウンド・タスク・フロー内で、メニュー内のページを表すViewアクティビティを追加します。 詳細を表示/非表示詳細表示
  12. コンポーネント・パレットのADF Task FlowページにあるComponentsパネルの「facespageView をダイアグラム上にドラッグ・アンド・ドロップし、Viewアクティビティの名前を変更します。 Saleメニュー内の各ページに対応する次のViewアクティビティ名を使用して、同じ操作を4回繰り返します。

    sale
    electronics
    office
    media

    ダイアグラマ、adfc-sale-config.xml

  13. エディタ・ウィンドウで、ドキュメント・タブ「adfc-products-config.xml」をクリックして、Productsダイアグラムを前面に表示します。

  14. コンポーネント・パレットのADF Task FlowページにあるComponentsパネルの「facespageView をダイアグラム上にドラッグ・アンド・ドロップし、Viewアクティビティの名前を変更します。 Productsメニュー内の各ページに対応する次のViewアクティビティ名を使用して、同じ操作を2回繰り返します。

    products
    new

    ダイアグラマ、adfc-products.xml
  15. メニュー内のページを表すViewアクティビティを追加する際に、子を持つ子ノード用のViewアクティビティを追加する必要はありません。 詳細を表示/非表示詳細表示
  16. アプリケーション・ナビゲータで「adfc-config.xml」をダブルクリックし、ダイアグラマで開きます。

  17. コンポーネント・パレットのADF Task FlowページにあるComponentsパネルの「facespageViewをダイアグラム上にドラッグ・アンド・ドロップし、Viewアクティビティの名前を変更します。 各ページに対応する次のViewアクティビティ名を使用して、同じ操作を4回繰り返します。

    home
    help
    preferences
    shop

  18. adfc-config.xmlはページ階層内のルートのHomeメニューに対応しており、このメニューにはアプリケーション内の他のメニューまたはアンバウンド・タスク・フローに対する参照が含まれています。 詳細を表示/非表示詳細表示
  19. Save AllSave Allをクリックして作業内容を保存します。

    デフォルト(ルート)のadfc-config.xml用のダイアグラマは、次のようになります。

    ダイアグラマ、adfc-config.xml
  20. 最初にページ用のViewアクティビティを追加すると、ダイアグラム上のページ・アイコンが警告を表す黄色の記号付きで表示されます。 詳細を表示/非表示詳細表示
ステップ3: 各アンバウンド・タスク・フロー用のADFメニューの作成
  1. 階層内の最下位レベルのメニューから作業を開始します。アプリケーション・ナビゲータで「adfc-sale-config.xml」を右クリックし、コンテキスト・メニューから「Create or Update ADF Menu Model」を選択します。

    アプリケーション・ナビゲータ、Create ADF Menuコンテキスト・メニュー・オプション
  2. ADFメニューは、メニュー内に必要とされるすべての情報(メニュー内の該当するページにナビゲートするためのラベルや値など)を含むXMLメタデータ・リソースです。 詳細を表示/非表示詳細表示
  3. File Nameフィールドに、メニュー・メタデータ・ファイル名としてsale_menuと入力します。

    Create ADF Menu Modelダイアログ
  4. Create ADF Menu Modelダイアログに入力したファイル名がADFメニュー・メタデータ・ファイルになります。このファイルはXML形式で作成されます。 詳細を表示/非表示詳細表示
  5. デフォルト値はそのままにして、「OK」をクリックします。

  6. Create ADF Menu Modelダイアログを使用すると、次の処理が自動的に実行されます。 詳細を表示/非表示詳細表示
  7. アプリケーション・ナビゲータで「adfc-products-config.xml」を右クリックして、「Create or Update ADF Menu Model」を選択します。 メニュー・メタデータ・ファイル名としてproducts_menuと入力して、「OK」をクリックします。

    products_menu.xmlの構造がStructureウィンドウに表示されます。

    Structureウィンドウ、products_menu.xml

  8. アプリケーション・ナビゲータで「adfc-config.xml」を右クリックして、「Create or Update ADF Menu Model」を選択します。 デフォルトのメニュー・メタデータ・ファイル名(root_menu)のままにして、「OK」をクリックします。

  9. ルートのADFメニュー・モデル(ページ階層内のルートのHomeメニューをXML形式で表したもの)は、Structureウィンドウで次のように表示されます。

    Structureウィンドウ、root_menu.xml

    詳細を表示/非表示詳細表示
  10. アプリケーション・ナビゲータで、メニュー・メタデータ・ファイルの「sale_menu.xml」を選択します。

    sale_menu.xmlの構造がStructureウィンドウに表示されます。

    Structureウィンドウ、sale_menu.xml

  11. Structureウィンドウで、各項目ノードを選択して、プロパティ・インスペクタで「Label」属性値を変更します。 項目ラベルに次の値を使用します。

    Sale
    Electronics
    Office
    Media

  12. 各アンバウンド・タスク・フロー用のADFメニューを作成した後、プロパティ・インスペクタを使用して、各メニュー内のノードに対して自動的に生成されたデフォルトのラベルを変更します。 詳細を表示/非表示詳細表示
  13. アプリケーション・ナビゲータで、「products_menu.xml」を選択します。 Structureウィンドウで、各項目ノードを選択して、プロパティ・インスペクタでLabel値を変更します。 項目ラベルに次の値を使用します。

    Products
    New

  14. アプリケーション・ナビゲータで、「root_menu.xml」を選択します。 Structureウィンドウで、各項目ノードを選択して、プロパティ・インスペクタでLabel値を変更します。 項目ラベルに次の値を使用します。

    Home
    Help
    Preferences
    Shop

  15. アプリケーション・ナビゲータで、再度「root_menu.xml」を選択します。 Structureウィンドウで、「itemNode - itemNode_help」を選択します。

    Structureウィンドウ、root_menu.xml

  16. プロパティ・インスペクタで、Destinationフィールドにhttp://www.oracle.comと入力し、[Enter]を押します。

  17. Save AllSave Allをクリックして作業内容を保存します。

  18. アプリケーション・ナビゲータで、各アンバウンド・タスク・フローに対して作成されたADFメニュー・メタデータのXMLソース・ファイルが表示されます。 詳細を表示/非表示詳細表示
ステップ4: 各ADFメニューでの親子ノード階層の作成
  1. アプリケーション・ナビゲータで、「sale_menu.xml」を選択します。 Structureウィンドウで、itemNode_saleを親ノードとして使用し、次の項目ノードを1つずつitemNode_saleにドラッグ・アンド・ドロップします。

    itemNode_electronics
    itemNode_office
    itemNode_media

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

    Structureウィンドウ、Convert To
  4. ADFメニュー・メタデータ・ファイルで、ルート要素のmenuに次の子要素を追加できます。 詳細を表示/非表示詳細表示
  5. groupNode Propertiesダイアログで、デフォルトのid値(必須)のままにします。 idrefフィールドの最後にある「browse」をクリックします。 最初の項目ノードの「itemNode_electronics」を選択します。

    groupNode Propertiesダイアログ
  6. groupNodeには必須のidref属性があります。この属性では、子のitemNodeまたは別のgroupNodeのidを参照する必要があります。 詳細を表示/非表示詳細表示
  7. OK」を2回クリックします。 確認画面が表示されたら、「OK」をクリックしてこの変換処理を確定します。

    Confirm Convertダイアログ
  8. itemNode要素とは異なり、groupNode要素にはaction属性やfocusViewId属性はありません。 詳細を表示/非表示詳細表示
  9. アプリケーション・ナビゲータで、「products_menu.xml」を選択します。 Structureウィンドウで、itemNode_productsを親ノードとして使用し、「itemNode_new」を親ノードにドラッグ・アンド・ドロップします。

    Structureウィンドウ、products_menu.xml

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

    Structure window、Insert sharedNode
  11. 共有ノードは、サブメニューを参照するためにADFメニュー内で使用されます。 詳細を表示/非表示詳細表示
  12. Insert sharedNodeダイアログで、「dropdown menu」ドロップダウン・メニューをクリックし、「Expression Builder」を選択します。

    Insert sharedNode、Expression Builderドロップダウン

  13. ADF Managed Beansを開き、「sale_menu」を選択します。

    EL式#{sale_menu}Expressionボックス内に自動的に入力されます。

    Expression Builder
  14. EL式を直接refフィールドに入力するか、Expression Builderを使用してEL式を作成できます。 EL式ではサブメニューのマネージドBean名を参照する必要があります。 詳細を表示/非表示詳細表示
  15. OK」を2回クリックします。

    Structureウィンドウ、productsメニュー
  16. 共有ノードを挿入すると、ADFメニュー・メタデータのソース・ファイル内にsharedNode要素が自動的に追加されます。 詳細を表示/非表示詳細表示
  17. アプリケーション・ナビゲータで、「root_menu.xml」を選択します。 Structureウィンドウで、「itemNode_shop」のみを親ノードのitemNode_homeにドラッグ・アンド・ドロップします。

    itemNode_helpitemNode_preferencesは、itemNode_homeと同じレベルにあるグローバル・ノードであるため、これらを移動する必要はありません。

    Structureウィンドウ、root_menu.xml

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

    Insert sharedNodeダイアログ

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

    Structureウィンドウ、ルート・メニュー

  20. Save AllSave Allをクリックして作業内容を保存します。

  21. root_menu.xmlのエディタ・ウィンドウに、Productsメニュー用のマネージドBean名を参照するsharedNode要素が表示されます。 詳細を表示/非表示詳細表示
ステップ5: ADFページ・テンプレートの作成
  1. アプリケーション・ナビゲータで「ViewController」プロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「ADF Page Template」の順に選択して、「OK」をクリックします。

    New Gallery、Web Tier、JSF/Facelets
  2. この例に従って操作を実行してきた場合、この時点ではアプリケーション・ナビゲータにはJSFページは含まれていません。 詳細を表示/非表示詳細表示
  3. Create ADF Page Templateダイアログで、File NameフィールドにmyTemplate.jsfと入力します。

  4. ドキュメント・タイプとしてFaceletsが選択されていること、およびUse a Quick Start Layoutが選択されていないことを確認します。

  5. Facet Definitionsタブを前面に表示して、「add green plus」をクリックし、ファセットを追加します。 Nameフィールドにbodyと入力して、「OK」をクリックします。

    Create ADF Page Templateダイアログ
  6. ページ・テンプレートは、XML形式で記述されたテンプレート定義ファイルです。 詳細を表示/非表示詳細表示
  7. エディタ・ウィンドウの上部にあるドキュメント・タブの「myTemplate.jsf」をクリックし、ビジュアル・エディタがフォーカスされていることを確認します。

    フォーカスされているmyTemplate.jsfのビジュアル・エディタ

  8. コンポーネント・パレットのADF FacesページにあるLayoutパネルの「borderlayoutPanel Stretch Layoutを、ビジュアル・エディタの空白ページにドラッグ・アンド・ドロップします。

  9. パレットのLayoutパネルのInteractive Containers and Headersセクションから、「headerPanel Headerを、今追加したPanel Stretch Layoutのtopファセットにドラッグ・アンド・ドロップします。

    ファセットにコンポーネントをドラッグすると、Facet topという名前の長方形の領域がページに表示されます。これは、今ドラッグしているコンポーネントがそのターゲット内に挿入されることを意味しています。

    ビジュアル・エディタ、テンプレート・ページ、topファセット

  10. プロパティ・インスペクタのCommonセクションで、Text属性値をADF Menu Exampleに変更し、[Enter]を押します。

  11. Save AllSave Allをクリックして作業内容を保存します。

    ビジュアル・エディタは、次のように表示されます。

    ビジュアル・エディタ、初期テンプレート・ページ

  12. これは例に過ぎませんので、テンプレート・ページ・レイアウトは自由に配置できます。 詳細を表示/非表示詳細表示
ステップ6: Navigation Paneコンポーネントの追加とバインド

ここでは、3つのNavigation Paneコンポーネントを挿入して、1つのレベルのグローバル・ボタンと、2つのレベルのタブで構成される、3つのレベルのナビゲーション項目を作成します。

  1. エディタ・ウィンドウで、ドキュメント・タブの「myTemplate.jsf」をクリックし、テンプレート・ページがフォーカスされていることを確認します。 必要に応じて、ウィンドウ下部の「Design」タブをクリックして、ビジュアル・エディタを使用します。

  2. コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「navigationbarNavigation Paneを、ビジュアル・エディタ内にあるパネル・ヘッダーのmenuBarファセットにドラッグ・アンド・ドロップします。

    ビジュアル・エディタ、テンプレート・ページ、menuBarファセット
  3. Navigation Paneコンポーネントは、ADFメニュー・モデルにバインドする場合に、ページ階層内の1つのレベルのメニュー・ナビゲーション項目を作成するために使用します。 詳細を表示/非表示詳細表示
  4. プロパティ・インスペクタのCommonセクションで、Hintドロップダウン・リストから「buttons」を選択します。

    プロパティ・インスペクタ、Hintドロップダウン・リスト

  5. Levelフィールドが0であることを確認します。

  6. 1つのNavigation Paneコンポーネントを使用して、ページ階層内の1つのレベル用のナビゲーション項目を作成するため、level属性で、各コンポーネント上で使用するレベルを指定する必要があります。 詳細を表示/非表示詳細表示
  7. Dataセクションを開きます。 Varフィールドに、menuInfoと入力します。 次に、Valueフィールドの横にある「Property Menu」ドロップダウン・メニューから「Expression Builder」を選択します。

    プロパティ・インスペクタ、Navigation Pane、Dataセクション

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

    Expression Builder、root_menu EL式
  9. Navigation Paneコンポーネントは、一連のCommand Navigation Itemコンポーネントを子要素として受け入れることができ、各Command Navigation Itemコンポーネントは1つのメニュー項目を表します。 詳細を表示/非表示詳細表示
  10. Structureウィンドウで、「af:navigationPane」を右クリックし、コンテキスト・メニューから「Facets」→「Navigation Pane」→「Node Stamp」を選択します。

    Structureウィンドウ、テンプレート、nodeStampファセット

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

    Structureウィンドウ、テンプレート、nodeStampへの挿入

  12. Navigation Itemのプロパティ・インスペクタのCommonセクションで、次の属性値を入力します。

    属性
    Text #{menuInfo.label}
    Destination #{menuInfo.destination}
    Action #{menuInfo.doAction}
  13. バインドされたNavigation Paneコンポーネントのコードは次のようになります。 詳細を表示/非表示詳細表示
  14. コンポーネント・パレットのLayoutパネルにある「decorativeboxDecorative Boxを、ビジュアル・エディタ内の(Panel Stretch Layoutの)centerファセットにドラッグ・アンド・ドロップします。

    ビジュアル・エディタ、Decorative Box

  15. コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「navigationbarNavigation Paneを、今追加したDecorative Boxのtopファセットにドラッグ・アンド・ドロップします。

  16. Navigation Paneのプロパティ・インスペクタで、次の属性値を選択するか入力します。

    セクション 属性
    Common Hint tabs
      Level 1
    Data Value #{root_menu}
      Var menuInfo
  17. 手順7~9を繰り返して、Navigation ItemコンポーネントをNavigation PanenodeStampファセットに挿入し、そのコンポーネントをメニュー・モデルにバインドします。

    Navigation Itemコンポーネントをバインドした後のビジュアル・エディタは、次のようになります。

    ビジュアル・エディタ、レベル1のナビゲーション項目
  18. Navigation PaneをADFメニュー・モデルにバインドし、nodeStampファセットを使用してコマンド・ナビゲーション項目数を削除することで、実質的に、どのメニュー・レベルのNavigation Paneコンポーネントに対しても同じコードを使用できます。 詳細を表示/非表示詳細表示
  19. コンポーネント・パレットのLayoutパネルにある「decorativeboxDecorative Boxを、ビジュアル・エディタ内のページ上にある(1つ目のDecorative Boxの)centerファセットにドラッグ・アンド・ドロップします。

    ビジュアル・エディタ、2つ目のDecorative Box

  20. コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「navigationbarNavigation Paneを、今追加したDecorative Boxのtopファセットにドラッグ・アンド・ドロップします。

  21. プロパティ・インスペクタで、次の属性値を選択するか入力します。

    セクション 属性
    Common Hint tabs
      Level 2
    Data Value #{root_menu}
      Var menuInfo
  22. 手順7~9を繰り返して、Navigation ItemコンポーネントをNavigation PanenodeStampファセットに挿入し、そのコンポーネントをメニュー・モデルにバインドします。

  23. Save AllSave Allをクリックして作業内容を保存します。

    これまでの作業で、3つのNavigation Paneコンポーネント(レベル0ボタン用、レベル1タブ用、レベル2タブ用)を追加しました。 これら3つのコンポーネントはすべて、同じADFメニュー・モデルにバインドされます。

    ビジュアル・エディタ、myTemplateページ
ステップ7: Bread Crumbsコンポーネントの追加とバインド

ここでは、Bread Crumbsコンポーネントを挿入し、現在のページからホームページに戻るリンクのパスを作成します。

  1. エディタ・ウィンドウで、ドキュメント・タブの「myTemplate.jsf」をクリックし、テンプレート・ページがフォーカスされていることを確認します。 必要に応じて、ウィンドウ下部の「Design」タブをクリックして、ビジュアル・エディタを使用します。

  2. コンポーネント・パレットのLayoutパネルにある「decorativeboxDecorative Boxを、ビジュアル・エディタ内のページ上にあるcenterファセットにドラッグ・アンド・ドロップします。

    ビジュアル・エディタ、centerファセット

  3. コンポーネント・パレットのGeneral ControlsパネルのLocationセクションにある「menupathBread Crumbsを、今追加したDecorative Boxのtopファセットにドラッグ・アンド・ドロップします。

  4. Bread Crumbsコンポーネントは、現在のページからルート・ページに戻るリンクのパスを作成する場合に使用します。 詳細を表示/非表示詳細表示
  5. プロパティ・インスペクタのDataセクションで、Valueフィールドに#{root_menu}と入力します。 次に、VarフィールドにmenuInfoと入力します。

    プロパティ・インスペクタ、BreadCrumbs、Dataセクション

  6. Structureウィンドウで、「af:breadcrumbs」を右クリックし、コンテキスト・メニューから「Facets - Bread Crumbs」→「Node Stamp」を選択します。

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

    Structureウィンドウ、テンプレート・ページ、nodeStampファセット

  8. プロパティ・インスペクタのCommonセクションで、次の属性値を入力します。

    属性
    Text #{menuInfo.label}
    Destination #{menuInfo.destination}
    Action #{menuInfo.doAction}
  9. Save AllSave Allをクリックして作業内容を保存します。

    ビジュアル・エディタは、次のように表示されます。

    ビジュアル・エディタ

  10. root_menu.xmlファイルのメタデータを使用して、適切なブレッドクラム・リンクを生成する、Bread CrumbsコンポーネントのXMLコード全体は次のとおりです。 詳細を表示/非表示詳細表示
ステップ8: ADFページ・テンプレートの完成

ここでは、さらに別のNavigation Paneコンポーネントを挿入して、最後のレベルのナビゲーション項目を作成します。

  1. エディタ・ウィンドウで、ドキュメント・タブの「myTemplate.jsf」をクリックし、テンプレート・ページがフォーカスされていることを確認します。 必要に応じて、ウィンドウ下部の「Design」タブをクリックして、ビジュアル・エディタを使用します。

  2. コンポーネント・パレットのLayoutパネルのInteractive Containers and Headersセクションにある「splitpanePanel Splitterを、ビジュアル・エディタ内にあるページ上のcenterファセットにドラッグ・アンド・ドロップします。

    ビジュアルエディタ、パネル・スプリッタ

  3. navigationbarNavigation Paneを、今追加したパネル・スプリッタのfirstファセットにドラッグ・アンド・ドロップします。

  4. このステップでは、ページ階層内のレベル3リスト・ナビゲーション項目を生成する4つ目のNavigation Paneコンポーネントを挿入し、バインドします。 詳細を表示/非表示詳細表示
  5. プロパティ・インスペクタのCommonセクションで、次の属性値を選択するか入力します。

    セクション 属性
    Common Hint list
      Level 3
    Data Value #{root_menu}
      Var menuInfo
  6. Structureウィンドウで、「af:navigationPane」を右クリックし、コンテキスト・メニューから「Facets - Navigation Pane」→「Node Stamp」を選択します。

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

  8. プロパティ・インスペクタのCommonセクションで、次の属性値を入力します。

    属性
    Text #{menuInfo.label}
    Destination #{menuInfo.destination}
    Action #{menuInfo.doAction}
  9. コンポーネント・パレットのLayoutパネルのCore Structureセクションにある「facetFacetを、ページ上のパネル・スプリッタのsecondファセットにドラッグ・アンド・ドロップします。

  10. ドロップダウン・リストから「body」を選択し、「OK」をクリックします。

    Insert Facetダイアログ

    bodyファセットはページ・テンプレート定義内で定義されており、ページ作成者がページ・テンプレートを使用してページを作成する際に、このファセットに独自のコンテンツを追加できます。

  11. 必要に応じて、ページ・テンプレート定義を検証するためのサンプル・コードを使用します。

  12. Save AllSave Allをクリックして作業内容を保存します。

    ビジュアル・エディタは、次のように表示されます。

    ビジュアル・エディタ
  13. レベル3用のNavigation Paneコードは、他のレベルとほぼ同じです。詳細を表示/非表示詳細表示
ステップ9: ビュー用のJSFページの作成
  1. エディタ・ウィンドウで、「adfc-config.xml」タブをクリックして、アンバウンド・タスク・フロー・ダイアグラムを前面に表示します (まだ開いていない場合は、アプリケーション・ナビゲータで「adfc-config.xml」をダブルクリックし、ダイアグラマで開きます)。

    タスク・フロー・ダイアグラマ、ルート・メニュー
  2. この例に従って操作を実行してきた場合、この時点ではアプリケーション・ナビゲータにはJSFページは含まれていません。 詳細を表示/非表示詳細表示
  3. ダイアグラムで、Viewアクティビティ(例:home)をダブルクリックし、Create JSF Pageダイアログを開きます。

  4. ドキュメント・タイプとして「Facelets」を選択し、デフォルトのファイル名(例:home.jsf)のままにします。

  5. Page Layoutページで「Page Template」を選択し、ドロップダウン・リストから「myTemplate」を選択します。

    Create JSF Pageダイアログ

  6. Managed Bean」をクリックし、「Do Not Automatically Expose UI Components in a Managed Bean」を選択します。

  7. Create JSF Pageダイアログでは、UIコンポーネントをプログラムで操作できるようにするために、ページ上のUIコンポーネントをマネージドBean内に公開するかどうかをオプションで指定できます。 詳細を表示/非表示詳細表示
  8. OK」をクリックします。

    ビジュアル・エディタにページが表示されます。 ページ・テンプレートに定義されたナビゲーション・コンポーネントがページ上に表示されます。

    ビジュアル・エディタ、テンプレートに基づいて作成されたページ

  9. ビジュアル・エディタで、ADF Facesコンポーネントをbodyファセットに挿入して、コンテンツをページに追加します。

  10. テンプレートをもとにページを作成した後は、該当するADF Facesコンポーネントをbodyファセットに挿入することで、作成中のページ固有のコンテンツを追加できます。 詳細を表示/非表示詳細表示
  11. ダイアグラム上の残りのViewアクティビティのそれぞれについて、手順2~7を繰り返します。

  12. 次に、残りのアンバウンド・タスク・フロー(adfc-products-config.xmladfc-sale-config.xml)に対して、これまでの操作(手順1~8)を繰り返します。

  13. Save AllSave Allをクリックして作業内容を保存します。

  14. エディタ・ウィンドウで、「adfc-config.xml」タブをクリックして、ルートのアンバウンド・タスク・フロー・ダイアグラムを前面に表示します。

    各アンバウンド・タスク・フロー・ダイアグラムは次のように表示されます。この段階では、Viewアクティビティ・アイコンの黄色の警告記号が消えています。

    タスク・フロー・ダイアグラマ

  15. ダイアグラムで、「home」Viewアクティビティ・アイコンを右クリックし、「Run」を選択します。

    Create Default Domainダイアログが表示されたら、PasswordフィールドとConfirm Passwordフィールドにデフォルト・パスワード(例:weblogic1)を入力し、「OK」をクリックします。

    次のようなホームページがブラウザに表示されます。

    ブラウザのホームページ
  16. デフォルトでJDeveloperは、IDEにバンドルされたOracle WebLogic Serverのユーザー固有のインスタンスを参照する、Integrated WebLogic Serverという名前の統合サーバーを自動的に構成します。 詳細を表示/非表示詳細表示
  17. Products」タブをクリックし、「New」をクリックします。

    タブ(およびその下の任意のナビゲーション項目)をクリックすると、スプリット・ペインの上にブレッドクラム・リンクが表示されます。

    ブラウザの新規ページ
  18. ブレッドクラムは、現在のページからルートのホームページに戻るリンクのパスを示します。 詳細を表示/非表示詳細表示
  19. Sale」をクリックします。

    Sale Viewアクティビティ用のSaleページを作成した場合でも、直接Electronicsページに移動します。

    ブラウザ・ページ、Saleサブタブ
  20. これは、Sale ADFメニュー(sale_menu.xml)で親のgroupNodeを使用しており、このgroupNodeが、idref属性を通じてElectronicsページを参照しているからです。 詳細を表示/非表示詳細表示
  21. 右上隅の「Help」をクリックします。

    作成したHelpページではなく、オラクルのWebページが表示されます。

  22. itemNodeaction属性とdestination属性の両方が指定されている場合(次のroot_menu.xmlコードを参照)、actionよりもdestinationの方が優先されます。 詳細を表示/非表示詳細表示
まとめ
このチュートリアルでは、アプリケーションのページ階層をナビゲートするためのユーザー・インタフェースを作成しました。 このチュートリアルで学習した内容は、以下のとおりです。 Fusion Webアプリケーションの開発およびOracle ADF Faces使用の詳細については、下記を参照してください。

ブックマーク 印刷 すべて表示 | すべて非表示
トップへ戻る

このページはお役に立ちましたか。



Copyright © 2011, Oracle and/or its affiliates. All rights reserved.