Introduction to Organizing Content on Web Pages

8-4 Web User Interface Developers Guide for Oracle Application Development Framework showDetail Hides or displays content through a toggle icon. For more information, see Section 8.8, Displaying and Hiding Contents Dynamically. Miscellaneous Containers panelHeader Contains child components and provides a header that can include messages, toolbars, and help topics. For more information, see Section 8.10, Displaying Items in a Static Box. X if the type attribute is set to stretch X if the type attribute is set to stretch panelCollection Used in conjunction with collection components such as table, tree and treeTable to provide menus, toolbars, and status bars for those components. For more information, see Section 10.8, Displaying Table Menus, Toolbars, and Status Bars. X only a single table, tree, or tree table X decorativeBox Creates a container component whose facets use style themes to apply a bordered look to its children. This component typically acts as a look and feel transition between areas on a page. For example, a page that has a dark background for its template can use the decorative box to transition to a white background for its main area. For more information, see Section 8.10, Displaying Items in a Static Box. X in the Center facet X when the dimensions From attribute is set to parent inlineFrame Creates an inline iframe tag. X navigationPane Creates a series of navigation items representing one level in a navigation hierarchy. For more information, see Section 18.5, Using Navigation Items for a Page Hierarchy. X if configured to display tabs panelList Renders each child component as a list item and renders a bullet next to it. Can be nested to create hierarchical lists. For more information, see Section 8.11, Displaying a Bulleted List in One or More Columns. panelWindow Displays child components inside a popup window. For more information, see Section 13.2, Declaratively Creating Popup Elements. Table 8–1 Cont. ADF Faces Layout Components Component Description Can Stretch Children Can Be Stretched Organizing Content on Web Pages 8-5

8.2 Starting to Lay Out a Page

JSF pages that use ADF Faces components must have the document tag enclosed within a view tag. All other components that make up the page then go in between af:document and af:document. The document tag is responsible for rendering the browser title text, as well as the invisible page infrastructure that allows other components in the page to be displayed. For example, at runtime, the document tag creates the root elements for the client page. In HTML output, the standard root elements of an HTML page, namely, html, head, and body, are generated. By default, the document tag is configured to allow capable components to stretch to fill available browser space. You can further configure the tag to allow a specific component to have focus when the page is rendered, or to provide messages for failed connections or warnings about navigating before data is submitted. For more information, see Section 8.2.5, How to Configure the document Tag. Typically, the next component used is the ADF Faces form component. This component creates an HTML form element that can contain controls that allow a user to interact with the data on the page. toolbox Displays child toolbar and menu components together. For more information, see Section 14.3, Using Toolbars. Grouping Containers panelGroupLayout Groups child components either vertically or horizontally. Used in facets when more than one component is to be contained in a facet. For more information, see Section 8.12, Grouping Related Items. X only if set to scroll or vertical layout group Groups child components without regard to layout unless handled by the parent component of the group. Used in facets when more than one component is to be contained in a facet. For more information, see Section 8.12, Grouping Related Items. Spacing Components separator Creates a horizontal line between items. For more information, see Section 8.13, Separating Content Using Blank Space or Lines. spacer Creates an area of blank space. For more information, see Section 8.13, Separating Content Using Blank Space or Lines. Table 8–1 Cont. ADF Faces Layout Components Component Description Can Stretch Children Can Be Stretched 8-6 Web User Interface Developers Guide for Oracle Application Development Framework JDeveloper automatically inserts the view, document, and form tags for you, as shown in Example 8–1 . For more information, see Section 2.4, Creating a View Page. Example 8–1 Initial JSF Page Created by JDeveloper Wizard ?xml version=1.0 encoding=UTF-8? jsp:root xmlns:jsp=http:java.sun.comJSPPage version=2.0 xmlns:f=http:java.sun.comjsfcore xmlns:h=http:java.sun.comjsfhtml xmlns:af=http:xmlns.oracle.comadffacesrich jsp:directive.page contentType=texthtml;charset=UTF-8 f:view af:document af:form af:document f:view jsp:root Once those tags are placed in the page, you can use the layout components to control how and where other components on the page will render. The component that will hold all other components is considered the root component. Which component you choose to use as the root component depends on whether you want the contained components to display their contents so that they stretch to fit the browser window, or whether you want the contents to flow, using a scrollbar to access any content that may not fit in the window. For more information about stretching and flowing, see Chapter 8.2.1, Geometry Management and Component Stretching.

8.2.1 Geometry Management and Component Stretching

Geometry management is the process by which the user, parent components, and child components negotiate the actual sizes and locations of the components in an application. At the heart of the RCF geometry management solution is a resize notification mechanism that allows components that support geometry management to be notified of browser resize activity. The following scenarios trigger the notification: ■ Load: When the page contents are first loaded, allowing initial sizing to take place. ■ Browser resize: When the browser window is resized. ■ Partial replacement: When a portion of the page is updated through partial page rendering, any newly inserted components are notified, allowing them to perform any necessary geometry management. ■ Visibility change: When a component that was initially configured to be invisible is made visible components that are initially not visible do not receive notification. Note: Even though you can have multiple HTML forms on a page, you should have only a single ADF Faces form tag per page. For more information, see Section 8.6, Arranging Content in Forms. Tip: Instead of creating your layout yourself, you can use JDeveloper’s quick layout templates, which provide correctly configured components that will display your page with the layout you want. For more information, see Section 8.2.3, Using Quick Start Layouts. Organizing Content on Web Pages 8-7 ■ Explicit resize: When components that allow themselves to be resized for example the panelSplitter, are resized by the user. By default, the root component will stretch automatically to consume the browsers viewable area, provided that component supports geometry management and therefore can stretch its child components. Examples of geometry management components are panelStretchLayout and panelSplitter. When the user resizes the browser window, and when there is a single maximized root visual component inside of the document component, that visual root component will also resize along with the browser window. If the root component supports stretching its child components and they in turn support being stretched, the size of the child components will also recompute, and so on down the component hierarchy until a flowing layout area is reached; that is, an area that does not support stretching of its child components. You do not have to write any code to enable the stretching. As shown in Table 8–1 , the panelStretchLayout, panelSplitter, and panelDashboard components are components that can be stretched and can also stretch their child components. Additionally, when the showDetailItem component is used as a direct child of the panelAccordion or panelTabbed component, the contents in the showDetailItem component can be stretched. Therefore, the panelStretchLayout, panelSplitter, panelDashboard, panelAccordion with a showDetailItem component, and a panelTabbed with a showDetailItem component, are the components you should use as root components when you want to make the contents of the page fill the browser window. For example, Figure 8–1 shows a table placed in the center facet of the panelStretchLayout component. The table stretches to fill the browser space. When the entire table does not fit in the browser window, scrollbars are added in the data body section of the table. Note: The framework does not consider popup dialogs, popup windows, or non-inline messages as root components. If a form component is the direct child component of the document component, the framework will look inside the form tag for the visual root. For information on sizing a popup, see Chapter 13, Using Popup Dialogs, Menus, and Windows. 8-8 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–1 Table Inside a Component That Stretches Child Components Figure 8–2 shows the same table, but nested inside a panelGroupLayout component, which cannot stretch its child components for clarity, a dotted red outline has been placed around the panelGroupLayout component. The table component displays only a certain number of columns and rows, determined by properties on the table. Figure 8–2 Table Inside a Component That Does Not Stretch Its Child Components Performance Tip: The cost of geometry management is directly related to the complexity of child components. Therefore, try minimizing the number of child components that are under a parent geometry-managed component.