JavaFX adding custom class to parent node - javafx

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