JimmyD JimmyD - 5 months ago 116
Java Question

Add Buttons to Tabs and Tab area JavaFX

I'm searching a way to add a Button to a JavaFX

Tab
.

Searched the internet for it but I can't find any solution for it.

Something like the buttons in the screenshot below.

Can someone help me with it?

enter image description here

Answer

To have your Tabs with iconed Buttons:

The class Tab has a method setGraphic that you can use with any Node to set what shall be displayed on the Tab. Therefore you can use a Button as it is also a Node.

After this you will have a fully functional button, but it will not display any Image as you need in the question. But the class Button also has the method setGraphic which works the same. Therefore you can use an ImageView to display an Image on your button.

To have control Buttons on the top-right corner:

You could try to not place these buttons inside the TabPane but on the TabPane. For this you can use an AnchorPane and anchor the button to the top-right.

An example:

Main.java

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root, 400, 400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            TabPane tabPane = new TabPane();

            // HBox of control buttons
            HBox hbox = new HBox();
            hbox.getChildren().addAll(createButton("min.png"), createButton("max.png"));

            // Anchor the controls
            AnchorPane anchor = new AnchorPane();
            anchor.getChildren().addAll(tabPane, hbox);
            AnchorPane.setTopAnchor(hbox, 3.0);
            AnchorPane.setRightAnchor(hbox, 5.0);
            AnchorPane.setTopAnchor(tabPane, 1.0);
            AnchorPane.setRightAnchor(tabPane, 1.0);
            AnchorPane.setLeftAnchor(tabPane, 1.0);
            AnchorPane.setBottomAnchor(tabPane, 1.0);

            for (int i = 0; i < 2; i++) {
                Tab tab = new Tab("Tab" + (i + 1));

                Button b = createButton("sign.png");

                b.setOnAction(e -> System.out.println("I am the button of " + tab.getText()));
                b.getStyleClass().add("tab-button");
                tabPane.getTabs().add(tab);
                tab.setGraphic(b);
            }

            root.setCenter(anchor);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private Button createButton(String iconName) {
        Button button = new Button();
        ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm()));
        imageView.setFitHeight(14);
        imageView.setFitWidth(14);
        button.setGraphic(imageView);
        button.getStyleClass().add("tab-button");
        button.setMinWidth(Region.USE_PREF_SIZE);
        return button;
    }

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

The only thing left to remove the default background and borders from the Button, this cal be done by inserting the following styles into your CSS stylesheet. (this line is already part of Main.java: b.getStyleClass().add("tab-button"); to add this style-class for the button)

application.css

.tab-button {
    -fx-border-color: transparent;
    -fx-border-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: transparent;
}

.tab-button:hover {
    -fx-background-color: white;
}

The result is this:

enter image description here