How to use CSS in JavaFX

CSS JavaFX

皆さんご存知だと思いますが、JavaFX では CSS をサポートしています。
使い方がイマイチ良くわからなかったので、今まで ほとんど使うことはありませんでしたが...
使い方さえ分かってしまえば、こんな便利な機能はありません。
まさか、CSS だけでここまでできるとは...
CSS の使い方をマスターすれば、XHTML + CSS のように 構造と見た目を完全に分離することができるかもしれません。

と言うことで...
今回は CSS の使い方です。

指定可能な CSS プロパティ

JavaFX の CSS プロパティには

  1. 各 Node の public 変数
  2. Control の Skin の public 変数
のうち、 数値、 Font、 Paint、 Color、 Image 型の変数が使えるようです。
HTML の CSS プロパティはサポートしていません。

ちなみに JavaFX の変数の 大文字は CSS ぽく 

text-fill: white;
のように "-" + 小文字 に変換して設定することもできますが、 
textFill: white;
のようにそのまま使うこともできるようです。


CSS の指定方法

CSS の指定方法は ほぼ HTML と同じなので そんなに戸惑うことはありませんが、一応紹介しておきます。

style 変数に設定する。
style 変数は Node に定義されていますので、どんな ノード でも以下のように設定できます。
ただ、この設定方法はあまりメリットが感じられません。
素直にそれぞれの変数に設定した方が良いと思います。 
Rectangle {
    style: "width: 100; height: 100; fill: red;"
}
CSS ファイルに設定する。
HTML の CSS と同様に CSS ファイルにスタイルを設定できます。
これは、再コンパイルなしで 見た目を変更できるのでかなり便利だと思います。
CSS ファイルの URL を Scene#stylesheets に設定するだけで OK です。
Scene#stylesheets は シーケンス型の変数ですので 複数の CSS ファイルを設定することもできます。 
Stage {
    scene: Scene {
        stylesheets: [ "http://hostname/path/to/custom.css" , "{__DIR__}default.css" ]
        content: Rectangle { }
    }
}
CSS ファイルは以下のように設定します。HTML の CSS の書式とほぼ同じです。
以下は 全ての Rectangle のスタイルを設定しています。
セレクタに Rectangle のクラス名を FQN で記述します。
セレクタの "." には特別な意味がありますので、ダブルクォーテーションで囲みます。 
"javafx.scene.shape.Rectangle" {
    width:  100;
    height: 100;
    fill:   red;
}

サンプル

javafx.scene.control.Button の見た目を CSS で変更してみました。
CSS を使えば こんな感じで全く異なる見た目にすることができるのです。