Layered Containers

Most containers allow the use of layers. This powerful feature allows you to create stack-based interfaces, where you associate each control to a certain layer, and you can decide which layer of controls is displayed at a given time.

Usage

Design

When on the Designer, when you drop a component inside a layered container, the Layer property of the component is given the current value of the ActiveLayer property of the container. For example, if you have a layered container with three layers (Layer1, Layer2 and Layer3) and its ActiveLayer property is set to Layer2, when dropping an Edit component on the container the Layer property of the component will be set to Layer2 as well.

You can change the value of the ActiveLayer property from the Object Inspector, and if you right-click the container on the Designer, you will get a popup menu from which you can select an ActiveLayer from a list of layers with components on them.

Also, to help you at design time, only the components on the current ActiveLayer of the container will be visible. If in the previous example, you change the ActiveLayer of the container to Layer3, the Edit component (which was placed on Layer2) will be hidden. You can still select hidden components from the Structure widget.

You can also change the layer in which a component is located by manually changing the Layer property of a component.

Runtime

At runtime, change the ActiveLayer property of a layered container to hide all the component inside the container but those on the given layer.

$this->PageControl1->ActiveLayer = "1";

Development

To create a layered container, you need to implement the ActiveLayer property. HTML5 Builder will assume any container with this property is a layered container, and will use that property to provide all the design features for layered containers.

When rendering your container, you should check the Layer property of every contained control, check if it matches ActiveLayer’s value, and render them only when it does. For an example, have a look at the implementation of PageControl.