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.
Leave a Reply Cancel reply
You must be logged in to post a comment.