Javafx detachable pane system


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.

enter image description here

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

3/16/2014 4:03:57 AM

Accepted Answer

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.

enter image description here

11/11/2015 7:40:00 PM

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.

docked undocked

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();

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

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

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

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

        final Dialog dialog = new Dialog(stage);
        undockButton.setOnAction(actionEvent -> {

            dialog.setOnHidden(windowEvent -> {

    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");
            setX(parent.getX() + 50);
            setY(parent.getY() + 50);

        public void setContent(Node 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;");

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

            return pane;

    private static class Delta {
        double x, y;

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow