Supported UI Controls in JavaFX 2

The classes to construct UI controls reside in the javafx.scene.control package of the API.

The list of UI controls includes typical UI components that you might recognize from your previous development of client applications in Java. However, the JavaFX 2 SDK introduces new Java UI controls, like TitledPane, ColorPicker, and Pagination.

Figure 1-2 shows a screen capture of three TitledPane elements with lists of settings for a social network application. The lists can slide in (retract) and slide out (extend).

Figure 1-2 Titled Panes

Description of "Figure 1-2 Titled Panes"

See the API documentation for the complete list of UI controls.

The UI control classes provide additional variables and methods beyond those of the Control class to support typical user interactions in an intuitive manner. You can assign a specific style to your UI components by applying Cascading Style Sheets (CSS). For some unusual tasks, you might need to extend the Control class to create a custom UI component, or use the Skin interface to define a new skin for an existing control.

Features and Effects

Because UI controls from the javafx.scene.control package are all extensions of the Node class, they can be integrated with the scene graph rendering, animation, transformations, and animated transitions.

Consider the task of creating a button, applying a reflection to it, and animating the button by altering its opacity from its maximum value to its minimum value.

Figure 1-3 shows three states of the button through the animation timeline. The left image shows the button when its opacity is set to 1.0, the central image shows the opacity set to 0.8, and the right image shows the opacity set to 0.5.

Figure 1-3 Animated Button

Description of "Figure 1-3 Animated Button"

By using the JavaFX APIs, you can implement this task with only a few lines of code.

Example 1-1 creates and starts an indefinite timeline, where within a key frame of 600 milliseconds the button's opacity changes from its default value (1.0) to 0.0. The setAutoReverse method enables the reverse order.

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.util.Duration;
import javafx.scene.control.Button;
import javafx.scene.text.Font;
import javafx.scene.effect.Reflection;

...
Button button = new Button();
    button.setText("OK");
    button.setFont(new Font("Tahoma", 24));
    button.setEffect(new Reflection());
 
final Timeline timeline = new Timeline();
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
final KeyValue kv = new KeyValue(button.opacityProperty(), 0);
final KeyFrame kf = new KeyFrame(Duration.millis(600), kv);
timeline.getKeyFrames().add(kf);
timeline.play();
...

You can also apply other visual effects that are available in the javafx.scene.effect package, such as shadow, lighting, or motion blur.

Styling UI Controls with CSS

You can customize the look of the built-in UI controls by defining your own Cascading Style Sheets (CSS). Using CSS in JavaFX applications is much the same as using CSS in HTML, because each case is based on the same CSS specification. The visual state of a control is defined by the .css file, as shown in Example 1-2.

/*controlStyle.css */
 
.scene{
    -fx-font: 14pt "Cambria Bold";
    -fx-color: #e79423;
    -fx-background: #67644e;
}
 
.button{
    -fx-text-fill: #006464;
    -fx-background-color: #e79423;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5;
}

You can enable the style in the application through the getStylesheets method of the Scene class, as shown in Example 1-3.

Scene scene = new Scene();
scene.getStylesheets().add("uicontrolssample/controlStyle.css");

Additionally, you define the style of a control directly in the code of your application by using the setStyle method. The -fx-base property defined for the toggle button in Example 1-4 overrides the corresponding properties defined in the .css file for all the controls added to the scene.

ToggleButton tb3 = new ToggleButton ("I don't know");
tb3.setStyle("-fx-base: #ed1c24;");

Figure 1-4 shows how the styled toggle button looks when it is added to the application.

Figure 1-4 Applying CSS Style to a Toggle Button

Description of "Figure 1-4 Applying CSS Style to a Toggle Button"

Charts

In addition to the typical elements of a user interface, JavaFX SDK provides prefabricated charts in the javafx.scene.chart package. The following types of charts are currently supported: area chart, bar chart, bubble chart, line chart, pie chart, and scatter chart. A chart might contain several series of data.

Figure 1-5 shows a pie chart of imported fruits.

Figure 1-5 Pie Chart

Description of "Figure 1-5 Pie Chart"

Unlike with other Java client toolkits, with the JavaFX SDK you can build such a chart in your application by adding just a few lines of code. You can also define various color schemes and styles, apply visual effects, process mouse events, and create animation.

See Using JavaFX Charts for more information about chart features and capabilities.

Integrating JavaFX 2 UI Controls in Swing

You can integrate JavaFX UI controls into existing Java client applications built on the Swing toolkit.

To integrate JavaFX content into a Swing application, use the following steps: 

1. Add all the JavaFX UI controls to the javafx.scene.Scene object one by one, within a layout container, or as a group.

2. Add the Scene object to the content of the Swing application.

If you need to place a single JavaFX 2 control in your existing Swing code, you must perform both of the preceding steps.

Even when they are integrated into a Swing application, the JavaFX 2 UI controls are still rendered by using the Prism graphical library and take full advantage of its advanced rendering capabilities.

See the JavaFX in Swing tutorial for more information about JavaFX and Swing interoperability.