What You May Need to Know About Using Custom Attributes

Working with Navigation Components 18-33 which shows the Employee Data page, only the child bars of Employee Data are needed, and the Employee Data tab renders as selected. Similarly in Figure 18–11 , which shows the Health page, only the child bars of Benefits are needed, and the Benefits tab must be configured as selected. Additionally for this page, you would create the child nodes under Insurance, which can be presented as vertical lists on the side of the page. The contents of the page are displayed in the middle, to the right of the vertical lists. Figure 18–11 Navigation Items Available from the Health Page Regardless of the type of navigation items you use such as tabs or bars, a series of commandNavigationItem child components within each navigationPane component provide the actual navigation items. For example, in Figure 18–11 the actual link for the Employee Data tab, the Insurance and Paid Time Off bars, and the Health and Dental links in the list are each provided by a commandNavigationItem component.

18.7.1 How to Create a Simple Page Hierarchy

When your navigational hierarchy contains only a few pages and is not very deep, you can elect to manually create the hierarchy. Doing so involves creating the navigation metadata, using the navigationPane component to create the hierarchy, and using the commandNavigationItem component to create the links. To manually create a navigation hierarchy: 1. Create one global JSF navigation rule that has the navigation cases for all the nodes that is, pages in the page hierarchy. For example, the page hierarchy shown in Figure 18–4 has 10 nodes, including the global Help node. Thus, you would create 10 navigation cases within one global navigation rule in the faces-config.xml file, as shown in Example 18–16 . For each navigation case, specify a unique outcome string, and the path to the JSF page that should be displayed when the navigation system returns an outcome value that matches the specified string. Example 18–16 Global Navigation Rule for a Page Hierarchy in faces-config.xml navigation-rule navigation-case from-outcomegoHomefrom-outcome to-view-idhome.jspxto-view-id navigation-case navigation-case from-outcomegoHelpfrom-outcome 18-34 Web User Interface Developers Guide for Oracle Application Development Framework to-view-idglobalhelp.jspxto-view-id navigation-case navigation-case from-outcomegoEmpfrom-outcome to-view-idempdata.jspxto-view-id navigation-case navigation-case from-outcomegoBenefrom-outcome to-view-idbenefits.jspxto-view-id navigation-case navigation-case from-outcomegoInsfrom-outcome to-view-idinsurance.jspxto-view-id navigation-case navigation-case from-outcomegoPtofrom-outcome to-view-idpto.jspxto-view-id navigation-case navigation-case from-outcomegoViewfrom-outcome to-view-idviewdata.jspxto-view-id navigation-case navigation-case from-outcomegoCreatefrom-outcome to-view-idcreateemp.jspxto-view-id navigation-case navigation-case from-outcomegoHealthfrom-outcome to-view-idhealth.jspxto-view-id navigation-case navigation-case from-outcomegoDentalfrom-outcome to-view-iddental.jspxto-view-id navigation-case navigation-rule For more information about creating navigation cases in JDeveloper, see Section 2.3, Defining Page Flows . 2. 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 .

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

Pane from the Layout section of the Component Palette as a child to the decorativeBox component. Add a navigationPane component for each level of the hierarchy. For example, to create the Health page as shown in Figure 18–11 , drag and drop four navigationPane components. In the Health page, the components are Working with Navigation Components 18-35 dropped into specific areas of a template that already contains layout components to create the look and feel of the page. 4. 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 component will be displayed: ■ 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 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 . 5. For each navigationPane component, add the needed commandNavigationItem components to represent the different links by dragging and dropping a Navigation Item from the Common Components section of the Component Palette. Drop a Navigation Item as a child to the navigationPane component for each link needed. For example, to create the Health page as shown in Figure 18–11 , you would use a total of six commandNavigationItem components, two for each navigationPane component. 6. For each commandNavigationItem component, set the navigation to the desired page. In the Property Inspector, expand the Common section and provide a static string outcome of an action or use an EL expression to reference an action method through the action property. If you use a string, it must match the navigation metadata set up in the navigation rules for the page created in Step 1. If referencing a method, that method must return the required string.

7. In the Property Inspector, expand the Behavior section and set the selected

attribute. This attribute should be true if the commandNavigationItem component should be displayed as selected when the page is first rendered, and false if it should not. At runtime, when a navigation item is selected by the user, that component’s selected attribute changes to selected and the appearance changes to indicate to Performance Tip: At runtime, when available browser space is less than the space needed to display the contents in a tab or bar of a navigation pane, or the contents of the breadcrumb, ADF Faces automatically displays overflow icons that enable users to select and navigate to those items that are out of view. The number of child components within a navigationPane or breadCrumbs component, and the complexity of the children, will affect the performance of the items within the overflow. You should set the size of the navigationPane or breadCrumbs component to avoid overflow when possible.