Develop Reference

JavaFX TimeLine inside a for loop is skipping KeyFrames

I am building a Simon Says game in JavaFX. I have gotten most of it working, my only issue now is when you run the game it runs a for loop to generate the colours depending on which level you are on.
It seems to display one colour from the loop but it doesn't wait for the KeyFrame to finish before it flies through the rest of the loop and stores the values. How can I make the loop wait for the KeyFrame to complete so it displays all of the colour changes?
package assign3;
import java.util.ArrayList;
import java.util.concurrent.TimeUnit;
import javafx.animation.FillTransition;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.SequentialTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Question2 extends Application
{
public static final int RED = 1;
public static final int GREEN = 2;
public static final int BLUE = 3;
public static final int ORANGE = 4;
private int thisGameScore = 0;
private int level = 1;
private BorderPane obBorder;
private HBox obPane;
private HBox obStart;
private Timeline tlRed;
private Timeline tlBlue;
private Timeline tlGreen;
private Timeline tlOrange;
private SequentialTransition stList = new SequentialTransition();
private Button btStart;
private ArrayList<Integer> colours;
private ArrayList<Integer> guesses;
#Override
public void start( Stage obPrimeStage ) throws Exception
{
boolean runGame = true;
int guessIndex = 0;
obBorder = new BorderPane();
obPane = new HBox();
obStart = new HBox();
Button btRed = new Button("Red");
Button btGreen = new Button("Green");
Button btBlue = new Button("Blue");
Button btOrange = new Button("Orange");
btStart = new Button("Start");
class RedTimeLine
{
Timeline tlRed;
RedTimeLine()
{
tlRed = new Timeline();
tlRed.getKeyFrames().add(new KeyFrame(Duration.ZERO,
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.RED, CornerRadii.EMPTY, Insets.EMPTY)))));
tlRed.getKeyFrames().add(new KeyFrame(Duration.seconds(1),
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)))));
}
}
tlBlue = new Timeline();
tlBlue.getKeyFrames().add(new KeyFrame(Duration.ZERO,
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.BLUE, CornerRadii.EMPTY, Insets.EMPTY)))));
tlBlue.getKeyFrames().add(new KeyFrame(Duration.seconds(1),
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)))));
tlGreen = new Timeline();
tlGreen.getKeyFrames().add(new KeyFrame(Duration.ZERO,
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.GREEN, CornerRadii.EMPTY, Insets.EMPTY)))));
tlGreen.getKeyFrames().add(new KeyFrame(Duration.seconds(1),
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)))));
tlOrange = new Timeline();
tlOrange.getKeyFrames().add(new KeyFrame(Duration.ZERO,
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.ORANGE, CornerRadii.EMPTY, Insets.EMPTY)))));
tlOrange.getKeyFrames().add(new KeyFrame(Duration.seconds(1),
new KeyValue(obBorder.backgroundProperty(),
new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)))));
obStart.getChildren().add(btStart);
obPane.getChildren().addAll(btRed, btGreen, btBlue, btOrange);
obBorder.setCenter(obPane);
obBorder.setBottom(obStart);
obPane.setAlignment(Pos.CENTER);
obStart.setAlignment(Pos.CENTER);
Scene obScene = new Scene(obBorder, 400, 400);
obPrimeStage.setTitle("Simon Says");
obPrimeStage.setScene(obScene);
obPrimeStage.show();
btStart.setOnAction((ActionEvent start) -> {
colours = new ArrayList<>();
guesses = new ArrayList<>();
obChange.handle(start);
stList.play();
System.out.println("Started new game");
});
btRed.setOnAction((ActionEvent e) ->
{
guesses.add(RED);
if(guesses.get(guessIndex) != colours.get(guessIndex) )
{
obStart.getChildren().add(btStart);
level = 1;
}
else
{
if(guesses.size() == colours.size())
{
level += 1;
colours = new ArrayList<>();
guesses = new ArrayList<>();
for(int i = 0; i < level; i++)
{
obChange.handle(e);
}
stList.play();
}
}
});
btGreen.setOnAction((ActionEvent e) ->
{
guesses.add(GREEN);
if(guesses.get(guessIndex) != colours.get(guessIndex) )
{
obStart.getChildren().add(btStart);
level = 1;
}
else
{
if(guesses.size() == colours.size())
{
level += 1;
colours = new ArrayList<>();
guesses = new ArrayList<>();
for(int i = 0; i < level; i++)
{
obChange.handle(e);
}
stList.play();
}
}
});
btBlue.setOnAction((ActionEvent e) ->
{
guesses.add(BLUE);
if(guesses.get(guessIndex) != colours.get(guessIndex) )
{
obStart.getChildren().add(btStart);
level = 1;
}
else
{
if(guesses.size() == colours.size())
{
level += 1;
colours = new ArrayList<>();
guesses = new ArrayList<>();
for(int i = 0; i < level; i++)
{
obChange.handle(e);
}
stList.play();
}
}
});
btOrange.setOnAction((ActionEvent e) ->
{
guesses.add(ORANGE);
if(guesses.get(guessIndex) != colours.get(guessIndex) )
{
obStart.getChildren().add(btStart);
level = 1;
}
else
{
if(guesses.size() == colours.size())
{
level += 1;
guesses = new ArrayList<>();
for(int i = 0; i < level; i++)
{
obChange.handle(e);
}
stList.play();
}
}
});
}
class ChangeColour implements EventHandler<ActionEvent>
{
#Override
public void handle( ActionEvent arg0 )
{
thisGameScore = 0;
int randomColour = (int)((Math.random() * 4) + 1);
if(randomColour == RED)
{
colours.add(RED);
stList.getChildren().add(new RedTimeLine());
}
else if(randomColour == BLUE)
{
colours.add(BLUE);
stList.getChildren().add(tlBlue);
}
else if(randomColour == GREEN)
{
colours.add(GREEN);
stList.getChildren().add(tlGreen);
}
else if(randomColour == ORANGE)
{
colours.add(ORANGE);
stList.getChildren().add(tlOrange);
}
obStart.getChildren().remove(btStart);
}
}
ChangeColour obChange = new ChangeColour();
public static void main( String[] args )
{
Application.launch(args);
}
}

I guess I would do something like this:
public void playSequence(int sequenceLength, double speed) {
Timeline timeline = new Timeline();
for (int i = 0; i < sequenceLength; i++) {
Color color = colors[random.nextInt(colors.length)];
Segment segment = segmentMap.get(color);
timeline.getKeyFrames().addAll(
new KeyFrame(
Duration.seconds(i), new KeyValue(segment.litProperty(), true)
),
new KeyFrame(
Duration.seconds(i + 0.9), new KeyValue(segment.litProperty(), false)
)
);
isPlaying.set(true);
timeline.setOnFinished(event -> isPlaying.set(false));
timeline.setRate(speed);
timeline.play();
}
}
The above example uses a Timeline, with the start time at which each segment is lit varying to light each segment in sequence.
Full sample
import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import static javafx.scene.paint.Color.*;
public class SimpleSimon extends Application {
private int sequenceLength = 1;
private int speed = 1;
#Override
public void start(Stage stage) throws Exception {
Simon simon = new Simon();
Button play = new Button("Play");
play.setStyle("-fx-font-size: 20px;");
play.disableProperty().bind(simon.isPlayingProperty());
play.setOnAction(event -> {
simon.playSequence(sequenceLength, speed);
sequenceLength++;
speed *= 1.05;
});
VBox layout = new VBox(10, simon, play);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class Simon extends Group {
private static final Random random = new Random(42);
private final Color[] colors = {
RED, GREEN, BLUE, ORANGE
};
private Map<Color, Segment> segmentMap = new HashMap<>();
private ReadOnlyBooleanWrapper isPlaying = new ReadOnlyBooleanWrapper();
public Simon() {
for (int i = 0; i < colors.length; i++) {
Segment segment = new Segment(colors[i], i * 90);
getChildren().add(segment);
segmentMap.put(colors[i], segment);
}
}
public void playSequence(int sequenceLength, double speed) {
Timeline timeline = new Timeline();
for (int i = 0; i < sequenceLength; i++) {
Color color = colors[random.nextInt(colors.length)];
Segment segment = segmentMap.get(color);
timeline.getKeyFrames().addAll(
new KeyFrame(
Duration.seconds(i), new KeyValue(segment.litProperty(), true)
),
new KeyFrame(
Duration.seconds(i + 0.9), new KeyValue(segment.litProperty(), false)
)
);
}
isPlaying.set(true);
timeline.setOnFinished(event -> isPlaying.set(false));
timeline.setRate(speed);
timeline.play();
}
public boolean isPlaying() {
return isPlaying.get();
}
public ReadOnlyBooleanWrapper isPlayingProperty() {
return isPlaying;
}
}
class Segment extends Arc {
private BooleanProperty lit = new SimpleBooleanProperty();
private static final double RADIUS = 100;
private static final ColorAdjust litEffect = new ColorAdjust(0, 0, 0.5, 0);
private static final ColorAdjust unlitEffect = new ColorAdjust(0, 0, 0, 0);
public Segment(Color color, double angleOffset) {
super(RADIUS, RADIUS, RADIUS, RADIUS, angleOffset, 90);
setFill(color);
setType(ArcType.ROUND);
setEffect(unlitEffect);
lit.addListener((observable, oldValue, newValue) ->
setEffect(lit.get() ? litEffect : unlitEffect)
);
}
public void setLit(boolean lit) {
this.lit.set(lit);
}
public boolean isLit() {
return lit.get();
}
public BooleanProperty litProperty() {
return lit;
}
}
A similar effect could be achieved via a SequentialTransition.

Thread stops updating display after a while

I am trying to do a neural network training visualization with JavaFX 8. The network cells are shown as dots changing their color depending on the output value. The calculations and the drawing are done in a thread that can be started or stopped by clicking a button. For a while everything works fine but after a number of iterations the display is no longer updated.
What needs to be done to reliably update the display?
I am using JRE version 1.8.0_45.
Here's a simplified version of my code:
import javafx.application.*;
import javafx.concurrent.Task;
import javafx.geometry.Insets;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.*;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
public class TestView extends Application {
public static final int SCENE_WIDTH = 1000;
public static final int SCENE_HEIGHT = 800;
public static final int BUTTON_PANEL_HEIGHT = 80;
private Canvas canvas;
private GraphicsContext gc;
private Task<Void> task = null;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("MLP");
BorderPane borderPane = new BorderPane();
canvas = new Canvas( SCENE_WIDTH, 3*SCENE_HEIGHT-BUTTON_PANEL_HEIGHT );
gc = canvas.getGraphicsContext2D();
borderPane.setCenter(new ScrollPane(canvas));
GridPane buttonPanel = new GridPane();
Button buttonTrain = new Button("Train");
buttonTrain.setMinWidth(SCENE_WIDTH/2);
buttonPanel.setPadding(new Insets(0, 0, 0, 0));
buttonPanel.add(buttonTrain, 1, 0);
borderPane.setBottom(buttonPanel);
buttonTrain.setOnMouseClicked( e -> {
if (task != null) {
task.cancel();
task = null;
}
else {
task = new Task<Void>() {
#Override
protected Void call() throws Exception {
for (int i = 1; i <= 10000000; i++) {
if (isCancelled()) {
break;
}
// dummy calculation
doSomeStuff();
// dummy graphics update
gc.setFill(Color.GREEN);
gc.fillOval(50, 50, 20, 20);
gc.clearRect(200, 10, 200, 100);
gc.setFill(Color.BLACK);
gc.fillText("" + i, 200, 50);
}
return null;
}
};
new Thread(task).start();
}
});
Scene scene = new Scene( borderPane, SCENE_WIDTH, SCENE_HEIGHT );
primaryStage.setScene(scene);
primaryStage.show();
}
private double doSomeStuff() {
double r = 0.5;
for ( int i = 0; i < 10000; i++ ) {
r = Math.sin(r);
}
return r;
}
}

JavaFX - Using for loops in GridPane?

I am trying to use two for loops to automatically add ImageView nodes to each location. When using the for loops I receive an error. When I comment the for loop code out with only one statement to add an ImageView node the code seems to work can you use for loops to populate GridPane? If so what am I doing wrong? If not what could be used as a solution?
My Class:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class GridCreation extends Application {
#Override
public void start(Stage gameStage) throws Exception {
GridPane grid = new GridPane();
Image backOfCardsImg = new Image("images/naruto_shipuden_logo.png");
ImageView backOfCards = new ImageView(backOfCardsImg);
for (int i = 0; i < 4; i++) {
for (int j = 0; j < 4; j++) {
grid.add(backOfCards, i, j);
}
}
//grid.add(backOfCards, 1,1);
Scene scene = new Scene(grid);
gameStage.setTitle("MemoryGame");
gameStage.setScene(scene);
gameStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Edit: for the code:
grid.add(backOfCards, i, j);
I changed the line of code to
grid.add(new ImageView(backOfCardImg), i, j);
this seemed to solve the problem but can anyone explain to me why the first option wouldnt work?

This might be a usable start for a memory game in fx. It uses an own extension of ImageView to do the turn and focus animations and to deal with a common backside image. Its only graphics, no game logic.
public class MemoryGame extends Application {
final int rows = 4;
final int columns = 4;
CardView views[][] = new CardView[rows][];
public static class CardView extends ImageView {
static final double scale = 0.95;
static DropShadow shadowhoover = new DropShadow(5, 4, 4, Color.rgb(50, 60, 50));
static DropShadow shadowdown = new DropShadow(2, 2, 2, Color.rgb(50, 60, 50));
static Image backside = null;
public static void setbackside(Image image) { backside = image; }
public CardView(Image image) {
super(backside);
setRotationAxis(new Point3D(0, 200,0));
setScaleX(scale);
setScaleY(scale);
setEffect(shadowdown);
setOnMouseEntered(m -> {
setEffect(shadowhoover);
setScaleX(scale*1.01);
setScaleY(scale*1.01);
});
setOnMouseExited(m -> {
setEffect(shadowdown);
setScaleX(scale);
setScaleY(scale);
});
setOnMouseClicked(m -> {
RotateTransition r1 = new RotateTransition(Duration.millis(300), this);
r1.setByAngle(90);
r1.setOnFinished(e -> setImage(image));
RotateTransition r2 = new RotateTransition(Duration.millis(300), this);
r2.setByAngle(-90);
RotateTransition r3 = new RotateTransition(Duration.millis(300), this);
r3.setByAngle(90);
r3.setOnFinished(e -> setImage(backside));
RotateTransition r4 = new RotateTransition(Duration.millis(300), this);
r4.setByAngle(-90);
new SequentialTransition(r1, r2, new PauseTransition(Duration.millis(1000)), r3, r4).play();
});
}
}
#Override
public void start(Stage gameStage) throws Exception {
GridPane grid = new GridPane();
grid.setBackground(new Background(new BackgroundFill(Color.rgb(140, 200, 140), new CornerRadii(0), new Insets(0))));
grid.setHgap(5);
grid.setVgap(5);
Image back = new Image(MemoryGame.class.getResource("card-back.png").toExternalForm(), 140, 200, true, true);
Image front = new Image(MemoryGame.class.getResource("card-1.png").toExternalForm(), 140, 200, true, true);
CardView.setbackside(back);
for (int r = 0; r < rows; r++) {
views[r] = new CardView[columns];
for (int c = 0; c < columns; c++) {
CardView view = new CardView(front); // different front images of course...
views[r][c] = view;
HBox box = new HBox(5);
box.getChildren().add(views[r][c]);
grid.add(box, c, r);
}
}
//grid.add(backOfCards, 1,1);
Scene scene = new Scene(grid);
gameStage.setTitle("MemoryGame");
gameStage.setScene(scene);
gameStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Move tick label JavaFx 2

Is it possible to move/shift the tick labels into the chart. Currently I see api's to hide/show tick labels is there an API that moves the tick labels inside the chart? If there isn't an API then is there a technique that I can use/apply to get this done?
Current code
public class Graph extends Application{
private NumberAxis xAxis;
private NumberAxis yAxis;
public static void main(final String[] args)
{
launch(args);
}
#Override
public void start(final Stage primaryStage) throws Exception
{
xAxis = new NumberAxis(0, 300, 20);
xAxis.setAutoRanging(false);
xAxis.setAnimated(false);
xAxis.setMinorTickVisible(false);
xAxis.setTickLabelsVisible(false);
xAxis.setTickMarkVisible(false);
yAxis = new NumberAxis(30, 240, 30);
yAxis.setAutoRanging(false);
yAxis.setAnimated(false);
yAxis.setTickMarkVisible(false);
yAxis.setMinorTickVisible(false);
yAxis.setMinorTickCount(3);
final LineChart<Number, Number> ctg = new LineChart<>(xAxis, yAxis);
ctg.setAnimated(false);
ctg.setCreateSymbols(false);
ctg.setAlternativeRowFillVisible(false);
ctg.setLegendVisible(false);
ctg.setHorizontalGridLinesVisible(true);
ctg.setVerticalGridLinesVisible(true);
Series<Number, Number> series = new LineChart.Series<>();
ctg.getData().add(series);
for (int i = 0; i < 300; i += 5) {
XYChart.Series minorYGrid = new XYChart.Series();
minorYGrid.getData().add(new XYChart.Data(i, 30));
minorYGrid.getData().add(new XYChart.Data(i, 240));
ctg.getData().add(minorYGrid);
}
for (int i = 40; i <= 240; i += 10) {
XYChart.Series minorXGrid = new XYChart.Series();
minorXGrid.getData().add(new XYChart.Data(0, i));
minorXGrid.getData().add(new XYChart.Data(500, i));
ctg.getData().add(minorXGrid);
}
final Scene scene = new Scene(ctg, 1600, 400);
scene.getStylesheets().add("resources/application.css");
primaryStage.setScene(scene);
primaryStage.show();
}
}
Current result
Expected result

Translating a Single Axis
You can translate the y axis on the chart.
For example:
yAxis.translateXProperty().bind(
xAxis.widthProperty().divide(2)
);
To ensure the axis is displayed on top of the chart, you could set the depth buffer to true on the scene and set the z co-ordinate of the yAxis to -1.
yAxis.setTranslateZ(-1);
Translating Multiple Axes
Your "Expected result" actually has multiple vertical axes. Unfortunately there is no clone method to clone a node in JavaFX. So you will have to create a new axis and layer it on top of the chart. One way to accomplish that (which is a bit overkill and inefficient), is to create a completely new chart and layer it on top of the old one, similar to what is done in the solution to draw layers of XYCharts. The other way to do it, which is probably preferable but a bit trickier, would be just create another axis and stack it over the original chart.
Sample Code
MultiAxisChart.java
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class MultiAxisChart extends Application {
#Override
public void start(final Stage primaryStage) throws Exception {
final StackPane chartStack = createChartStack();
final Scene scene = new Scene(chartStack, 1600, 400, true);
primaryStage.setScene(scene);
primaryStage.show();
}
private StackPane createChartStack() {
LineChart<Number, Number> bottomChart = createChart();
LineChart<Number, Number> topChart = createChart();
bottomChart.getYAxis().translateXProperty().bind(
bottomChart.getXAxis().widthProperty().multiply(1.0/3)
);
topChart.getYAxis().translateXProperty().bind(
topChart.getXAxis().widthProperty().multiply(2.0/3)
);
bottomChart.getYAxis().setTranslateZ(-1);
topChart.getYAxis().setTranslateZ(-1);
topChart.getStylesheets().addAll(getClass().getResource(
"overlay-chart.css"
).toExternalForm());
return new StackPane(bottomChart, topChart);
}
private LineChart<Number, Number> createChart() {
NumberAxis xAxis = new NumberAxis(0, 300, 20);
xAxis.setAutoRanging(false);
xAxis.setAnimated(false);
xAxis.setMinorTickVisible(false);
xAxis.setTickLabelsVisible(false);
xAxis.setTickMarkVisible(false);
NumberAxis yAxis = new NumberAxis(30, 240, 30);
yAxis.setAutoRanging(false);
yAxis.setAnimated(false);
yAxis.setTickMarkVisible(false);
yAxis.setMinorTickVisible(false);
yAxis.setMinorTickCount(3);
final LineChart<Number, Number> ctg = new LineChart<>(xAxis, yAxis);
ctg.setAnimated(false);
ctg.setCreateSymbols(false);
ctg.setAlternativeRowFillVisible(false);
ctg.setLegendVisible(false);
ctg.setHorizontalGridLinesVisible(true);
ctg.setVerticalGridLinesVisible(true);
return ctg;
}
public static void main(final String[] args) {
launch(args);
}
}
overlay-chart.css
/** file: overlay-chart.css (place in same directory as MultiAxisChart) */
.chart-plot-background {
-fx-background-color: transparent;
}

Chessboard with automatic resizing

So, I am trying to display a chessboard in javaFX. I will have to perform different operations and draw on some of the tiles so I chose to use a Canvas for each tile and a GridPane to arrange them for me in a grid fashion.
Unfortunately I am having some problems with the resizing of the grid tiles; I want my whole chessboard to automatically adapt its size to the Scene. Therefore, I have added a ChangeListener to both the height and width properties of the GridPane which takes care of resizing the tiles. This only works when the window gets bigger, when the window is reduced to a smaller size everything still gets bigger!
Here's the shortest SSCCE I came up with which reproduces my problem:
package chessboardtest;
import javafx.application.Application;
import javafx.beans.value.*;
import javafx.geometry.*;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.stage.Stage;
public class ChessboardTest extends Application {
final int size = 10;
#Override
public void start(Stage primaryStage) {
VBox root = new VBox();
final GridPane chessboard = new GridPane();
fillChessboard(chessboard, size);
ChangeListener<Number> resizeListener = new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
double newWidth = chessboard.getWidth() / size;
double newHeight = chessboard.getHeight() / size;
for(Node n: chessboard.getChildren()) {
Canvas canvas = (Canvas)n;
canvas.setWidth(newWidth);
canvas.setHeight(newHeight);
}
}
};
chessboard.widthProperty().addListener(resizeListener);
chessboard.heightProperty().addListener(resizeListener);
root.getChildren().add(chessboard);
root.setPadding(new Insets(10));
VBox.setVgrow(chessboard, Priority.ALWAYS);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("chessboard");
primaryStage.setScene(scene);
primaryStage.show();
}
void fillChessboard(GridPane pane, int size) {
class RedrawListener implements ChangeListener<Number> {
Color color;
Canvas canvas;
public RedrawListener(Canvas c, int i) {
if(i % 2 == 0) {
color = Color.BLACK;
}
else {
color = Color.WHITE;
}
canvas = c;
}
#Override
public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
canvas.getGraphicsContext2D().setFill(color);
canvas.getGraphicsContext2D().fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
}
}
for(int row = 0; row < size; row++) {
for(int col = 0, i = row; col < size; col++, i++) {
Canvas c = new Canvas();
RedrawListener rl = new RedrawListener(c, i);
c.widthProperty().addListener(rl);
c.heightProperty().addListener(rl);
pane.add(c, row, col);
}
}
}
public static void main(String[] args) {
launch(args);
}
}

If you don't need a canvas (and you probably don't), just use StackPanes for the squares and make them fill the width and the height. You can always add a canvas (or anything else) to the StackPanes to display their content.
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Control;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Chessboard extends Application {
#Override
public void start(Stage primaryStage) {
GridPane root = new GridPane();
final int size = 8 ;
for (int row = 0; row < size; row++) {
for (int col = 0; col < size; col ++) {
StackPane square = new StackPane();
String color ;
if ((row + col) % 2 == 0) {
color = "white";
} else {
color = "black";
}
square.setStyle("-fx-background-color: "+color+";");
root.add(square, col, row);
}
}
for (int i = 0; i < size; i++) {
root.getColumnConstraints().add(new ColumnConstraints(5, Control.USE_COMPUTED_SIZE, Double.POSITIVE_INFINITY, Priority.ALWAYS, HPos.CENTER, true));
root.getRowConstraints().add(new RowConstraints(5, Control.USE_COMPUTED_SIZE, Double.POSITIVE_INFINITY, Priority.ALWAYS, VPos.CENTER, true));
}
primaryStage.setScene(new Scene(root, 400, 400));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

This is a nice solution, but resizing is so much easier with data binding in Java FX. You can hide all listener business this way.
Here is a solution much like James D's, but using Rectangles insread of Canvases for the squares:
public class ResizeChessboard extends Application {
GridPane root = new GridPane();
final int size = 8;
public void start(Stage primaryStage) {
for (int row = 0; row < size; row++) {
for (int col = 0; col < size; col++) {
Rectangle square = new Rectangle();
Color color;
if ((row + col) % 2 == 0) color = Color.WHITE;
else color = Color.BLACK;
square.setFill(color);
root.add(square, col, row);
square.widthProperty().bind(root.widthProperty().divide(size));
square.heightProperty().bind(root.heightProperty().divide(size));
}
}
primaryStage.setScene(new Scene(root, 400, 400));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}