How to use the HDividedBox and VDividedBox components

The HDividedBox and VDividedBox containers display dividers between each of their children, and the dividers may be dragged to resize the children.

Live preview of the HDividedBox component

⚠️ Beta Notice: This component is still quite new to Feathers UI. It was included in the latest release because it should be stable enough for production use. However, some APIs may go through minor changes in upcoming releases — based on feedback from developers like you. Learn more about Beta APIs.

The Basics

Create a HDividedBox container, add it to the display list, and add some children.

var container = new HDividedBox();
addChild(container);

var leftContainer = new LayoutGroup();
leftContainer.backgroundSkin = new RectangleSkin(SolidColor(0x993333));
container.addChild(leftContainer);

var rightContainer = new LayoutGroup();
rightContainer.backgroundSkin = new RectangleSkin(SolidColor(0x333399));
container.addChild(rightContainer);

Any Feathers UI component may be added as a child of a divided box.

Styles

HDividedBox and VDividedBox can display an optional background skin, and the divider resize handles may be customized.

Background skin

Optionally give the container a background using the backgroundSkin property. The following example sets it to a RectangleSkin instance.

var skin = new RectangleSkin();
skin.border = SolidColor(1.0, 0x999999);
skin.fill = SolidColor(0xcccccc);
skin.width = 16.0;
skin.height = 16.0;
dividedBox.backgroundSkin = skin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The group automatically calculates its preferred size based on the initial dimensions of its background skin (accounting for some other factors too, like the size and position of children), so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

The appearance of the group's border or fill may be customized to change when the group is disabled. In the next example, setting the skin's disabledFill method makes it switch to a different fill when the group is disabled.

skin.disabledFill = SolidColor(0xffcccc);

Similarly, use the skin's disabledBorder property to change the border when disabled.

skin.disabledBorder = SolidColor(2.0, 0x999999);

In the examples above, the group uses the same RectangleSkin for all states, and that skin listens for changes to the group's current state. Alternatively, the group's disabledBackgroundSkin method allows the group to display a completely different display object when it is disabled.

var defaultSkin = new RectangleSkin();
// ... set border, fill, width, and height
dividedBox.backgroundSkin = defaultSkin;

var disabledSkin = new RectangleSkin();
// ... set border, fill, width, and height
dividedBox.disabledBackgroundSkin = disabledSkin;

In the example above, the group will have a separate skins when enabled and disabled.

Dividers

The dividers the HDividedBox and VDividedBox components are of type InteractiveObject.

The dividerFactory property may be used to customize the creation of the divider resize handles.

dividedBox.dividerFactory = DisplayObjectFactory.withFunction(() -> {
    var button = new Button();
    // ... set styles here
    return button;
});