Splitpane JavaFX: Text rendering on same level on both panes

Question

I am building a speech to text application. I am using a splitpane to display it. The left pane displays the dynamically changing speech to text information. The right pane displays a "yes/no" fixed text for each sentence spoken on left pane on the same level.

To ensure that the "Yes/NO" appears at the exact same level as the sentence on left pane I am adding the text on both the left and right panes to respective Hboxes(Splitpane_left_hbox(Speech to text sentence) and Splitpane_right_hbox ("Yes/No") ) whenever a new sentence is spoken.

The left and right boxes are placed in left_Vbox and right_vbox for the vertical rendering of speech to text sentences.

I am measuring the height of the Splitpane_left_hbox(containing the variable width speech to text sentences) to assign the same height to the Hbox on right. So that when a new sentence appears both the texts on Splitpane_left_hbox and Splitpane_right_hbox appear at the same level on a new line.

ISSUES:

1. The Splitpane_left_hbox.getHeight() returns 0.0 even though there is text in it.
2. This prevents me from setting a value to the Splitpane_left_hbox to position them at the same level.

Questions:

1. How do I get the final height of the Splitpane_left_hbox after the speech-to-text text has been added to it?

2. Is there a more efficient way to make these texts appear at the same level on both the panes?

FXML file:

<SplitPane fx:id="split_pane" dividerPositions="0.49613899613899615" prefHeight="497.0" prefWidth="1040.0">
     <items>
        <ScrollPane prefViewportHeight="341.0" prefViewportWidth="512.0">
           <content>
              <VBox fx:id="split_pane_1_Vbox" prefHeight="494.0" prefWidth="513.0">
                 <children>
                    <HBox fx:id="split_pane_1_hbox" fillHeight="false">
                       <children>
                          <Text fx:id="text_1" />
                       </children>
                    </HBox>
                 </children>
              </VBox>
           </content>
        </ScrollPane>
        <ScrollPane prefViewportHeight="341.0" prefViewportWidth="520.0">
           <content>
              <VBox fx:id="split_pane_2_Vbox" prefHeight="496.0" prefWidth="523.0">
                 <children>
                    <HBox fx:id="split_pane_2_hbox" prefHeight="300.0" prefWidth="200.0" />
                    <children>
                       <Text fx:id="text_2" />
                   </children>
              </VBox>
           </content>
        </ScrollPane>
     </items>
  </SplitPane>

Java method:

void addFinalText(String sentence) {



    Text text_1 = new Text(sentence.trim());
    text_1.setFont(Font.font(null, FontWeight.MEDIUM, textSize));
    double[] dividerPositions = split_pane.getDividerPositions();



    double split_pane_width = split_pane.getPrefWidth();
    double single_pane_width = dividerPositions[0] * split_pane_width;
    text_1.setWrappingWidth(single_pane_width);


    Text text_2 = new Text();
    text_2.setFont(Font.font(null, FontWeight.MEDIUM, textSize));




    Text text = new Text();
    text.setText(sentence.trim() +  " ");
    text.setFont(Font.font(null, FontWeight.MEDIUM, textSize));


    if (sentence.contains("hi")) {

        text_2.setText("Yes" + "\n");
        text_2.setFill(Color.RED);
        text_1.setFill(Color.RED);
    }
    else {
        text_2.setText("No" + "\n");
    }

    HBox left_hbox = new HBox();
    left_hbox.getChildren().add(text_1);
    double leftHboxHeight = left_hbox.getHeight();

    HBox right_hbox = new HBox();
    right_hbox.setHeight(leftHboxHeight);
    right_hbox.getChildren().add(text_2);

    right_hbox.getChildren().add(text_2);
    left_hbox.getChildren().add(text_1);

}

App screenshot:

I am new to JavaFx. Thanks in advance. `

Answer 1

Nodes are not positioned before the next layout pass. This layout pass happens sometime after method returns. It would be better to use a Pane for the Yes/No text and bind the layoutY property of those nodes to the layoutY property. Just make sure the vertical alignment of the text that is added to the right is correct.

Simplified example

@Override
public void start(Stage primaryStage) {
    VBox left = new VBox();
    Pane right = new Pane();

    Button button = new Button("Add");

    HBox hbox = new HBox(left, right, button);
    button.setOnAction(new EventHandler<ActionEvent>() {
        private int count = 1;

        private final StringBuilder builder = new StringBuilder("1");

        @Override
        public void handle(ActionEvent event) {
            Text text = new Text(builder.toString());
            Text yesNo = new Text(count % 2 == 0 ? "Yes" : "No");
            yesNo.setTextOrigin(VPos.TOP);

            HBox container = new HBox(text);

            left.getChildren().add(container);
            left.getChildren().add(text);
            right.getChildren().add(yesNo);
            yesNo.layoutYProperty().bind(container.layoutYProperty());

            count++;
            builder.append('\n');
            for (int i = 0; i < count; i++) {
                builder.append('1');
            }
        }

    });

    Scene scene = new Scene(hbox, 400, 400);
    primaryStage.setScene(scene);
    primaryStage.show();
}

---

Note that this won't synchronize scrolling for both ScrollPane s. I recommend using a GridPane and adding the text to the same ScrollPane instead.