First page Back Continue Last page Graphics

Creating Resizable Panes


Creating Resizable Panes

When you have groups of unique content to present to users, consider using multiple panes separated by adjustable splitters. When viewing the page in a client browser, users can change the size of panes by dragging a splitter, and also choose to collapse or restore panes. When a pane is collapsed, its contents are hidden; when a pane is restored, the contents are displayed.

The af:panelSplitter component enables you to organize contents into two panes separated by an adjustable splitter. Clicking the arrow button on a splitter collapses a pane (and its contents) in the direction of the arrow. The value of the orientation attribute determines whether the panes are horizontal (default) or vertical. The pane contents are specified in the facets first and second. The slide shows a page divided into two horizontal panes (placed left to right), and another page divided into two vertical panes (placed top to bottom). It also shows a nested panelSplitter, created by a horizontal panelSplitter into the first facet of a vertical panelSplitter.

The af:panelSplitter component uses geometry management to stretch its children components at run time. This means when the user collapses one pane, the contents in the other pane are explicitly resized to fill up available space. If af:panelSplitter is the root component for your page contents, stretching occurs automatically.