torutkのブログ

ソフトウェア・エンジニアのブログ

JavaFX 2でアプリケーション作成(その11)

JavaFX 2でアプリケーション作成(その10) - torutkのブログ の続きです。
JavaFX 2アプリケーションのGUICSSでカスタマイズしていきます。前回は、Labelの背景の色を定義し、さらにグラデーション表示してみました。今回はButtonの外見を定義していきます。

Buttonの色を変える - background-colorでは悲しい見栄えに

まず、前回までの知識でCSSでボタンの色を変えてみます。

Buttonクラスの定義は.buttonで、背景色は-fx-background-colorだろうと目星をつけて試してみます。CSSファイルに以下のように追記します。

.button {
    -fx-background-color: goldenrod;
}

プログラムを実行すると、次の画面になりました。

ボタンが平面的にべた一色になってしまいました。クリックしても表示に変化はない状態です。

ここで、CSSリファレンスではなく、UIコントロールのドキュメントのButton節を参照します。

そこには、-fx-base で色を設定している記述があります。

そこで、CSSファイルを修正します。

.button {
    -fx-base: goldenrod;
}

画面は次のようになります。

[Release]ボタンが少し淡い色となっているのは、画面キャプチャの都合でマウスカーソルが表示されていませんが、マウスカーソルをちょうど[Release]ボタン上に移動させ、いわゆるホバー表示状態となっているためです。

GridPaneの見栄えを設定する

最初、CSSで、.gridPaneとか.grid-paneとかを指定しても全然反映されず悩んでいましたが、以下ドキュメントによると

ボタンやチェックボックスなどのコントロールがそれぞれスタイルクラス.buttonや.check-boxに対応するのとは異なり、レイアウト用ペインのクラスに対応するスタイルクラスは事前には提供されていない。

ということでした。そこで、APIであらかじめスタイルクラスを定義し、それに対応する定義をCSSに記述することになります。

まず、GridPaneインスタンスにスタイルクラス grid を定義します。

	GridPane semaphorePane = new GridPane();
	semaphorePane.getStyleClass().add("grid");

CSSを定義します。

.grid {
    -fx-background-color: linear-gradient(to bottom right, derive(lavender, 25%), lavender);
}

この定義で実行した画面を次に示します。

Labelに影(dropshadow)を付ける

CSSの定義は次です。

#topLabel {
    -fx-background-color: linear-gradient(to right, derive(mistyrose, 50%), mistyrose);
    -fx-effect: dropshadow(gaussian, dimgray, 10, 0.5, 3, 3);
}

.label {
    -fx-effect: dropshadow(one-pass-box, gray, 10, 0.3, 2, 2);
}

画面は次です。

次回は

FXMLによる画面レイアウトの記述を行いたいと思います。

JavaFX CSSに関する参考サイト(追記)

Buttonに特化した解説

カレンダーの見栄えをCSSで設定

グラデーション(linear-gradient)