Docking framework for JavaFX platform
AnchorFX is a gratis and open source library for JavaFX to create graphical interfaces with docking features
AnchorFX and its source code is licensed under the GNU Lesser General Public License version 3 and you can make adaptations of this work
Features
- Stations and sub stations support
- Dockable and floatable panels
- Splitter and Tabs containers support
- CSS styling
Usage
Create a DockStation
DockStation station = AnchorageSystem.createStation();
Once created the station, we can create the panels and hook them to the station
Create a DockNode
Pane myPanel...
DockNode dockNode = AnchorageSystem.createDock("My Title", myPanel);
dockNode.dock(station, DockNode.DOCK_POSITION.CENTER);
A DockNode is the window built around your panel. This window has a title and an icon and it can be defined as:
- Closeable
- Resizable
- Maximizable
- Floatable
If we want to create a node that can not be closed, we will write
dockNode.closeableProperty().set(false);
Get ower DockNode from content panel
To know the reference of DockNode that contains your panel, implements the DockNodeCreationListener interface in your panel.
class MyPanel extends Pane implements DockNodeCreationListener {
@Override
public void onDockNodeCreated(DockNode node) {
// now you can work with events of your DockNode
}
}
Add a DockNode to a Dockstation
To be visible, a node must be associated with a station. To do this procedure, we use the function dock (...) of DockNode
dockNode.dock(station, DockNode.DOCK_POSITION.CENTER);
In this case, the node will be added to the station in a central position. When a station is empty, the location will always be central, otherwise, will be taken the position provided and will be changed the layout
You may also add a node by specifying the percentage of placement of the divider. This percentage is only effective if the position is provided different from the central
dockNode.dock(station, DockNode.DOCK_POSITION.CENTER, 0.8);
Adding a node over another specific node
AnchorFX provides the possibility to add a node in a generic position respect to another node already present in the station. This feature lets you design a custom layout when your application starts
dockNode.dock(otherNode, DockNode.DOCK_POSITION.CENTER);
Create a DockSubStation
A Dock SubStation is a station that also has the functionality of DockNode The nodes that are associated with a DockSubStation can only be moved within the DockSubStation associated.
DockSubStation subStation = AnchorageSystem.createSubStation(station, "SubStation");
dockSubNode.dock(subStation, DockNode.DOCK_POSITION.CENTER);
subStation.dock(station, DockNode.DOCK_POSITION.LEFT,0.7);
Styling with AnchorFX.css
The file AnchorFX.css located within resource, defines a simple default style
.docknode-title-bar {
-fx-background-color: rgb(100,100,100);
}
.docknode-title-text{
-fx-text-fill: rgb(255,255,255);
}
.docknode-content-panel{
-fx-background-color: rgb(100,100,100);
-fx-padding: 0
}
.docknode-floating-stack-container-panel {
-fx-background-color: rgb(100,100,100);
-fx-padding: 4
}
.docknode-split-pane {
-fx-padding: 0;
}
.docknode-split-pane *.split-pane-divider {
-fx-padding: 2;
-fx-border-color:transparent;
-fx-color: darkgray;
}
.docknode-tab-panel{
-fx-padding: 0;
}
.docknode-command-button{
-fx-background-color:transparent;
-fx-background-radius: 0,0,0;
}
.docknode-command-button:hover{
-fx-background-color:darkgray;
}
.docknode-command-button:pressed{
-fx-background-color:darkgray;
}
.docknode-command-button:focused{
-fx-background-color:transparent;
}
.docknode-command-button-close{
-fx-background-color:transparent;
-fx-background-radius: 0,0,0;
}
.docknode-command-button-close:pressed{
-fx-background-color:red;
}
.docknode-command-button-close:hover{
-fx-background-color:red;
}
.docknode-command-button-close:focused{
-fx-background-color:transparent;
}
.station {
-fx-background-color: rgb(0,0,0);
-fx-padding: 0
}
.substation-title-bar {
-fx-background-color: rgb(0,0,0);
}
.substation-title-text{
-fx-text-fill: rgb(255,255,255);
}
.dockzone-circle-container-selectors {
-fx-fill: rgba(0,0,0,0.7);
}
.dockzone-circle-selector {
-fx-fill: rgba(0,0,0,0.8);
}
.dockzone-rectangle-preview {
-fx-fill: rgba(63,138,163,0.8);
}
Explore the examples on test package
The examples will use the functionality described
- AnchorFX_test.java
- AnchorFX_substations.java
- AnchorFX_settings.java
- AnchorFX_events.java
- AnchorFX_CommonStations.java
13 Apr 13, 2022
110 Dec 29, 2022
100 Dec 13, 2022
31 Dec 4, 2022
19 Jan 7, 2022
660 Jan 6, 2023
186 Jan 6, 2023
55 Feb 10, 2022
438 Dec 28, 2022
3.6k Dec 29, 2022
2.4k Jan 5, 2023
3 Jan 9, 2022
63 Nov 19, 2022
366 Jan 5, 2023
810 Dec 28, 2022
134 Jan 2, 2023