Editing a Pane in a JavaFx Scene

Question

I'm trying to set a JavaFx scene where a nested FlowPane can be changed during the runtime. I want to be able to new elements to the Pane, and have them rendered out.

Main

package renderable;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application implements EventHandler<ActionEvent{
Button button;
@FXML public FlowPane flowPane;

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

@Override
public void start(Stage primaryStage) throws Exception {
    FXMLLoader loader = new FXMLLoader();
    Parent root = loader.load(getClass().getResource("/renderable/ClientRender.fxml"));
    Scene scene = new Scene(root, 1000, 720);
    primaryStage.setTitle("The Game");
    primaryStage.setScene(scene);
    primaryStage.show();
    loader.getController().updateFlowPanel();
    primaryStage.show();
}

public void updateFlowPanel(){
    flowPane.getChildren().add(button);
}

@Override
public void handle(ActionEvent event) {
    if (event.getSource() == button)
        System.out.println("The first button was pushed.");
    }
}

RenderManager

public class RenderManager implements EventHandler<ActionEvent>{
cCard tableCards[];
cHand thisPlayerHand;
@FXML public FlowPane flowPane;
Button button;

public RenderManager() {
}
public void updateFlowPanel(){
    flowPane.getChildren().add(button);
}

@Override
public void handle(ActionEvent event) {
    if (event.getSource() == button)
        System.out.println("The first button was pushed.");
}
}

ClientRender.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?package renderable?>
<?import javafx.geometry.*?>

<FlowPane id="flowPane" fx:id="flowPane" hgap="4.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="480.0" prefWidth="600.0" prefWrapLength="1400.0" style="-fx-background-color: #006600;" vgap="4.0" BorderPane.alignment="CENTER" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="renderable.Main"/>

I am unable to correctly reference the RenderManager object associated with my current root to then run it's `updateFlowPanel()' method.

How do I correctly add elements to the Pane during runtime?

Answer 1

The reason you are getting a null pointer exception is that the @FXML-injected field flowPane is only initialized in the controller. You are calling updateFlowPanel() on an instance of Main that is not the controller, hence flowPane is null in that instance, and consequently flowPane.getChildren() throws a null pointer exception.

Specifically: Application.launch() creates an instance of the Application class and calls start() on that instance (among other things).

Calling FXMLLoader.load(), by default, creates an instance of the class specified by the fx:controller attribute in the FXML root element. Any @FXML-injected fields are initialized in that instance, event handler methods are called on that instance, and the initialize() method is called on that instance.

Since you use the same class Main for both the Application and the controller class - which is always a mistake, you end up with two instances of Main. You call updateFlowPanel() from start(), i.e. you call it on the instance created by Application.launch(); however flowPane is only initialized in the instance created by the FXMLLoader.

You should use a separate controller class. I.e. do

package renderable;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("/renderable/ClientRender.fxml"));
        Scene scene = new Scene(root, 1000, 720);
        primaryStage.setTitle("The Game");
        primaryStage.setScene(scene);
        primaryStage.show();
        primaryStage.show();
    }

}

and then define a controller class:

package renderable ;

import javafx.fxml.FXML ;
import javafx.scene.layout.FlowPane ;
import javafx.scene.control.Button ;

public class Controller {

    @FXML
    private FlowPane flowPane ;

    public void updateFlowPanel(){
        Button button = new Button("...");
        flowPane.getChildren().add(button);
    }


}

and update the FXML to refer to it:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?package renderable?>
<?import javafx.geometry.*?>

<FlowPane id="flowPane" fx:id="flowPane" hgap="4.0" 
    nodeOrientation="LEFT_TO_RIGHT" prefHeight="480.0" prefWidth="600.0" 
    prefWrapLength="1400.0" style="-fx-background-color: #006600;" vgap="4.0" 
    BorderPane.alignment="CENTER" xmlns="http://javafx.com/javafx/8" 
    xmlns:fx="http://javafx.com/fxml/1" 
    fx:controller="renderable.Controller"/>

Now you can either just call updateFlowPanel() in the initialize() method:

package renderable ;

import javafx.fxml.FXML ;
import javafx.scene.layout.FlowPane ;
import javafx.scene.control.Button ;

public class Controller {

    @FXML
    private FlowPane flowPane ;

    public void initialize() {
        updateFlowPanel();
    }

    public void updateFlowPanel(){
        Button button = new Button("...");
        flowPane.getChildren().add(button);
    }


}

or you can call it on the correct controller instance from your start() method:

    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("/renderable/ClientRender.fxml"));
        Parent root = loader.load();
        Controller controller = loader.getController();
        controller.updateFlowPanel();
        Scene scene = new Scene(root, 1000, 720);
        primaryStage.setTitle("The Game");
        primaryStage.setScene(scene);
        primaryStage.show();
        primaryStage.show();
    }

Edit:

The update you made to your question actually prevents the code from compiling. If you fix the compile error by replacing

loader.getController().updateFlowPanel();

with

loader.<Main>getController().updateFlowPanel();

then the (entirely different) issue you have created is that you create an instance of FXMLLoader:

FXMLLoader loader = new FXMLLoader();

but then instead of using that FXMLLoader instance to load the FXML, you call the static method load(URL):

Parent root = loader.load(getClass().getResource("/renderable/ClientRender.fxml"));

Since you are calling the static method, you never call load() on the FXMLLoader instance, and so its controller property is never initialized. Consequently, loader.<Main>getController() is null, and loader.<Main>getController().updateFlowPanel() throws a null pointer exception (entirely different to the null pointer exception you had in the previous version of your question; it is not even thrown from the same method).

If you want to reference the controller, use the code in the second version of the start() method that I posted above.