PanelSplitter Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.0.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 02-Dec-2010

The panelSplitter component divides content into separate regions (called panes) in the same browser window. These panes can be managed and viewed independently of each other; for instance, they can be resized or fixed, and their content can be kept as static or scrollable.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Page Layout All Determines background of Panel Splitter.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:panelSplitter Creates two content panes divided by a splitter.

General Principles Bookmark this Heading Return to Top

Purpose:

Divides page content into fixed and resizable panes.

Description:

  • A panel splitter divides window content into separate regions called panes.
  • Multiple splitters may be used in the same window; splitters may also be nested.
  • Splitters are horizontally or vertically oriented, depending on the layout of content panes.
  • The splitter can be dragged to increase or decrease the size of a pane. The adjacent pane resizes as needed.
  • The splitter can be used to collapse its associated pane. By default, the splitter is placed before the pane it collapses.
  • The splitter remains on the screen after its pane is collapsed.
  • When a pane is collapsed, data contents are hidden from view, not deleted or merged.

A page with horizontal and vertical panel splitters

Page with Horizontal and Vertical Panel Splitters

Usage:

  • Use panel splitters when users need to keep certain contents in view while interacting with other contents on the same page.
  • Multiple splitters may be used in the same window to provide multiple views of content. Multiple views offer users a way to keep certain information visible while other views are scrolled or replaced. For example, a window could contain three panes: the first pane with a navigation menu, the second with a local context region, and the third with object details. In this case, content in the second and third panes would be replaced based on choices in the first pane.
  • Too many splitters in a window can cause content to become overly partitioned so that users lack a clear starting point of reference. A page should not contain more than three or four splitters at most (vertical or horizontal).
  • Use a horizontal splitter to view wide content in both panes, such as a table or a form with multiple columns. Also, use a horizontal splitter if the contents in both panes are likely to be horizontally scrollable.
  • Use a vertical splitter if content in one pane is narrow, and content in the other pane is wider. Also, use a vertical splitter if the contents of both panes are likely to be vertically scrollable.
  • A splitter pane is not recommended for contents that are ancillary to the page, such as branding or copyright information, as they do not need to be kept in view while working.
  • Product teams may place custom components within a splitter pane.

Configurable Elements Bookmark this Heading Return to Top

Panes Bookmark this Heading Return to Top

Purpose:

Divide page content into rectangular areas.

Description:

  • Pane size depends on the placement of splitters.
  • A pane has no more than one splitter per edge.
  • The contents of adjacent panes are resized when the user moves the splitter that separates them.
  • When a pane is resized to be smaller than its contents, a scrollbar appears.
  • When a pane is collapsed, or resized to its minimum size, its splitter remains visible.
  • Nested panes are supported. See Nested Splitter Layout below.
  • Pane contents may wrap, truncate, or clip when the pane resizes, depending on which components reside within the pane.
  • Pane size may be fixed or relative:
    • Fixed: The pane does not change size when the browser is resized.
    • Relative: The pane resizes when the browser window resizes.

Fixed and resizeable panes in a content region

Fixed and Resizable Panes

Usage:

  • Each pane should contain different data or different views of data.
  • Specify a pane to be relative when the user is likely to adjust the pane size to view more content. For instance, the user may want to adjust the viewing pane of an e-mail message to see more of the message details without having to scroll the pane.
  • It is recommended to set a default size for each pane so that each is large enough to display adequate content without scrolling or resizing.

Horizontal panes in a page separated by a panel splitter, and separated from the vertical pane by a scroll bar.

Pane with Scrollbar

Collapse/Restore Control Bookmark this Heading Return to Top

Purpose:

Hides or shows an entire pane.

Description:

  • Collapse/Restore hides or shows pane contents with one click.
  • Collapsing a pane hides pane contents completely.
  • The splitter remains visible when collapsed.
  • For horizontal splitters, the collapse /restore button acts on the pane above the splitter. For vertical splitters, the collapse /restore button acts on the pane before the splitter.
  • Panel Splitter animation to collapse or restore a pane is on by default, and is configurable by the end-user.

Showing a cursor resting on the panel splitter to be used to collapse a horizontal pane

Collapsing a Horizontal Pane

Showing a cursor resting on the panel splitter to collapse a vertical pane

Collapsing a Vertical Pane

Usage:

  • The Collapse/Restore control allows the user to hide contents in one pane to allow a larger viewable area in another.
  • Do not use a Collapse/Restore control with a pane if it contains information that must always remain visible.
  • Expand a pane by default if it contains information that the user needs to see when first visiting a page.
  • Do not collapse a pane by default if it contains required fields.
  • Product teams should also provide the Collapse/Restore Panes action as a command in a page-level "Panes" menu.
  • Users may turn off the animation that expands and collapses a pane in PanelSplitter.

Splitter Layout Options Bookmark this Heading Return to Top

Basic Splitter Layout Bookmark this Heading Return to Top

Purpose:

Divides the page into two or more peer panes.

Description:

In the basic layout, the page is split into two or three panes with parallel splitters.

Examples:

  • In an e-mail window, a horizontal splitter separates the pane containing the message headers and the one containing the message details.
  • On a page containing a Table of Contents, a vertical splitter divides the page into two columns. The small pane on the left shows a Table of Contents or site overview, and all other content is displayed in the big pane on the right. This is useful if there is a large amount of information that the end user needs to browse through.
  • On a comparison page, two documents are presented separately in two equal-sized columns so that the end user can read through both and see where they differ.

Usage:

Basic splitter layouts often make use of page layout regions. See the Page Layout guideline for details. Common variations include:

  • Two-column layout with left auxiliary content region and main content area separated by a vertical splitter. The left side (right side for languages with right-to-left text) can be used for a master tree control or set of navigation links, while the main content area shows object details or specific page content.
  • Two-column layout with main content area and right auxiliary content region separated by a vertical splitter. The right side (left side for languages with right-to-left text) can be used to display reference information.
  • Three-column layout using both left and right auxiliary content regions with splitter between each column.
  • Main content region divided into two panes by a horizontal splitter with master content above and detail content below.

Basic two-column layout, with panel splitters between the columns.

Basic Two-Column Layout

Stacked Splitter Layout Bookmark this Heading Return to Top

Purpose:

Divides the page into two levels of panes.

Description:

In the stacked layout, the main content area is split into two or three panes, usually with horizontal splitters, or with a single vertical splitter combined with two or three horizontal splitters.

Stacked Panes in a layout, with splitter bars.

Stacked Splitter Layout

Usage:

  • Stacked splitters may be used (thereby providing stacked panes) to present multiple sets of information to be viewed in a vertical orientation. For instance, the top pane can be a tabbed pane showing overview information while the bottom pane displays details for the selected tab.
  • When panes are stacked, information should be prioritized so that the most important information appears at the top; users typically scan and read from top to bottom.

Nested Splitter Layout Bookmark this Heading Return to Top

Purpose:

Divides the page into three levels of panes.

Description:

In the nested layout, the main content area is split into three or four panes, usually with two or three vertical splitters combined with one horizontal splitter.

Nested panel splitters in the main content region.

Nested Splitter Layout

Usage:

  • Nested splitters may be used to further subdivide pane contents that need to be viewed independently of each other.
  • A page should not contain more than three or four nested splitters at most (vertical or horizontal). Excessive use of nested splitters can cause usability and performance problems:
    • Window content becomes overly partitioned. As a result, users have no clear starting point of reference on the page.
    • Window content takes longer to appear.