Container Behavior
SmartUI Container Behavior operation and ACEs.
Last updated
SmartUI Container Behavior operation and ACEs.
Last updated
Containers are one of the key features SmartUI offers. Although simple, they enable powerful capabilities for better organizing and structuring your UI. They provide complex navigation capabilities unlike other Construct 3 frameworks. Their main purpose is to create an operational context within an object hierarchy, allowing the framework to automatically limit interactions and group objects logically.
SmartUI always operates with a global container handler that delegates operations to lower-level containers as the user navigates. Containers are responsible for handling the Document Flow.
Containers automatically propagate Set Enabled calls to all its children.
Please be aware that all the children of the component must have enabled the properties change propagation for all the attributes: visible, opacity, x, y, width, height, etc. Otherwise, you will have to manually control children's attributes.
Containers can be added to any world object without restrictions, so that you can decide what best suit your needs. They can also be nested: a container within another container.
There are no limitations on adding any object as a child of a container. SmartUI is capable of distinguishing which objects have UI-component capabilities to propagate events among them, without affecting the non-UI components of your hierarchy.
Smart UI Container behavior groups UI components, provides focusing abilities and default interactions to navigate within the container and its children components that uses Smart UI behaviors, and handles cascading Enabling/Disabling events. It also responds to pointer interactions prioritizing by zIndex.
Set EnabledDisable/Enable the Container
Set NameSets the name of the container.
Set SequenceSets the sequence index to influence the selection of components.
Set FocusableSets the component to be able to receive the focus
Set FocusRequest the focus for this container
Focus First ElementRequest the focus for the first interactable element of the container.
Focus Last ElementRequest the focus for the last interactable element of the container.
Set Invisible ComponentTurns the component opacity to 0 while rendering it to allow invisible interactions.
Is EnabledReturns true if the container is enabled
Is Invisible ComponentReturns true if the Container is configured as an invisible component.
Compare NameReturns true if the component's name equals the parameter
Is FocusedReturns true if the Container has the focus
Has ControlTrue if the container has the control to navigate over components.
On FocusTriggered when the container gets the focus
On Focus LostTriggered when the container loses focus
NameComponent name
(c) Pixel Perfect Studio 2024
Property
Description
Enabled
Enables or Disables the container and all its children.
Index
Index of the container within layout. Used for focusing the elements in the sequence order.
Invisible Component
Turns the component opacity to 0 while rendering it to allow invisible interactions.
Focusable
Marks if the component can have the focus.
Automatic-Color
Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check.
Name
Unique name string for identifying the selected container
Parameter
Description
Enabled
Enabled/Disabled
Parameter
Description
Name
Name of the component
Parameter
Description
Index
Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2.
Parameter
Description
Focusable
Flag to allow the component to be focused.
Parameter
Description
Invisible Component
Set if the component processed even if it's invisible: True/False
Parameter
Description
Name
Name to compare with the component picked.
