How to Create a Simple Page Hierarchy

18-36 Web User Interface Developers Guide for Oracle Application Development Framework the user that the item has been selected. For example, in Figure 18–11 the Benefits tab, Insurance bar, and Health list item are shown as selected by a change in either background color or font style. You do not have to write any code to show the selected status; the selected attribute on the commandNavigationItem component for that item takes care of turning on the selected status when the attribute value is true. Example 18–17 shows code used to generate the navigation items that are available when the current page is Health. Because the Health page is accessed from the Insurance page from the Benefits page, the commandNavigationItem components for those three links have selected=true. Example 18–17 Sample Code Using Individual Navigation Items on One Page af:navigationPane hint=buttons af:commandNavigationItem text=Home action=goHome af:commandNavigationItem text=Help action=goHelp af:navigationPane . . . af:navigationPane hint=tabs af:commandNavigationItem text=Benefits action=goBene selected=true af:commandNavigationItem text=Employee Data action=goEmp af:navigationPane . . . af:navigationPane hint=bar af:commandNavigationItem text=Insurance action=goIns selected=true af:commandNavigationItem text=Paid Time Off action=goPto af:navigationPane . . . af:navigationPane hint=list af:commandNavigationItem text=Health action=goHealth selected=true af:commandNavigationItem text=Dental action=goDental af:navigationPane

18.7.2 How to Use the breadCrumbs Component

In both Figure 18–10 and Figure 18–11 , the user’s current position in the page hierarchy is indicated by a path of links from the current page back to the root page. The path of links, also known as breadcrumbs, is displayed beneath the secondary bars, above the vertical lists if any. To create such a path of links, you use the breadCrumbs component with a series of commandNavigationItem components as children. To create a breadcrumb: 1. Create a breadCrumbs component by dragging and dropping a Bread Crumbs component from the Component Palette to the JSF page. Working with Navigation Components 18-37 2. By default, breadcrumb links are displayed in a horizontal line. To change the layout to be vertical, in the Property Inspector, expand the Common section and set the orientation attribute to vertical. 3. For each link in the breadcrumb, create a commandNavigationItem component by dragging and dropping a Navigation Item from the Component Palette as a child to the breadCrumbs component. The last item should represent the current page. 4. For each commandNavigationItem component except the last, 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 rule for the page created in Step 1. If referencing a method, that method must return the required string. For example, to create the breadcrumb as shown on the Health page in Figure 18–11 , drag and drop four navigationPane components, as shown in Example 18–18 . Example 18–18 BreadCrumbs Component With Individual CommandNavigationItem Children af:breadCrumbs af:commandNavigationItem text=Home action=goHome af:commandNavigationItem text=Benefits action=goBene af:commandNavigationItem text=Insurance action=goIns af:commandNavigationItem text=Health af:breadCrumbs

18.7.3 What You May Need to Know About Removing Navigation Tabs

You can configure a navigationPane component whose hint attribute value is tabs so that the individual tabs can be closed. You can set it such that all tabs can be closed, all but the last tab can be closed, or no tabs can be closed. When navigation tabs are configured to be removed, a close icon for example, an X is displayed at the end of each tab as the mouse cursor hovers over the tab. To enable tabs removal in a navigationPane component when hint=tabs, you need to do the following: Tip: Depending on the renderer or client device type, the last link in the breadcrumb may not be displayed, but you still must add the commandNavigationItem component for it. On clients that do display the last breadcrumb link, the link is always disabled automatically because it corresponds to the current page. Note: Similarly, instead of using individual commandNavigationItem components, you can bind the value attribute of the breadCrumbs component to an XMLMenuModel implementation, and use one commandNavigationItem component in the nodeStamp facet of the breadCrumbs component to stamp out the items for a page. For information about the XMLMenuModel class, see Section 18.6, Using a Menu Model to Create a Page Hierarchy . 18-38 Web User Interface Developers Guide for Oracle Application Development Framework ■ Set the itemRemoval attribute on navigationPane hint=tabs to all or allExceptLast. When set to allExceptLast, all but one tab can be closed. This means as a user closes tabs, when there is only one tab left, that single last tab cannot be closed. ■ Implement a handler to do the tab removal. When a user closes a tab, an ItemEvent of type remove is launched. Your code must handle this event and the actual removal of the tab, and any other desired functionality for example, show a warning dialog or how to handle child components. For more information about events, see Chapter 5, Handling Events. For information about using popup dialogs and windows, see Chapter 13, Using Popup Dialogs, Menus, and Windows. ■ Set the itemListener attribute on the commandNavigationItem component to an EL expression that resolves to the handler method that will handle the actual tab removal, as shown in Example 18–19 . Example 18–19 Using itemListener to Remove a Tab Item JSF Page Code ----- af:navigationPane hint=tabs itemRemoval=all af:commandNavigationItem text=Benefits partialSubmit=true itemListener={closebean.handleCloseTabItem} . . . af:navigationPane Managed Bean Code ----- import oracle.adf.view.rich.event.ItemEvent; ... public void handleCloseTabItemItemEvent itemEvent { if itemEvent.getType.equalsItemEvent.Type.remove { Object item = itemEvent.getSource; if item instanceof RichCommandNavigationItem { RichCommandNavigationItem tabItem = RichCommandNavigationItem item; tabItem.setVisiblefalse; do other desired functionality here ... } } }

18.8 Using Train Components to Create Navigation Items for a Multi-Step Process

If you have a set of pages that users should visit in a particular order, consider using the train component on each page to display a series of navigation items that guide Note: If your application uses the Fusion technology stack or the ADF Controller, then you should use ADF task flows to create the navigation system for your application page hierarchy. For details, see the Creating a Train section of the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. Working with Navigation Components 18-39 users through the multistep process. Figure 18–12 shows an example of what a rendered train component might look like on a page. Not only does a train display the number of steps in a multistep process, it also indicates the location of the current step in relation to the entire process. Figure 18–12 Navigation Items Rendered by a train Component The train component renders each configured step represented as a train stop, and with all the stops connected by lines. Each train stop has an image for example, a square block with a label underneath the image. Each train stop corresponds to one step or one page in your multistep process. Users navigate the train stops by clicking an image or label, which causes a new page to be displayed. Typically, train stops must be visited in sequence, that is, a user must start at step 1, move to step 2, then step 3, and so on; a user cannot jump to step 3 if the user has not visited step 2. As shown in Figure 18–12 , the train component provides at least four styles for train stops. The current stop where the user is visiting is indicated by a bold font style in the train stop’s label, and a different image for the stop; visited stops before the current stop are indicated by a different label font color and image color; the next stop immediately after the current stop appears enabled; any other stops that have not been visited are grayed-out. A train stop can include a subtrain, that is, you configure a command component for example, a commandButton component to start a child multistep process from a parent stop, and then return to the correct parent stop after completing the subprocess. Suppose stop number 3 has a subprocess train containing two stops, when the user navigates into the first stop in the subprocess train, ADF Faces displays an icon representation of the parent train before and after the subprocess train, as shown in Figure 18–13 . Figure 18–13 Parent Train Icons At Start and End of a Subtrain You can use the trainButtonBar component in conjunction with the train component to provide additional navigation items for the train, in the form of Back and Next buttons, as shown in Figure 18–14 . These Back and Next buttons allow users to navigate only to the next or previous train stop from the current stop. You can also use the trainButtonBar component without a train component. For example, you may want to display just the Back and Next buttons without displaying the stops when not all of the stops will be visited based on some conditional logic.