Author: Jindrich Dinga
1. Introduction
This document is the user specification for JavaFX controls for Embedded Touch Platforms. These platforms are specified as platforms with a 5-inch VGA screen (640x480px and 160DPI).
On touch platforms users use their finger(s) to interact with UI controls. This is in contrast with non-touch platforms where users navigate and interact with same UI controls by using a full or limited keyboard and/or pointing device, such as a mouse or remote control. In order to avoid erroneous actions, controls for touch platforms must be big enough to capture fingertip actions.
The following list shows controls that are planned to be supported on Embedded touch platforms.
- Button
- Chart (Line graph, Bar graph, Area)
- CheckBox
- ChoiceBox
- ComboBox
- Label
- ListView
- Pagination
- PasswordField
- ProgressBar
- ProgressIndicator
- RadioButton
- ScrollBar
- ScrollPane
- Separator
- Slider
- SplitPane
- TabPane
- TableView
- TextArea
- TextField
- TitledPane
- ToggleButton
- ToolBar
- Virtual Keyboard
Please note that on touch platforms, there are no keys that would move focus between controls. Because of that, it is recommended to not display the focus on touch platforms.
2. Controls for Embedded Touch Platforms
This chapter describes differences in behavior between controls for Desktop and Embedded touch platforms. In addition to that, it also contains the visual specification for each control listed here.
Button
There is no difference in behavior of buttons on Desktop and touch platforms. When tapped, buttons perform actions that are assigned to them.
Image: Button
The following table describes actions that are performed when users use the following gesture:
| Tap Button | Activate the button. |
Chart (Line Graph, Bar Graph, Area)
Charts on touch platforms behave same as on Desktop.
Image: LineChart
Image: BarChart
Image: AreaChart
CheckBox
There is no difference in behavior of check boxes on Desktop and touch platforms. When tapped, check boxes switch their settings.
Image: CheckBox
The following table describes actions that are performed when users use the following gesture:
| Tap CheckBox or its label | Switch the setting of the check box. |
ChoiceBox
There is no difference in behavior of choice boxes on Desktop and touch platforms.
When users tap a choice box, a list that allows users to see the choice box's values opens. Users can navigate within the list by moving their finger up or down or by tapping the scroll buttons (if available). To select a value, users must tap it. After that, the list is closed and the choice box displays the new value.
To close the list without selecting a value, users can tap outside the list.
Note that when the list is scrolling, users can tap anywhere to stop the scrolling.
Image: ChoiceBox
The following table describes actions that are performed when users use the following gestures:
Choice Box
| Tap ChoiceBox | Open the list of values. |
List Is Open
| Tap outside the list | Close the list. |
| Tap a value | Commit the value and close the list. |
| Tap a scroll button | Scroll the list. |
| Drag up | Scroll the list down. |
| Drag down | Scroll the list up. |
| Swipe up | Invoke accelerated scrolling and scroll the list down. |
| Swipe down | Invoke accelerated scrolling and scroll the list up. |
ComboBox
Again, there is no difference in behavior of combo boxes on Desktop and touch platforms, except that a virtual keyboard may appear when users interact with editable combo boxes.
When users tap a regular combo box, a list that allows users to see the combo box's values opens. Users can navigate within the list by moving their finger up or down. To select a value, users must tap it. After that, the list is closed and the combo box displays the new value.
Image: Regular ComboBox
On the other hand, when users tap the field in an editable combo box, a virtual keyboard appears allowing users to type characters. To display a list of combo box's values, users must tap the drop-down button. Similarly to the regular combo box, users can navigate within the list by moving their finger up or down. After tapping a value, the list is closed and the new value is displayed in the combo box.
Image: Editable ComboBox
To close the list without selecting a value, users can tap the regular combo box or the drop-down button in the editable combo box. In both versions of combo box control, users can also tap outside the list to close it.
Note that when the list is scrolling, users can tap anywhere to stop the scrolling.
The following table describes actions that are performed when users use the following gestures:
Regular Combo Box
| Tap ComboBox | Open/close the list of values. |
Regular Combo Box - List Is Open
| Tap outside the list | Close the list. |
| Tap a value | Commit the value and close the list. |
| Drag up | Scroll the list down. |
| Drag down | Scroll the list up. |
| Swipe up | Invoke accelerated scrolling and scroll the list down. |
| Swipe down | Invoke accelerated scrolling and scroll the list up. |
Editable Combo Box
| Tap the field | Place caret in the field. Invoke a virtual keyboard. |
| Tap the drop-down button | Open/close the list of values. |
Editable Combo Box - List Is Open
| Tap outside the list | Close the list. |
| Tap a value | Commit the value and close the list. |
| Drag up | Scroll the list down. |
| Drag down | Scroll the list up. |
| Swipe up | Invoke accelerated scrolling and scroll the list down. |
| Swipe down | Invoke accelerated scrolling and scroll the list up. |
Label
Label does not have any functionality on Desktop as well as on touch platforms.
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
ListView
ListView on Embedded touch platforms behaves same as ListView on Desktop platform. Users can interact with a list view by moving their finger up/down or left/right to scroll the list or by tapping an item to select it.
In ListView, application developers can choose between the following selection models: 1. no selection, 2. single selection, and 3. multiple selection. Since multiple selection is not well supported on touch platforms, application developers will need to somehow expose this functionality to end users, e.g. by adding check box controls next to each item.
When editing is enabled, users can use a virtual keyboard to update data in the list on Embedded touch platforms. On Desktop, users use Enter key to save changes and ESC to cancel changes. Since these keys are not available on touch platforms, application developers will need to expose Save and Cancel actions to end users by themselves.
Users can scroll the list view by swipe or drag gesture. When the drag gesture is used, the content scrolls continuously with it. When the content border reaches the list view border and the user continues to drag in that direction, the content moves further uncovering the list view background. When the user drops the content, it automatically and smoothly returns to the border of the list view.
Swipe gesture invokes accelerated scrolling with initial speed defined by the intensity of swipe gesture. The content scrolls in the swipe direction with the scrolling speed continuously decreasing after it has been released by swipe gesture until the content stops scrolling. When the content has been released and it reaches the border of the list view, it stops scrolling.
If the user swipes content beyond the list view border, it automatically returns to the list view border after it has been released by swipe gesture.
Note that when the list is scrolling, scroll bars appear to indicate the size of the content. At any time, users can tap anywhere to stop the scrolling. Also, when the content is not scrolling, scroll bars are hidden.
Image: ListView
The following table describes actions that are performed when users use the following gestures:
Vertical Orientation
| Tap an item | Select the item and/or activate the associated action. |
| Double tap an item | Edit the item (if allowed). Invoke the virtual keyboard. |
| Tap and hold | Invoke the pop-up menu, if available. |
| Drag up | Scroll the list down. |
| Drag down | Scroll the list up. |
| Swipe up | Invoke accelerated scrolling and scroll the list down. |
| Swipe down | Invoke accelerated scrolling and scroll the list up. |
Horizontal Orientation
| Tap an item | Select the item and/or activate the associated action. |
| Double tap an item | Edit the item (if allowed). Invoke the virtual keyboard. |
| Tap and hold | Invoke the pop-up menu, if available. |
| Drag left | Scroll the list right. |
| Drag right | Scroll the list left. |
| Swipe left | Invoke accelerated scrolling and scroll the list right. |
| Swipe right | Invoke accelerated scrolling and scroll the list left. |
Pagination
The functionality of a Pagination control on touch platforms stays same as on Desktop, except that on touch platforms users can use swipe gesture to switch pages.
When users interact with a page navigation control, they can tap a page button to open a page, tap Next/Previous button or use left/right swipe gesture to switch pages.
Image: Pagination
The following table describes actions that are performed when users use the following gestures:
| Tap a page button | Open selected page. |
| Tap Previous button | Open previous page. Pressing Previous button when the first page in a set is selected brings up previous set, if applicable, in which the last page is selected. |
| Tap Next button | Open next page. Pressing Next button when the last page in a set is selected brings up next set, if applicable, in which the first page is selected. |
| Swipe left | Open next page. Swiping from right to left when the last page in a set is selected brings up next set, if applicable, in which the first page is selected. |
| Swipe right | Open previous page. Swiping from left to right when the first page in a set is selected brings up previous set, if applicable, in which the last page is selected. |
PasswordField
PasswordField control behaves exactly same as TextField on touch platforms. There are two differences though: 1. password fields do not show characters, but mask them instead and 2. there is no support for text copy.
For details about behavior of a password field, see TextField control.
ProgressBar
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 touch platforms.
Image: ProgressBar
ProgressIndicator
Progress indicators are useful for communicating that a job is in-process. Even if progress indicators are occupied with buttons, there is no difference in behavior of progress indicators on Desktop and touch platforms.
Image: ProgressIndicator
RadioButton
There is no difference in functionality of radio buttons on Desktop and touch platforms. Users can tap the radio button or its label to switch it on.
Image: RadioButton
The following table describes actions that are performed when users use the following gesture:
Radio Button State: ON
| Tap RadioButton or its label | Do nothing. |
Radio Button State: OFF
| Tap RadioButton or its label | Set the radio button to ON. Set all other radio buttons that are in the same group to OFF. |
ScrollBar
In contrast to Desktop where users can interact with scroll bars, on touch platforms scroll bars appear solely as content size and position indicators. They are not active controls used for scrolling the content.
Image: ScrollBar
ScrollPane
There is no difference in functionality of scroll panes on Desktop and touch platforms, except that users use gestures to interact with the ScrollPane content.
When users interact with a scroll pane, scroll bars appear overlapping visible content. They disappear automatically when content stops scrolling. Note that scroll bars on touch platforms are not active controls used for scrolling the content, but serve as an indicator of content size and position. It means that when users do not interact with the scroll pane, scroll bars are not visible even if the content is bigger than the scroll pane.
As mentioned earlier, ScrollPane is controlled by touch gestures targeted on scroll view content. The applicable gestures are drag, swipe, and tap.
When dragging, the content scrolls continuously with drag gesture. When the content border reaches the scroll view border and the user continues to drag in that direction, the content moves further uncovering the scroll view background. When the user drops the content, it automatically and smoothly returns to the border of the scroll view.
Swipe gesture invokes accelerated scrolling with initial speed defined by the intensity of swipe gesture. The content scrolls in the swipe direction with the scrolling speed continuously decreasing after it has been released by swipe gesture until the content stops scrolling. When the content has been released and it reaches the border of the scroll view, it stops scrolling.
If the user swipes content beyond the scroll pane border, it automatically returns to the scroll pane border after it has been released by swipe gesture.
Note that when the list is scrolling, users can tap anywhere to stop the scrolling.
The following table describes actions that are performed when users use the following gestures:
| Drag | Scroll the content continuously following the drag gesture. The content moves exactly the amount of pixels indicated by drag gesture in vertical and horizontal direction. |
| Swipe | Invoke accelerated scrolling. The initial scrolling speed is defined by the swipe gesture intensity. It continuously slows down until it stops. |
Separator
Separators do not have any functionality on Desktop as well as on touch platforms.
Slider
There is no difference in behavior of sliders on Desktop and touch platforms.
When interacting with a slider control, users can tap the axis to change position of the knob, or tap, hold, and drag the knob to a new position on the axis. When users release their finger, the drag gesture is stopped and the position of the knob is preserved.
Image: Slider
The following table describes actions that are performed when users use the following gestures:
Horizontal Orientation
| Tap the axis | Change position of the knob. |
| Drag the knob | Move the knob into direction of the drag gesture (left or right). When released, stop moving the knob. |
Vertical Orientation
| Tap the axis | Change position of the knob. |
| Drag the knob | Move the knob into direction of the drag gesture (up or down). When released, stop moving the knob. |
SplitPane
There is no difference in functionality of SplitPanes on Desktop and touch platforms. Users can change position of a splitter by dragging it into a new position.
Image: SplitPane
The following table describes actions that are performed when users use the following gestures:
Horizontal Splitter
| Drag the splitter | Move the splitter into direction of the drag gesture (up or down). When released, stop moving the splitter. |
Vertical Splitter
| Drag the splitter | Move the splitter into direction of the drag gesture (left or right). When released, stop moving the splitter. |
TabPane
The functionality of TabPanes on touch platforms stays same as on Desktop.
When users interact with TabPanes, they can tap a tab to select it or tap the pop-up button and select a tab they want to switch to. Users can also swipe their finger left or right to switch between tabs. To close a tab, users can tap the close button, if available.
Image: TabPane
The following table describes actions that are performed when users use the following gestures:
| Tap a tab | Open selected tab. |
| Tap the close button | Close the tab. |
| Tap the pop-up button | Open the pop-up window. |
| Swipe left | If there is no content that could scroll, select next tab (switch contents with an animation). |
| Swipe right | If there is no content that could scroll, select previous tab (switch contents with an animation). |
TableView
Again, there is no difference in functionality of TableViews on Desktop and touch platforms.
Similarly to the desktop version, on touch platforms users are allowed to resize the column by dragging its border to left or right. When their finger is released, new size of the column is preserved. When rearranging columns, users can drag a column to a new location. Again, when they release their finger, new position of the column is preserved.
In contrast to Desktop, on touch platforms users are allowed to sort data only in one column by tapping its header (multiple column sorting on touch platform is not supported).
TableView control allows users to select a single cell/row and multiple cells/rows by tap gesture. Since multiple selection modes (cell and row) are not well supported on touch platforms, application developers are responsible for exposing this functionality to end users, e.g. by placing check box controls in each cell/row, if this functionality is needed.
When cell editing is enabled, users can use a virtual keyboard to update data in a cell on Embedded touch platforms. On Desktop, users use Enter key to save changes and ESC to cancel changes. Since these keys are not available on touch platforms, application developers will need to expose Save and Cancel actions to end users by themselves.
When users move their finger up/down/left/right, the content scrolls in the direction of the finger.
When the drag gesture is used, the content scrolls continuously with it. When the content border reaches the table view border and the user continues to drag in that direction, the content moves further uncovering the table view background. When the user drops the content, it automatically and smoothly returns to the border of the table view.
Swipe gesture invokes accelerated scrolling with initial speed defined by the intensity of swipe gesture. The content scrolls in the swipe direction with the scrolling speed continuously decreasing after it has been released by swipe gesture until the content stops scrolling. When the content has been released and it reaches the border of the table view, it stops scrolling.
If the user swipes content beyond the table view border, it automatically returns to the table view border after it has been released by swipe gesture.
Note that when the table is scrolling, scroll bars appear to indicate the size of the content. At any time, users can tap anywhere to stop the scrolling. Also, when the content is not scrolling, scroll bars are hidden.
Image: TableView
The following table describes actions that are performed when users use the following gestures:
Column Header
| Tap Show/Hide Column | Display the pop-up menu. |
| Tap Column's Header | Sort data in the column. |
| Drag Column's Header | Rearrange the column. |
| Drag Column's Border | Change size of the column. |
Content
| Tap a cell | Select/perform an action. |
| Double tap a cell | Edit the cell (if allowed). Invoke the virtual keyboard. |
| Drag up | Scroll the table down. |
| Drag down | Scroll the table up. |
| Drag left | Scroll the table right. |
| Drag right | Scroll the table left. |
| Swipe up | Invoke accelerated scrolling and scroll the table down. |
| Swipe down | Invoke accelerated scrolling and scroll the table up. |
| Swipe left | Invoke accelerated scrolling and scroll the table right. |
| Swipe right | Invoke accelerated scrolling and scroll the table left. |
TextArea
Note that design of this control is addressed in the following UE Specification.
TextField
Note that design of this control is addressed in the following UE Specification.
TitledPane
There is no difference in functionality of Titled Panes on Desktop and touch platforms.
When interacting with TitledPanes on touch platforms, users simply tap the title of the pane to expand or collapse the pane.
Image: TitledPane
The following table describes actions that are performed when users use the following gestures:
| Tap the title | Expand/collapse the pane. |
ToggleButton
There is no main difference in behavior of buttons on Desktop and touch platforms. When tapped, the buttons perform actions that are assigned to them.
Image: ToggleButton
The following table describes actions that are performed when users use the following gesture:
| Tap | 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. |
ToolBar
The functionality of ToolBars on touch platforms stays same as on Desktop.
Since users do not interact with ToolBars, but controls that are displayed in ToolBars, see appropriate chapters that describe behavior for these controls.
Image: ToolBar
TreeView 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, the expected interaction is mentioned here. Also note that this control may not be implemented due time and resource constraints.
Users can tap nodes to expand or collapse them. In addition, TreeView allows users to select none, single or multiple nodes. Note that multiple node selection is not well supported on touch platforms so application developers will need to somehow expose this functionality to end users, e.g. by adding a check box control next to each node.
When node editing is enabled, users can use a virtual keyboard to update data in a node on Embedded touch platforms. On Desktop, users use Enter key to save changes and ESC to cancel changes. Since these keys are not available on touch platforms, application developers will need to expose Save and Cancel actions to end users by themselves.
When users move their finger up/down/left/right, the content scrolls in the direction of the finger.
When the drag gesture is used, the content scrolls continuously with it. When the content border reaches the tree view border and the user continues to drag in that direction, the content moves further uncovering the tree view background. When the user drops the content, it automatically and smoothly returns to the border of the tree view.
Swipe gesture invokes accelerated scrolling with initial speed defined by the intensity of swipe gesture. The content scrolls in the swipe direction with the scrolling speed continuously decreasing after it has been released by swipe gesture until the content stops scrolling. When the content has been released and it reaches the border of the tree view, it stops scrolling.
If the user swipes content beyond the tree view border, it automatically returns to the tree view border after it has been released by swipe gesture.
Note that when the tree is scrolling, scroll bars appear to indicate the size of the content. At any time, users can tap anywhere to stop the scrolling. Also, when the content is not scrolling, scroll bars are hidden.
Image: TreeView
The following table describes actions that are performed when users use the following gestures:
| Tap a parent node | Expand/collapse the node. |
| Tap a leaf node | Select the node and/or perform the action that is associated with the node. |
| Tap and hold | Invoke the pop-up menu, if available. |
| Double tap a node | Edit the node (if allowed). Invoke the virtual keyboard. |
| Drag up | Scroll the content down. |
| Drag down | Scroll the content up. |
| Drag left | Scroll the content right. |
| Drag right | Scroll the content left. |
| Swipe up | Invoke accelerated scrolling and scroll the tree down. |
| Swipe down | Invoke accelerated scrolling and scroll the tree up. |
| Swipe left | Invoke accelerated scrolling and scroll the tree right. |
| Swipe right | Invoke accelerated scrolling and scroll the tree left. |
Virtual Keyboard
Note that design of this control is addressed in the following UE Specification.
Overview
Content Tools
ThemeBuilder