Some screenshots

Light style + JMetro's light style

Dark Style + JMetro's dark style

Features

• Supports 8 dock-positions:

  • TOP>LEFT
  • TOP>RIGHT
  • LEFT>TOP
  • LEFT>BOTTOM
  • RIGHT>TOP
  • RIGHT>BOTTOM
  • BOTTOM>LEFT
  • BOTTOM>RIGHT

• Supports 3 view modes:

  • PINNED - the dock-panel is docked normally inside the dock-system
  • FLOAT - the dock-panel is displayed inside a floating window
  • WINDOW - the dock-panel is displayed inside a normal window

• Supports internationalization

• Supports the javaFX CSS based styling

How to include it into your project

Using with Maven, Gradle etc...

Maven example:

Add JitPack.io to your repositories :

<repositories>
   <repository>
     <id>jitpack.io</id>
     <url>https://jitpack.io</url>
   </repository>
</repositories>

Add the dependency:

<dependency>
    <groupId>com.github.Dansoftowner</groupId>
    <artifactId>DockSystemFX</artifactId>
    <version>v1.0</version>
</dependency>

Gradle example

Add the repository:

repositories {
    //...
    maven { url 'https://jitpack.io' }
}

Add the dependency:

dependencies {
    //...
    implementation 'com.github.Dansoftowner:DockSystemFX:v1.0'
}

The structure of a DockSystem

The image below illustrates the structure of a DockSystem:

As you can see a DockSystem consists of two important parts:

• a DockFrame -> responsible for displaying BorderButtons on the edges
• a SplitPaneSystem -> responsible for displaying DockNodes

A DockSystem has a center area where the main content displayed. When all DockNode is closed, only this part is visible.

Creating a DockSystem object

To create a DockSystem we need to pass a type parameter that defines what kind of Node we want to display on the center area.

If we want to stay in general, we can do this:

DockSystem<Node> dockSystem = new DockSystem<>();

In this case we can display any type of Node object in the center:

dockSystem.setDockedCenter(new Button()); // OK
dockSystem.setDockedCenter(new Pane()); // OK
dockSystem.setDockedCenter(new BorderPane()); // OK 

But if we want to be more concrete, for example we can do this:

DockSystem<StackPane> dockSystem = new DockSystem<>();

In this case only StackPane objects can be displayed in the center:

dockSystem.setDockedCenter(new Button()); // ERROR
dockSystem.setDockedCenter(new Pane()); // ERROR
dockSystem.setDockedCenter(new StackPane()); // OK

You can also use the constructor for defining the center:

DockSystem<TabPane> dockSystem = new DockSystem<>(new TabPane());

DockNodes

A DockNode is a "tool window" that is displayed in a SplitPaneSystem.

A DockNode consists of two areas:

• a TitleBar -> displays the title, a button that calls the options-menu, and a hide button.
• an actual content -> it depends on you what it is

In a DockSystem every DockNode has a BorderButton that is displayed on the DockFrame. For example, if the title of a DockNode is "Tree", the BorderButton looks like this:

The menu can be called by right-clicking the BorderButton as well:

Using DockNodes in code

When we create a DockNode, we must specify the DockSystem and the title:

DockNode dockNode = new DockNode(dockSystem, "Tool window");

Optionally, you can specify the graphic (icon) of the DockNode too:

DockNode dockNode = new DockNode(dockSystem, "Tool window", new ImageView(new Image("path/to/your/icon")));

We should set the content of the DockNode:

dockNode.setContent(new Label("Content"));

We can specify the initial dock-position:

dockNode.setDockPosition(DockPosition.BOTTOM_RIGHT);

Now we can show it if we want:

dockNode.show();

Styling

Coming soon