PaneLayout

PaneLayout allows you to specify the size of a component in relation to its sibling components. If you want to use PaneLayout with a panel, Borland provides a special panel on the Containers tab of the Component Palette called SplitPanel. SplitPanel automatically has a default layout of PaneLayout, and it also has moveable splitter bars that allow the user to change the PaneConstraints of the panel at runtime. PaneLayout applied to a panel or frame other than a SplitPanel lets you control the percentage of the container the components will have relative to each other, but does not create moveable splitter bars between the panes.

Example

In a PaneLayout, the placement and size of each component is specified relative to the components that have already been added to the container. Each component specifies a PaneConstraints object that tells the layout manager from which component to take space, and how much of its existing space to take. Each component's PaneConstraints object is applied to the container as it existed at the time the component was added to the container. The order in which you add the components to the container is very important.

PaneConstraint variables

The constraint for a PaneConstraints component that is being added to a container consists of four variables:
String name
The name for this component (must be unique for all components in the container - as in CardLayout).

String splitComponentName
The name of the component from which space will be taken to make room for this component.

String position
The edge of the splitComponentName to which this component will be anchored.
Valid values are:
 
PaneConstraints.TOP This component will be above splitComponentName.
 
PaneConstraints.BOTTOM This component will be below splitComponentName.
 
PaneConstraints.RIGHT This component will be to the right of splitComponentName.
 
PaneConstraints.LEFT This component will be to the left of splitComponentName.
 
PaneConstraints.ROOT This component is the first component added.
float proportion
The proportion of splitComponentName that will be allocated to this component. A number between 0 and 1.

How components are added to PaneLayout

Creating a PaneLayout container in the UI Designer

  1. Add a container to your UI in the UI Designer. This can be any kind of a frame or panel, including a SplitPanel which already uses PaneLayout.
  2. If you used any container except SplitPanel, change the container's layout property to PaneLayout. This allows you to access the PaneLayout properties in the Inspector and change the width of the splitter bars.
  3. On the Component Palette, select the first component and drop it into the PaneLayout container. This component will completely fill up the container until you add another component to split this one.

  4. Select the second component, and drag it across the first component to indicate where you want it to be anchored, and how much space to take away from the first component.

    For example,

    The layout manager will now split the space between the two components, giving the second component the area you defined, and giving the first component the rest of the frame or panel.

    Important: If the first component you added to a PaneLayout container was itself a container, the UI Designer assumes you are trying to add the second component to the outer container instead of to the PaneLayout container. To specify to the UI Designer that you want to add components to containers other than those at the top of the Z-order, select the target container, then hold down the Ctrl key while clicking or dragging the component in the UI Designer.

  5. To add a third component to the PaneLayout, draw it similarly to define its relative position to the other components.

    For example, to split the left half of the container, begin drawing the third component starting from the middle of the left edge of the panel to bottom left corner of the second component.

  6. Use the same method to add subsequent components.

Modifying the component location and size in the Inspector

You can use the Component Inspector to modify which splitComponent edge a component should be anchored to, and the proportion of the splitComponent this component should occupy.

To do this,

  1. Click on the component in the UI Designer.
  2. In the Inspector, select the constraints property, then click the ellipsis button to open the constraints property editor.
  3. Select one of the following positions: Top, Bottom, Left, Right or Root. These values are relative to the component named in the Splits field in the property editor.
  4. Specify the proportion of the split component this component should occupy.
  5. Press OK.

Note: You can also resize the component by selecting it and dragging on the nibs. Moving a component is also allowed, however this will change the add order of the components.

Changing the width of the splitter bar

To change the width of the splitter bars in a PaneLayout container,
  1. Explicitly set the layout property of the container to PaneLayout.
  2. In the Component Tree, select the panel's PaneLayout object.
  3. In the Inspector, edit the number of pixels in the gap property value.
To change the width of the splitter bars in a SplitPanel,
  1. In the Component Tree, select the SplitPanel container.
  2. In the Inspector, edit the number of pixels in its gap property value.