How to Use the panelSplitter Component

Organizing Content on Web Pages 8-25 -- Contains nested splitter component -- af:panelSplitter orientation=vertical ... f:facet name=first -- first panel child components components here -- f:facet f:facet name=second -- second panel child components components here -- f:facet af:panelSplitter f:facet af:panelSplitter 9. If you want to perform some operation when users collapse or expand a panel, attach a client-side JavaScript using the clientListener tag for the collapsed attribute and a propertyChange event type. For more information about client-side events, see Chapter 5, Handling Events.

8.4.2 What You May Need to Know About Geometry Management and the panelSplitter Component

The panelSplitter component can stretch its child components and it can also be stretched. The following components can be stretched inside the first or second facet of the panelSplitter component: ■ inputText when configured to stretch ■ decorativeBox when configured to stretch ■ panelAccordion when configured to stretch ■ panelBox ■ panelCollection ■ panelDashboard ■ 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 panelSplitter component: ■ panelBorderLayout ■ panelFormLayout ■ panelGroupLayout only with the layout attribute set to default or horizontal ■ panelHeader ■ panelLabelAndMessage 8-26 Web User Interface Developers Guide for Oracle Application Development Framework ■ 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 one of the components that cannot be stretched into a facet of the panelSplitter component, wrap that component in a transition component that does not stretch its child components. For example, if you want to place content in a panelBox component and have it flow within a facet of the panelSplitter component, you could place a panelGroupLayout component with its layout attribute set to scroll in a facet of the panelSplitter 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.5 Arranging Page Contents in Predefined Fixed Areas

The panelBorderLayout component uses facets to contain components in predefined areas of a page. Instead of a center facet, the panelBorder layout component takes 0 to n direct child components also known as indexed children, which are rendered consecutively in the center. The facets then surround the child components. Figure 8–13 shows the facets of the panelBorderLayout component. Figure 8–13 Facets in panelBorderLayout The 12 supported facets of the panelBorderLayout component are: ■ top: Renders child components above the center area. ■ bottom: Renders child components below the center area. ■ start: Supports multiple reading directions. This facet renders child components on the left of the center area between top and bottom facet child components, if the reading direction of the client browser is left-to-right. If the reading direction is right-to-left, it renders child components on the right of the center area. When your application must support both reading directions, this facet ensures that the content will be displayed on the proper side when the direction changes. If you do Organizing Content on Web Pages 8-27 not need to support both directions, then you should use either the left or right facet. ■ end: Supports multiple reading directions. This facet renders child components on the right of the center area between top and bottom facet child components, if the reading direction of the client browser is left-to-right. If the reading direction is right-to-left, it renders child components on the left of the center area. When your application must support both reading directions, this facet ensures that the content will be displayed on the proper side when the direction changes. If you do not need to support both directions, then you should use either the left or right facet. ■ left: Supports only one reading direction. This facet renders child components on the left of the center area between top and bottom facet child components. When the reading direction is left-to-right, the left facet has precedence over the start facet if both the left and start facets are used that is, contents in the start facet will not be displayed. If the reading direction is right-to-left, the left facet also has precedence over the end facet if both left and end facets are used. ■ right: Supports only one reading direction. This facet renders child components on the right of the center area between top and bottom facet child components. If the reading direction is left-to-right, the right facet has precedence over the end facet if both right and end facets are used. If the reading direction is right-to-left, the right facet also has precedence over the start facet, if both right and start facets are used. ■ innerTop: Renders child components above the center area but below the top facet child components. ■ innerBottom: Renders child components below the center area but above the bottom facet child components. ■ innerLeft: Renders child components similar to the left facet, but renders between the innerTop and innerBottom facets, and between the left facet and the center area. ■ innerRight: Renders child components similar to the right facet, but renders between the innerTop facet and the innerBottom facet, and between the right facet and the center area. ■ innerStart: Renders child components similar to the innerLeft facet, if the reading direction is left-to-right. Renders child components similar to the innerRight facet, if the reading direction is right-to-left. ■ innerEnd: Renders child components similar to the innerRight facet, if the reading direction is left-to-right. Renders child components similar to the innerLeft facet, if the reading direction is right-to-left. The panelBorderLayout component does not support stretching its child components, nor does it stretch when placed in a component that stretches its child components. Therefore, the size of each facet is determined by the size of the component it contains. If instead you want the contents to stretch to fill the browser window, consider using the panelStretchLayout component instead. For more information, see Section 8.3, Arranging Contents to Stretch Across a Page.

8.5.1 How to Use the panelBorderLayout Component

There is no restriction to the number of panelBorderLayout components you can have on a JSF page. 8-28 Web User Interface Developers Guide for Oracle Application Development Framework To create and use the panelBorderLayout component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Border Layout onto the JSF page. 2. From the Component Palette, drag and drop the component that will be used to display contents in the center of the window as a child component to the panelBorderLayout component. Child components are displayed consecutively in the order in which you inserted them. If you want some other type of layout for the child components, wrap the components inside the panelGroupLayout component. For more information, see Section 8.12, Grouping Related Items. 3. To place contents that will surround the center, drag and drop the desired component into each of the facets. Because facets accept one child component only, if you want to add more than one child component, wrap the child components inside a container.

8.6 Arranging Content in Forms

The panelFormLayout component lets you lay out multiple form input components such as input fields and selection list fields in one or more columns. The File Explorer application uses a panelFormLayout component to display file properties. The component is configured to have the labels right-aligned, as shown in Figure 8–14 . Figure 8–14 Right-Aligned Labels and Left-Aligned Fields in a Form Figure 8–15 shows the same page with the component configured to display the labels above the fields. Tip: If any facet is not visible in the visual editor: 1. Right-click the panelBorderLayout component in the Structure window. 2. From the context menu, choose Facets - Panel Border Layout facet name . Facets in use on the page are indicated by a checkmark in front of the facet name.