Panel Splitter

The Panel Splitter component creates two resizable panes separated by an adjustable splitter. The panes can be placed horizontally (side by side) or vertically (top to bottom), as determined by the Orientation attribute. By default, Orientation is horizontal.

You can nest Panel Splitter components of different orientations to create multiple vertical and horizontal panes, as shown in the following illustration:

Panel Splitter allows end users to redistribute space between its children. Dragging the adjustable splitter resizes the panes. Clicking the arrow on the splitter collapses the pane (with its contents) in the direction of the arrow.

Like Panel Stretch Layout, Panel Splitter does not accept direct children; children contents can be placed inside facets only. Panel Splitter supports two facets that specify the panes where children contents can be inserted: first and second.

                               
<af:panelSplitter ..>
  <f:facet name="first">
    <!-- pane contents here -->
  </f:facet>
  <f:facet name="second">
    <!-- pane contents here -->
  </f:facet>
</af:panelSplitter>
                            

Panel Splitter is a stretching layout component, that is, it forces specific dimensions onto its children components so that the children fill up available space in the browser when end users resize the browser, resize the panes, or collapse and expand a pane.

When you add a Panel Splitter, JDeveloper uses the following default values for these attributes:

• Orientation: horizontal. This means the panes are arranged side by side (left to right or right to left, depending on the language reading direction). Change the value to vertical for panes to be arranged one on top of the other (top to bottom).
• PositionedFromEnd: false. This means the placement of the adjustable splitter will be measured from the first facet, which is the left or right pane in a horizontal arrangement (depending on the language reading direction), or the top pane in a vertical arrangement. Change the value to true to measure the initial position of the splitter from the second facet (which is the right or left pane in a horizontal arrangement, or the bottom pane in a vertical arrangement).
• SplitterPosition: 200 pixels. This is the distance of the adjustable splitter measured from the first or second facet, depending on the PositionedFromEnd value.
• Collapsed: false. This attribute determines whether a pane is collapsed or expanded. By default, the value is false, which means a pane is expanded. When a pane is expanded, clicking the arrow on the adjustable splitter collapses the pane in the direction of the arrow on the adjustable splitter; clicking the arrow again expands the pane.

In a horizontal arrangement, if PositionedFromEnd is false and SplitterPosition is 200, the initial position of the adjustable splitter will be 200 pixels from the first facet or left pane (see the first illustration above). In a vertical arrangement, if PositionedFromEnd is false and SplitterPosition is 200, the initial position of the adjustable splitter will be 200 pixels from the first facet or top pane (see the second illustration above).

When PositionedFromEnd is false, the arrow on the adjustable splitter points in the direction of the first facet; when PositionedFromEnd is true, the arrow on the adjustable splitter points in the direction of the second facet. By changing PositionedFromEnd to true on the second horizontal Panel Splitter ( s2), the adjustable splitter is now 200px from the end of the right pane (in a left-to-right reading direction), making the center pane larger than the right pane.

To see this in the visual editor, double-click the LayoutPage.jspx document tab at the top of the editor window to maximize the visual editor; double-clicking the tab again brings it back to its original size.

Copyright © 1997, 2009, Oracle. All rights reserved.