java - javafx: table row flashing

Question

I have a ReadOnlyBooleanProperty named caution for every Trade object that I created. Each Trade object populates a row in the table view. Now I want the table row to keep flashing in orange colour when caution is true.

public class Trade{
       private DoubleProperty volume;
       private ReadOnlyBooleanWrapper caution;

       public Trade(double volume){
            this.volume = new SimpleDoubleProperty(volume);
            this.caution = new ReadOnlyBooleanWrapper();
            this.caution.bind(this.volume.greaterThan(0));
       }

}

How can I keep the table row flashing forever as long as the caution property is true?

Answer 1

To make something flash, use a Timeline:

Timeline flasher = new Timeline(

    new KeyFrame(Duration.seconds(0.5), e -> {
        // use "flash" color
    }),

    new KeyFrame(Duration.seconds(1.0), e -> {
        // revert to regular color
    })
);

The best way to change the color in a case like this is to use a CSS PseudoClass:

PseudoClass flashHighlight = PseudoClass.getPseudoClass("flash-highlight");
Node flashingNode = ... ;

Timeline flasher = new Timeline(

    new KeyFrame(Duration.seconds(0.5), e -> {
        flashingNode.pseudoClassStateChanged(flashHighlight, true);
    }),

    new KeyFrame(Duration.seconds(1.0), e -> {
        flashingNode.pseudoClassStateChanged(flashHighlight, false);
    })
);
flasher.setCycleCount(Animation.INDEFINITE);

and then in an external CSS file you can configure the style for the flash highlight:

.node-type:flash-highlight {
    /* style for flash "on" */
}

To bind this to a boolean property, you just create a listener with the property:

someBooleanProperty.addListener((obs, oldValue, newValue) -> {
    if (newValue) {
        flasher.play();
    } else {
        flasher.stop();
        flashingNode.pseudoClassStateChanged(false);
    }
});

To apply this to your table row, you have to write a rowFactory. You just need to be aware that the item displayed in the row may change during the lifespan of the row, so you need to update the state and the listener accordingly:

TableView<Trade> table = ... ;
PseudoClass flashHighlight = PseudoClass.getPseudoClass("flash-highlight");
table.setRowFactory(tv -> {
    TableRow<Trade> row = new TableRow<>();
    Timeline flasher = new Timeline(

        new KeyFrame(Duration.seconds(0.5), e -> {
            row.pseudoClassStateChanged(flashHighlight, true);
        }),

        new KeyFrame(Duration.seconds(1.0), e -> {
            row.pseudoClassStateChanged(flashHighlight, false);
        })
    );
    flasher.setCycleCount(Animation.INDEFINITE);

    ChangeListener<Boolean> cautionListener = (obs, cautionWasSet, cautionIsNowSet) -> {
        if (cautionIsNowSet) {
            flasher.play();
        } else {
            flasher.stop();
            row.pseudoClassStateChanged(flashHighlight, false);
        }
    };

    row.itemProperty().addListener((obs, oldItem, newItem) -> {
        if (oldItem != null) {
            oldItem.cautionProperty().removeListener(cautionListener);
        }
        if (newItem == null) {
            flasher.stop();
            row.pseudoClassStateChanged(flashHighlight, false);
        } else {
            newItem.cautionProperty().addListener(cautionListener);
            if (newItem.cautionProperty().get()) {
                flasher.play();
            } else {
                flasher.stop();
                row.pseudoClassStateChanged(flashHighlight, false);
            }
        }
    });

    return row ;
});

And then just define an external CSS file with something like

.table-row-cell:flash-highlight {
    -fx-background: orange ;
}

and whatever other styles you want.