Dansoftowner/DockSystemFX

Create advanced javaFX GUIs easily with this library!

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.

Selecting the view mode

Selecting the positions

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

Dansoftowner / DockSystemFX