JavaFX adding custom class to parent node

Question

I'd appreciate any help at all, I have spent hours at this to no avail.

So I need to add an instance of a class I found online called GridDisplay to the Parent root, as I need the scene to then display this for me. But I also need to use the fxml file to set up the root and hence the scene. Here is what I have so far:

@FXML private BorderPane mainPanel = new BorderPane();
@FXML private TilePane tilePane = new TilePane();
@FXML private Pane topCanvas = new Pane();
@FXML private Pane leftCanvas = new Pane();
@FXML private Pane rightCanvas = new Pane();
@FXML private Pane bottomCanvas = new Pane();
@FXML private ScrollPane scrollPane = new ScrollPane();
@FXML private Button stacksButton = new Button();
@FXML private Button queueButton = new Button();
@FXML private Button stepStacksButton = new Button();
@FXML private Button stepQueueButton = new Button();

private MazeSolver solver;
private GridDisplay gridDisplay;
private ArrayList<String> maze;
private String fileLocation;
private int height;
private int width;

@Override
public void start(Stage primaryStage) throws IOException, InterruptedException 
{
    solver = new MazeSolver(fileLocation);
    int[] dimensions = solver.getDimensions();
    this.width = dimensions[0];
    this.height = dimensions[1];
    maze = solver.getMazeLayout();

    primaryStage.setTitle("Maze Solver");


    //this is the root which uses the fxml file and in turn sets up the scene
    Parent root = FXMLLoader.load(getClass().getResource("MazeApp.fxml"));
    Scene scene = new Scene(root);


    //Represents the grid with Rectangles
    gridDisplay = new GridDisplay(height, width);
    gridDisplay.setMaze(maze);

    mainPanel = new BorderPane();

    //here i set the scroll pane as the mainPanel's content
    mainPanel.setCenter(scrollPane);

    //and then set the gridDisplay as the scroll panes content
    scrollPane.setContent(gridDisplay.getDisplay());

    //re paints the grid and its boxes
    gridDisplay.createElements();

    primaryStage.setScene(scene);
    primaryStage.show();

}

The order in which I do any of these things makes no difference, it just never shows. I am always left with the window and a blank space where the maze should be, like so: https://www.dropbox.com/s/rqxa9dy2w9lw4tz/Screenshot%202015-03-11%2022.01.46.png?dl=0 (sorry about linking, cant post image directly).

Any help would be greatly appreciated.

EDIT: My GridDisplay class:

public class GridDisplay{

private static final double ELEMENT_SIZE = 30;
private static final double GAP = ELEMENT_SIZE / 90;

private TilePane tilePane = new TilePane();
private Group display = new Group(tilePane);
private int nRows;
private int nCols;
private ArrayList<String> maze = null;

public GridDisplay(int nRows, int nCols) 
{
    tilePane.setStyle("-fx-background-color: rgba(255, 215, 0, 0.1);");
    tilePane.setHgap(GAP);
    tilePane.setVgap(GAP);
    setColumns(nCols);
    setRows(nRows);
}

public void setColumns(int newColumns) 
{
    nCols = newColumns;
    tilePane.setPrefColumns(nCols);
    createElements();
}

public void setRows(int newRows) 
{
    nRows = newRows;
    tilePane.setPrefRows(nRows);
    createElements();
}

public TilePane getDisplay() 
{
    return tilePane;
}

public void createElements() 
{
    tilePane.getChildren().clear();
    for (int i = 0; i < nRows; i++) {
        for (int j = 0; j < nCols; j++) {
            if(maze==null)
                tilePane.getChildren().add(createElement(Color.RED));
            else
            {
                Color color = Color.WHITE;
                if(Character.toString(maze.get(i).charAt(j)).equals("#"))
                    color = Color.BLACK;
                if(Character.toString(maze.get(i).charAt(j)).equals("o"))
                    color = Color.GREEN;
                if(Character.toString(maze.get(i).charAt(j)).equals("*"))
                    color = Color.RED;
                tilePane.getChildren().add(createElement(color));
            }
        }
    }
}

public void colorSolved() 
{
    tilePane.getChildren().clear();
    for (int i = 0; i < nRows; i++) {
        for (int j = 0; j < nCols; j++) {
            if(maze==null)
                tilePane.getChildren().add(createElement(Color.RED));
            else
            {
                Color color = Color.WHITE;
                if(Character.toString(maze.get(i).charAt(j)).equals("#"))
                    color = Color.BLACK;
                if(Character.toString(maze.get(i).charAt(j)).equals("o"))
                    color = Color.GREEN;
                if(Character.toString(maze.get(i).charAt(j)).equals("*"))
                    color = Color.RED;
                tilePane.getChildren().add(createElement(color));
            }
        }
    }
}

public void setMaze(ArrayList<String> maze)
{
    this.maze = maze;
}

private Rectangle createElement(Color color) {
    Rectangle rectangle = new Rectangle(ELEMENT_SIZE, ELEMENT_SIZE);
    rectangle.setStroke(Color.BLACK);
    rectangle.setFill(color);

    return rectangle;
}

}

I cannot share the code for the xml as it will not paste into this window properly, here is a picture:

https://www.dropbox.com/s/27tbliubdlqdfzm/Screenshot%202015-03-12%2010.09.25.png?dl=0

Answer 1

Since your root is a BorderPane, you can just set the appropriate region in the code:

BorderPane root = FXMLLoader.load(getClass().getResource("MazeApp.fxml"));
Scene scene = new Scene(root);


//Represents the grid with Rectangles
gridDisplay = new GridDisplay(height, width);
gridDisplay.setMaze(maze);

ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(gridDisplay);

root.setCenter(scrollPane);

// etc