How to Use a Command Component to Download Files

Working with Navigation Components 18-11 Figure 18–4 Benefits and Employee Page Hierarchy Navigation in a page hierarchy follows the parent-child links. For example, to view Health information, the user would start drilling from the Benefits page, then move to the Insurance page where two choices are presented, one of which is Health. The path of selected links starting from Home and ending at Health is known as the focus path in the tree. In addition to direct parent-child navigation, some cross-level or cross-parent navigation is also possible. For example, from the Dental page, users can jump to the Paid Time Off page on the second level, and to the Benefits page or the Employee Data page on the first level. As shown in Figure 18–4 , the Help node, which is not linked to any other node in the hierarchy but is on the same level as the top-level Home node, is a global node. Global nodes represent global pages such as a Help page that can be accessed from any page in the hierarchy. Typical widgets used in a web user interface for a page hierarchy are tabs, bars, lists, and global links, all of which can be created by using the navigationPane component. Figure 18–5 shows the hierarchy illustrated in Figure 18–4 , as rendered using the navigationPane and other components. Figure 18–5 Rendered Benefits and Employee Pages 18-12 Web User Interface Developers Guide for Oracle Application Development Framework In general, tabs are used as first-level nodes, as shown in Figure 18–5 , where there are tabs for the Benefits and Employee Detail pages. Second-level nodes, such as Insurance and Paid Time Off are usually rendered as bars, and third-level nodes, such as Health and Dental are usually rendered as lists. However, you may use tabs for both first- and second-level nodes. Global links which represent global nodes are rendered as text links. In Figure 18–5 , the Home and Help global links are rendered as text links. One navigationPane component corresponds to one level of nodes, whether they are first-, second-, or third-level nodes, or global nodes. Regardless of the type of navigation items the navigationPane component is configured to render for a level, you always use the commandNavigationItem component to represent each item within the navigationPane component. The navigationPane component simply renders tabs, bars, lists, and global links for navigation. To achieve the positioning and visual styling of the page background, as shown in Figure 18–10 and Figure 18–11 , you use the decorativeBox component as the parent to the first level navigationPane component. The decorativeBox component uses themes and skinning keys to control the borders and colors of its different facets. For example, if you use the default theme, the decorativeBox component body is white and the border is blue, and the top-left corner is rounded. If you use the medium theme, the body is a medium blue. For information about using themes and skins, see Chapter 20, Customizing the Appearance Using Styles and Skins . For each page of simpler hierarchies, you first use a series of navigationPane components to represent each level of the hierarchy. Then you add commandNavigationItem components as direct children of the navigationPane components for each of links for each level. For example, to create the Health insurance page as shown in Figure 18–5 , you would first use a navigationPane component for each level displayed on the page, in this case it would be four: one for the global links, one for the first-level nodes, one for the second-level nodes, and one for the third-level nodes. You would then need to add commandNavigationItem components as children to each of the navigationPane components to represent the individual links. If instead you were creating the Benefits page, as shown in Figure 18–6 , you would create only three navigationPane components one each for the global, first, and second levels, and then create just the commandNavigationItem components for the links seen from this page. Tip: Because creating a page hierarchy requires that each page in the hierarchy use the same layout and look and feel, consider using a template to determine where the navigation components should be placed and how they should be styled. For more information, see Section 19.3, Using Page Templates . Working with Navigation Components 18-13 Figure 18–6 First-Level Page As you can see, with large hierarchies, this process can be very time consuming and error prone. Instead of creating each of the separate commandNavigationItem components on each page, for larger hierarchies you can use an XMLMenuModel implementation and managed beans to dynamically generate the navigation items on the pages. The XMLMenuModel class, in conjunction with a metadata file, contains all the information for generating the appropriate number of hierarchical levels on each page, and the navigation items that belong to each level. Instead of using multiple commandNavigationItem components within each navigationPane component and marking the current items as selected on each page, you declaratively bind each navigationPane component to the same XMLMenuModel implementation, and use one commandNavigationItem component in the nodeStamp facet to provide the navigation items. The commandNavigationItem component acts as a stamp for navigationPane component, stamping out navigation items for nodes at every level held in the XMLMenuModel object. The JSF navigation model, through the default ActionListener mechanism, is used to choose the page to navigate to when users select a navigation item. For more information about the menu model, see Section 18.6, Using a Menu Model to Create a Page Hierarchy . On any page, to show the user’s current position in relation to the entire page hierarchy, you use the breadCrumbs component with a series of commandNavigationItem components or one commandNavigationItem component as a nodeStamp, to provide a path of links from the current page back to the root page that is, the current nodes in the focus path. For more information about creating a navigational hierarchy using the XMLMenuModel, see Section 18.6, Using a Menu Model to Create a Page Hierarchy . For more information about manually creating a navigational hierarchy, see Section 18.7, Creating a Simple Navigational Hierarchy . Note: If you want to create menus that can be used to cause some sort of change in an application for example, a File menu that contains the commands Open and Delete, then see Chapter 14, Using Menus, Toolbars, and Toolboxes .