You can set when user interface elements in your application have focus. Focus allows the user to access the nodes in a Kanzi Studio project and to create keyboard navigation. For example, the user can press the arrow keys on the keyboard to move a slider or press the Enter key to click a button. See Tutorial: Use keyboard input to navigate your application.
By default the Screen node has focus. The control nodes in Kanzi by default receive input from specific keyboard keys:
When a Button node has focus, it receives input from the keyboard keys Space, Enter, and Enter on the numeric pad.
When a Toggle Button node has focus, it receives click input from the keyboard keys Space, Enter, and Enter on the numeric pad.
When a Slider node has focus use:
The ← (Left Arrow) and → (Right Arrow) keyboard keys if the slider knob moves in a horizontal direction
The ↑ (Up Arrow) and ↓ (Down Arrow) keyboard keys if the slider knob moves in a vertical direction
To move a slider knob with keyboard keys, in the Properties you need to set the Step Value property for that slider to define how many steps the knob moves each time you press a key.
When a Scroll View node has focus, you can scroll the contents of that node using the ← (Left Arrow), → (Right Arrow), ↑ (Up Arrow), and ↓ (Down Arrow) keyboard keys.
When a Grid List Box node has focus use:
The ↑ (Up Arrow) and ↓ (Down Arrow) keyboard keys to scroll the list items in a vertical list box
The → (Right Arrow) and ← (Left Arrow) keyboard keys to scroll the list items in a horizontal list box
The Home keyboard key selects the first list item
The End keyboard key selects the last list item
The Page Up and Page Down keyboard keys go to the beginning and end of the visible area of a list box
Setting focus
The user can interact with user interface elements using keyboard keys when those elements have focus.
To set focus:
In the Project select the Screen node and in the Node Components add a trigger which you use to set off the action that sets the focus. For example, add a Key Down trigger to set focus to a node in the project when the user presses a specific key on their keyboard.
In the Node Components click Trigger Settings and in the Trigger Settings Editor click Add condition. The Trigger Condition Editor opens. Trigger conditions enable you to set which conditions must be met for the trigger to set off. Here you set the Key Down trigger to be set off when the user presses a specific key on the keyboard.
In the Trigger Condition Editor set which keyboard key sets off the Key Down trigger:
Value A
Value From to Message The Key Down trigger intercepts the messages generated when a user presses down a key on their keyboard. The message contains the key code which Kanzi uses to set off the trigger.
Operator to =
Value B
Value From to Fixed
Fixed Value to the key code for the key you want to use to set off the trigger. For example, use 61. You use the key code for the ↑ key to set off the trigger when the user presses that key on their keyboard.
In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.
When the user presses down the ↑ (Up Arrow) key, the Key Down trigger executes the actions you set in the trigger. For a list of the keyboard key codes used in Kanzi, see Keyboard input codes reference.
In the Node Components add to the Key Down trigger an Execute Script action. You set the application to execute a JavaScript script when the user presses the keyboard key you defined in the trigger.
In the Execute Script window select + Create Script to create a new script. The Script Editor window opens.
In the Script Editor use the trySetFocus() function to set focus to the node in the project. See Scripting reference. For example, to set focus to a Slider 2D node in the project use this script:
// Get the Slider 2D node to which you want to set focus.
slider = node.lookupNode('#Slider 2D');
// Set focus to the Slider 2D node.
slider.trySetFocus();
When you press the ↑ (Up Arrow) key on the keyboard, you set focus to the node you defined in the script. For example, if you set focus to a Slider node, you can by default use the arrow keys on your keyboard to move the slider.
Clearing focus
You can clear the focus from the node which currently has focus. For example, if you have user interface elements that show when they have focus, use this function to remove the focus, set controls to the state without focus, and make your application not receive input from the keyboard.
To clear focus:
In the Project select the node from which you want to clear focus and in the Node Components add a trigger which you use to set off the action that clears the focus. For example, add an Entered State trigger to clear the focus when a state manager enters a state.
In the Node Components add to the Entered State trigger an Execute Script action. You set the application to execute a JavaScript script which clears the focus when the application enters a state.
In the Execute Script window select + Create Script to create a new script. The Script Editor window opens.
In the Script Editor use the clearFocus() function which clears the focus from the node which has focus. See Scripting reference.
// Clear the focus from the currently focused node.
clearFocus();
When you set off the trigger which executes the script, you clear the focus from the node which currently has focus. Your application does not receive input from the keyboard.
Showing when a user interface element has focus
You can set a user interface element, such as a button or a slider, to change appearance when it has focus. For example, you can highlight a button when that button has focus or change how a slider knob looks when the slider has focus.
To show when a user interface element has focus:
In the Project select the node for which you want to create focus visualization and in the State Tools click Create State Manager to create a state manager for that node.
In the State Tools click Create State twice to create two states. Name them, for example, NotFocused and Focused. The NotFocused state defines the state of your application when the node is not focused and the Focused state when the node is focused.
In the Project select the node for which you want to create focus visualization and set the value of the property you want to change when that node has focus. For example, you can use a different image for the slider knob when the slider has focus.
In the State Tools click below the state which defines how the node looks when it has focus to save the current property values to that state. For example, click below the Focused state.
In the State Tools click the <No Controller Property> dropdown menu and select the Node > Focused property. When you set the Focused property as the controller property for the state manager, the state manager transitions to a state based on the value of that property. When the node has focus, the appearance of that node changes.
In the State Tools under the state which defines how the node looks when it has focus set the value of the Focused property to True.
In the State Tools click Edit State Manager to deactivate the State Tools.
When you set focus to the slider, the appearance of the slider knob changes.
below the state which defines how the node looks when it has focus to save the current property values to that state.
