MenuButton

📦 What is a MenuButton in JavaFX?

🧱 Simple Definition

A MenuButton is a button that shows a dropdown menu when you click it.

👉 It combines:

• A button
• A list of options (menu items)

🧠 How to think about it

Instead of having multiple buttons like:

• Light Theme
• Dark Theme
• Blue Theme

👉 You group them into one button → cleaner UI

⚙️ Structure (Concept)

A MenuButton has:

• Text (label) → what user sees
• MenuItems → options inside dropdown

🔹 Example Structure

MenuButton menu = new MenuButton("Select Theme");

MenuItem item1 = new MenuItem("Light");
MenuItem item2 = new MenuItem("Dark");

menu.getItems().addAll(item1, item2);

🔁 How it works

1. User clicks the MenuButton
2. A dropdown menu appears
3. User selects an option
4. That option triggers an action

⚡ Important Behavior

👉 The MenuButton itself is NOT the action

The action happens in:

MenuItem.setOnAction(...)

🔘 MenuButton vs Button

🔘 MenuButton vs ChoiceBox

👉 Important:

• ChoiceBox → selection
• MenuButton → actions

🧩 Real Example (Your Case)

You used:

<MenuButton text="Select Theme">

Inside it:

<MenuItem text="Dark Theme" onAction="#selectDarkTheme"/>

👉 When user clicks:

• "Dark Theme" → method selectDarkTheme() runs

⚠️ Common Mistake

Thinking this works:

menuButton.setOnAction(...)

❌ Wrong in most cases

✔️ Correct:

menuItem.setOnAction(...)

🎯 When to use MenuButton

Use it when:

• You have multiple related actions
• You want a clean UI
• You don’t need to store selection as a value

🔥 Summary

• MenuButton = button + dropdown menu
• Contains MenuItems
• Each item triggers its own action
• Used for grouped actions

📄 FXML Layout (UI Design)

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.MenuButton?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Label?>

<VBox fx:id="root"
      alignment="CENTER"
      spacing="20.0"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="org.example.demo.HelloController">

    <!-- Title -->
    <Label text="Choose a theme:"
           style="-fx-font-size: 18px;" />

    <!-- Dropdown Menu -->
    <MenuButton fx:id="themeButton"
                text="Select Theme">

        <items>
            <MenuItem text="Light Theme"
                      onAction="#selectLightTheme"/>

            <MenuItem text="Dark Theme"
                      onAction="#selectDarkTheme"/>

            <MenuItem text="Blue Theme"
                      onAction="#selectBlueTheme"/>
        </items>
    </MenuButton>

    <!-- Result Label -->
    <Label fx:id="resultLabel"
           text="No theme selected yet."
           style="-fx-font-size: 16px;" />

</VBox>

🧠 Explanation (FXML)

🔹 VBox (Root Container)

<VBox fx:id="root" alignment="CENTER" spacing="20.0">

• Layout that arranges elements vertically
• fx:id="root" → linked to controller
• alignment="CENTER" → everything centered
• spacing="20" → space between elements

🔹 Label (Title)

<Label text="Choose a theme:" />

• Just displays text
• Styled with bigger font

🔹 MenuButton (Dropdown)

<MenuButton fx:id="themeButton">

• Works like a dropdown button
• Contains menu items

🔹 MenuItem (Options)

<MenuItem text="Light Theme" onAction="#selectLightTheme"/>

• Each item triggers a method in controller
• #selectLightTheme → calls Java method

🔹 Result Label

<Label fx:id="resultLabel" />

• Used to display selected theme message
• Connected to controller

💻 Controller (Logic)

package org.example.demo;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.MenuButton;
import javafx.scene.layout.VBox;

public class HelloController {

    @FXML
    private VBox root;

    @FXML
    private MenuButton themeButton;

    @FXML
    private Label resultLabel;

    @FXML
    private void selectLightTheme() {
        root.setStyle("-fx-background-color: white;");
        resultLabel.setText("Light theme selected.");
        resultLabel.setStyle("-fx-text-fill: black; -fx-font-size: 16px;");
        themeButton.setText("Light Theme");
    }

    @FXML
    private void selectDarkTheme() {
        root.setStyle("-fx-background-color: #2b2b2b;");
        resultLabel.setText("Dark theme selected.");
        resultLabel.setStyle("-fx-text-fill: white; -fx-font-size: 16px;");
        themeButton.setText("Dark Theme");
    }

    @FXML
    private void selectBlueTheme() {
        root.setStyle("-fx-background-color: lightblue;");
        resultLabel.setText("Blue theme selected.");
        resultLabel.setStyle("-fx-text-fill: darkblue; -fx-font-size: 16px;");
        themeButton.setText("Blue Theme");
    }
}

🧠 Explanation (Controller)

🔹 @FXML Fields

@FXML private VBox root;
@FXML private MenuButton themeButton;
@FXML private Label resultLabel;

👉 These connect Java code with FXML

• root → main layout
• themeButton → dropdown button
• resultLabel → text display

🔹 Theme Methods

Each method is triggered when user selects a menu item.

🌞 Light Theme

root.setStyle("-fx-background-color: white;");

• Changes background to white

resultLabel.setText("Light theme selected.");

• Updates text

themeButton.setText("Light Theme");

• Updates button title

🌙 Dark Theme

root.setStyle("-fx-background-color: #2b2b2b;");

• Dark background

resultLabel.setStyle("-fx-text-fill: white;");

• White text for visibility

🔵 Blue Theme

root.setStyle("-fx-background-color: lightblue;");

• Blue background

🔁 Full Flow (Important)

1. User clicks MenuButton

2. Selects a theme

3. MenuItem triggers method

4. Method:

   • Changes background
   • Updates label text
   • Updates button text

⚠️ Notes

• You are using inline CSS (setStyle)
• Better in real apps → use external CSS file
• @FXML is required to link UI with controller

🔥 Summary

• FXML = UI structure
• Controller = logic
• MenuButton = dropdown
• MenuItem = triggers actions
• setStyle() = changes appearance