JavaFX TV Applications

The nature of the television platform affects the way you design effective user interfaces to run on it. This article describes some of the ways in which the television platform differs from the desktop platform and provides tips and guidelines for designing effective television applications. The article also provides some guidelines for moving applications written for the desktop platform to the television platform.

Applications Targeted to the TV Platform

There is a class of applications that is envisioned and authored from scratch for the TV platform. Such applications are intended to leverage the unique nature and strengths of this platform. (However, applications that were envisioned and authored for the desktop platform can often run on the JavaFX TV profile, as discussed in Migrating Desktop Applications to TV.)

The Electronic Program Guide

The classic "killer app" for the TV platform is the program guide (often called the electronic program guide, or EPG). Every cable set-top box or satellite television receiver integrates an EPG application.

Some hallmarks of an EPG are that it uses a substantial amount of screen real estate (usually the entire screen) and that it relies on a substantial quantity of data downloaded from the back end and stored locally. It also involves a significant amount of user interaction. With JavaFX technology, you can design an EPG that achieves a high level of visual appeal and integrates easily with other applications and services.

Java technology is well suited to provide an end-to-end EPG solution, connecting user interaction with back-end servers running Java Enterprise Edition.

Social Networking and Sports Broadcasting

Another fruitful domain for TV-centric applications might be the integration of social networking with live sports broadcasts. Fans currently watching a sporting event can be given the capability of chatting directly with other fans in real time. Or they might be given the opportunity to tie in live game action with fantasy teams of their own construction.

For avid sports fans, such a fantasy sporting application might be highly compelling. For example, in a fantasy football application, users can assemble and store their fantasy team rosters ahead of time. While watching a game broadcast during in the football season, real-time player statistics from all the games in the league can be assembled by a television carrier or service operator in back-end servers, and the game performance of the user's fantasy team can be calculated in real time. There can be real-time chat and commentary between connected users. A television carrier, service operator, or device manufacturer could charge for this interactive application as a premium service.

Again, Java technology is ideal for connecting with Java Enterprise Edition servers to provide an end-to-end solution. JavaFX is the best technology with which to program the user interface for the television platform.

Informative Widgets

Informative widgets provide another fertile area for well-targeted applications. Such widgets can be developed to monitor any number of events in real time: the local weather, airline flight information, sports scores, news headlines, stock prices, auction listings, and so on. Informative widgets can also be developed to notify users of incoming email or SMS messages while they watch television.

Programming for the JavaFX TV Profile

Programming for the JavaFX TV profile is very much like programming for the desktop JavaFX platform. The nature of the television platform, however, affects the way you design user interfaces. This section presents some guidelines and rules of thumb for programming for the JavaFX TV profile. It also describes some of the development limitations inherent in the TV platform and offers some guidance for dealing with them.

For convenience, a reference that lists and illustrates all the JavaFX TV controls is provided in JavaFX TV Controls.

Avoid Multiple Application Windows

Multiple stages in an application (implemented with the JavaFX Stage class) are not supported in the JavaFX TV profile. All stages are undecorated in this profile.

Use Large Font Sizes

The recommended minimum font size for television applications is 24 points. The font size must be 18 points or above.

Allow for All Television Display Modes

Ensure that your application renders well on all kinds of television screens. Make sure it can be easily laid out for different resolutions: Full HD (1920 by 1080 pixels), HD Ready (1280 by 720) pixels and (if possible) SD (standard definition, 720 by 480 pixels).

Use Large Size Controls

Make sure controls and other objects on the screen are clearly visible for a viewer sitting approximately ten feet away. (This distance is greater for larger television screens.) Because users are farther away from a television screen than they are from a desktop screen, the objects on the television screen must be larger than those on standard computer screens. A good guideline is to triple the size of lines when migrating an application from the desktop to the television environment.

Similarly, do not use thin lines when rendering shapes, especially if they contain curved or diagonal lines. These shapes do not display well on television screens when rendered with lines only a single pixel in width. You should override the shape's strokeWidth to set to a value larger than 1.0.

For these reasons, the size of the JavaFX controls is tripled in the TV profile, both in the X and Y dimension. This applies to every shape or line that is used to render a control. For example, a line in a control that is one pixel wide on the desktop profile is three pixels wide on the TV profile. This is implemented automatically through the CSS and does not require any additional work on your part.

Overscan

Be careful to avoid the edges of the display when laying out your applications. Make sure that your application draws all its content at least 5% away from the theoretical edge of the graphics plane.

Many TV displays employ overscan to avoid display anomalies at the edges of the screen. Some TVs can display the full graphics plane up to 5% off-screen. On displays that employ overscan, controls at the edges of the display are cut off. To complicate things further, the amount of overscan varies depending on the display.

The overscan consideration makes the MenuBar control difficult to use since menu bars are typically located at the upper left edge of the screen. You can use the MenuButton control as an alternative to provide menu functionality that can be placed away from the edge of the screen. Note that the MenuButton control is in the preview package for this release. Controls in the preview package have not been tested as thoroughly as the public controls and may change in future releases. For more information, see Public vs. Preview Controls.

User Navigation between Controls

Plan out the user's navigation between controls using the TV remote control. In the TV profile environment, users use the remote control buttons to navigate around the screen, both to move focus from control to control and to interact with the controls. Navigation between controls is accomplished with the left, right, up, and down arrow buttons, and selection is accomplished using the OK button. When a control receives focus, its border changes color.

In this initial release of the JavaFX TV platform, there are some limitations involving screen navigation that you must be aware of. These limitations exist in the default set of skins and might be addressed in future releases. Developers can provide custom skins that implement screen navigation differently.

Some of the controls also require navigation internally (for example, navigation to an item within a menu). This internal navigation is also accomplished using the remote control arrow buttons. Because the arrow buttons are used to navigate both between and within controls, there are some design limitations you must be aware of when you lay out your application.

In all but one of the controls that require internal navigation, navigation is limited to a single dimension—either up/down or left/right. The unused dimension is the exit route out of the control. By using the arrow keys in the unused dimension, the user can exit a control, and can then use the arrow keys to navigate to a neighboring control. For example, the Slider control knob can be moved along the track using only the left and right arrow buttons, and the user can use the up or down arrow buttons to exit the control. This table shows the controls that require internal navigation, along with their exit routes.

Controls That Require Internal Navigation and Their Exit Routes

Control	Status	Navigation Dimensions	Exit Route
ListView (horizontal)	Public	Left/Right	Up/Down
ListView (vertical)	Public	Up/Down	Left/Right
Multi-line TextBox	Public	Up/Down	Left/right
Slider	Public	Left/Right	Up/Down
ScrollView	Public	Up/Down/Left/Right	None. See The ScrollView Control for details.
TreeView	Private	Up/Down	Left/Right

When you lay out your user interface, be aware of the exit routes available between controls, and the way in which those routes affect the flow of navigation in your application. For example, you should not put a Slider or horizontal ListView control in a row of controls because the exit route is up or down. The controls directly adjacent in the horizontal direction would not be directly accessible.

Using the ScrollView Control

The ScrollView control is a special case because internal navigation within the control is available in both dimensions, leaving no exit route. For that reason, the ScrollView control is best used only in cases where you can fill the screen with one large ScrollView control. An example of this is a license agreement that the user scrolls through, and then clicks an OK or Cancel button at the bottom. It is impossible for the user to exit the ScrollView using the arrow keys on the remote control. The OK or Cancel button dismisses it.

Note that a Button or other control can be nested within a ScrollView control. Navigation between controls within a ScrollView control works the same as it does outside the ScrollView control—you move from one control to another by pressing the arrow buttons. The ScrollView control automatically scrolls to the control that gets focus. There is no built-in support for navigation to the controls inside of the ScrollView control. Once the ScrollView gets focus, application logic must change the focus to a control inside of the ScrollView.

Nesting

As is the case with the standard JavaFX platform, controls can theoretically be nested within each other. However, with the exception of limited nesting support in the ScrollView control, nesting is not explicitly supported in the TV profile and you should not expect defined behavior from the default traversal engine.

You can provide custom traversal handling as part of your application. Note, too, that non traversable controls (controls that never get focus) can be nested, because the traversal engine does not handle them.

Tooltips

Avoid using the ToolTip control. Although in theory this control is fully functional in the TV profile, in reality it cannot be used. Tooltips are available only when a pointer hovers above a control that does not have focus. This is possible only with a mouse-like pointer and so it does not work when navigating with a remote control.

Virtual Keyboard

Plan for using the virtual keyboard for text input. The JavaFX TV profile provides a virtual keyboard with which a user can enter text into text boxes using the television remote control. When the user navigates to a text box and presses the OK button, the virtual keyboard appears. The virtual keyboard is shown in the following figure. Note that the keyboard is available only in an English layout.

The JavaFX TV Virtual Keyboard

Migrating Desktop Applications to TV

There is no technical reason why a JavaFX application originally targeted to the desktop cannot be compiled and run on the TV profile. However, such an application must use only the common profile APIs and must work within the parameters of the television environment described previously in this article.

The common profile APIs of JavaFX include classes that apply to all the screens: desktop, mobile, and television. On the other hand, other JavaFX APIs have classes that take advantage of specific functionality that applies only to one of the screens, such as the desktop environment. This is the case for example, with Swing APIs and Applet based APIs. If you want to write an application that can run on all the screens, you should use only the common profile APIs whenever practical.

There are a number of factors that you should consider before migrating a desktop application to run on the TV profile. First, you need to consider the user interface. When built with the TV profile, the application automatically displays the GUI controls and fonts at a larger size, as appropriate for TV. You do not need to address the size of the controls and fonts in migrating an desktop application. Rather, you must consider whether to change the application to address such things as avoiding multiple application windows, positioning of controls away from the edges of the screen, traversal of controls by the user, and all of the topics covered above in Programming for the JavaFX TV Profile.

Widget-style Applications

In general, the best desktop applications for migration are limited-purpose widget-style applications that do not require extensive text input or user interaction. A widget is a lightweight application that typically does not require a large amount of screen area for its display. It can be quickly called up and dismissed or minimized. A widget is usually data-enabled. It might rely on a data feed via the internet (such as an RSS feed) or on metadata embedded in the broadcast stream.

Examples of widget-style applications are stock ticker, weather widget, news headlines, and so forth. This class of application is equally applicable to all three JavaFX screens: desktop, mobile, and TV. Several JavaFX widget-style applications are included with the samples in the JavaFX 1.3 release.

JavaFX TV Controls

The JavaFX platform provides a rich assortment of UI controls for creating graphical applications. All of these controls are available on the JavaFX TV profile. However, due to the nature of the television environment, their appearance as TV controls differs from that of the standard JavaFX platform controls. For more information about the standard JavaFX platform controls, see User Interface Controls Overview.

Cascading Style Sheets

The appearance of the TV controls is governed by a Cascading Style Sheet (CSS). The controls shown in Public Controls and Preview Controls reflect the default JavaFX TV look-and-feel. You are free to alter the appearance by changing the style sheet. See (JavaFX How-To's) for tutorials that show you how to use CSS and to create custom skins.

Public vs. Preview Controls

In the JavaFX TV 1.3 release, both public and preview controls in the common profile are available. Public controls have been thoroughly tested, and they are not expected to change significantly in the next releases. Preview controls are new controls being introduced in this release, and they have not been tested as thoroughly as the public controls. In addition, these controls might change in subsequent releases based on feedback from developers. As a general rule, you should be careful when using preview controls in your production products. The preview controls are available in the JavaFX SDK.

For more information about the preview controls in JavaFX 1.3, see UI Controls and CSS.

Public Controls

For convenience, this section lists and illustrates all the public controls that are available in JavaFX 1.3. The images show how these controls appear in the JavaFX TV profile.

• Button
• CheckBox
• ChoiceBox
• Hyperlink
• Label
• ListView (Horizontal)
• ListView (Vertical)
• PasswordBox
• ProgressBar
• ProgressIndicator
• RadioButton
• ScrollBar
• ScrollView
• Separator
• Slider
• Slider (With Ticks)
• TextBox (Single-Line)
• TextBox (Multi-Line)
• ToggleButton
• Tooltip

Button — various states

CheckBox — various states

ChoiceBox — various states

Hyperlink — various states

Label — various states

ListView (Horizontal) — various states

ListView (Vertical) — various states

PasswordBox — various states

ProgressBar — various states

ProgressIndicator — various states

RadioButton — various states

ScrollBar — various states

ScrollView — various states

Separator — various states

Slider — various states

Slider (With Ticks) — various states

TextBox (Single-Line) — various states

TextBox (Multi-Line) — various states

ToggleButton — various states

Tooltip control

Preview Controls

For convenience, this section lists and illustrates all the preview controls in the JavaFX 1.3 release that might be useful in programming for the JavaFX TV profile. The images show how the preview controls appear in this profile.

• Menu
• Menu Bar
• Menu Button
• Split Menu Button
• Tool Bar
• Tree View

Menu — various states

Menu Bar — various states

Menu Button — various states

Split Menu Button — various states

Tool Bar — various states

Tree View — various states