Javafx detachable pane system

Question

This is something I like that I have seen in a few different softwares. I don't know where it originates from or what it really is called but here is an example of the pane system in Visual Studio.

Note how I can easily attach the pane anywhere with ease. Is such a thing possible with Javafx?

Answer 1

I recognize this question is old but others may be interested to know. I created a lightweight docking library for JavaFX for both proprietary and non-proprietary uses under the LGPL license.

https://github.com/RobertBColton/DockFX

Answer 2

There is no built-in docking framework for JavaFX 8.

There are some 3rd party solutions such as Drombler FX. I haven't used any of them.

A simple home-built system to dock and undock panels is pretty easy to create, but a comprehensive system would be quite difficult. The following code is adapted from zonski's answer to a docking framework discussion is in the Oracle JavaFX forum threads.

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.*;

public class SimpleDocking extends Application {
    public void start(final Stage stage) throws Exception {
        final SplitPane rootPane = new SplitPane();
        rootPane.setOrientation(Orientation.VERTICAL);

        final FlowPane dockedArea = new FlowPane();
        dockedArea.getChildren().add(new Label("Some docked content"));

        final FlowPane centerArea = new FlowPane();
        final Button undockButton = new Button("Undock");
        centerArea.getChildren().add(undockButton);

        rootPane.getItems().addAll(centerArea, dockedArea);

        stage.setScene(new Scene(rootPane, 300, 300));
        stage.show();

        final Dialog dialog = new Dialog(stage);
        undockButton.disableProperty().bind(dialog.showingProperty());
        undockButton.setOnAction(actionEvent -> {
            rootPane.getItems().remove(dockedArea);

            dialog.setOnHidden(windowEvent -> {
                rootPane.getItems().add(dockedArea);
            });
            dialog.setContent(dockedArea);
            dialog.show(stage);
        });
    }

    private class Dialog extends Popup {
        private BorderPane root;

        private Dialog(Window parent) {
            root = new BorderPane();
            root.setPrefSize(200, 200);
            root.setStyle("-fx-border-width: 1; -fx-border-color: gray");
            root.setTop(buildTitleBar());
            setX(parent.getX() + 50);
            setY(parent.getY() + 50);
            getContent().add(root);
        }

        public void setContent(Node content) {
            root.setCenter(content);
        }

        private Node buildTitleBar() {
            BorderPane pane = new BorderPane();
            pane.setStyle("-fx-background-color: burlywood; -fx-padding: 5");

            final Delta dragDelta = new Delta();
            pane.setOnMousePressed(mouseEvent -> {
                dragDelta.x = getX() - mouseEvent.getScreenX();
                dragDelta.y = getY() - mouseEvent.getScreenY();
            });
            pane.setOnMouseDragged(mouseEvent -> {
                setX(mouseEvent.getScreenX() + dragDelta.x);
                setY(mouseEvent.getScreenY() + dragDelta.y);
            });

            Label title = new Label("My Dialog");
            title.setStyle("-fx-text-fill: midnightblue;");
            pane.setLeft(title);

            Button closeButton = new Button("X");
            closeButton.setOnAction(actionEvent -> hide());
            pane.setRight(closeButton);

            return pane;
        }
    }

    private static class Delta {
        double x, y;
    }

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

If you have extensive need for such a framework, you might want to look into the NetBeans platform, which is a Swing based framework into which you can embed JavaFX.