What Happens When You Use the Create ADF Menu Model Wizard

Working with Navigation Components 18-25 To bind to the XMLMenuModel managed bean: 1. If you want the menu tabs to be styled, create a decorativeBox component by dragging and dropping a Decorative Box from the Layout section of the Component Palette to the JSF page. Set the theme to determine how you want the tabs to appear. Valid values are: ■ default: Body is white with a blue border. Top-left corner is rounded. ■ light: Body is light blue. Top-left corner is rounded. ■ medium: Body is medium blue. Top-left corner is rounded. ■ dark: Body is dark blue. Top-left corner is rounded. You can change how the themes are displayed. For more information, see Chapter 20, Customizing the Appearance Using Styles and Skins .

2. Create a navigationPane component by dragging and dropping a Navigation

Pane from the Component Palette to the JSF page. Add a navigationPane component for each level of the hierarchy. For example, to create any of the pages as shown in the hierarchy in Figure 18–5 , you would drag and drop four navigationPane components. 3. For each navigationPane component, in the Property Inspector, expand the Common section and set the Hint attribute to one of the following types of navigation items to determine how the navigationPane will display the following: ■ bar: Displays the navigation items separated by a bar, for example the Insurance and Paid Time Off links in Figure 18–11 . ■ buttons: Displays the navigation items separated by a bar in a global area, for example the Home and Help links in Figure 18–11 . ■ choice: Displays the navigation items in a popup list when the associated dropdown icon is clicked. You must include a value for the navigationPane component’s icon attribute and you can associate a label to the dropdown list using the title attribute. ■ list: Displays the navigation items in a bulleted list, for example the Health and Dental links in Figure 18–11 . ■ tabs: Displays the navigation items as tabs, for example the Benefits and Employee Data tabs in Figure 18–11 . 4. Set the level attribute to point to the appropriate level of metadata in the XMLMenuModel metadata file. The level attribute is a zero-based index number: Starting with global nodes in the metadata file that is, direct children nodes under the menu element as shown in Example 18–4 , the level attribute value is 0 zero, followed by 1 for the next level typically tabs, 2 for the next level after that typically bars, and so on. The commandNavigationItem component is able to get its metadata from the metadata file through the level attribute on the parent navigationPane component. By default, if you do not specify a level attribute value, 0 zero is used, that means the navigationPane component will take the metadata from the first-level under the menu element for rendering by the commandNavigationItem component. Tip: The Navigation Pane component can be found in the Layout pane of the Component Palette. 18-26 Web User Interface Developers Guide for Oracle Application Development Framework

5. In the Property Inspector, expand the Data section. Set the value attribute to the

menu model managed bean that is configured for the root XMLMenuModel class in the faces-config.xml file. 6. Set the var attribute to text that you will use in the commandNavigationItem components to get the needed data from the menu model. As the hierarchy is created at runtime, and each node is stamped, the data for the current node is copied into the var attribute, which can then be addressed using an EL expression. You specify the name to use for this property in the EL expression using the var property.

7. Drag and drop a Navigation Item from the Component Palette to the nodeStamp

facet of the navigationPane component. 8. Set the values for the remaining attributes that have corresponding values in the metadata using EL expressions that refer to the menu model whose metadata contains that information. You access these values using the value of the var attribute you set for the parent navigationPane component in Step 6 along with the name of the corresponding itemNode element that holds the value in the metadata. Table 18–5 shows the attributes on the navigation item that has corresponding values in the metadata. For example, if you had set the var attribute on the parent navigationPane component to menuNode, you would use {menuNode.doAction} as the EL expression for the value of the action attribute. This would resolve to the action property set in the metadata for each node. Example 18–13 shows the JSF code for binding to a menu model for the HR example. Note: The value attribute can reference root menu models and menu models referenced by shared nodes. If you reference a shared node in the value attribute, the faces-config.xml file needs to have a new managed bean entry with a different managed bean name than the one which is used in a root menu model definition in the menu model metadata file. This promotes the menu model of a shared node to a root menu model which can then be referred to in the value attribute. Tip: You use the same value for the var attribute for every navigationPane component on the page or in the application. Table 18–5 Navigation Item Attributes and the Associated Menu Model Attributes Navigation Item Attribute Associated Menu Model Element Attribute text label action doAction icon icon destination destination visible visible rendered rendered