JavaFX CheckComboBox

Page Contents

JavaFX CheckComboBox is a special UI control provided by ControlsFX. It is used for giving option to users to select more than one item from a Combobox. It is an extremely useful component you can use to provide a rich user experience. In this tutorial, we will explore the component usage with an example and style it using CSS. The basic idea of this component is Checkbox + ComboBox so that ComboBox can have multiple parallel selections.

Adding ControlsFX to Project

Since the component is from ControlsFX library, you need to include the dependency on your project. If you are using the maven, add the dependency as follows.

<dependency>
  <groupId>org.controlsfx</groupId>
  <artifactId>controlsfx</artifactId>
  <version>11.1.1</version>
</dependency>

If you are using Gradle, add the following line to your build.gradle file.

implementation 'org.controlsfx:controlsfx:11.1.1'

How to use CheckComboBox

The usage of CheckComboBox is similar to the normal JavaFX ComboBox. You can create a list of item you want to add and then attach it to the CheckComboBox.
In the following example, we will make use of CheckComboBox to keep things simlpe. Let’s see the usage on a sample code.

//Reduced import code
import org.controlsfx.control.CheckComboBox;

public class JavaFXCheckComboBoxTutorial extends Application {

  private CheckComboBox<String> createCheckComboBox() {
    // Create the list of items to be shown on the combobox
    ObservableList<String> programmingLanguages = FXCollections.observableArrayList(
        "Java",
        "Cpp",
        "Python",
        "C#",
        "Kotlin"
    );
    // Attach the list to the Combobox
    CheckComboBox<String> checkComboBox = new CheckComboBox<>(programmingLanguages);
    //As soon as an item is selected or selection is changed, display all the selected items
    checkComboBox.getCheckModel().getCheckedItems().addListener(new InvalidationListener() {
      @Override
      public void invalidated(Observable observable) {
        System.out.printf("\nSelected items: %s", getSelectedItems(checkComboBox));
      }
    });
    return checkComboBox;
  }

  /**
   * Get the currently selected items from the CheckComboBox
   */
  private List<String> getSelectedItems(CheckComboBox<String> checkComboBox) {
    return checkComboBox.getCheckModel().getCheckedItems();
  }

  @Override
  public void start(Stage stage) {
    VBox contentPane = new VBox(10);
    contentPane.setAlignment(Pos.CENTER);
    contentPane.getChildren().addAll(new Label("CheckComboBox Example"), createCheckComboBox());

    Scene scene = new Scene(contentPane, 400, 500);
    stage.setScene(scene);
    stage.show();
  }

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

To get the list of selected items from the CheckComboBox, you can use

checkComboBox.getCheckModel().getCheckedItems()

It will return an ObservableList with all the selected items.

Customize CheckComboBox with CSS

Now, let’s see how to style the CheckComboBox with JavafX CSS styling. This component can be styled using combo-box-base CSS. By applying the following CSS, the CheckComboBox is customized with a lighter background.

You can use the same CSS you use for ComboBox to style CheckComboBox.

.combo-box-base {
  -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
  -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  -fx-background-radius: 3px, 3px, 2px, 1px;
}

.combo-box .combo-box-popup .list-cell:hover {
  -fx-text-fill: yellow ;
  -fx-background-color: green ;
}

.combo-box .combo-box-popup .list-view, .combo-box .combo-box-popup .list-cell {
  -fx-background-color: black ;
  -fx-text-fill: white ;
}

Conclusion

In this tutorial, we have discussed how to make use of the CheckComboBox in code and style it using CSS. ControlsFX has a lot of such useful extra components. You might also be interested to checkout the following articles.