How to Use the panelDashboard Component

Organizing Content on Web Pages 8-43 insertIndex++; } } Add the side bar as a partial target because we need to redraw the state of the side bar item that corresponds to the inserted item: RequestContext rc = RequestContext.getCurrentInstance; rc.addPartialTarget_sideBar; }

12. In the Component Palette, from the Operations panel, drag a Panel Dashboard

Behavior tag and drop it as a child to the command component. 13. In the Property Inspector, enter the following: ■ for : Enter the ID for the associated panelDashboard component ■ index : Enter an EL expression that resolves to a method that determines the index of the component to be inserted. When you use the panelDashboardBehavior tag, a placeholder element is inserted into the DOM tree where the actual component will be rendered once it is returned from the server. Because the insertion placeholder gets added before the insertion occurs on the server, you must specify the location where you are planning to insert the child component so that if the user reloads the page, the children will continue to remain displayed in the same order.

8.7.2 What You May Need to Know About Geometry Management and the panelDashboard Component

This component organizes its children into a grid based on the number of columns and the rowHeight attribute. The child components that can be stretched inside of the panelDashboard include: ■ inputText when the rows attribute is set to greater than one, and the simple attribute is set to true ■ panelBox ■ region ■ table when configured to stretch If you try to put any other component as a child component to the panelDashboard component, then the component hierarchy is not valid.

8.8 Displaying and Hiding Contents Dynamically

Sometimes you want users to have the choice of displaying or hiding content. When you do not need to show all the functionality of the user interface at once, you can save a lot of space by using components that enable users to show and hide parts of the interface at will. The showDetail component creates a label with a toggle icon that allows users to disclose show or undisclose hide contents under the label. When the contents are undisclosed hidden, the default label is Show and the toggle icon is a plus sign in a box. When the contents are disclosed shown, the default label is Hide, and the toggle icon changes to a minus sign. For example, the newFileItem page of the File Explorer application uses a showDetail component to hide and display file properties. The component is configured to hide the properties when the page is displayed, as shown in Figure 8–24 . 8-44 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–24 Collapsed showDetail When the user clicks the toggle icon, the properties are displayed, as shown in Figure 8–25 . Figure 8–25 Expanded showDetail If you want to use something more complex than an outputText component to display the disclosed and undisclosed text, you can add components to the showDetail component’s prompt facet. When set to be visible, any contents in the prompt facet will replace the disclosed and undisclosed text values. To use the showDetail component, see Section 8.8.1, How to Use the showDetail Component. Like the showDetail component, the showDetailHeader component also toggles the display of contents, but the showDetailHeader component provides the label and toggle icon in a header, and also provides facets for a menu bar, toolbar, and text. When there is not enough space to display everything in all the facets of the title line, the showDetailHeader text is truncated and displays an ellipsis. When the user Tip: The showDetailHeader component is the same as a panelHeader component, except that it handles disclosure events. For more information about the panelHeader component, see Section 8.10, Displaying Items in a Static Box. Organizing Content on Web Pages 8-45 hovers over the truncated text, the full text is displayed in a tooltip, as shown in Figure 8–26 . Figure 8–26 Text for the showDetailHeader Is Truncated When there is more than enough room to display the contents, the extra space is placed between the context facet and the toolbar, as shown in Figure 8–27 . Figure 8–27 Extra Space Is Added Before the Toolbar Additionally, you can configure the showDetailHeader component to be used as a message for errors, warnings, information, or confirmations. The contents are hidden or displayed below the header. For example, the newFileItem page of the File Explorer application uses a showDetailHeader component to display help for creating a new file. By default, the help is not displayed, as shown in Figure 8–25 . When the user clicks the toggle icon in the header, the contents are displayed, as shown in Figure 8–28 . Figure 8–28 showDetailHeader Component Used to Display Help You can also use the showDetailHeader component in conjunction with the panelHeader component to divide a page into sections and subsections, where some contents can be hidden. The showDetailHeader component contains a number of facets, such as a toolbar and menu bar facet. These facets are the same as for the panelHeader component. For more information about the panelHeader component, see Section 8.10, Displaying Items in a Static Box. You can nest showDetailHeader components to create a hierarchy of content. Each nested component takes on a different heading style to denote the hierarchy. Figure 8–29 shows three nested showDetailHeader components, and their different styles. 8-46 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–29 Nested showDetailHeader Components Create a Hierarchy You can change the styles used by each header level by applying a skin to the showDetailHeader component. For details about skinning ADF Faces components, see Chapter 20, Customizing the Appearance Using Styles and Skins. Use the panelBox component when you want information to be able to be displayed or hidden below the header, and you want the box to be offset from other information on the page. The File Explorer application uses two panelBox components on the properties.jspx page to display the attributes and history of a file, as shown in Figure 8–30 . Figure 8–30 Two panelBox Components Figure 8–31 shows the same page, but with the History panelBox component in an undisclosed state. Note: While you can force the style of the text using the size attribute, where 0 is the largest text, the value of the size attribute will not affect the hierarchy. It only affects the style of the text.