30 UI Controls on the Embedded Platforms

Support for Touch-Enabled Devices

The JavaFX SDK introduces additional operational capabilities of UI controls for touch-enabled devices: gestures and touches. Gestures can be generated for both touchscreen and trackpad actions, but touches are delivered for touchscreen actions only. In the current release JavaFX SDK supports only a single-point touch and only swipe gestures.

See the chapter on working with events from touch-enabled devices in Handling Events for more information about handling gestures and touch events in JavaFX.

Virtual Keyboard

The virtual keyboard is a control that enables typing text on devices that lack a hardware keyboard. It operates the same way as any hardware keyboard except that numbers and symbols are located one tap away due to space constraints. Figure 30-1 shows an example of the virtual keyboard.

Figure 30-1 Virtual Keyboard

Description of "Figure 30-1 Virtual Keyboard"

The virtual keyboard is shown automatically when a text input field is in focus. Note that the control that is associated with the keyboard remains visible when the keyboard is displayed. There is no need to push the parent stage up. The keyboard slides in from the bottom area pushing the parent stage up in order to keep the control that the keyboard is associated with visible on the screen.

When the virtual keyboard appears, users can type a character by tapping the appropriate key. After that, character that is associated with the key is sent to the control. User can type alpha, numeric, and symbol characters. To switch between the keyboards, they need to use the ABC/!#123 key and the Shift key. To access less frequently used characters, users need to press the appropriate key for longer time and choose the target key from the pop-up menu, as shown in Figure 30-2.

Figure 30-2 Typing Less Frequently Used Characters

Description of "Figure 30-2 Typing Less Frequently Used Characters"

Table 30-1 lists possible navigating actions within the virtual keyboard on touch-enabled devices.

When UI interface of your application requires typing email address, URL, or only numeric symbols, you can set one of the alternative keyboard layouts. This setting is defined for a particular text control as shown in Example 30-1.

final TextField emailAddress = new TextField("myEmail@example.com");
text.getProperties().put("vkType", "email");

Currently, the vkType property supports the following values: numeric, url, email, and text. The last one corresponds to the default layout.

Figure 30-3 shows the email layout of the keyboard. In addition to letters, number, and alternative symbols, the layout has "@" and ".com" (".org") keys that are particularly helpful for quick typing email addresses.

Figure 30-3 Email Layout of the Virtual Keyboard

Description of "Figure 30-3 Email Layout of the Virtual Keyboard"

The URL layout of the virtual keyboard, shown in Figure 30-4, does not have the Space key. Instead, it provides capabilities to type in "www." and "http//".

Figure 30-4 URL Layout of the Virtual Keyboard

Description of "Figure 30-4 URL Layout of the Virtual Keyboard"

In some UIs, users are supposed to enter only numbers. Figure 30-5 shows a simplified numeric layout of the virtual keyboard that implements this task. No Shift key, neither alternative symbols are available in this layout.

Figure 30-5 Numeric Layout of the Virtual Keyboard

Description of "Figure 30-5 Numeric Layout of the Virtual Keyboard"

Scrolling Controls

A scroll pane on a mobile touch platform performs scrolling as a result of touch gestures targeted on scroll view content. Scroll bars are hidden when the user is not interacting with the scroll pane, even if the content is bigger than the scroll pane. Scroll bars appear automatically after the touch gestures are performed, but only as an indicator of content size and position, not as an active control that the user uses for scrolling. When scroll bars appear, they overlap visible content and do not shift it like on the desktop platform, as shown in Figure 30-6.

Figure 30-6 Appearance of the Scroll Pane in Desktop and Embedded Environments

Description of "Figure 30-6 Appearance of the Scroll Pane in Desktop and Embedded Environments"

Scroll bars disappear automatically when the content stops scrolling.

Text Input Controls

On touch-enabled platforms, TextArea, TextField, and PasswordField are implemented as rectangular spaces where users can enter a single line or multiple lines of text. Interaction with text controls is similar for all platforms. However, for embedded environments, the caret is used to facilitate navigation and text selection. The virtual keyboard is used to enter characters into text controls.

Figure 30-7 shows the TextFieldSample application running on a touch-enabled platform. The caret indicates the place where a user enters the symbols with the help of the virtual keyboard. See the code at TextFieldSample.java.

Figure 30-7 Appearance of the TextField Control

Description of "Figure 30-7 Appearance of the TextField Control"

The virtual keyboard is shown automatically when a text input field is in focus and it reacts when devices are rotated. The virtual keyboard appears when users need to enter text into TextField, TextArea, PasswordField, and other UI controls if their edit state is enabled. To hide the keyboard, users can tap a Hide button or tap outside the control.

Context Menus

The default appearance of the context menu is changed for the embedded environments to provide the horizontal layout of the menu items.

The context menu is invoked when users tap and hold. If nothing is in the clipboard, then the context menu shows Select and Select All menu items. If something is in the clipboard, then the context menu looks as shown in Figure 30-8.

Figure 30-8 Appearance of a Context Menu

Description of "Figure 30-8 Appearance of a Context Menu"

If the text in the text control is selected, then the Cut, Copy, Paste, and Select All items are displayed, as shown in Figure 30-9.

Figure 30-9 Appearance of a Context Menu After Selection Is Performed

Description of "Figure 30-9 Appearance of a Context Menu After Selection Is Performed"

You can find another style sheet for the touch-enabled platforms in the JavaFX SDK. The embedded-qvga.css file defines the CSS styles for embedded devices that have QVGA screens. In particular, it specifies alternative padding for the TextField and TextArea controls.