Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 233
JimmyD Avatar asked Jun 09 '16 09:06

JimmyD


People also ask

How to add button in tab pane JavaFX?

To have control Button s on the top-right corner of the tab-area: These buttons can be placed on the TabPane , rather than inside the TabPane . For this you can use an AnchorPane to anchor the Button s to the top-right corner. The only thing left to remove the default background and borders from the Button s.

How do you add tabs to a tab pane in Javafx?

Tabs are added to the TabPane by using the getTabs() . Tabs in a TabPane can be positioned at any of the four sides by specifying the Side . A TabPane has two modes floating or recessed.

How to add button in tab?

To add buttons to the tab, you will have to create a template and after you are done creating the template, you will have to write the code to display the button or other contents that you want to display in the template file.


1 Answers

To have iconed Buttons on the Tabs:

The setGraphic method of Tabcan be used to add any Nodeto be displayed on the Tab. A Button can be added as it is a Node.

After this a fully functional button is present, but it does not display any icon. Button also has the setGraphic method which works the same, therefore an ImageView can be added to display an Image on the Button.

To have control Buttons on the top-right corner of the tab-area:

These buttons can be placed on the TabPane, rather than inside the TabPane. For this you can use an AnchorPane to anchor the Buttons to the top-right corner.

Example:

public class ButtonedTabPane extends Application {
    @Override
    public void start(Stage primaryStage) {
        BorderPane root = new BorderPane();
        TabPane tabPane = new TabPane();
        tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);

        // HBox of control buttons
        HBox hbox = new HBox();
        hbox.getChildren().addAll(createTabButton("min.png"), createTabButton("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);

        // Create some tabs
        Tab tab = new Tab("Files");
        tab.setGraphic(createTabButton("files.png"));
        ((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the list of files!"));
        tabPane.getTabs().add(tab);

        tab = new Tab("Network");
        tab.setGraphic(createTabButton("network.png"));
        ((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the network!"));
        tabPane.getTabs().add(tab);

        root.setCenter(anchor);
        Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Button createTabButton(String iconName) {
        Button button = new Button();
        ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm(),
                16, 16, false, true));
        button.setGraphic(imageView);
        button.getStyleClass().add("tab-button");
        return button;
    }

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

The only thing left to remove the default background and borders from the Buttons. This can be done by inserting the following CSS selectors into your CSS stylesheet.

style.css

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

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

The result:

                     https://i.stack.imgur.com/olclI.png
like image 149
DVarga Avatar answered Oct 08 '22 17:10

DVarga