Can't create dock layout containing 5 dock node in the position as shown in image.

I want to create the layout as shown in image: 2 Dock Node in upper portion of Dock Pane and 3 Dock Node in lower portion of Dock Pane.

Currently, I follow these steps to create this type of layout:
Step 1:
firstWebViewDock.dock(middleDockPane, DockPos.CENTER);
secondWebViewDock.dock(middleDockPane, DockPos.LEFT);
thirdWebViewDock.dock(middleDockPane, DockPos.RIGHT);
fourthWebViewDock.dock(middleDockPane, DockPos.TOP);
fifthWebViewDock.dock(middleDockPane, DockPos.TOP);

Step2:
I drag one of the top node to make it look as shown in image above.

I don't want to perform second step above. I want it to draw directly as shown.
what sequence should I follow in step 1 to make it as I want?

Hi @RobertBColton
I'm still stuck on this issue and it's really important for me to rectify because I'm using it in a client project and it needs to be done asap. I tried everything but couldn't make it work. Please do spare a min to share any workaround or any sort of help.
Awaiting for your reply.

My apologies, I forgot about this one. Did you try using setPrefSize like the demo does? If you set the top two with the same preferred width, then it should split them right down the middle during the initial layout.
https://github.com/RobertBColton/DockFX/blob/master/src/main/java/org/dockfx/demo/DockFX.java#L93

I'm sorry that I couldn't explain it well. My problem is not related to shifting slider's of split pane or setting pref width.
My problem is I can't create that layout with 5 nodes: 2 at upper side and 3 at lower side, without dragging some of the nodes using mouse. I don't want to use mouse to drag any node using mouse. I want this layout just by using code. The steps that I followed are:

Steps:

firstWebViewDock.dock(middleDockPane, DockPos.CENTER);
secondWebViewDock.dock(middleDockPane, DockPos.LEFT);
thirdWebViewDock.dock(middleDockPane, DockPos.RIGHT);
fourthWebViewDock.dock(middleDockPane, DockPos.TOP);
fifthWebViewDock.dock(middleDockPane, DockPos.TOP);

After following these steps, I got this:

but this is not what I want.
I want to rearrange these 5 dock nodes programmatically to look like the picture below:

I want to achieve this only by code. Please suggest something and let me know if you still have any doubt.

Sorry I could not get back to you right away, I had school work to do. I understand your problem now and was able to find the solution. You need to call an override of the dock method.

DockFX/src/main/java/org/dockfx/DockNode.java

Line 619 in d70a84d

/**

public void dock(DockPane dockPane, DockPos dockPos, Node sibling) {

I was able to recreate the layout you desire using this. Once you dock the three on the bottom and one on top, you want to dock the 5th one by passing the top one as the third argument to dock. Then you can position it relative to the top node.

This should do what you want:

firstWebViewDock.dock(middleDockPane, DockPos.CENTER);
secondWebViewDock.dock(middleDockPane, DockPos.LEFT);
thirdWebViewDock.dock(middleDockPane, DockPos.RIGHT);
fourthWebViewDock.dock(middleDockPane, DockPos.TOP);
fifthWebViewDock.dock(middleDockPane, DockPos.LEFT, fourthWebViewDock);