JavaFX | Using JavaFX UI Controls | Working With Choice Boxes

Choice Box

The ChoiceBox class provides support for creating a list of choices and for constructing menus. Use the following code fragment to declare a simple choice box in your application.

Source Code

import javafx.scene.control.ChoiceBox;

ChoiceBox {
    items: ["First", "Second", "Third"]
}

The items instance variable defines the options or menu items of the choice box. You can distinguish the following states of the control.

Three states of a choice box

Two read-only variables of the ChoiceButton class can be used to identify which item was selected:

selectedIndex - Presents an Integer index of the selected item
selectedItem - Presents the selected Object

By default, the choice box is collapsed, and the first item is selected, which is reflected by the selectedIndex and selectedItem variables.

The following application constructs a multiple-choice box with five options. When a particular language is selected in the choice box, the corresponding greeting is shown.

Select a language

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

Source Code

package choiceboxsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.Tooltip;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.geometry.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;

def greetings = ["Hello", "Hola", "Привет", "餵", "こんにちは"];
var cb: ChoiceBox;

Stage {
    title: "Choice Box Sample"
    scene: Scene {
        width: 200
        height: 200
        content: [
            VBox {
                padding: Insets {top: 10 left: 10}
                nodeHPos: HPos.CENTER
                content: [
                    cb = ChoiceBox {
                        items: ["English", "Español", "Русский", "简体中文", "日本語"]
                        tooltip: Tooltip {text: "Your language"}
                    },
                    Stack {
                        content: [
                            Rectangle {
                                width: bind cb.width
                                height: 50
                                fill: Color.LIGHTSALMON
                                arcWidth: 8
                                arcHeight: 8
                                stroke: Color.DARKSALMON
                                strokeWidth: 4
                            },
                            Label {
                                text: bind greetings[cb.selectedIndex]
                                font: Font{size: 16}
                                hpos: HPos.CENTER
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

In this application, the Label object is used to render a greeting in the selected language. The text instance variable is bound to a String value that corresponds to the item selected from the choice box.

Source Code

Label { text: bind greetings[cb.selectedIndex]

You can enhance the application and use the selectedItem instance variable to perform a specific action when a particular item is selected.

Source Code

if (cb.selectedItem == "English")
    println("Find more tutorials at http://download.oracle.com/archive/cd/E17411_01/javafx/tutorials.html");

While reviewing the application's code, you might have noticed the tooltip applied to the choice box.

The tooltip is shown

The tooltip was created with the Tooltip class, a class that is used for showing additional information about a Control when the Control is hovered over by the mouse cursor.

Source Code

tooltip: Tooltip { text: "Select your language" }

The application shown uses the default look of the ChoiceBox and Tooltip controls. However, for your own application, you can customize the view of the controls by applying CSS styles or by using effects available in the javafx.scene.effect package. See Applying CSS to UI Controls for more information.

Samples That Use Choice Boxes

Style Editor

Choice Box

Related Documents

Samples That Use Choice Boxes