ComboBox

A combo box, also known as a choice list or drop-down list, contains a list of items from which the user can choose. A combo box is useful for limiting a user’s range of choices and avoids the cumbersome validation of data input. Figure below lists several frequently used properties and constructors in ComboBox. ComboBox is defined as a generic class. The generic type T specifies the element type for the elements stored in a combo box.

The following statements create a combo box with four items, red color, and value set to the first item.

ComboBox<String> cbo = new ComboBox<>();
cbo.getItems().addAll("Item 1", "Item 2",
"Item 3", "Item 4");
cbo.setStyle("-fx-color: red");
cbo.setValue("Item 1");

ComboBox inherits from ComboBoxBase. ComboBox can fire an ActionEvent. Whenever an item is selected, an ActionEvent is fired. ObservableList is a subinterface of java.util.List. So you can apply all the methods defined in List for an ObservableList. For convenience, JavaFX provides the static method FXCollections.observableArrayList(arrayOfElements) for creating an ObservableList from an array of elements.

The code below gives a program that lets the user view an image and a description of a country’s flag by selecting the country from a combo box, as shown in Figure below.

Here are the major steps in the program:

1. Create the user interface. Create a combo box with country names as its selection values. Create a DescriptionPane object. Place the combo box at the top of the border pane and the description pane in the center of the border pane.
2. Process the event. Create a handler for handling action event from the combo box to set the flag title, image, and text in the description pane for the selected country name.

package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;

public class ComboBoxDemo extends Application {
    // Declare an array of Strings for flag titles
    private String[] flagTitles = {"Canada", "China", "Denmark", "France", "Germany", "India", "Norway", "United Kingdom", "United States of America"};

    // Declare an ImageView array for the national flags of 9 countries
    private ImageView[] flagImage = {new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"), 
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/lo.jpg"),
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"),
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"),
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"),
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"),
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"),
            new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"), new ImageView("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"),};

    // Declare an array of strings for flag descriptions
    private String[] flagDescription = new String[9];

    // Declare and create a description pane
    private DescriptionPane descriptionPane = new DescriptionPane();

    // Create a combo box for selecting countries
    private ComboBox<String> cbo = new ComboBox<>(); // flagTitles

    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        // Set text description
        flagDescription[0] = "The Canadian national flag ...";
        flagDescription[1] = "Description for China ...";
        flagDescription[2] = "Description for Denmark ...";
        flagDescription[3] = "Description for France ...";
        flagDescription[4] = "Description for Germany ...";
        flagDescription[5] = "Description for India ...";
        flagDescription[6] = "Description for Norway ...";
        flagDescription[7] = "Description for UK ...";
        flagDescription[8] = "Description for US ...";

        // Set the first country (Canada) for display
        setDisplay(0);

        // Add combo box and description pane to the border pane
        BorderPane pane = new BorderPane();

        BorderPane paneForComboBox = new BorderPane();
        paneForComboBox.setLeft(new Label("Select a country: "));
        paneForComboBox.setCenter(cbo);
        pane.setTop(paneForComboBox);
        cbo.setPrefWidth(400);
        cbo.setValue("Canada");

        ObservableList<String> items = FXCollections.observableArrayList(flagTitles);
        cbo.getItems().addAll(items);
        pane.setCenter(descriptionPane);

        // Display the selection country
        cbo.setOnAction(e  -> setDisplay(items.indexOf(cbo.getValue())));

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane, 450, 170);
        primaryStage.setTitle("ComboBoxDemo"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

    /** Set display information on the description pane */
    public void setDisplay(int index) {
        descriptionPane.setTitle(flagTitles[index]);
        descriptionPane.setImageView(flagImage[index]);
        descriptionPane.setDescription(flagDescription[index]);
    }
}

The program stores the flag information in three arrays: flagTitles, flagImage, and flagDescription (lines 14–27). The array flagTitles contains the names of nine countries, the array flagImage contains image views of the nine countries’ flags, and the array flagDescription contains descriptions of the flags.

The program creates an instance of DescriptionPane (line 30), which was presented in the post, DescriptionPane.java. The program creates a combo box with values from flagTitles (lines 61). The getItems() method returns a list from the combo box (line 62) and the addAll method adds multiple items into the list.

When the user selects an item in the combo box, the action event triggers the execution of the handler. The handler finds the selected index (line 66) and invokes the setDisplay(int index) method to set its corresponding flag title, flag image, and flag description on the pane (lines 80–84).