Question

i need create JavaFx TableView with multicolor rows (color1 for low priority, color2 for medium priority etc.). I have created CellFactory

public class TaskCellFactory implements Callback<TableColumn, TableCell> {

@Override
public TableCell call(TableColumn p) {

   TableCell cell = new TableCell<Task, Object>() {
        @Override
        public void updateItem(Object item, boolean empty) {
            super.updateItem(item, empty);
            setText(empty ? null : getString());
            setGraphic(null);
            TableRow currentRow = getTableRow();
            Task currentTask = currentRow == null ? null : (Task)currentRow.getItem();
            if(currentTask != null){   
                Priority priority = currentTask.getPriority();
                clearPriorityStyle();
                if(!isHover() && !isSelected() && !isFocused()){
                    setPriorityStyle(priority);
                }
            }
        }

        @Override
        public void updateSelected(boolean upd){
            super.updateSelected(upd);
            System.out.println("is update");
        }

        private void clearPriorityStyle(){
            ObservableList<String> styleClasses = getStyleClass();
            styleClasses.remove("priorityLow");
            styleClasses.remove("priorityMedium");
            styleClasses.remove("priorityHigh");
        }

        private void setPriorityStyle(Priority priority){
            switch(priority){
                case LOW:
                    getStyleClass().add("priorityLow");
                    break;
                case MEDIUM:
                    getStyleClass().add("priorityMedium");
                    break;
                case HIGH:
                    getStyleClass().add("priorityHigh");
                    break;
            }
            System.out.println(getStyleClass());
        }

        private String getString() {
            return getItem() == null ? "" : getItem().toString();
        }
    };
    return cell;
} }

and css

.priorityLow{ -fx-background-color: palegreen; }
.priorityMedium{ -fx-background-color: skyblue;}
.priorityHigh{ -fx-background-color: palevioletred;}

But i still need highlight selected rows. How can i do that?

Answer 1

Instead of setting the background color for the entire cell in your css, just set the -fx-control-inner-background. Then you will have the default accent, hover and focus rings still available. Also remove the if statement around your setPriorityStyle call of course.

If you also want to override things like the default accent (selected) color or the hover color, you can also do this as in the css below – not sure if the highlight overrides are really recommended though, guess it would depend on your app and desired user experience.

.priorityLow { 
  -fx-control-inner-background: palegreen;
  -fx-accent: derive(-fx-control-inner-background, -40%);
  -fx-cell-hover-color: derive(-fx-control-inner-background, -20%);
}

.priorityMedium { 
  -fx-control-inner-background: skyblue;
  -fx-accent: derive(-fx-control-inner-background, -40%);
  -fx-cell-hover-color: derive(-fx-control-inner-background, -20%);
}

.priorityHigh { 
  -fx-control-inner-background: palevioletred;
  -fx-accent: derive(-fx-control-inner-background, -40%);
  -fx-cell-hover-color: derive(-fx-control-inner-background, -20%);
}

---

Detailed styling information for JavaFX can be found in the default caspian.css stylesheet for JavaFX 2.2 and the JavaFX 2 CSS reference guide. To find caspian.css for your version of JavaFX you can unjar jfxrt.jar (sometimes found in the jre/lib directory).

Update

The default stylesheet for JavaFX is now named modena.css rather than caspian.css.