JavaFX CSSを動的にLabelに適応するサンプル

#サンプルの紹介

JavaFXにはLabelというコンポーネントがあります。setStyle()メソッドを使い、このコンポーネントにJavaFX CSSを動的に適応するサンプルを作りました。ただし、JavaFX CSSはLabel特有のものに限りました。

Labelに適応できるJavaFX CSSは[JavaFX CSSリファレンス・ガイド](https://docs.oracle.com/javase/jp/8/javafx/api/javafx/scene/doc-files/cssref.html"JavaFX CSSリファレンス・ガイド")で調べました。

今回作ったアプリケーションは以下のような画面です。

![start.png](https://qiita-image-store.s3.amazonaws.com/0/133921/a2ef7a39-69cb-a78f-d9ed-56e64b37ecc4.png)


コンボボックスでJavaFX CSSのプロパティを選択できます。


今回作ったアプリケーションは以下のgithubリポジトリに載せました。

https://github.com/java-beginner/check-style-of-label-javaFX

#適応例

以下、JavaFX CSSを適応してみた感想です。

##-fx-alignment

centerにすると上下左右の中央になります。
baseline-[ center | left | right ]は[ center | left | right ]とそれぞれ同じでした。他はプロパティ名から想像できる配置通りです。

###center
![center.png](https://qiita-image-store.s3.amazonaws.com/0/133921/65571fcd-6f18-c72f-5624-1f1ed685f3f7.png)


##-fx-text-alignment

[ left | center | right | justify ]それぞれ変化がありませんでした。

##-fx-text-overrun

ellipsisという単語が含まれるプロパティでは省略の仕方が変わります。clipは省略しません。Labelを含むBorderの領域も変化しました。


###center-ellipsis
![center-ellipsis.png](https://qiita-image-store.s3.amazonaws.com/0/133921/0e346551-2339-b0d8-eeaa-94dbb5a8ae1f.png)


###center-word-ellipsis
![center-word-ellipsis.png](https://qiita-image-store.s3.amazonaws.com/0/133921/db328729-98d9-e7a6-df8e-2ac6adba5763.png)


###clip
![clip.png](https://qiita-image-store.s3.amazonaws.com/0/133921/19de391a-e410-208e-69cc-c5d3b85f8c93.png)


###ellipsis
![ellipsis.png](https://qiita-image-store.s3.amazonaws.com/0/133921/566de32f-08b8-f14e-a767-bcaff1e28269.png)


###leading-ellipsis
![leading-ellipsis.png](https://qiita-image-store.s3.amazonaws.com/0/133921/adf99c0f-e747-6ba5-2599-38feea15b879.png)


###leading-word-ellipsis
![leading-word-ellipsis.png](https://qiita-image-store.s3.amazonaws.com/0/133921/02ed1809-d36a-e8a7-4026-c049981aaf6b.png)


###word-ellipsis
![word-ellipsis.png](https://qiita-image-store.s3.amazonaws.com/0/133921/40944a42-bd28-07b3-eb57-a2114404c3a0.png)


##-fx-wrap-text

trueにするとテキストが省略されなくなりました。

###true
![true.png](https://qiita-image-store.s3.amazonaws.com/0/133921/54a582f9-724c-31ea-f9f3-0ac3191419a6.png)


###false
![false.png](https://qiita-image-store.s3.amazonaws.com/0/133921/b0091f34-e447-c92d-ff57-8e56606eb63e.png)


##-fx-underline

trueにすると、アンダーラインがテキストに引かれます。

###true
![true.png](https://qiita-image-store.s3.amazonaws.com/0/133921/85c48c37-86c6-902a-22e7-4bd47bb17f2c.png)


###false
![false.png](https://qiita-image-store.s3.amazonaws.com/0/133921/6f8821a4-15a5-01f0-a897-8f7060a8be5e.png)


##-fx-label-padding

パディングの量が変わります。

##-fx-text-fill

テキストの色が変わります。線形グラデーション、放射状グラデーションを指定することもできます。

###linear-gradient(to bottom right, red, black);
![linear-gradient.png](https://qiita-image-store.s3.amazonaws.com/0/133921/1caaa61e-6832-3b74-f468-1d5469a9457e.png)


###radial-gradient(radius 100%, red, darkgray, black);
![radial-gradient.png](https://qiita-image-store.s3.amazonaws.com/0/133921/e9f6bb17-cf9e-d177-a8fc-603c35aa6cee.png)


##-fx-ellipsis-string

省略記号を指定できます。
![略.png](https://qiita-image-store.s3.amazonaws.com/0/133921/37957f91-3de9-d407-76ec-6f215b2aa2f6.png)


##-fx-font-family

これはシステム依存です。monospaceの変化が分かりやすかったです。

###serif
![serif.png](https://qiita-image-store.s3.amazonaws.com/0/133921/eb39ae6f-9b70-c67e-f564-f009bf618983.png)


###sans-serif
![sans-serif.png](https://qiita-image-store.s3.amazonaws.com/0/133921/ebfef462-48e5-9f82-df66-93e1750ef43e.png)


###cursive
![cursive.png](https://qiita-image-store.s3.amazonaws.com/0/133921/79c1db7b-d20d-f639-3825-b66a909a178c.png)


###fantasy
![fantasy.png](https://qiita-image-store.s3.amazonaws.com/0/133921/2eab7cd0-0747-64ea-607b-067755fc3da9.png)


###monospace
![monospace.png](https://qiita-image-store.s3.amazonaws.com/0/133921/1f8a5766-2287-237b-cc29-054fb4e2f57f.png)


##-fx-font-size

フォントの大きさです。
![15pt.png](https://qiita-image-store.s3.amazonaws.com/0/133921/3df114d8-b501-0370-d4fc-4f728794ff0b.png)


##-fx-font-style

以下のプロパティ名を指定できます。

+ normal
+ italic
+ oblique

しかし、変化しませんでした。

##-fx-font-weight

normalとlighter、boldとbolderは区別がつきませんでした。

###normal
![normal.png](https://qiita-image-store.s3.amazonaws.com/0/133921/5ee96b6c-e45a-7432-70da-a1a1f1662dae.png)


###bold
![bold.png](https://qiita-image-store.s3.amazonaws.com/0/133921/248cfa1a-4c30-5b4e-735f-e93408a805a6.png)


###bolder
![bolder.png](https://qiita-image-store.s3.amazonaws.com/0/133921/de596aae-821f-8b78-f3aa-b379ce7afe0a.png)


###lighter
![lighter.png](https://qiita-image-store.s3.amazonaws.com/0/133921/886626bc-74e7-c206-76d7-0ebff5244ce3.png)


##-fx-graphic、-fx-graphic-text-gap、-fx-content-display

+ -fx-graphicで画像を選択できます
+ -fx-graphic-text-gapで画像とテキストの間の幅を調節できます。
+ -fx-content-displayでテキストに対する画像の位置を設定できます。

![normal.png](https://qiita-image-store.s3.amazonaws.com/0/133921/ec5cac42-6b2b-a3e2-58ff-313e604a096d.png)
![bottom.png](https://qiita-image-store.s3.amazonaws.com/0/133921/c5c9484a-9d5d-0a28-7796-ebdbc68bbd42.png)