How to use the JavaFX MenuButton | 100% Perfect Tutorial

JavaFX MenuButton is very useful when you have a list of items similar to JavaFX ComboBox. A MenuButton in JavaFX appearance is like a button and executes like a menu. It shows the selection in a pop-up menu when the menu button is executed by clicking the MenuButton. We need to use the MenuItems to add a selection of items to the JavaFX MenuButton. MenuItems should have an Action Event handler to add functionality to the lists of items.

In this article, you will learn the basics of how to use the JavaFX MenuButton and I will give a few examples to show you how to use the MenuButton control like creating the node, displaying it on the scene, and more. Please continue reading to learn more in this tutorial, which is perfect for beginners.

How to use the JavaFX MenuButton

To use the JavaFX MenuButton, we need to create the object of the MenuButton class. Once the node is created we can add items to it using the MenuItem class and display the MenuButton in the scene. The following examples below will teach you how to use the MenuButton. The first example will be creating the MenuButton and displaying it in the scene.

Create the JavaFX MenuButton

Creating the MenuButton in JavaFX is very easy. You need to instantiate the MenuButton constructor and follow the code snippet below to learn more.

// This is how to create the MenuButton in JavaFX
MenuButton mButton = new MenuButton("Learn more");

The next step is to add items to the JavaFX MenuButton and display the MenuButton on the scene, and you also need to have a layout in JavaFX. To do this, follow the given code snippet below.

VBox root = new VBox();
Scene scene = new Scene(root, 400, 400);

MenuButton mb = new MenuButton("Click me to see the items");

MenuItem item1 = new MenuItem("Google");
MenuItem item2 = new MenuItem("Bing");
MenuItem item3 = new MenuItem("Yahoo");
MenuItem item4 = new MenuItem("Duckduck Go");


mb.getItems().addAll(item1,item2,item3,item4);

Output

Adding Action Event to the MenuItem

To make the JavaFX MenuButton event, you add the action event to the MenuItem. You can use Lambda expressions or anonymous inner class implementation. The code snippet below will show you how to add an event handler to the JavaFX MenuButton.

Lambda Expression

I will show you the difference between Lambda expression and anonymous inner class implementation, and the first one is the Lambda Expression.

item1.setOnAction(event ->{
    lbl.setText(item1.getText());
});

item2.setOnAction(event ->{
    lbl.setText(item2.getText());
});

item3.setOnAction(event ->{
    lbl.setText(item3.getText());
});

item4.setOnAction(event ->{
    lbl.setText(item4.getText());
});

Anonymous inner class

item1.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        lbl.setText(item1.getText());
    }
});

item2.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        lbl.setText(item2.getText());
    }
});

item3.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        lbl.setText(item3.getText());
    }
});

item4.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        lbl.setText(item4.getText());
    }
});

Add an Icon or Graphic to the MenuButton

If you are interested in how to add an icon to the MenuButton, this example will tell you how to set graphic to the JavaFX MenuButton. Proceed to the given code snippet below to learn more.

try {
    FileInputStream file = new FileInputStream("C:\\Users\\kensoft\\Desktop\\icon.png");
    Image image = new Image(file);
    ImageView iv = new ImageView(image);
    mb.setGraphic(iv);
} catch (FileNotFoundException e) {
    System.out.println("Not found");
}

Output

Setting styles or CSS

If you want your control to look better, you need to set the JavaFX MenuButton CSS and learn to use the JavaFX CSS, and implement this in your JavaFX application. The given example code below will show you the basic inline styling of your JavaFX application.

mb.setStyle("-fx-background-color: cyan; -fx-cursor: hand;");

Output

YouTube Video