How do I set up two vertical split panes so that dragging each will not affect the other?

Question

I am trying to set up a UI with three split panes. The first two are vertical panes, on the left and right side of the screen. One side of each split has a title pane. The user can select items from these panes to include in fields in the central pane. There is also a horizontal pane at the bottom that is not relevant to this question.

The user can open these side panes either by dragging the vertical dividers, or by clicking on the relevant toggle button (Films, Books etc.) to show that pane.

The issue I have is that I want to make it so that dragging one vertical divider does not move the other. However, since I cannot find a way to set this up without putting one of the vertical split panes into the other vertical pane, this always results in a situation where moving one of the dividers also moves the other. In the case of the below code for instance, moving the vertical divider for the left-hand (Films) split pane moves the right-hand vertical divider.

Can anyone help with this?

package pane2;

import javafx.event.EventHandler;
import javafx.geometry.Orientation;
import javafx.application.*; 
import javafx.beans.property.DoubleProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.stage.*; 
import javafx.scene.*; 
import javafx.scene.layout.*; 
import javafx.scene.control.*; 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TitledPane;
import javafx.scene.input.*;
import javafx.stage.Stage;

public class Pane2 extends Application {

SplitPane rightSplit;
DoubleProperty rightSplitDividerPos;
TitledPane books;
ToggleButton selectBooks;
VBox booksBox;
VBox centre;

SplitPane leftSplit;
DoubleProperty leftSplitDividerPos;
TitledPane films;
ToggleButton selectFilms;
VBox filmsBox;
VBox centreLeft;

SplitPane mainSplit;
DoubleProperty mainSplitDividerPos;
TitledPane arts;
ToggleButton selectArts;
VBox artsBox;

BorderPane root;


public static void main(String[] args) 
{ 
    launch( args); 
} 

 @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Test");

        //Create right-hand titled pane for the books list and centre it in Vbox
        books = new TitledPane();
        books.setText("Books");
        books.setMinWidth(0);
        booksBox = new VBox(0,books);

        //Create central pane and add toggle buttons to open hidden panes on the
        //left, right, and bottom (films, books, and arts respectively)
        selectBooks = new ToggleButton("Books");
        selectFilms = new ToggleButton("Films");
        selectArts = new ToggleButton("Arts");
        centre = new VBox(100,selectBooks,selectFilms,selectArts);
        centre.setPrefWidth(1300);
        centre.setPrefHeight(750);

        //Create split pane to divide the central pane and books list
        rightSplit = new SplitPane();
        rightSplit.getItems().addAll(centre,booksBox);

        //Create left-hand titled pane for the films list and centre it in VBox
        films = new TitledPane();
        films.setText("Films");
        films.setMinWidth(0);
        filmsBox = new VBox(0,films);

        //Create split pane to divide the films list and the central pane
        leftSplit = new SplitPane();
        leftSplit.getItems().addAll(filmsBox,rightSplit);

        //Create mainSplit pane
        arts = new TitledPane();
        arts.setText("arts");
        arts.setMinHeight(0);
        artsBox = new VBox(0,arts);
        mainSplit = new SplitPane();
        mainSplit.setOrientation(Orientation.VERTICAL);
        mainSplit.getItems().addAll(leftSplit,artsBox);

        root = new BorderPane();        
        root.setCenter(mainSplit);

      //Set divider positions for the three dividers
        rightSplitDividerPos = rightSplit.getDividers().get(0).positionProperty();
        rightSplitDividerPos.set(1.0);
        leftSplitDividerPos = leftSplit.getDividers().get(0).positionProperty();
        leftSplitDividerPos.set(0.0);   
        mainSplitDividerPos = mainSplit.getDividers().get(0).positionProperty();
        mainSplitDividerPos.set(1.0);   

        //Start up scene and stage
        Scene scene = new Scene(root);
            primaryStage.setScene(scene);
            primaryStage.setMaximized(true);
            primaryStage.show();

        //Event - if the books toggle button is selected, the left divider will
        //move to the right to show the books selection pane
        selectBooks.setOnAction(event -> {
                if(selectBooks.isSelected()){
                leftSplitDividerPos.set(0.15);
                }
                if(!selectBooks.isSelected()){
                leftSplitDividerPos.set(0.0);

                }else{

                }

        });

      //Event - if the films toggle button is selected, the right divider will
        //move to the left to show the films selection pane
        selectFilms.setOnAction(event -> {
            if(selectFilms.isSelected()){
                rightSplitDividerPos.set(0.8);
            }
            if(!selectFilms.isSelected()){
                rightSplitDividerPos.set(1.0);

            }else{

            }

        });

      //Event - if the arts toggle button is selected, the bottom divider will
        //move up to show the arts selection pane
        selectArts.setOnAction(event -> {
            if(selectArts.isSelected()){
                mainSplitDividerPos.set(0.75);
            }
            if(!selectArts.isSelected()){
                mainSplitDividerPos.set(1.0);

            }else{

            }

        });    

    }

}

Answer 1

do you really need 3 SplitPane in your layout? because i think you can achieve pretty much the same result with just 1 pane:

SplitPane split = new SplitPane();
VBox left = new VBox(new Label("left"));
left.setStyle("-fx-background-color: cadetblue");
VBox right = new VBox(new Label("right"));
right.setStyle("-fx-background-color: darkorange");
VBox center = new VBox(new Label("center"));
center.setStyle("-fx-background-color: darkgreen");
split.getItems().addAll(left, center, right);

split.setDividerPosition(0,1/(double)3);
split.setDividerPosition(1,2/(double)3);

Scene scene = new Scene(split, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();

Here is your code realated Example:

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("Test");

    //Create central pane and add toggle buttons to open hidden panes on the
    //left, right, and bottom (films, books, and arts respectively)
    ToggleButton selectBooks = new ToggleButton("Books");
    ToggleButton selectFilms = new ToggleButton("Films");
    ToggleButton selectArts = new ToggleButton("Arts");
    VBox centre = new VBox(100,selectBooks,selectFilms,selectArts);

    //Create left-hand titled pane for the films list and centre it in VBox
    TitledPane films = new TitledPane();
    films.setText("Films");
    VBox filmsBox = new VBox(films);

    //Create right-hand titled pane for the books list and centre it in Vbox
    TitledPane books = new TitledPane();
    books.setText("Books");
    VBox booksBox = new VBox(books);

    //Create mainSplit pane
    TitledPane arts = new TitledPane();
    arts.setText("arts");
    VBox artsBox = new VBox(arts);

    SplitPane mainSplit = new SplitPane();
    mainSplit.getItems().addAll(filmsBox, centre, booksBox);
    mainSplit.setDividerPosition(0,1/(double)12);
    mainSplit.setDividerPosition(1,11/(double)12);

    SplitPane root = new SplitPane();
    root.setOrientation(Orientation.VERTICAL);
    root.getItems().addAll(mainSplit, artsBox);
    root.setDividerPosition(0,0.9);
    root.setPrefWidth(1300);
    root.setPrefHeight(750);
    //Start up scene and stage
    Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.setMaximized(true);
    primaryStage.show();
}