How can I share the same UI skeleton.

Question

I have an application that when user click different menu, the center will have different content.
While each scene use an fxml, I wants to reuse the skeleton UI, that is the menu. So I think there should be below three fxml
skeleton.fxml
content1.fxml
content2.fxml
When user enter first scene, then I need to combine skeleton.fxml and content1.fxml into scene1.
But the things is not I expect, the FXMLLoader loaded Parent can't add children.
Parent root = FXMLLoader.load(skeletonResource);
// root.getChildren().add(contentNode); ?? No, don't have getChildren() method.So how can I divide the skeleton and contents?

Answer 1

Hi Owen,
You need to have a little more information about the root node in your skeleton.fxml.
There's no way to add children to a node at the Parent level. However, if you know that, for instance, the root node in skeleton.fxml is an instance of a subclass of Pane, then you can do:
    Pane root = FXMLLoader.load(skeletonResource);
    root.getChildren().add(contentNode); More generally - it's better if you know in advance the exact concrete class of your root node - because it's likely that you will need to do more than just adding children to it.
For instance, if the root node is a GridPane, you will want to specify a column index and a row index.
If the root node is an AnchorPane, you will want to specify layoutX and layoutY - or some anchors.
If the root node is an FlowPane or an HBox or ... you may want to specify a margin, etc...
Also keep in mind that if you didn't need to dynamically switch the content of your root node, then using
     <fx:include source="content.fxml"/> from within skeleton.fxml would be a better option.
Hope this helps.
-- daniel