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

The JavaFX UI controls 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. The following screen capture shows the possible uses of UI Controls in your application.

All the classes that construct UI controls reside in the javafx.scene.control package:

• Label - Displays noneditable text in your application (The Label class API).
• Button - Implements a simple button functionality by invoking a function when clicked (The Button class API).
• Radio Button - Is a specialized implementation of the ToggleButton class. It can be either selected or deselected. Typically radio buttons are combined into a group where only one button at a time can be selected (The RadioButton class API).
• Toggle Button - Another type of button. Does not invoke an action function when clicked. It simply indicates whether it has been selected (The ToggleButton class API).
• Checkbox - Provides support for creating checkbox buttons in your application. Has three states: checked, unchecked, and undefined (The CheckBox class API).
• Choice Box - Is used for creating a list of choices and for constructing menus (The ChoiceBox class API).
• Text Box - A control that displays and accepts the input of text (The TextBox class API).
• Password Box - Implements a specialized text field that accepts a password entry (The PasswordBox class API).
• Scrollbar - Provides the ability to create scrollable panes and views (The ScrollBar class API).
• Scroll View - Creates a scrollable view of the UI controls (The ScrollView class API).
• List View - Represents a scrollable list of items (The ListView class API).
• Separator - Represents a horizontal or vertical separator line (The Separator class API).
• Slider - A control to display and interact with a range of numeric values (The Slider class API).
• Progress Bar - Visualizes the progress of a task as a completion bar (The ProgressBar class API).
• Progress Indicator - Visualizes the progress of a task in the form of a dynamically changing pie chart (The ProgressIndicator class API).
• Hyperlink - Another type of Labeled control, and it is used primarily for formatting text as a hyperlink (The Hyperlink class API).
• Tooltip - A common UI component that is typically used to display additional information about the UI control (The Tooltip class API).

There are a number of preview controls available in the com.javafx.preview.control package including Menu Bar, Tool Bar, Menu, Popup Menu,Tree View. See What's New in JavaFX 1.3 for more information.

Examples of Built-In Controls

• Using JavaFX UI Controls
  This tutorial gives you an overview of JavaFX UI controls, teaches you how to use them in your applications, and explains how you apply CSS styles to your user interface.
• 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.
• Project Management System using JavaFX
  Shows how to use the built-in UI controls.
• Localizing Your JavaFX Application
  Demonstrates how to create option buttons with icons by extending the CustomNode.

Integrate Swing Components

You can add controls by integrating Swing components into your JavaFX application. See Insider's Guide to Mixing Swing and JavaFX for more information. 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 the CustomNode or Control classes.
• Apply CSS styles and provide a custom skin.

The following code fragment illustrates the first approach by creating a custom UI control with an image.

class MyControl extends CustomNode {
    var button: Node[];
    var image: Image;
    override function create() {
        HBox {
            spacing: 5
            nodeVPos: VPos.CENTER
            content: bind [button, ImageView {image: image}]
        }
    }
}

 

This control can be used in your application to create radio buttons with icons.

Look at the code fragment that implements one of them.

MyControl {
    button: RadioButton {toggleGroup: toggleGroup value: "English"}
    image: Image {url: "{__DIR__}eng.jpg"}
}

 

Alternatively, you can use MyControl to create buttons with images.

The MyControl class in this application is instantiated as follows.

MyControl {
    button: Button {text: "Accept"}
    image: Image {url: "{__DIR__}ok.png"}
},
MyControl {
    button: Button {text: "Decline"}
    image: Image {url: "{__DIR__}not.png"}

 

For another example of creating controls by extending the CustomNode class, 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 using skins to customize the look of UI controls, see the following link:

• Style Editor
  This sample demonstrates how to use CSS to reskin controls to create a new look for different sizes of view screens, branding, or just plain fun.

API Documentation

• Control
• Skin

Related How-To Topics

• How do I create custom skins?
• How do I use CSS to style my UI?

Last Updated: May 2010
[Return to How-To's Home]

---