Working With Controls in JavaFX | JavaFX Tutorials and How-To's

How-To's > How do I work with controls?

You can create controls in the following ways:

Use built-in UI controls
Integrate Swing components
Create custom controls programmatically

Use Built-In UI Controls

Built-in UI controls are nodes with some extra properties.The following built-in control classes from the javafx.scene.control package can be used to create UI controls:

TextBox
Displays and accepts input of text. (TextBox API)
Button
Invokes a function when clicked. (Button API)
ToggleButton
A control with a Boolean variable indicating whether it has been selected. (ToggleButton API)
ToggleGroup
Manages a group of toggle buttons so that only one can be selected at a time. Unlike in the RadioButton class, having no toggle buttons selected is acceptable. (ToggleGroup API)
RadioButton
Requires one and only one state to be selected. (RadioButton API)
CheckBox
Has three states: checked, unchecked, undefined. (CheckBox API)
Hyperlink
Enables links to URLs. (Hyperlink API)
Slider
Enables the user to slide a control forward or backward to jump ahead or jump back in some way. (Slider API)
ProgressBar
Can indicate degree of progress or swish back and forth to indicate that progress is occurring. (ProgressBar API)
ProgressIndicator
Same functionality as the progress bar but with a circle instead of a bar. (ProgressIndicator API)
ListView
Items are displayed in a list box, from which the user can select. If the list exceeds a certain length, a scrollbar is displayed. (ListView API)
Label
A noneditable text control. Used as the label for the controls displayed in the screen capture. (Label API)
ScrollBar (not shown in screen capture)
A standard scrollbar that enables users to move the view. (ScrollBar API)
Keystroke (not shown in screen capture)
Invokes an event based on keystroke entry. (Keystroke API)

Examples of Built-In Controls

Building GUI Applications With JavaFX
Lesson 1: Quick JavaFX GUI Overview
Lesson 5: Applying Data Binding to UI Objects
These tutorial lessons provide an overview of the built-in UI controls plus basic examples of how to use them.
Powerful UI Capabilities With Node-Based Controls
Provides an overview of the built-in UI controls.
Revisiting Radio Buttons in Mobile Applications
Demonstrates how to use built-in UI controls in mobile applications, with specific information about how to use the RadioButton class.
Project Management System using JavaFX
Shows how to use all of the built-in UI controls except for the ListView control.
Utility Classes for Building JavaFX Applications
Provides an example of the built-in ListView control, plus a custom scrollbar that supports a mouse wheel.
JavaFX UI Controls
Provides a link to slides about the built-in UI controls from the JavaONE 2009 conference and describes some design decisions underlying the API.
Caspian Skin
Describes some of the design decisions underlying the built-in UI buttons.

Integrate Swing Components

You can add controls by integrating Swing components into your JavaFX application. See the following links for more information.

Using Custom Swing Components
This article describes how to integrate Swing components into a JavaFX application.
Insider's Guide to Mixing Swing and JavaFX
This blog describes how Swing components can be embedded in a JavaFX scene graph.

Create Custom Controls Programmatically

You can create custom controls by using either of the following approaches:

Extend CustomNode ( as the example shows)
Extend the Control class and provide a custom skin.

Both approaches can be customized by applying stylesheets. The following code fragment illustrates the first approach by creating a custom UI control with a label:

class MyControl extends CustomNode {

  var text: String;
  var control: Node[];
  override function create() {
    HBox {
      spacing: 5
      nodeVPos: VPos.CENTER
      content: bind [
        control,
        Label {
          text: text
          textFill: Color.WHITESMOKE
          font: Font {name: "Arial"}
        }
      ]
    }
  }
}

Consider how this customized control can be applied to create two radio buttons:

var toggleGroup = MyToggleGroup{};
var button1 = MyControl {
          content: RadioButton { toggleGroup: toggleGroup selected: true id: "Yes"}
          text: "Yes"
};

var button2 = MyControl {
          content: RadioButton { toggleGroup: toggleGroup selected: true id: "No"}
          text: "No"
};

When integrated into an application, this code fragment produces the following radio buttons.

For an example of creating controls by extending CustomNode, see the following link:

Sudoku with CSS
All of the UI components in this sample, including the buttons, are formatted with CSS. One button enables the user to toggle between two different color themes. In this sample, the buttons are created by extending the customNode class, not by using the built-in UI controls.

For an example of creating controls by extending the Control class, see the following link:

JavaFX: Building custom controls
This blog shows how to extend the Control, Skin, and Behavior classes to create custom controls.

FX

How-To's > How do I work with controls?

Use Built-In UI Controls

Examples of Built-In Controls

Integrate Swing Components

Create Custom Controls Programmatically

API Documentation

Related How-To Topics