Paint the rows inside the tableview

Question

I have a TableView and two text fields. When the user write numbers into textfields and push the button. All tablerows should be painted as a percentage. For exmaple 30% should be yellow and 70% should be green.

I tried to use lookup method to look for TableView objects. Adding new css class changed the colour of tablerows. But this solution is not good. Lookup can find only visible elements.

@FXML
void confirmPercentage(ActionEvent event) {
    clearSelectionsOfTestingTbaleView();
    TableRow[] tableRows = selectTrainingDataTableView.lookupAll(".table-row-cell").toArray(new TableRow[0]);

    double percent = Double.parseDouble(this.trainingSetPercentageTextField.getText());
    percent = percent > 1 ? percent / 100 : percent;
    int trainIndexes = (int) (Math.round(tableRows.length * percent));

    for (int i = 0 ; i < trainIndexes; i++){
        tableRows[i].getStyleClass().add("selected-as-train");
    }
}

I have 15 notes, but there are only 13...

So what is the way to paint ALL tablerows?

SOLUTION

Finally, I received my sight!

So i created two sets to keep selected indexes. And, i just set PseudoClass according this indexes...

void init()
    Set<Integer> testSetIndexes = new HashSet<>();
    Set<Integer> trainSetIndexes = new HashSet<>();
    tableView.setRowFactory( tableView2 -> {

        PseudoClass train = PseudoClass.getPseudoClass("train");
        PseudoClass test = PseudoClass.getPseudoClass("test");
        PseudoClass trainAndTest = PseudoClass.getPseudoClass("train-and-test");
        /*Percentage selection with button*/
        final TableRow<List<Double>> row = new TableRow<List<Double>>(){

            @Override
            public void updateItem(List<Double> item, boolean empty){

                if (item != null) {
                    int index = dataInsideTableView.indexOf(item);
                    this.pseudoClassStateChanged(train, trainSetIndexes.contains(index));
                    this.pseudoClassStateChanged(test, testSetIndexes.contains(index));
                    this.pseudoClassStateChanged(trainAndTest, trainSetIndexes.contains(index) && testSetIndexes.contains(index));
                } else {
                    this.pseudoClassStateChanged(train, false);
                    this.pseudoClassStateChanged(test, false);
                    this.pseudoClassStateChanged(trainAndTest, false);
                }
            }
        };

        /*Mouse selection*/
        row.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                if (manualSelectionCheckBox.isSelected()) {
                    if (event.isPrimaryButtonDown()) {
                        int index = dataInsideTableView.indexOf(row.getTableView().getItems().get(row.getIndex()));
                        if(trainSetIndexes.contains(index)){
                            trainSetIndexes.remove(index);
                        } else {
                            trainSetIndexes.add(index);
                        }
                        selectTrainingDataTableView.refresh(); //call update
                    } else if (event.isSecondaryButtonDown()) {
                        int index = dataInsideTableView.indexOf(row.getTableView().getItems().get(row.getIndex()));
                        if(testSetIndexes.contains(index)){
                            testSetIndexes.remove(index);
                        } else {
                            testSetIndexes.add(index);
                        }
                        tableView.refresh();
                    }
                }
            }
        });

        return row;
    });

I click "Refresh" button, confirmPercentage method just recount indexes and refresh the table.

@FXML
void confirmPercentage(ActionEvent event) {
    trainSetIndexes.clean();
    testSetIndexes.clean();

    double percent = Double.parseDouble(this.trainingSetPercentageTextField.getText());
    percent = percent > 1 ? percent / 100 : percent;
    trainSize = (int) (Math.floor(usedData.size() * percent));
    percent = Double.parseDouble(this.testingSetPercentageTextField .getText());
    percent = percent > 1 ? percent / 100 : percent;
    testSize = (int) (Math.floor(usedData.size() * percent));

    //put indexes
    for (int i = 0 ; i < trainSize; i++){
        trainSetIndexes.add(i);
    }

    for (int i = usedData.size()-1 ; i >= usedData.size()-1-testSize; i--){
        testSetIndexes.add(i);
    }
    this.tableView.refresh();
}

Answer 1

you can have TableRow StyleClass as field in your TableView Data Model

fxml view

<VBox fx:id="root" prefHeight="300.0" prefWidth="600.0" fx:controller="sample.View"
      xmlns="http://javafx.com/javafx/8.0.172-ea" xmlns:fx="http://javafx.com/fxml/1" >
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>

    <ToolBar>
        <Button fx:id="set" mnemonicParsing="false" onAction="#set" text="Set" />
        <Button fx:id="reset" mnemonicParsing="false" onAction="#reset" text="Reset" />
    </ToolBar>


    <TableView fx:id="tvDevices" VBox.vgrow="ALWAYS">
        <columns>
            <TableColumn fx:id="colNum1" text="Num1">
                <cellValueFactory>
                    <PropertyValueFactory property="num1" />
                </cellValueFactory>
            </TableColumn>
            <TableColumn fx:id="colNum2" text="Num2">
                <cellValueFactory>
                    <PropertyValueFactory property="num2" />
                </cellValueFactory>
            </TableColumn><TableColumn fx:id="colNum3" text="Num3">
                <cellValueFactory>
                    <PropertyValueFactory property="num3" />
                </cellValueFactory>
            </TableColumn>
        </columns>
    </TableView>
</VBox>

Data View Model class

public class Foo {
    private DoubleProperty num1;
    private DoubleProperty num2;
    private DoubleProperty num3;
    private StringProperty styleClass;

    public Foo(int num1, int num2, int num3) {
        this.num1 = new SimpleDoubleProperty(num1);
        this.num2 = new SimpleDoubleProperty(num2);
        this.num3 = new SimpleDoubleProperty(num3);
        this.styleClass = new SimpleStringProperty();
    }

    public double getNum1() {
        return num1.get();
    }

    public DoubleProperty num1Property() {
        return num1;
    }

    public void setNum1(double num1) {
        this.num1.set(num1);
    }

    public double getNum2() {
        return num2.get();
    }

    public DoubleProperty num2Property() {
        return num2;
    }

    public void setNum2(double num2) {
        this.num2.set(num2);
    }

    public double getNum3() {
        return num3.get();
    }

    public DoubleProperty num3Property() {
        return num3;
    }

    public void setNum3(double num3) {
        this.num3.set(num3);
    }

    public String getStyleClass() {
        return styleClass.get();
    }

    public StringProperty styleClassProperty() {
        return styleClass;
    }

    public void setStyleClass(String styleClass) {
        this.styleClass.set(styleClass);
    }
}

view controller

public class View implements Initializable {

    @FXML
    private TableView<Foo> tvDevices;

    @Override
    public void initialize(URL location, ResourceBundle resources) {    
            tvDevices.setRowFactory(param -> {
            TableRow<Foo> row = new TableRow<>();
            //This listener will monitor the Change in the Modal StyleClass to keep row updated when StyleClass value chenge.
            ChangeListener<String> listener = (observable, oldValue, newValue) -> {
                if (newValue == null) {
                    //reset StyleClass to default by removing any additional class's
                    row.getStyleClass().remove(3,row.getStyleClass().size());
                } else {
                    //removing any additional class's and add the new one
                    row.getStyleClass().remove(3,row.getStyleClass().size());
                    row.getStyleClass().add(newValue);
                }
            };
            //This listener will monitor the particular Modal attached to this row.
            row.itemProperty().addListener((observable, oldValue, newValue) -> {
                if (oldValue != null) {
                    //remover the listener from the old item
                    oldValue.styleClassProperty().removeListener(listener);
                }
                if (newValue != null) {
                    // attach the listener to the new item
                    newValue.styleClassProperty().addListener(listener);
                    // update row StyleClass to new item StyleClass
                    if (newValue.styleClassProperty() == null) {
                        row.getStyleClass().remove(3,row.getStyleClass().size());
                    } else {
                        row.getStyleClass().remove(3,row.getStyleClass().size());
                        row.getStyleClass().add(newValue.getStyleClass());
                    }
                } else {
                    //reset StyleClass to default because new item is null
                    row.getStyleClass().remove(3,row.getStyleClass().size());
                }
            });
            return row;
        });

        for (int i = 0; i < 50; i++) {
            tvDevices.getItems().add(new Foo(1, 2, 3));
        }
    }

    @FXML
    private void reset(ActionEvent actionEvent) {
        tvDevices.getItems().forEach(foo -> foo.setStyleClass(null));
        actionEvent.consume();
    }

    @FXML
    private void set(ActionEvent actionEvent) {
        tvDevices.getItems().get(10).setStyleClass("class1");
        tvDevices.getItems().get(20).setStyleClass("class2");
        tvDevices.getItems().get(40).setStyleClass("class3");
        actionEvent.consume();
    }
}