Create ADF Menus for Page Navigation

An application may consist of pages that are related and organized in a tree-like hierarchy, where users gain access to specific information on a page by drilling down a path of links. To enable users to navigate the page hierarchy, you can use ADF Controller features in conjunction with XML Menu Model to build navigation menus for the hierarchy. You can work declaratively in JDeveloper's IDE to create unbounded task flows and XML menu model metadata that will generate the menu navigation system for your application page hierarchy. You can also work in JDeveloper's IDE to create the JSF page template and pages using ADF Faces components.

Create a New Application: Use the Create Application wizard to create an ADF web application.

Create Unbounded Task Flows: Use the Create Task Flow dialog to create one unbounded task flow for each menu in the hierarchy.

Create View Activities: On each unbounded task flow diagram, add one View activity for each page in the menu.

Create ADF Menu Metadata: Use the Create ADF Menu Model dialog to create menu model metadata for each menu.

Organize Menu Metadata into Parent and Child Nodes: Use the Structure window to create the node hierarchy in each menu. Then insert shared nodes into those menus that require them.

Create a JSF Page Template: Use the Create JSF Page Template dialog and the visual editor to create a template that will be used to create the pages in the hierarchy.

Bind Navigation Pane and Bread Crumbs Components to the ADF Menu Model: In the page template, use various editing tools to add and bind the ADF Faces components that will generate the menu navigation items at runtime.

Create the JSF Pages Using the Page Template: Use the Create JSF Page dialog to create pages based on the page template.

 

Create a New Application and Project

tell me more icon Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. It stores information about the objects you are working with, while you are creating your application. It keeps track of your projects and the environment settings while you are developing.   [ tell me more...]





  1. Open the Create Application wizard [ File > New > General > Applications.
  2. To follow along with the example, enter the application name MenuWebApp.
  3. Select Fusion Web Application (ADF) in the Applica tion Template list, then click Finish .

    tell me more icon Application Templates

    Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project.   [ tell me more...]




    tell me more icon In the IDE

    When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator should look like this:  [ tell me more...]



 

Create an Unbounded Task Flow for Each Menu

tell me more icon Creating an Unbounded Task Flow for Each Menu

An application page hierarchy is a tree-like hierarchy of nodes that represent a series of related pages in an application, with each node representing a page. End users navigate the application by clicking links on the pages to drill up or down to another level in the hierarchy.   [ tell me more...]





  1. Plan the menus you need in the page hierarchy. To follow along with the example, see the Tell me more link below for the page hierarchy menus to use.

    tell me more icon Page Hierarchies and ADF Menus

    A page hierarchy is a tree-like hierarchy of nodes that represent a series of related pages in an application, with each node representing a page. End users gain access to information on the pages by drilling down a path of nodes. An efficient method of creating a navigation menu system for a page hierarchy is to use a menu model. ADF menus use ADF Controller features in conjunction with the XML menu model to build the navigation menus associated with the page hierarchy.   [ tell me more...]



  2. In the Application Navigator, select the ViewController project and open the Create Task Flow dialog [ File > New > Web Tier > JSF > ADF Task Flow] . In the dialog, deselect Create as Bounded Task Flow . In the File Name field, enter adfc-sale-config.xml for the unbounded task flow that represents the Sale menu. Then click OK.

    tell me more icon Unbounded Task Flows

    An unbounded task flow consists of a set of activities, control flow rules, and managed beans interacting to allow a user to complete a task. The unbounded task flow file is written in XML. A single application can have multiple task flow XML source files. Each source file must have a unique file name.   [ tell me more...]



  3. In the Application Navigator, select the ViewController project and open the Create Task Flow dialog [ File > New > Web Tier > JSF > ADF Task Flow]  again. In the dialog, deselect Create as Bounded Task Flow . In the File Name field, enter adfc-products-config.xml for the unbounded task flow that represents the Products menu. Click OK.
  4. In the editor window, click the document tab taskflow icon adfc-sale-config.xml to bring the Sale unbounded task flow diagram forward.
  5. In the Component Palette, ADF Task Flow page, Components panel, drag and drop facespage icon View onto the blank diagram. Rename the view activity to sale (to represent the Sale page).

    tell me more icon View Activities

    The primary type of task flow activity is a View, which displays a JSF page in an unbounded task flow.   [ tell me more...]



  6. Repeat the procedure in step 5 to add a view activity for each page in the Sale menu, using the following view activity names: electronics, office, and media.
  7. In the editor window, click the document tab taskflow icon adfc-products-config.xml to bring the Products blank diagram forward. In the Component Palette, ADF Task Flow page, Components panel, drag and drop facespage icon View onto the diagram. Rename the view activity to products (to represent the Products page). Repeat the procedure to add a view activity to represent the New page in the Products menu, using new as the view name .
  8. In the Application Navigator, double-click taskflow icon adfc-config.xml to open it in the diagrammer.
  9. In the Component Palette, ADF Task Flow page, Components panel, drag and drop facespage icon View onto the diagram to add a view activity for the topmost page in the hierarchy. Rename the view activity to home.

    tell me more icon adfc-config.xml

    When you created the application based on the Fusion Web Application (ADF) template, JDeveloper provided a default unbounded task flow, adfc-config.xml.  [ tell me more...]



  10. Repeat the procedure in step 9 to add a view activity for each global node in the Home menu, using the following view activity names: help and preferences. Then add a view activity for the Shop page, using the view activity name shop.
  11. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating unbounded task flows, the diagram for the default or root adfc-config.xml should look like this:  [ tell me more...]



 

Create an ADF Menu for Each Unbounded Task Flow

tell me more icon Creating an ADF Menu for Each Unbounded Task Flow

An ADF menu is an XML metadata resource that contains all the information required in a menu (such as labels and values for navigating to the appropriate page in the menu). In this card, you will create an ADF menu for each unbounded task flow in the application, including the root or default unbounded task flow ( adfc-config.xml).  [ tell me more...]





  1. Starting with the lowest menu in the hierarchy, in the Application Navigator right-click the unbounded task flow source file taskflow icon adfc-sale-config.xml and choose Create ADF Menu from the context menu.
  2. Enter sale_menu as the menu metadata file name in the File Nam e field. Accept the default location for the file. Click OK.

    tell me more icon ADF Menu Model Metadata

    The file name you enter in the Create ADF Menu Model dialog becomes the ADF menu metadata source file, which is created in XML.

      [ tell me more...]



  3. In the Application Navigator, right-click taskflow icon adfc-products-config.xml and choose Create ADF Menu Model from the context menu. Enter products_menu as the menu metadata file name. Click OK.
  4. In the Application Navigator, right-click taskflow icon adfc-config.xml and choose Create ADF Menu from the context menu. In the Create ADF Menu Model dialog, accept the default file name, which is root_menu. Click OK.
  5. In the Application Navigator, select the menu metadata file menu icon sale_menu.xml. In the Structure window, select the first item node filenode icon itemNode - itemNode_sale. In the Property Inspector, change the default label of the node by entering Sale in the Label field. Change the labels for the remaining nodes in sale_menu.xml in the same manner, using the text Electronics, Office, and Media.

    tell me more icon Resource Bundle

    An ADF menu model metadata file (for example, sale_menu.xml) is a representation of a menu in a page hierarchy written in XML format. For example, you should see the following code in sale_menu.xml after modifying the labels:  [ tell me more...]



  6. Repeat the procedure in step 5 for the remaining menu metadata files: menu icon products_menu.xml, and then menu icon root_menu.xml. Use the sample values provided as the labels for the nodes.
    code sample icon Use sample values
  7. In the Application Navigator, select menu icon root_menu.xml. In the Structure window, select filenode icon itemNode - itemNode_help. In the Property Inspector, enter http://www.oracle.com in the Destination field and press Enter.
  8. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating an ADF Menu for each unbounded task flow, the task flow diagram for the root adfc-config.xml should look like this:  [ tell me more...]



 

Create a Hierarchy of Parent and Child Nodes in Each ADF Menu

tell me more icon Creating a Hierarchy of Parent and Child Nodes in Each ADF Menu

In this card, you will work in the Structure window of each ADF menu metadata file to organize the nodes into parent and child items. You will do this by dragging each item node that is to be a child, and dropping the child onto the parent item node.

Structure window, drag and drop   [ tell me more...]





  1. In the Application Navigator, select the ADF menu metadata file menu icon sale_menu.xml. In the Structure window, using itemNode_sale as the parent item node, drag and drop the following child item nodes into itemNode_sale, one at a time: itemNode_electronics, itemNode_office, and itemNode_media.
  2. In the Structure window for sale_menu.xml, right-click filenode icon itemNode_sale, which is the item node that is to become the parent node. Choose Con vert to groupNode from the context menu.
  3. In the groupNode Properties wizard, accept the default id value, which is required. Click browse button at the end of the idref field. In the Edit Property dialog, select the first item node, itemNode_electronics. Click OK. Then click Finish in the groupNode Properties wizard. When prompted, click OK in the Confirm Convert dialog.

    tell me more icon Converting Item Nodes to Group Nodes

    In the Structure window of an ADF menu metadata file (for example, sale_menu.xml), when you right-click any item node, you should see Con vert to groupNode as one of the commands in the context menu.   [ tell me more...]



  4. In the Application Navigator, select menu icon products_menu.xml. In the Structure window, using itemNode_products as the parent node, drag and drop itemNode_new into the parent node. Do not convert itemNode_products into a group node.
  5. In the Structure window for products_menu.xml, right-click the parent node, filenode icon itemNode - itemNode_products, and choose Insert inside itemNode then choose link icon sharedNode .

    tell me more icon Inserting Shared Nodes

    In the hierarchy example, the root or Home menu has a child Products submenu, and the Products menu has a child Sale submenu. For this reason, the Products and Sale menus must be included as shared nodes in their respective parent ADF menus. For example, Sale must be included as a shared node inside the Products menu, and Products must be included as a shared node inside the root or Home menu.   [ tell me more...]



  6. In the Insert sharedNode dialog, click the dropdown menu icon dropdown menu and choose Expression Builder. In the builder tool, expand ADF Managed Beans and select sale_menu. The EL expression #{sale_menu}, which references the managed bean name for the Sale submenu, is populated in the Expression box. Click OK. Then click OK again.

    tell me more icon ADF Menu Model Managed Beans

    The managed bean name of an ADF menu is configured in the managed-bean element in the unbounded task flow XML source file of the submenu. For example, in adfc-sale-config.xml (representing the Sale menu), you will find the managed-bean element, which contains the managed bean name sale_menu:  [ tell me more...]



  7. In the Application Navigator, select menu icon root_menu.xml. In the Structure window, drag and drop only itemNode_shop into the parent node itemNode_home. (You do not need to move itemNode_help and itemNode_preferences because they are global nodes on the same level as home.)
  8. In the Structure window, right-click the parent node, filenode icon itemNode_home, and choose Insert inside itemNode then choose link icon sharedNode . In the Insert sharedNode dialog, in the ref field, enter the EL expression #{products_menu}, which references the managed bean name for the Products menu that is to appear on the home page. Click OK.
  9. In the Structure window for root_menu.xml, drag the products shared node you just added to position it before itemNode_shop.
  10. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating a hierarchy of parent and child nodes, and inserting shared nodes where applicable, the Structure windows for the ADF menu metadata XML source files should look similar to these:  [ tell me more...]



 

Create a JSF Page Template

tell me more icon Creating the JSF Template for the Page Hierarchy

In the example so far, you have created all the ADF menus you need. You are now ready to create a JSF page for each node in the page hierarchy. The JSF pages will contain navigation components that are bound to the ADF menu model. At runtime, the appropriate number and type of menu navigation items will be generated on each page.   [ tell me more...]





  1. In the Application Navigator, select the ViewController project and open the Create JSF Page Template dialog [ File > New > Web Tier > JSF > JSF Page Template] .
  2. Enter myTemplate.jspx in the File Name field.
  3. Confirm that Use a Quick Start Layout is not selected.

    tell me more icon Quick Start Layout

    ADF Faces provides a number of components that you can use to define the overall template layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the template layout.  [ tell me more...]



  4. With the Facet Definitions tab in front, click add green plus icon New to add a facet. Enter body in the Name field. Then click OK.

    tell me more icon JSF Page Templates

    When you create the template using the Create JSF Page Template wizard, JDeveloper creates a .jspx file for the template definition, and creates the pagetemplate-metadata.xml file, which contains the name and path to the JSPX file that contains the template definition:  [ tell me more...]



  5. In the Component Palette, ADF Faces page, Layout panel, drag borderlayout icon Panel Stretch Layout and drop it on the blank page in the visual editor.

    tell me more icon Root Component

    When defining a page layout in a JSF page template or page, in most cases you would want stretched page contents so you would start with one root component that can both be stretched by af:document and can stretch it child components. The root component contains all other child components that make up the layout and contents of the page.   [ tell me more...]



  6. In the Component Palette, Layout panel, drag and drop header icon Panel Header into the top facet of the panel stretch layout you just added.
  7. In the Property Inspector, Common section, change the Text value to ADF Menu Example, and press Enter.
  8. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps, the visual editor should look similar to this:  [ tell me more...]



 

Add and Bind Navigation Pane Components

tell me more icon Adding and Binding Navigation Pane Components

In this card you will use Navigation Pane components to bind to the ADF menu model to generate the navigation items for each level in the page hierarchy. The instructions in this card assume you have already created the initial page template as described in the previous card.   [ tell me more...]





  1. If not already open, double-click facespage icon myTemplate.jspx in the Application Navigator to open the file in the visual editor. If necessary, click the Design editor tab.
  2. In the Component Palette, ADF Faces page, Layout panel, drag and drop navigationbar icon Navigation Pane into the menuBar facet of the panel header in the visual editor. (You should see a target rectangle with the name Facet menuBar on the page; this means the component you are dragging will be inserted inside that target.)
  3. In the Property Inspector, Common section, choose buttons from the Hint dropdown list. Enter 0 in the Level field.

    tell me more icon Navigation Pane Component

    The Navigation Pane component, when bound to an ADF menu model, is used to create the menu navigation items for one level in a page hierarchy. The navigation items could be tabs, bars, or buttons, for example. The type of navigation items is determined by the hint attribute on the Navigation Pane component. In the Property Inspector for Navigation Pane, you can select one of the following values for hint:  [ tell me more...]



  4. Expand the Data section. In the Var field, enter menuInfo. From the property menu icon dropdown menu next to the Value field, choose Expression Builder. Expand folder icon ADF Managed Beans and select bean icon root_menu. Then click OK.

    tell me more icon Binding Navigation Pane to the ADF Menu Model

    The Navigation Pane component can accept a series of Command Navigation Item components as children, with each Command Navigation Item component representing one menu item, for example:  [ tell me more...]



  5. In the Structure window, right-click navigationbar icon af:navigationPane and choose Facets - Navigation Pane then choose icon Node Stamp from the context menu.
  6. In the Component Palette, Common Components panel, drag and drop navigation icon Navigation Item into the nodeStamp facet.
  7. In the Property Inspector, Common section, remove the default value in the Text field and enter #{menuInfo.label}. In the Destination field, enter #{menuInfo.destination}. In the Action field, enter #{menuInfo.doAction} and press Enter.
  8. In the Component Palette, Layout panel, drag and drop Decorative Box into the center facet (of the panel stretch layout) in the visual editor.
  9. Drag and drop navigationbar icon Navigation Pane into the top facet of the decorative box you just added.
  10. In the Property Inspector, Common section, choose tabs from the Hint dropdown list. Enter 1 in the Level field. In the Data section, enter #{root_menu} in the Value field. Enter menuInfo in the Var field and press Enter.
  11. Repeat steps 5 through 7 to insert a Navigation Item component into the nodeStamp facet of Navigation Pane, and bind the component to the menu model.

    tell me more icon Binding Other Levels of Navigation Pane Components

    By binding Navigation Pane to the ADF menu model and using the nodeStamp facet to stamp out command navigation items, practically the same code can be used for Navigation Pane components at any menu level. The only Navigation Pane component attribute values you would change are the level and hint values.   [ tell me more...]



  12. In the Component Palette, Layout panel, drag and drop Decorative Box into the center facet (of the first decorative box) on the page in the visual editor.
  13. Drag and drop navigationbar icon Navigation Pane into the top facet of the decorative box you just added.
  14. In the Property Inspector, Common section, choose tabs from the Hint dropdown list. Enter 2 in the Level field. In the Data section, enter #{root_menu} in the Value field. Enter menuInfo in the Var field and press Enter.
  15. Repeat steps 5 through 7 to insert a Navigation Item component into the nodeStamp facet of Navigation Pane, and bind the component to the menu model.
  16. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps, the visual editor should look similar to this:  [ tell me more...]



 

Add and Bind the Bread Crumbs Component

tell me more icon Adding and Binding the Bread Crumbs Component

The instructions in this card assume you have already completed the steps as described in the previous cards on creating a JSF page template and binding Navigation Pane components.   [ tell me more...]





  1. If not already open, double-click facespage icon myTemplate.jspx in the Application Navigator to open the file in the visual editor. If necessary, click the Design editor tab.
  2. In the Component Palette, ADF Faces page, Layout panel, drag and drop Decorative Box into the center facet (of the second decorative box) on the page in the visual editor.
  3. In the Component Palette, Common Components panel, drag and drop menupath icon Bread Crumbs into the top facet of the decorative box you just added.
  4. In the Property Inspector, Data section, enter #{root_menu} in the Value field. Enter menuInfo in the Var field.

    tell me more icon Binding Bread Crumbs to the ADF Menu Model

    The Bread Crumbs component is used to create a path of links from the current page back to the root page. For example, on the Electronics page the bread crumbs should look like this: Home > Products > Sale > Electronics. Clicking a link will take you to that page in the application. The path of links is also known as the focus path.   [ tell me more...]



  5. In the Structure window, right-click menupath icon af:breadcrumbs and choose Facets - Bread Crumbs then choose icon Node Stamp from the context menu.
  6. In the Component Palette, Common Components panel, drag and drop navigation icon Navigation Item into the nodeStamp facet.
  7. In the Property Inspector, Common section, remove the default value in the Text field and enter #{menuInfo.label}. In the Destination field, enter #{menuInfo.destination}. In the Action field, enter #{menuInfo.doAction} and press Enter.
  8. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps, the visual editor should look similar to this:  [ tell me more...]



 

Complete the JSF Page Template

tell me more icon Completing the JSF Page Template

The instructions in this card assume you have already completed the steps as described in the previous three cards. At this point in the example you have added and bound three Navigation Pane components to the ADF menu model, which will generate level 0 buttons, level 1 tabs, and level 2 tabs. You have also added and bound a Bread Crumbs component to the same ADF menu model.  [ tell me more...]





  1. If not already open, double-click facespage icon myTemplate.jspx in the Application Navigator to open the file in the visual editor. If necessary, click the Design editor tab.
  2. In the Component Palette, ADF Faces page, Layout panel, drag and drop splitpane icon Panel Splitter into the center facet (of the third decorative box) on the page in the visual editor. This will create two split panes.
  3. Drag and drop navigationbar icon Navigation Pane into the first facet of the panel splitter you just added.
  4. In the Property Inspector, Common section, choose list from the Hint dropdown list. Enter 3 in the Level field. In the Data section, enter #{root_menu} in the Value field. Enter menuInfo in the Var field.
  5. In the Structure window, right-click navigationbar icon af:navigationPane and choose Facets - Navigation Pane then choose icon Node Stamp from the context menu. In the Component Palette, Common Components panel, drag and drop navigation icon Navigation Item into the nodeStamp facet.
  6. In the Property Inspector, Common section, remove the default value in the Text field and enter #{menuInfo.label}. In the Destination field, enter #{menuInfo.destination}. In the Action field, enter #{menuInfo.doAction} and press Enter.
  7. In the Component Palette, Common Components panel, drag and drop facet icon Facet Ref into the second facet of the panel splitter on the page.
  8. In the Insert Facet Ref dialog, choose body from the dropdown list. Click OK.
  9. If needed, use the sample code provided to verify your page template definition.
    code sample icon Use sample code
  10. Click save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps, the visual editor should look similar to this:  [ tell me more...]



 

Create the JSF Pages for the Views

tell me more icon Creating the JSF Pages for the Views

Note: In a real-world application, you may already have the JSF pages created in the Application Navigator. In that case, you would associate the View activities on each unbounded task flow diagram with those JSF pages. You would do this by dragging the JSF pages from the Application Navigator and dropping them onto the appropriate View activity on the diagram.   [ tell me more...]





  1. In the Application Navigator, double-click taskflow icon adfc-config.xml to open the unbounded task flow in the diagrammer.
  2. On the diagram, double-click a view activity (for example, home) to open the Create JSF Page dialog.
  3. In the Create JSF Page dialog, accept the default file name. Under Initial Page Layout and Content, select Page Template and then select myTemplate from the dropdown list.
  4. Make sure Page Implementation shows UI Components are not exposed in managed bean. Then click OK.
  5. In the visual editor, add the page contents by inserting the appropriate ADF Faces components into the body facet.

    tell me more icon JSF Facets

    After applying a template to a JSF page, you can add contents to the page. The page template you created has a body facet, where you can insert contents specific to the page you are creating.   [ tell me more...]



  6. Repeat steps 2 through 5 for each remaining view activity on the diagram.
  7. Then repeat the procedure (steps 1 through 6) on the remaining unbounded task flows: adfc-products-config.xml and adfc-sale-config.xml.
  8. Click save all icon Save All to save your work.
  9. In the editor window, click the taskflow icon adfc-config.xml tab to bring the root unbounded task flow diagram forward.
  10. On the diagram, right-click the home view activity icon and choose R un from the context menu.

    tell me more icon Running an ADF Application

    By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages.  [ tell me more...]




    tell me more icon In the IDE

    When you complete the steps for creating the JSF pages, the task flow diagrammer for each unbounded task flow should look similar to this:  [ tell me more...]



 



















Copyright © 1997, 2009, Oracle. All rights reserved.

false ,,,,,,,,,,,,,,,