JavaFX | Using JavaFX UI Controls | Working With Checkboxes

Checkbox

The CheckBox class provides support for creating checkbox buttons in your application. Although checkboxes look similar to radio buttons, they cannot be combined into toggle groups, which enable the selection of many options at one time (see Radio Button and Toggle Button for more information). An entry-level task is to implement two checkboxes as follows.

Source Code

import javafx.scene.control.CheckBox;
import javafx.scene.layout.HBox;

HBox {
    spacing: 10
    content: [
        CheckBox {
            text: "Option1"
            selected: true
        }
        CheckBox {
            text: "Option2"
        }
    ]
}

The text instance variable defines the text caption of the checkbox, while the selected variable is set to true so that the button is selected when the application is launched.

The checkbox can be either defined or undefined. When it is defined, you can select or deselect it, though when the checkbox is undefined, it cannot be selected or deselected. Therefore, you can distinguish three states of a checkbox. Use a combination of the selected and defined Boolean instance variables of the CheckBox class to specify a state of the checkbox.

Three states of a check box

The allowTriState instance variable determines whether the control should cycle through all three states: selected, deselected, and undefined. If the variable is true, all three states will be cycled. If it is false, only the selected and deselected states will be cycled. The following application constructs three checkboxes enabling only two states for them. If a checkbox is selected, the corresponding icon appears in a toolbar.

Check Box Sample

Take a moment to study the source code of the application.

Source Code

package checkboxsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.control.CheckBox;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.layout.Stack;
import javafx.geometry.Insets;
import javafx.geometry.VPos;

def items = ["Security", "Project", "Chart"];
var ch = for (item in items) CheckBox { text: item };
var hb = HBox { };
def images = for (item in items) Image { url: "{__DIR__}{item}.png" };

Stage {
    title: "Check Box Sample"
    scene: Scene {
        width: 200
        height: 100
        fill: Color.rgb(225, 255, 250)
        content: [
            HBox {
                padding: Insets { left: 5 top: 5 }
                spacing: 20
                content: [
                    VBox {
                        spacing: 10
                        content: [ch]
                    },
                    Stack {
                        nodeVPos: VPos.TOP
                        content: [
                            Rectangle {
                                width: 90
                                height: 30
                                fill: Color.rgb(41, 41, 41)
                                arcWidth: 10
                                arcHeight: 10
                            },
                            hb = HBox {
                                padding: Insets { left: 5 right: 5 }
                                content: for (item in items) [
                                        ImageView {
                                            image: images[indexof item]
                                            preserveRatio: true
                                            visible: bind ch[indexof item].selected
                                        }
                                    ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

In this application, the checkboxes are created within a cycle construction. The visible variable of the ImageView object is bound to the selected instance variable of the corresponding checkbox. You can visually enhance this application by applying CSS styles or by adding effects. Recall that the CheckBox class is yet another extension of the Labeled class, so you can add a graphic to its content.

You also might consider an enhancement to the application - adding the icons to the toolbar in an arbitrary order. To add this enhancement, you need to customize your checkbox by overriding the selected variable, as shown in the following code fragment.

Source Code

package checkboxadvancedsample;

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.image.*;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.layout.Stack;
import javafx.geometry.Insets;
import javafx.geometry.VPos;

def items = ["Security", "Project", "Chart"];
var hb = HBox { padding: Insets { left: 5 right: 5 } };
def images = for (item in items) Image { url: "{__DIR__}{item}.png" };

var ch = for (item in items) CheckBox {
                text: item
                var node = ImageView { image: images[indexof item] }
                override var selected on replace  {
                    if (selected) {
                        insert node into hb.content
                    } else {
                        delete node from hb.content
                    }
                }
};

Stage {
    title: "Check Box Sample"
    scene: Scene {
        width: 200
        height: 100
        fill: Color.rgb(225, 255, 250)
        content: [
            HBox {
                padding: Insets { left: 5 top: 5 }
                spacing: 20
                content: [
                    VBox {
                        spacing: 10
                        content: [ch,]
                    },
                    Stack {
                        nodeVPos: VPos.TOP
                        content: [
                            Rectangle {
                                width: 90
                                height: 30
                                fill: Color.rgb(41, 41, 41)
                                arcWidth: 10
                                arcHeight: 10
                            },
                            hb
                        ]
                    }
                ]
            }
        ]
    }
}

An image icon is added to the content of the HBox object if the corresponding checkbox is selected. If a checkbox is subsequently deselected, the icon is removed from the HBox object. This logic populates the toolbar with the icons in an arbitrary order.

Adding icons to the toolbar in an arbitrary order

You can enhance this application by applying transformations, animated transitions, or effects available in the JavaFX API.

Checkbox

Related Documents

Samples That Use Checkboxes