- Loading...
Page History
...
The following figure demonstrates focus traversal after pressing Down key two times from the control #1.
The focus traversal gets to control #2 and #3 as it is the closest control to the currently selected column. In the same sequence, if users press Right key when control #2 has focus, the focus moves to the closest control that is on right of the currently focused control and selects next column. Pressing Down key navigates to control Y.
...
The only difference that should be mentioned here is that on non-touch platforms there is no Enter/Return key that would activate the default button. Giving that, this functionality can be disabled.
Image: Button
The following table describes actions that are performed when the focus traversal is on a button and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Activate the button. |
...
Charts on non-touch platforms behave exactly same as on Desktop.
Image: LineChart
Image: BarChart
Image: AreaChart
CheckBox
There is no difference in behavior of check boxes on Desktop and non-touch platforms. When selected, check boxes switch their settings.
Image: CheckBox
The following table describes actions that are performed when the focus traversal is on a check box and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the setting of the check box. |
...
Based on specification that came from our visual designer, it is recommended to use 9pt font size as a default font size on Embedded devices. However, this font size may change based on results from testing on a real device.
Image: Label
Pagination
The functionality of a Pagination control on non-touch platforms stays same as on Desktop.
...
Note that when the focus traversal is on selected page button, pressing Left or Right key will switch pages.
Image: Pagination
The following table describes actions that are performed when the focus traversal is in a pagination and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. If the focus traversal is on selected page button, select the previous page. |
| Right | Move the focus traversal right. If the focus traversal is on selected page button, select the next page. |
...
Progress bars are useful for communicating that a job is in-process. Even if progress bars are occupied with buttons, there is no difference in behavior of progress bars on Desktop and non-touch platforms.
Image: ProgressBar
ProgressIndicator
...
Image: Progress Indicator
RadioButton
There is no difference in functionality of radio buttons on Desktop and non-touch platforms. On the other hand, there is a difference in navigation.
On Desktop, users traverse between controls by pressing TAB key. When a radio button group is focused, they use arrow keys to change selection within the group. But on non-touch platforms, where there is no TAB key present and where we try to avoid the "2-level selection" as much as possible, users will need to traverse over all radio buttons in the same group to reach other focusable control. The radio button selection is done using OK/Select key.
Image: RadioButton
The following table describes actions that are performed when the focus traversal is on a non-selected radio button and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | If the radio button is not selected, select the radio button and deselect radio buttons that are in the same group. If the radio button is already selected, no action is performed. |
...
There are no functionality constraints on non-touch platforms - the scroll bars are used to identify that there is more content below the fold. The only difference between Desktop and non-touch platforms is that users are not allowed to interact with scroll buttons or scroll bars.
Image: ScrollBar
ScrollPane
There is no difference in functionality of scroll panes on Desktop and non-touch platforms.
...
On non-touch platforms, users are not allowed to interact with the splitter at all so the splitter is locked. Other than that, there is no difference in functionality of split panes on Desktop and non-touch platforms.
Image: SplitPane
The following table describes actions that are performed when the focus traversal is in a split pane and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
...
Note that when the focus traversal is on selected tab, pressing Left and Right (tabs on top or bottom of TabPane) or Up and Down (tabs on right or left of TabPane) key will switch tabs.
Image: TabPane
The following table describes actions that are performed when the focus traversal is in a tab pane and users press the following keys:
Tabs on Top or Bottom of TabPane
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. If the focus traversal is on selected tab, select the previous tab. |
| Right | Move the focus traversal right. If the focus traversal is on selected tab, select the next tab. |
Tabs on Left or Right of TabPane
| Up | Move the focus traversal up. If the focus traversal is on selected tab, select the previous tab. |
| Down | Move the focus traversal down. If the focus traversal is on selected tab, select the next tab. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
...
There is no difference in functionality of Titled Panes on Desktop and non-touch platforms.
Image: TitledPane
The following table describes actions that are performed when the focus traversal is in a titled pane and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Perform action that is associated with the control. If the focus traversal is on the title and the turner is visible, expand or collapse the pane. |
...
There is no main difference in behavior of buttons on Desktop and non-touch platforms. When selected, the buttons perform actions that are assigned to them.
Image: ToggleButton
The following table describes actions that are performed when the focus traversal is on a toggle button and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | If the toggle button is not selected, select the button and perform the associated action. If the toggle button is selected, deselect the button and perform the associated action. |
...
When the focus traversal is on the first/last item in a column and users press Up/Down key, the focus traversal moves to the previous/next focusable control following rules defined in the non-mouse traversal policy. Similarly to this, if the focus traversal is on the first/last item in a row and users press Left/Right key, the focus traversal moves to the previous/next focusable control following rules defined in the non-mouse traversal policy.
Image: ToolBar
The following table describes actions that are performed when the focus traversal is in a tool bar and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
...
Image: ChoiceBox in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a choice box and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the choice box to the "interactive" mode. |
Next table describes actions that are performed when a choice box is in the "interactive" mode (the list is open) and users press the following keys:
| Up | Move one item up. |
| Down | Move one item down. |
| OK/Select | Select the current value, close the list, and switch the choice box to the "traverse" mode. |
...
Image: Regular ComboBox in Traverse and Interactive Mode
On the other hand, when the editable combo box is in the "interactive" mode, the caret appears in the field allowing users to enter a value. Users can also use Up or Down keys to change value in the field. When done, users must press OK/Select key to commit the value and switch the combo box from the "interactive" mode to the "traverse" mode.
Image: Editable ComboBox in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a combo box and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the combo box to the "interactive" mode. |
Next tables describe actions that are performed when a combo box is in the "interactive" mode (the list is open) and users press the following keys:
Regular Combo Box
| Up | Move one item up. |
| Down | Move one item down. |
| OK/Select | Select the current value, close the list, and switch the combo box to the "traverse" mode. |
Editable Combo Box
| Up | Change value in the combo box. |
| Down | Change value in the combo box. |
| Left | Move the caret left by one character. The text may scroll to keep the caret visible. The left arrow key results in no change when the cursor is positioned to the left of the very first entered character. |
| Right | Move the caret right by one character. The text may scroll to keep the caret visible. The right arrow key results in no change when the cursor is positioned to the right of the very last entered character. |
| HW key | Type a character. |
| OK/Select | Commit the current value and switch the combo box to the "traverse" mode. |
...
Image: ListView in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a list view and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the list view to the "interactive" mode. |
Next tables describe actions that are performed when a list view is in the "interactive" mode and users press the following keys:
Vertical Orientation
| Up | Move the focus traversal up by one item. The list may scroll to keep the focus traversal visible. |
| Down | Move the focus traversal down by one item. The list may scroll to keep the focus traversal visible. |
| OK/Select | Select the item and switch the list view to the "traverse" mode. |
Horizontal Orientation
| Left | Move the focus traversal left by one item. The list may scroll to keep the focus traversal visible. |
| Right | Move the focus traversal right by one item. The list may scroll to keep the focus traversal visible. |
| OK/Select | Select the item and switch the list view to the "traverse" mode. |
Vertical Orientation (ListView is the sole node in a container)
| Up | Move the focus traversal up by one item. The list may scroll to keep the focus traversal visible. |
| Down | Move the focus traversal down by one item. The list may scroll to keep the focus traversal visible. |
| Left | Move the focus traversal to a control that is on left of ListView. |
| Right | Move the focus traversal to a control that is on right of ListView. |
| OK/Select | Perform the action. |
Horizontal Orientation (ListView is the sole node in a container)
| Up | Move the focus traversal to a control that is above ListView. |
| Down | Move the focus traversal to a control that is below ListView. |
| Left | Move the focus traversal left by one item. The list may scroll to keep the focus traversal visible. |
| Right | Move the focus traversal right by one item. The list may scroll to keep the focus traversal visible. |
| OK/Select | Perform the action. |
...
Image: PasswordField in Traverse and Interactive Mode
For details about behavior of a password field, see TextField control.
...
Image: Slider in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a slider and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the slider to the "interactive" mode. |
Next tables describe actions that are performed when a slider is in the "interactive" mode and users press the following keys:
Horizontal Orientation
| Left | Decrease the value by one step. |
| Right | Increase the value by one step. |
| OK/Select | Commit the value and switch the slider to the "traverse" mode. |
Vertical Orientation
| Up | Increase the value by one step. |
| Down | Decrease the value by one step. |
| OK/Select | Commit the value and switch the slider to the "traverse" mode. |
...
Image: TableView in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a table view and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the table view to the "interactive" mode. |
Next tables describe actions that are performed when a table view is in the "interactive" mode and users press the following keys:
| Up | Move the focus traversal up by one item. |
| Down | Move the focus traversal down by one item. |
| Left | Move the focus traversal left by one item. |
| Right | Move the focus traversal right by one item. |
| OK/Select | Select the item and switch the table view to the "traverse" mode. |
TableView is the sole node in a container
| Up | Move the focus traversal up by one item. |
| Down | Move the focus traversal down by one item. |
| Left | Move the focus traversal left by one item. |
| Right | Move the focus traversal right by one item. |
| OK/Select | Perform the action. |
...
In contrast to Desktop, TextArea on non-touch platforms will not support the following functionality unless it is supported by the HW keyboard:
- no "cancel changes" support and
- no copy, paste, or selection support.
TextArea is a control that can trap the focus traversal and cause users to get stuck. Giving that, users need to press OK/Select key to switch from the "traverse" mode to the "interactive" mode to be able to navigate and interact with this control. Note that the text area in "traverse" mode does not have to display scroll bars. The scroll bars might be visible only when the text area is in the "interactive" mode.
When in the "interactive" mode users can use the navigation keys to scroll the text area (text area in read only mode) or to move the caret within the text area (text area in edit mode). Because there is no support for the virtual keyboard, users must use the HW keyboard to type characters. When done, users must press OK/Select key to switch back from the "interactive" mode to the "traverse" mode.
Image: TextArea in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a text area and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the text area to the "interactive" mode. |
Next tables describe actions that are performed when a text area is in the "interactive" mode and users press the following keys:
Text Area in Read Only Mode
| Up | Scroll the text area up by one step. |
| Down | Scroll the text area down by one step. |
| Left | Scroll the text area left by one step. |
| Right | Scroll the text area right by one step. |
| OK/Select | Switch the text area to the "traverse" mode. |
Text Area in Edit Mode
| Up | Move the caret up by one row. The text may scroll to keep the caret visible. The up arrow key results in no change when the cursor is positioned to the left of the very first entered character. |
| Down | Move the caret down by one row. The text may scroll to keep the caret visible. The down arrow key results in no change when the cursor is positioned to the right of the very last entered character. |
| Left | Move the caret left by one character. The text area may scroll to keep the caret visible. The left arrow key results in no change when the cursor is positioned to the left of the very first entered character. |
| Right | Move the caret right by one character. The text area may scroll to keep the caret visible. The right arrow key results in no change when the cursor is positioned to the right of the very last entered character. |
| HW key | Type a character. |
| OK/Select | Save changes and switch the text area to the "traverse" mode. |
...
TextField control behaves similarly to TextAreato TextArea. It also does not support the same functionality as TextArea unless it is supported by the HW keyboard.
Similarly to TextArea, TextField also needs to be switched to the "interactive" mode in order to enable users to interact with it. In the "interactive" mode, users can use the navigation keys to move the caret. To type a character, they must use the HW keyboard. When done, users must press OK/Select key to switch back from the "interactive" mode to the "traverse" mode.
Image: TextField in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a text field and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the text field to the "interactive" mode. |
Next table describes actions that are performed when a text field is in the "interactive" mode and users press the following keys:
| Left | Move the caret left by one character. The text may scroll to keep the caret visible. The left arrow key results in no change when the cursor is positioned to the left of the very first entered character. |
| Right | Move the caret right by one character. The text may scroll to keep the caret visible. The right arrow key results in no change when the cursor is positioned to the right of the very last entered character. |
| HW key | Type a character. |
| OK/Select | Save changes and switch the text field to the "traverse" mode. |
TreeView 2-level control NOT FOR
...
LOMBARD (8.0)
Note that this control is not on the list of controls for Embedded platforms, however, since an use-case for this control exists on Embedded platforms, the expected interaction is mentioned here. In addition to that, this control may not be implemented due time and resource constraints.
...
Giving the limited number of keys that are dedicated to the traversal and interaction, functionality of TreeView is also limited. It means that this control will allow users to select a single node only. Selection of multiple nodes will be disabled and developers will need to place e.g. check box controls next to each node to enable this functionality. In addition to that, TreeView on non-touch platforms will have Add, Edit, Reorder, and Delete function disabled. If this functionality is required, developers will need to expose this functionality to end users by themselves.
Image: TreeView in Traverse and Interactive Mode
The following table describes actions that are performed when the focus traversal is on a tree view and users press the following keys:
| Up | Move the focus traversal up. |
| Down | Move the focus traversal down. |
| Left | Move the focus traversal left. |
| Right | Move the focus traversal right. |
| OK/Select | Switch the tree view to the "interactive" mode. |
Next tables describe actions that are performed when a tree view is in the "interactive" mode and users press the following keys:
| Up | Move the focus traversal up by one node. |
| Down | Move the focus traversal down by one node. |
| Left | Collapse current selection or go to the parent node. |
| Right | Expand current selection or go to the first child node. |
| OK/Select | Select the node and switch the tree view to the "traverse" mode. |
TreeView is the sole node in a container
| Up | Move the focus traversal up by one node. |
| Down | Move the focus traversal down by one node. |
| Left | Collapse current selection or go to the parent node. |
| Right | Expand current selection or go to the first child node. |
| OK/Select | Select the node. |
4. Appendix
A. Glossary
Common terms used by the JavaFX UI controls are defined once for all controls. See the JavaFX UI Controls - Common Glossary for details.
B. Gesture Definitions
Gestures used by the JavaFX UI controls are defined in one place for all controls. See the JavaFX UI Controls - Gesture Definitions for details.
C. Input Mechanisms
Input Mechanisms used by the JavaFX UI controls are defined in one place for all controls. See the JavaFX UI Controls - Input Mechanisms for details.
D. Examples
...
Overview
Content Tools