Types of panes

Summary of commonly used panes (widgets designed to be containers for child widgets).

Widgets that are designed to be containers for child widgets are called panes. Different types of panes provide different functions. The following list is a summary of some commonly used panes:

Name

Description

CanvasPane

Used for absolute positioning.

BorderPane

Used to wrap one widget and provide margin, border, and padding similar to the CSS box model.

ConstrainedPane

Used to constrained the graphic.

EdgePane

Supports five potential children: top, bottom, left, right, and center. The top and bottom widgets fill the pane horizontally and use their preferred height. The left and right widgets use their preferred width, and occupy the vertical space between the top and bottom. The center widget gets all the remaining space. See the figure below for an example.

ExpandablePane

Used to expand and collapse the pane.

GridPane

Lays out its children as a series of columns and rows. You can configure extra space in the rows and columns a number of ways using the pane’s properties.

SplitPane

Supports two children with a movable divider between them.

TabbedPane

Supports multiple children - only one is currently selected using a set of tabs.

Note: Even though only one tab is visible at a time, all tabs must be loaded on the page, even if they are not visible. If many tabs, with a lot of information, are on a single page, the page may load very slowly.

ScrollPane

Supports a single child that may have a preferred size larger than the available bounds. The scroll pane provides a set of scroll bars for viewing areas of the child widget that go outside of its bounds.

FlowPane

Lays-out its children from left to right and top to bottom, fitting as many children as possible in each row.

ResponsivePane

Makes Px pages render well on a variety of devices and window or screen sizes.

The figure below illustrates the edge pane layout using borders and labels.