Как решить проблемы перекрытия элементов управления друг с другом, принадлежащих двум различным панелям

Question

Попытка сделать кнопку переключения, которая скрывает / показывает правое окно / панель. Вот демонстрационный пример:

package demoapp;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class DemoApp extends Application {

    private static final String styleHide = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 0 10 10 0;";
    private static final String styleShow = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 10 0 0 10;";
    private final double minWidth = 5;
    private final double maxWidth = 170;
    private boolean hidden = true;

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

    @Override
    public void start(Stage primaryStage) {
        BorderPane borderPane = new BorderPane();
        borderPane.setRight(getRightContent());

        VBox box = new VBox();
        box.setStyle("-fx-background-color: lightgray");
        box.setAlignment(Pos.CENTER_RIGHT);
        box.getChildren().add(new Label("Main Content"));
        box.getChildren().add(new Button("Button1"));
        borderPane.setCenter(box);

        StackPane root = new StackPane();
        root.getChildren().add(borderPane);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    private GridPane getRightContent() {

        final Button btn = new Button(" toggle button ");
        final GridPane pane = new GridPane();

        btn.setPrefHeight(40);
        btn.setFocusTraversable(false);
        btn.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent event) {
                toggleRightContent(btn, pane);
            }
        });

        toggleRightContent(btn, pane);

        Text txt = new Text("Right Content");
        txt.setWrappingWidth(maxWidth - 20);

        pane.setVgap(10);
        pane.setStyle("-fx-padding: 5; -fx-background-color: gray");
        pane.addColumn(0, btn, txt);

        return pane;
    }

    private void toggleRightContent(Button btn, Pane pane) {
        if (hidden) {
            btn.setTranslateX(-5);
            btn.setStyle(styleHide);
            pane.toBack();
            pane.setMaxWidth(maxWidth);
            pane.setMinWidth(maxWidth);
            pane.setPrefWidth(maxWidth);
        } else {
            btn.setTranslateX(-113);
            btn.setStyle(styleShow);
            pane.toFront();
            pane.setMaxWidth(minWidth);
            pane.setMinWidth(minWidth);
            pane.setPrefWidth(minWidth);
        }
        hidden = !hidden;
    }
}

Проблема в том, что эта кнопка переключения частично перекрывает Button1 в основном контенте и не позволяет ему нажимать на него. Это из-за pane.toFront(); кода выше. Если я удаляю эту строку, то на этот раз Button1 не позволяет нажимать кнопку переключения на ней.
Как я могу решить эту проблему? Или есть другие способы по-разному реализовать функциональность переключателя?
Спасибо.

Answer 1

Какую версию JavaFX вы используете?

С Java 2.1 (превью разработчиков) ваше приложение выглядит следующим образом:

ОБНОВЛЕНИЕ:

Вы поместили Button на правую панель, поэтому наличие ее впереди препятствовало получению событий на нижней панели.

Лучше поместить Button в root, чтобы она не зависела от панелей содержимого:

public class AccordionStyleButton extends Application {

    private static final String styleHide = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 0 10 10 0;";
    private static final String styleShow = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 10 0 0 10;";
    private final double minWidth = 5;
    private final double maxWidth = 170;
    private boolean hidden = true;

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

    private Pane root;

    @Override
    public void start(Stage primaryStage) {
        BorderPane borderPane = new BorderPane();
        root = new Pane();
        root.getChildren().add(borderPane);

        borderPane.prefWidthProperty().bind(root.widthProperty());
        borderPane.prefHeightProperty().bind(root.heightProperty());

        final Pane rightPane = getRightContent();
        borderPane.setRight(rightPane);

        VBox box = new VBox();
        box.setStyle("-fx-background-color: lightgray;");
        box.setAlignment(Pos.CENTER_RIGHT);
        box.getChildren().add(new Label("Main Content"));
        box.getChildren().add(new Button("Button1"));
        box.getChildren().add(new Button("Button2"));
        borderPane.setCenter(box);

        primaryStage.setScene(new Scene(root, 300, 250));

        final Button btn = new Button(" toggle button ");
        btn.setPrefHeight(40);
        btn.setFocusTraversable(false);
        btn.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent event) {
                toggleRightContent(btn, rightPane);
            }
        });

        root.getChildren().add(btn);
        toggleRightContent(btn, rightPane);

        primaryStage.show();
    }


    private GridPane getRightContent() {
        GridPane pane = new GridPane();

        Text txt = new Text("Right Content");
        txt.setWrappingWidth(maxWidth - 20);

        pane.setVgap(10);
        pane.setStyle("-fx-padding: 5; -fx-background-color: gray;");
        pane.addColumn(0, txt);

        return pane;
    }

    private void toggleRightContent(Button btn, Pane pane) {
        if (hidden) {
            btn.setStyle(styleHide);
            pane.setMaxWidth(maxWidth);
            pane.setMinWidth(maxWidth);
            pane.setPrefWidth(maxWidth);
            btn.layoutXProperty().bind(root.widthProperty().subtract(maxWidth));
        } else {
            btn.setStyle(styleShow);
            pane.setMaxWidth(minWidth);
            pane.setMinWidth(minWidth);
            pane.setPrefWidth(minWidth);
            btn.layoutXProperty().bind(root.widthProperty().subtract(minWidth).subtract(btn.widthProperty()));
        }
        hidden = !hidden;
    }
}