如何通过其 controller class 将 javaFX 形状动态添加到共享窗格？

Question

I am creating an application which requires a graph consisting of nodes and edges to be displayed. Each node is represented by a Circle object and each edge is a Line.

I have multiple scenes in the application, but the graph needs to be displayed in more than one of these scenes. So, I have created a fxml file using scene builder which only consists of an anchor pane which I want to be able to display my graph on. I have included this fxml file in the other scenes that require the graph to be displayed, so that I can use one controller to add the graph to a single anchor pane which will be shared across many scenes.

However, when I add my circles and lines as children to the anchor pane using the controller, they are not visible. Using the debug tool I can see that they are indeed children of the anchor pane, but they are not being displayed. I can see objects that I add to the anchor pane using scene builder (for example, I used scene builder to add a circle to the anchor pane and I could see that when running my GUI, but none of the other children which I added via code).

To reduce the scope of the problem, I attempted to create a single circle and add it to the anchor pane through my controller class. Despite being a child of the anchor pane, this circle was not visible when running the GUI.

GraphPaneController.java

public class GraphPaneController {
    @FXML Pane paneGraph;
    public void addCircle() {
        
        Circle circle = new Circle();
        circle.setFill(Color.RED);
        circle.setRadius(50);
        circle.setCenterX(0);
        circle.setCenterY(0);
        
        paneGraph.getChildren().add(circle);

    }
}

MainMenuController.java

public class MainMenuController {
    public void startButtonClicked() {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("graph_pane.fxml"));
        Parent root = loader.load();
        GraphPaneController gpController = loader.getController();
        controller.addCircle();
        Frontend.setRoot("gamemode_select");
    }
}

Frontend.java

public class Frontend extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage mainStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("mainmenu.fxml"));
        Scene scene = new Scene(root, 600, 400);
        mainStage.setScene(scene);
        mainStage.show();
    }
    
    public static void setRoot(String fxml) throws IOException {
        newScene.setRoot(loadFXML(fxml));
    }

    public static Parent loadFXML(String fxml) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(Frontend.class.getResource(fxml + ".fxml"));
        return fxmlLoader.load();
    }

}

mainmenu.fxml

<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="graphvis.group30.MainMenuController">
  <children>
    <AnchorPane id="ap" maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
         <children>
            <ImageView fitHeight="400.0" fitWidth="640.0" opacity="0.19" pickOnBounds="true" />
            <Label layoutX="198.0" layoutY="112.0" text="Graph Colouring Game">
               <font>
                  <Font size="24.0" />
               </font>
            </Label>
            <Button id="btnInputGraphFromFile" layoutX="255.0" layoutY="200.0" mnemonicParsing="false" onAction="#btnInputGraphFromFileClicked" prefHeight="25.0" prefWidth="130.0" text="Input graph from file" />
            <Button id="btnCreateRandomGraph" layoutX="255.0" layoutY="235.0" mnemonicParsing="false" onAction="#btnCreateRandomGraphClicked" text="Create random graph" />
            <Label layoutX="197.0" layoutY="138.0" prefHeight="61.0" prefWidth="245.0" text="Made by Nathan Macdonald, Kasper van der Horst, Oguz Kagan Yarim, Miriam Espinosa, Dorina Sili" textAlignment="CENTER" wrapText="true">
               <font>
                  <Font size="10.0" />
               </font>
            </Label>
            <Button layoutX="255.0" layoutY="269.0" mnemonicParsing="false" onAction="#btnQuitClicked" prefHeight="25.0" prefWidth="130.0" text="Quit" />
         </children>
    </AnchorPane>
  </children>
</VBox>

graph_pane.fxml

<AnchorPane fx:id="paneGraph" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="graphvis.group30.GraphPaneController" />

gamemode_select.fxml

<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="graphvis.group30.GamemodeSelectController">
  <children>
    <AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
      <children>
            <fx:include source="graph_pane.fxml" />
            <Label layoutX="139.0" layoutY="14.0" prefHeight="63.0" prefWidth="159.0" text="Select Gamemode:" wrapText="true">
               <font>
                  <Font size="18.0" />
               </font>
            </Label>
            <Button fx:id="btnGamemode1" layoutX="299.0" layoutY="33.0" mnemonicParsing="false" onAction="#btnGamemode1Clicked" text="untill death" />
            <Button fx:id="btnGamemode2" layoutX="384.0" layoutY="33.0" mnemonicParsing="false" onAction="#btnGamemode2Clicked" text="timed" />
            <Button fx:id="btnGamemode3" layoutX="440.0" layoutY="33.0" mnemonicParsing="false" onAction="#btnGamemode3Clicked" text="random " />
            <Button fx:id="btnBack" layoutX="14.0" layoutY="360.0" mnemonicParsing="false" onAction="#btnBackClicked" text="back" />
      </children>
    </AnchorPane>
  </children>
</VBox>

When viewing the gamemode select screen, I expect to see the circle that I added to the graph pane through the GraphPaneController, but it is not there. What do I do so that I can add visual components to a pane which is shared across multiple scenes?

Answer 1

So I got this to work by creating a model class ( GraphModel ) and a viewer class ( GraphView ) for the graph. The model class handles creating the vertices and edges, and the viewer class is reponsible for displaying the graph.

GraphView extends javafx.scene.layout.Pane and contains an AnchorPane attribute, containing the elements of the graph to be displayed, which can be added to scenes by calling a getAnchorPane method on the GraphView object.