How to Use the panelStretchLayout Component

Organizing Content on Web Pages 8-19 ■ decorativeBox when configured to stretch ■ panelAccordion when configured to stretch ■ panelBox ■ panelCollection ■ panelDashboard when configured to stretch ■ panelGroupLayout only with the layout attribute set to scroll or vertical ■ panelSplitter when configured to stretch ■ panelStretchLayout when configured to stretch ■ panelTabbed when configured to stretch ■ region ■ table when configured to stretch ■ tree when configured to stretch ■ treeTable when configured to stretch The following components cannot be stretched when placed inside a facet of the panelStretchLayout component: ■ panelBorderLayout ■ panelFormLayout ■ panelGroupLayout only with the layout attribute set to default or horizontal ■ panelHeader ■ panelLabelAndMessage ■ panelList ■ showDetail ■ showDetailHeader ■ tableLayout MyFaces Trinidad component You cannot place components that cannot stretch into facets of a component that stretches its child components. Therefore, if you need to place a component that cannot be stretched into a facet of the panelStretchLayout component, wrap that component in a transition component that can stretch. For example, if you want to place content in a panelBox component which does not stretch within a facet of the panelStretchLayout component, you could place a panelGroupLayout component with its layout attribute set to scroll in a facet of the panelStretchLayout component, and then place the panelBox component in that panelGroupLayout component. For more information, see Section 8.2.2, Nesting Components Inside Components That Allow Stretching.

8.4 Using Splitters to Create Resizable Panes

When you have groups of unique content to present to users, consider using the panelSplitter component to provide multiple panes separated by adjustable splitters. The File Explorer uses a panelSplitter to separate the navigation tree from the folder contents, as shown in Figure 8–7 . Users can change the size of the 8-20 Web User Interface Developers Guide for Oracle Application Development Framework panes by dragging the splitter, and can also collapse and restore the panel that displays the directories. When a panel is collapsed, the panel contents are hidden; when a panel is restored, the contents are displayed. Figure 8–7 File Explorer Uses panelSplitter to Separate Contents The panelSplitter component lets you organize contents into two panes separated by an adjustable splitter. The panes can either line up on a horizontal line as does the splitter shown in Figure 8–7 or on a vertical line. The File Explorer application uses another panelSplitter component to separate the application’s header contents from the main body of the page. Figure 8–8 shows the panelSplitter component expanded to show the header contents, which includes the Oracle logo and the File Explorer name. Organizing Content on Web Pages 8-21 Figure 8–8 panelSplitter with a Vertical Split Expanded Clicking the arrow button on a splitter collapses the panel that holds the header contents, and the logo and name are no longer shown, as shown in Figure 8–9 . Figure 8–9 File Explorer Uses panelSplitter with a Vertical Split You place components inside the facets of the panelSplitter component. The panelSplitter component uses geometry management to stretch its child components at runtime. This means when the user collapses one panel, the contents in the other panel are explicitly resized to fill up available space.