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 JBCL 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
PaneLayout adds components to the container in the following manner:
- The first component will always take all the area of the container. The only important variable in its PaneConstraint is its name, so the other components have a value to specify as their splitComponentName.
- The second component has no choice in specifying its splitComponentName. The only choice is the name of the first component.
- The splitComponentName of subsequent components may be the name of any component that has already been added to the container.
Creating a PaneLayout container in the UI Designer
To create a PaneLayout container,
- 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.
- Change the container's layout property to PaneLayout (if you used any container except SplitPanel). This allows you to access the PaneLayout properties in the Inspector and change the width of the splitter bars.
- Select the first component on the Component Palette, and drop it into the PaneLayout container. This component will completely fill up the container until you add another component to split this one.
- 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,
- If you want the splitter bar to be vertical between a right and left half of the panel, drag the mouse starting from the top left corner of the panel to the middle of the bottom edge.
- If you want the splitter bar to be horizontal between an upper and lower half, drag the mouse starting from the top left corner to the middle of the right edge.
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.
- 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.
- 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,
- Click on the component in the UI Designer.
- In the Inspector, select the constraints property, then click the ellipsis button
to open the constraints property editor.
- 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.
- Specify the proportion of the split component this component should occupy.
- 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,
- Explicitly set the layout property of the container to PaneLayout.
- In the Component Tree, select the panel's PaneLayout object.
- In the Inspector, edit the number of pixels in the gap property value.
To change the width of the splitter bars in a SplitPanel,
- In the Component Tree, select the SplitPanel container.
- In the Inspector, edit the number of pixels in its gap property value.