How to use CSS in JavaFX Part 5 - bluepapa32’s Java Blog

前回までで基本的な使い方を大体おさえましたが...
今回も懲りずに JavaFX で CSS...

How to use CSS in JavaFX でも紹介しましたが...
JavaFX では Node 以外にも Control の Skin の変数も CSS プロパティとして設定できるのです。
Control の Skin とは TextBox や Button 等の Control を表示するための Node を生成するためのクラスです。

実は Control の Skin のスタイルが設定できるというのが JavaFX で CSS を利用するメリットの一つでもあるのです。
カスタム Control を作ったことのある方であればわかると思いますが...
スタイルのための変数を実際にその変数を利用する Skin に定義できることは

コードがシンプルになり保守性が向上する
Control の変数が機能的なものだけにできる
Control を変更することなく、見た目が変更できる

とかなりいい感じ...

と言うことで...
早速 Control の見た目を CSS で変更してみましょう。
今回は Button の見た目を変更してみましたが、もちろん、他の Control でも可能です。
ただし、設定できるプロパティはそれぞれ異なります。

ボタンの背景を黒に変更してみる。

f:id:bluepapa32:20091217130034p:image:left

"javafx.scene.control.Button" {
    base: black;
}

ボーダーを緑に変更してみる。

f:id:bluepapa32:20091216235357p:image:left

"javafx.scene.control.Button" {
    border-fill: green;
}

ボーダーの内側のハイライト部分を黄色に変更してみる。

f:id:bluepapa32:20091216235401p:image:left

"javafx.scene.control.Button" {
    highlight-fill: yellow;
}

フォーカス時のハイライトを赤色に変更してみる。

f:id:bluepapa32:20091216235400p:image:left

"javafx.scene.control.Button" {
    focus-fill: red;
}

ボタンの影を赤色に変更してみる。

f:id:bluepapa32:20091216235403p:image:left

"javafx.scene.control.Button" {
    shadow-fill: red;
}

ボタンの文字色を赤色に変更してみる。

f:id:bluepapa32:20091216235404p:image:left

"javafx.scene.control.Button" {
    text-fill: red;
}

LinearGradient してみる。

f:id:bluepapa32:20091217130035p:image:left

"javafx.scene.control.Button" {
    border-fill:    linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
    fill:           linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
    highlight-fill: linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
}

ボタンを丸くしてみる。

f:id:bluepapa32:20091216235358p:image:left

"javafx.scene.control.Button" {
    base: black;
    corner-radius: 20.0;
    width: 20.0;
    height: 20.0;
}

丸ボタンに RadialGradient してみる。

f:id:bluepapa32:20091216235356p:image:left

"javafx.scene.control.Rectangle" {
    corner-radius: 20.0;
    width: 20.0;
    height: 20.0;
    border-fill:    radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, skyblue), (1.00, blue);
    fill:           radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, skyblue), (1.00, blue);
    highlight-fill: radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, skyblue), (1.00, blue);
}

Button の API を見てもらえば分かりますが、Button 自体にはスタイルを設定するための変数はほとんどありません。
しかし、CSS を使えば、ここまで Button の見た目を変えられるのです。
しかも、コードを変更することなく...

このサンプルを通して、少しでも CSS の良さが伝われば幸いです。