torutkのブログ

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

JavaFX 2でアプリケーション作成（その10）

Java JavaFX

JavaFX 2でアプリケーション作成（その9） - torutkのブログの続きです。

JavaFXでは、GUI部品の見栄え（色、フォント、形状）を、HTMLではおなじみのCSS(Cascade Style Sheet)で外部ファイルとして定義できます。

CSS化の第1歩

CSSファイルを読み込み、設定するコードを記述します。場所はSemaphoreView.javaファイルのstartメソッドです。

SemaphoreView.java
    public void start(Stage primaryStage) {
        :
	Scene scene = new Scene(borderPane , 360 , 250);
	String style = SemaphoreView.class.
                getResource("stylesheet.css").toExternalForm();
	scene.getStylesheets().add(style);
        :
    }

CSSファイルを記述します。まず、Labelの背景色を指定したファイルを用意します。

stylesheet.css
.label {
    -fx-background-color: mistyrose;
}


Labelに対して背景色を指定したので、画面上で使用しているLabel2か所についてCSSの設定が反映されています。

特定のGUIコントロールに対してのみ設定する

題名のラベルに対してだけCSS上で定義をするには、あらかじめプログラム上でIDを設定し、CSSファイルではそのIDを指定して見栄えの定義を記述します。

	Label topLabel = new Label("Semaphoreへの操作とその結果");
	topLabel.setId("topLabel");

まず、シーングラフ中のあるGUIコントロールに対してsetIdメソッドでユニークな識別名を設定します。

#topLabel {
    -fx-background-color: mistyrose;
}

次に、CSSファイルで、#に識別名を付けて特定のGUIコントロールに対する見栄えの定義を記述します。

これで、特定のGUIコントロールに対する見栄えの定義ができます。

画面全体への見栄え設定

.root という指定で、すべてのGUIコントロールに対する共通の見栄えを定義できます。

.root {
    -fx-font-size: 14pt;
    -fx-font-family: "Meiryo";
}

この定義を追加して実行したときの画面を次に示します。

画面上に配置した各GUIコントロールのフォント種類／サイズが変更されています。

いろいろ実験

グラデーション

ラベルの背景をグラデーションしてみます。

#topLabel {
    -fx-background-color: linear-gradient(to right, derive(mistyrose, 50%), mistyrose);
}

画面は次のとおりです。


-fx-background-colorで指定する値は型です。
JavaFXのCSSリファレンス（以下URL）によれば、の定義は、

| |

となっています。そこで、左から右に水平方向にグラデーションを付けてみます。
の記法は、リファレンス上は

linear-gradient( [ [from to ] | [ to ], ]? [ [ repeat | reflect ], ]? [, ]+)

と複雑になっています。これでは知っている人のみわかる定義なので、具体例を見た方がやさしいです。リファレンスにある単純な例の1つが次です。

linear-gradient(to bottom right, red, black)

fromが省略され、to と、が2個指定されています。
（デフォルトの）左上から右下（bottom right）方向へ、赤（red）から黒（black）へのグラデーションとなります。

次に、色の指定では、"Color Functions（色演算）"として、deriveおよびladderを使うことができます。グラデーションで、色の変化を輝度とするときによくderiveが使われます。deriveの書式は次のとおりです。

derive( , % )

基準になる色と、その色に対する輝度の増減を-100%〜+100%で指定します。例えば、derive(red, -50%) なら、輝度の暗い赤となります。

記事一覧