How to use CSS in JavaFX Part 3

CSS JavaFX

今回も懲りずに JavaFX で CSS...
今回は CSS プロパティのデータ型についてです。

JavaFX 1.2.1 の CSS プロパティには

  • Number
  • String
  • Boolean
  • Font
  • Color
  • Paint
  • URL
といったデータ型が利用できます。
以下はそれぞれの使用例です。

Number

整数、少数 どちらも指定可能です。

"javafx.scene.shape.Rectangle" {
    layoutX: 10;
    layoutY: 10;
    width:   20.5;
    height:  20.5;
}

String

任意の文字列をダブルクォートで括って指定します。

"javafx.scene.text.Text" {
    content: "HOGE";
}
でも、これって スタイル？？

Boolean

true もしくは false が指定できます。 

"javafx.scene.shape.Rectangle" {
    visible: false;
}

Font

Font は

FontWeight FontPosture サイズ フォント名
の順で指定します。
FontWeight と FontPosture は省略することができます。
現段階では 相対サイズをサポートしていないようなので、pt で指定するのが無難かと... 

"javafx.scene.text.Text".a {
    font: bold italic 14pt "Arial";
}

"javafx.scene.text.Text".b {
    font: italic 14pt "Arial";
}

"javafx.scene.text.Text".c {
    font: bold 14pt "Arial";
}

"javafx.scene.text.Text".d {
    font: 14pt "Arial";
}

Color

以下の ３つの形式で指定できます。 
"javafx.scene.shape.Rectangle".a {
    fill: rgb(255, 255, 0);
}

"javafx.scene.shape.Rectangle".b {
    fill: red;
}

"javafx.scene.shape.Rectangle".c {
    fill: #FFFFFF;
}

Paint

ちょっと感動ものです。CSS でグラデーションが指定できるとは...

まずは LinearGradient してみる。
書式は

linear (startX, startY) to (endX, endY) stops (offset, Color), (offset, Color), ... cycleMethod;
です。cycleMethod には reflect, repeat を指定できます。もちろん 省略しても OK... 

"javafx.scene.shape.Rectangle" {
    fill: linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
}

お次ぎは RadialGradient してみる。
書式は

radial (centerX, centerY), 100% focus(focusX, focusY) stops (offset, Color), (offset, Color), ... cycleMethod;
です。cycleMethod には reflect, repeat を指定できます。もちろん 省略しても OK... 

"javafx.scene.shape.Circle" {
    fill: radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, #7777777), (1.00, #000000);
}

URL

画像の URL を指定します。URL はダブルクォートしてはいけません。
もちろん、URL ですので http:// も OK です。 

"javafx.scene.image.ImageView" {
    image: url(file:/path/to/image.png)
}