JavaFX 2でアプリケーション作成(その10) - torutkのブログ の続きです。
JavaFX 2アプリケーションのGUIをCSSでカスタマイズしていきます。前回は、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 2.0最初の一歩 - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その1) - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その2) - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その3) - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その4) - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その5) - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その6) - torutkのブログ
- JavaFX 2.0でアプリケーション作成(その7) - torutkのブログ
- JavaFX 2でアプリケーション作成(その8) - torutkのブログ
- JavaFX 2でアプリケーション作成(その9) - torutkのブログ
- JavaFX 2でアプリケーション作成(その10) - torutkのブログ