ComboBox
Tags: java, programming, learning, beginners
Published: 2024-06-27 18:31:19

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkx8eiet1zmkwduz4042.png)

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");`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rzk39xo0h2i7zrts3xs.png)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omptlfbp7tewtzudn1nc.png)

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](https://dev.to/paulike/textarea-4fb4), 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).