Document Flow
SmartUI document flow navigation.
Last updated
SmartUI document flow navigation.
Last updated
One of the main features of SmartUI is that it implements a new concept for UI navigation in Construct 3, and it is the Document flow.
Since SmartUI has built-in navigation capabilities and ACEs, a logical way to determine which component should precede or follow another is through document flow. By default, all components are considered to have the same navigation priority level, which is controlled by the Index attribute on all SmartUI components.
The document flow's starting point is determined by the top-most and left-most component within the same container context. Subsequent components are selected from left to right and top to bottom. If there are no containers in the scene, a global container is used, which manages global navigation.
Document flow navigates from top to bottom, then from left to right.
Document flow can be influenced by changing the index attribute. The lower the value, the higher the priority that component will have.
For instance, from the previous image if you want the component number 2 to be selected before component one, you can change the index attribute to a lower value than the ones before.
In this example, button 1 has an index of 0, we will change the button 2 index to -1 to be selected before component 1.
Keep in mind the navigation constraints. After changing the index value of button 2 to -1, the next component in the navigation priority will be button 1, as it has the next valid index (zero, in this case) and is positioned at the same y-axis level.
The navigation feature has predefined rules to determine if an interaction with the View of this controller is valid, then it triggers the involved events.
Navigation determines the next component within the container in control, by prioritizing the index value first, followed by the y-axis coordinate, and lastly the x-axis coordinate.
The criteria to determine if an interaction is valid, is set as follows:
Component is Enabled
Component is Interactable (for simulations)
Component's layer is visible
Component is visible, or if invisible then, InvisibleComponent must be true.
Component's layer is interactable
SmartUIFramework is Enabled
Navigation considers additional constraints when operating within Scroll-View and Dialog contexts. In Scroll-Views, a component's collision polygon must be inside the view. In dialogs, the component should be part of a non-modal dialog; otherwise, its interaction is prioritized.
When stacking modal-dialogs, the top-most zIndex dialog is the one in control.
The index value can be set to any integer, positive or negative. By default, it is set to zero for all components. Navigation essentially passes control to the focused container. If none is present, the global container is used instead. By default, you can navigate using the following keys:
Arrow keys: Move between components
Tab key: Change the container
Escape key: Return control to the global container
Space and Enter keys: Trigger the default action for components. Default actions usually involve clicking or focusing on the first component in a container.
Default keys can be deactivated in the properties of the SmartUI plugin.
