JavaFX - navigation panel

Question

i am trying to make a navigation panel sliding out from left side. I have managed an animation already but i cannot solve one thing and that is green empty space left in left area of the program's window. Does anyone have an idea how to get rid of the green space on the left? Thanks

My code looks like this (just copy and paste, it should work)

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application
{
    BorderPane slider;
    BorderPane mainPane;
    Rectangle clip;
    Button show;
    boolean displayed;

    @Override
    public void start(Stage primaryStage) throws Exception {
        show = new Button("Press");
        displayed = false;
        mainPane = new BorderPane();
        mainPane.setPrefSize(500,200);
        slider = new BorderPane(); slider.setPrefHeight(200);
        mainPane.setStyle("-fx-background-color: chartreuse");
        slider.setStyle("-fx-background-color: aqua");

        clip = new Rectangle(0,200);
        slider.setPrefWidth(0);

        slider.setClip(clip);
        slider.setCenter(new Button("Hello"));
        mainPane.setTop(show);
        mainPane.setCenter(new TextArea("some text"));
        mainPane.setLeft(slider);
        show.setOnAction(event -> {
            if (displayed)
            {
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), -100);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 0);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 0);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = false;
            }
            else
            {
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), 0);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 100);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 100);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = true;
            }
        });

        Scene sc = new Scene(mainPane);
        primaryStage.setScene(sc);
        primaryStage.show();
    }
}

Answer 1

I know this is an old thread, but there is a great JavaFX library available that would help here: controlsFX. In particular the HiddenSidesPane Control object.

Answer 2

You can add the slider (left child of the mainPane) when you are press on the button instead of adding it before hand. Then, when you press the button again, you can remove the slider after the transition is completed.

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application
{
    BorderPane slider;
    BorderPane mainPane;
    Rectangle clip;
    Button show;
    boolean displayed;

    @Override
    public void start(Stage primaryStage) throws Exception {
        show = new Button("Press");
        displayed = false;
        mainPane = new BorderPane();
        mainPane.setPrefSize(500,200);
        slider = new BorderPane();
        slider.setPrefHeight(200);
        mainPane.setStyle("-fx-background-color: chartreuse");
        slider.setStyle("-fx-background-color: aqua");

        clip = new Rectangle(0,200);
        slider.setPrefWidth(0);

        slider.setClip(clip);
        slider.setCenter(new Button("Hello"));
        mainPane.setTop(show);
        mainPane.setCenter(new TextArea("some text"));
        show.setOnAction(event -> {
            if (displayed) {
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), -100);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 0);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 0);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = false;
                tm.setOnFinished(e -> mainPane.setLeft(null));
            } else {
                mainPane.setLeft(slider);
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), 0);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 100);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 100);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = true;
            }
        });

        Scene sc = new Scene(mainPane);
        primaryStage.setScene(sc);
        primaryStage.show();
    }
}

You can also re-use the timline instead of creating a new one every time :)