The JavaFX UI controls available through the JavaFX API are built by using nodes in the scene graph, and therefore they can take full advantage of the visually rich features of the JavaFX platform and be portable across profiles (including mobile and TV). This tutorial gives you a brief overview of the control functionality, teaches you how to use UI control classes in your JavaFX applications, and explains how you apply CSS styles to your user interface.

Supported UI Controls

The following application shows the UI controls that reside in the javafx.scene.control package of the JavaFX API.

This application uses the following classes of the javafx.scene.control package:

• Label
• Button
• RadioButton
• ToggleButon
• CheckBox
• ChoiceBox
• TextBox
• PasswordBox
• ScrollBar
• ScrollView
• ListView
• Separator
• Slider
• ProgressBar
• ProgressIndicator
• Hyperlink
• Tooltip

This tutorial covers the listed controls and introduces the code samples. Navigate through the topics in the table of contents to learn about features and behavior of each component.

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

Layout

The Container classes, such as HBox, Flow, or Tile, lay out nodes in JavaFX applications. While some scene graph nodes have a fixed size determined by their variables and are only positioned by layout containers, other nodes, including controls, are "resizable" and can be sized as well as positioned.

The Container classes attempt to set the size of any resizable children object to their preferred size, which has important implications when placing the UI controls inside containers. Each UI control class from the javafx.scene.control package has its own notion of its preferred size based on its content and its skin. Hence, if the application explicitly sets the width or height of a UI control and then places it inside a container, the container will resize the control to its preferred size, losing the application's width or height settings.

The preferred way to override the preferred size of a UI control is to use the layoutInfo variable (available on all nodes). The following code ensures that the HBox class resizes the button to the size preferred by the application, rather than the button's internal notion of its preferred size.

import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.LayoutInfo;

HBox{
    content:   
        Button {    
            layoutInfo: LayoutInfo { width: 150 }
        }              
}

Features and Effects

Because UI controls from the javafx.scene.control package are all extensions of the Node class, they are able to integrate with the scene-graph rendering, animation, transformations, and animated transitions.

Consider the simple task of rotating a button by using an indefinite timeline.

...

var angle: Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse: false
    keyFrames: [
        at (0s) {angle => 0.0},
        at (4s) {angle => 360.0}
    ]
}.play();

...

Button { 
    text: "OK" 
    translateY: 10 
    strong: true 
    font: Font{size: 10 name: "Tahoma"} 
    rotate: bind angle
}

The rotate instance variable of the button is bound to the angle variable, which changes from 0 to 360.

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

When developing your user interface with the JavaFX UI controls, you might consider the following sequence of steps:

• Analyzing the task of your application and defining the set of controls to use
• Designing the layout of your component by using the layout containers
• Adding UI controls to the content of the layout containers
• Resizing the controls, if needed
• Implementing transformations and animations for the controls, and adding visual effects
• Developing CSS styles and applying them to the controls
• Evaluating behavior on different platforms

For more information about particular classes, instance variables, and functions, see the API documentation.