JavaFX Node Alignment in BorderPanes

Question

The issue that I'm having is when I attempt to add the tiles to the center of a border pane and then add that border pane to the center of a root border pane, the alignment is far from correct.

Here is where I created a main or "root" pane that I named mainPane. Then I created bottomPane and centerPane to hold items that will eventually be added to the bottom and center of mainPane:

BorderPane mainPane = new BorderPane();

BorderPane bottomPane = new BorderPane();
BorderPane centerPane = new BorderPane();

Button quitButton = new Button("Quit Game");
bottomPane.setRight(quitButton);

Text gameWinLabel = new Text();
gameWinLabel.setText("You win!");
gameWinLabel.setFont(Font.font("Times New Roman", 50));
gameWinLabel.setVisible(false);
bottomPane.setCenter(gameWinLabel);

Then I wrote the code that would generate the tiles for the memory game:

char c = 'A';
List<Tile> tiles = new ArrayList<>();
for (int i = 0; i < NUM_OF_PAIRS; i++) {
    tiles.add(new Tile(String.valueOf(c)));
    tiles.add(new Tile(String.valueOf(c)));
    c++;
}

Collections.shuffle(tiles);

for (int i = 0; i < tiles.size(); i++) {
    Tile tile = tiles.get(i);
    tile.setTranslateX(100 * (i % NUM_PER_ROW));
    tile.setTranslateY(100 * (i / NUM_PER_ROW));
    centerPane.getChildren().add(tile);
}

Lastly, I anchored the container panes to mainPane:

mainPane.setBottom(bottomPane);
mainPane.setCenter(centerPane);

This is the current output:

The ultimate goal is to have the game centered in the center of the mainPane.

Thanks in advance for any advice!

You might be better off using a [GridPane](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/GridPane.html) for your "root" this way your only using one Pane and can align content. If you want more info I can propose an answer and give you some code. — TravisF, Apr 25 '17 at 23:01
@TravisF An example would be great! I'm having a hard time what panes to bind to what. — wpursell, Apr 26 '17 at 04:42

TravisF · Answer 1 · 2017-04-26T05:25:29.443

As I mentioned in my comment, a GridPane would be a better option for you, to do this you can do it like this:

GridPane root = new GridPane(), centreGrid = new GridPane();
root.setAlignment(Pos.CENTER);
BorderPane bottomPane = new BorderPane();
Integer rowCount = 0 ,colCount = 0;

Button quitButton = new Button("Quit Game");
bottomPane.setRight(quitButton);

Text gameWinLabel = new Text();
gameWinLabel.setText("You win!");
gameWinLabel.setFont(Font.font("Times New Roman", 50));
gameWinLabel.setVisible(false);
bottomPane.setCenter(gameWinLabel);

char c = 'A';
List<Tile> tiles = new ArrayList<>();
for (int i = 0; i < NUM_OF_PAIRS; i++) {
   tiles.add(new Tile(String.valueOf(c)));
   tiles.add(new Tile(String.valueOf(c)));
   c++;
}

Collections.shuffle(tiles);

for (int i = 0; i < tiles.size(); i++) {
   Tile tile = tiles.get(i);
   if (rowCount > 4) {
      rowCount += 1;
      colCount = 0;
   }
   centreGrid.add(tile, colCount, rowCount);
   colCount += 1;
}

root.add(centreGrid, 0, 1);
root.add(bottomGrid, 0, 2);

as for the top section, feel free to add whatever you like there. for more information you can refer to GridPane on the Oracle page.

score 0 · Accepted Answer · answered Apr 26 '17 at 19:21

To avoid a lot of struggle, I adjusted the size of mainPane to fit the size of the game board. I realize this isn't really an answer to the alignment, but for making the game board nicer (Which was my goal), I think my solution is ok.

Thanks for your time and help anyway!

JavaFX Node Alignment in BorderPanes

2 Answers2