Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX Apply css to TableRows only if they are :enabled

Tags:

java

css

javafx

Assuming that JavaFX CSS doesn't support the :enabled based on JavaFX 8 Oracle CSS Reference how i can do the below?

Hover and Active only when not disabled


A TableView exists where i am applying some kind of css :

.table-row-cell:hover {
    -fx-background-color:orange;
}

.table-row-cell:focused {
    -fx-background-color:purple;
}

I want the above to be done ( only ) when the TableRow is enabled.

So i modified the code including :enabled pseudo element but nothing works now:

.table-row-cell:hover:enabled {
    -fx-background-color:orange;
}

.table-row-cell:focused:enabled {
    -fx-background-color:purple;
}

Finally some small questions:

1)How i can combine :hover with :disabled or :enabled?

->[ apply **:hover** only if the `Table-Row|Cell` is enabled. ]

2)Does JavaFX css supports :enabled?


Last but not least:

After doing several tests on the code above i came to youtu.be/l7Pbz2l2wjE?t=138 this result.

like image 587
GOXR3PLUS Avatar asked Dec 12 '16 08:12

GOXR3PLUS


2 Answers

I reversed your idea, instead of trying to find who is enabled , why not look for the opposite (which is disabled) and apply a fixed style, so that it does not change when the cursor enters the boundaries :

     .table-row-cell{

     -fx-background-color:red;

     }

     .table-row-cell:disabled{

     -fx-background-color:red; //Here you can define a fixed style 
                               //  or similar to the normal state

     }

     .table-row-cell:focused:disabled .text{

       -fx-fill: red; // Here you define the color of the text

     }

     .table-row-cell:hover{

     -fx-background-color:blue;

     }

Hope this will help you, and sorry if I misunderstood!!

like image 105
Bo Halim Avatar answered Oct 22 '22 13:10

Bo Halim


You can use javafx.css.PseudoClass to change the styling of particular rows. Following is an example on how to use PseudoClass.

JavaFx code

PseudoClass enableRowClass = PseudoClass.getPseudoClass("enabled-row");
// A row factory that returns a row that disables itself whenever the
// item it displays has a value less than 5:
table.setRowFactory(tv -> {
    TableRow<Item> row = new TableRow<>();
    row.disableProperty().bind(
            Bindings.selectInteger(row.itemProperty(), "value")
                    .lessThan(5));


    row.itemProperty().addListener(new ChangeListener<Item>() {
        @Override
        public void changed(ObservableValue<? extends Item> observable, Item oldValue, Item newValue) {
            try {
                //Applying pseudoclass to only those rows which are enabled.
                // The condition is the reverse of the condition used to disable a row.
                row.pseudoClassStateChanged(enableRowClass, newValue.getValue() >= 5);
            } catch (NullPointerException e) {
            }
        }
    });
    return row;
});

Css :

.table-row-cell:enabled-row:hover .table-cell {
    -fx-background-color: purple;

}

.table-row-cell:enabled-row:focused .table-cell {
    -fx-background-color: orange;

}
like image 2
Harshita Sethi Avatar answered Oct 22 '22 13:10

Harshita Sethi