ScalaFXでCSSを使ってカスタムTreeCellをスタイルする方法は？ - css、scalafx

背景色を変えたいCSSを使用してカスタムTreeCellを使用することはできますが、ツリーセルにstyleプロパティを設定しても機能しません。次のようなCSSファイルを使用して、黄色と灰色のセルを交互に配置できます。

.tree-cell:disabled {
-fx-padding: 3 3 3 3;
-fx-background-color: white;
}

.tree-cell:selected {
-fx-background-color: blue;
}

.tree-cell:even {
-fx-background-color: yellow;
}

.tree-cell:odd {
-fx-background-color: grey;
}

.tree-cell:drag-over {
-fx-background-color: plum;
}

次のようなイベントハンドラを使ってテキストの塗りつぶしスタイルを変更します。

  onDragEntered = (event: DragEvent) => {
val db = event.getDragboard
if (db.hasContent(customFormat)) {
textFill = Color.DEEPSKYBLUE

style() = "tree-cell:drag-over"
}

event.consume()
}

しかし、ツリーのセルのスタイルは変わりません。

回答：

私は結局私自身の質問に対する答えを見つけた。 CSSファイルは次のようになりました。

.tree-cell:disabled {
-fx-padding: 3 3 3 3;
-fx-background-color: white;
}

.tree-cell:selected {
-fx-background-color: blue;
}

.tree-cell:filled:even {
-fx-background-color: lightyellow;
}

.tree-cell:filled:odd {
-fx-background-color: lightsteelblue;
}

.tree-cell.drag-over:filled {
-fx-background-color: plum;
}

上にドラッグすると梅の色になります塗りつぶされたセル。空のセルは白のままです。 ここに到達するために、私は「CSSの特定性」の規則を理解する必要がありました、しかし最終的に完成したCSSファイルを単純化して各ケースを1つのセレクターに正確に一致させることは可能でした。

ScalaFXコードはこのようになりました：

import scala.collection.JavaConversions._

// Copy the list, so that it isn"t modified in place.
var oldStyleClass: util.Collection[String] = styleClass.toList

onDragEntered = (event: DragEvent) => {
val db = event.getDragboard
if (db.hasContent(customFormat)) {
textFill = Color.DEEPSKYBLUE

// Remember the original style by taking a copy.
oldStyleClass = styleClass.toList

// Restyle filled cells with .tree-cell.dragover:filled
// for the duration of the drag
styleClass.add("drag-over")
}

event.consume()
}

onDragExited = (event: DragEvent) => {
val db = event.getDragboard
if (db.hasContent(customFormat)) {
textFill = Color.BLACK
}

// Restore the original style.
styleClass.setAll(oldStyleClass)

event.consume()
}

途中で私は失敗したドロップのためにアニメーションを失った。そうでなければ私は幸せです（しかしScalaFX-landではやや孤独です）。