css - JavaFX TableView : howto move conditional cell styles to FXML/CSS?

Question

我正在尝试在 JavaFX Tableview 的单元格中设置文本样式。我的模型有 StringProperty title, description; 和 BooleanProperty warning;

public class MyItem {
    @FXML
    private final StringProperty title =  new SimpleStringProperty();   
    @FXML
    private final StringProperty description =  new SimpleStringProperty();     
    @FXML
    private final BooleanProperty warning = new SimpleBooleanProperty();
    //...
}

表格应该有title 和description。说明始终是 -fx-font-weight: normal。标题为 -fx-font-weight: bold 如果 warning 和 -fx-font-weight: normal 否则。这是一个有效的 POJO 方法。

    column.setCellFactory(new Callback<TableColumn<Message, String>, TableCell<Message, String>>() {
        public TableCell<Message, String> call(TableColumn<Message, String> param) {
            return new TableCell<Message, String>() {

                @Override
                protected void updateItem(String item, boolean empty) {
                    super.updateItem(item, empty);

                    if (empty || null == getTableRow() || null == getTableRow().getItem()) {
                        setText(null);
                    } else {
                        MyItem m = (MyItem) this.getTableRow().getItem();

                        if (null != m) {
                            setText(m.getTitle());                                
                            String style = m.isWarning()? "-fx-font-weight: bold" : "-fx-font-weight: normal";
                            setStyle(style);
                        }
                    }
                }
            };
        }
    });

我想将样式移动到 FXML 和 CSS。这是我尝试过的:

public class MyController{

    @FXML
    private TableView myTable;
    @FXML
    private TableColumn<MyItem, String>  titleColumn;
    @FXML
    private TableColumn<MyItem, String>  descriptionColumn;

    //...
}

<content>
    <TableView styleClass="fxml-table-style" stylesheets="@my_table_style.css" fx:id="myTable" >
        <columns>
         <TableColumn text="Title">
            <cellValueFactory><PropertyValueFactory property="title" />
            </cellValueFactory>
         </TableColumn>
         <TableColumn text="Body">
            <cellValueFactory><PropertyValueFactory property="description" />
            </cellValueFactory>
         </TableColumn>
        </columns>  
    </TableColumn>
</columns>

如何告诉 Java“如果列是标题和行 isWarning，则使用 custom-style-1；否则使用 custom-style-2”？

Answer 1

您可以使用 CSS 做的一件事是编写考虑到 Node 父节点的选择器。

在警告属性为 true 的 TableRow 中添加一个 preudoclass 是合适的:

public class WarningRowFactory implements Callback<TableView<MyItem>, TableRow<MyItem>> {

    private static final PseudoClass WARNING = PseudoClass.getPseudoClass("warning");

    @Override
    public TableRow<MyItem> call(TableView<MyItem> table) {
        return new TableRow<MyItem>() {

            private final InvalidationListener listener = observable -> pseudoClassStateChanged(WARNING, getItem() != null && getItem().isWarning());

            @Override
            public void updateItem(MyItem item, boolean empty) {
                if (getItem() != null) {
                    getItem().warningProperty().removeListener(listener);
                }

                super.updateItem(item, empty);

                if (item != null) {
                    item.warningProperty().addListener(listener);
                }

                listener.invalidated(null);
            }
        };
    }
}

<TableView styleClass="fxml-table-style" stylesheets="@my_table_style.css" fx:id="myTable" >
    <rowFactory>
        <WarningRowFactory />
    </rowFactory>
    ...

.table-row-cell .table-cell {
    -fx-font-weight: normal;
}

.table-row-cell:warning .table-cell {
    -fx-font-weight: bold;
}