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?

James_D · Accepted Answer · 2015-08-23T19:14:00.023

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.

Your code works perfectly fine. However besides table flashing, I have another code, which also does table highlighting`table. setRowFactory (highlight row whenever a new Row is added)`. Since there are multiple `setRowFactory`, the latter always override the former. How can I have have both table highlighting and table flashing at the same time ? — mynameisJEFF, Aug 24 '15 at 17:49
Sorry about this, maybe I should post this as another question. — mynameisJEFF, Aug 24 '15 at 18:03
I tried. But I kept getting syntax error. Can you give me very simple example ? — mynameisJEFF, Aug 24 '15 at 18:44
Hi @James_D, Since this is a new question, I moved it to here. http://stackoverflow.com/questions/32188889/javafx-issues-with-multiple-setrowfactory — mynameisJEFF, Aug 24 '15 at 19:09
Hi @James_D, i want to kindly ask is `tv` defined in the code above an anonymous class ? — mynameisJEFF, Aug 28 '15 at 14:28

javafx: table row flashing

1 Answers1

Linked