サンプルの紹介
JavaFXにはLabelというコンポーネントがあります。setStyle()メソッドを使い、このコンポーネントにJavaFX CSSを動的に適応するサンプルを作りました。ただし、JavaFX CSSはLabel特有のものに限りました。
Labelに適応できるJavaFX CSSはJavaFX CSSリファレンス・ガイドで調べました。
今回作ったアプリケーションは以下のような画面です。
コンボボックスでJavaFX CSSのプロパティを選択できます。
今回作ったアプリケーションは以下のgithubリポジトリに載せました。
適応例
以下、JavaFX CSSを適応してみた感想です。
-fx-alignment
centerにすると上下左右の中央になります。
baseline-[ center | left | right ]は[ center | left | right ]とそれぞれ同じでした。他はプロパティ名から想像できる配置通りです。
center
-fx-text-alignment
[ left | center | right | justify ]それぞれ変化がありませんでした。
-fx-text-overrun
ellipsisという単語が含まれるプロパティでは省略の仕方が変わります。clipは省略しません。Labelを含むBorderの領域も変化しました。
center-ellipsis
center-word-ellipsis
clip
ellipsis
leading-ellipsis
leading-word-ellipsis
word-ellipsis
-fx-wrap-text
trueにするとテキストが省略されなくなりました。
true
false
-fx-underline
trueにすると、アンダーラインがテキストに引かれます。
true
false
-fx-label-padding
パディングの量が変わります。
-fx-text-fill
テキストの色が変わります。線形グラデーション、放射状グラデーションを指定することもできます。
linear-gradient(to bottom right, red, black);
radial-gradient(radius 100%, red, darkgray, black);
-fx-ellipsis-string
省略記号を指定できます。
-fx-font-family
これはシステム依存です。monospaceの変化が分かりやすかったです。
serif
sans-serif
cursive
fantasy
monospace
-fx-font-size
フォントの大きさです。
-fx-font-style
以下のプロパティ名を指定できます。
- normal
- italic
- oblique
しかし、変化しませんでした。
-fx-font-weight
normalとlighter、boldとbolderは区別がつきませんでした。
normal
bold
bolder
lighter
-fx-graphic、-fx-graphic-text-gap、-fx-content-display
- -fx-graphicで画像を選択できます
- -fx-graphic-text-gapで画像とテキストの間の幅を調節できます。
- -fx-content-displayでテキストに対する画像の位置を設定できます。
