View Navigation

For some users a preferred way of navigating over UI elements is to utilize a keyboard, specifically by pressing the "Tab" key. To make a proper order of UI elements selection views have a dedicated property called "tabindex".

Property can hold the following values which can be set from code or in the view description file:

value Description
less than 0 View can be selected with the mouse or touch, but does not participate in sequential navigation
0 View can be selected and reached using sequential navigation, but the order of the navigation is determined by the browser(usually in order of addition)
greater than 0 View will be reached(and selected) using sequential navigation, and navigation is performed by ascending "tabindex" value

If multiple UI elements contain the same "tabindex" property value, navigation is done in the order in which they were added.

Example

Setting "tabindex" property in resource description file.

RUI

ListLayout {
    width = 100%,
    height = 100%,
    content = [
        Button {
            content = "Cancel",
            tabindex = 2,
        }
        Button {
            content = "Save",
            tabindex = 1,
        }
    ]
}

To get the property value we can use a Get() method of the view or a dedicated rui.GetTabIndex() global function:

Go

tabIndex := rui.GetTabIndex(rootView, viewId) // Will return an integer number

For more information on how to work with view properties refer to the Property System tutorial.