Components and Skinning - JavaFX 1.2 Application Development - page 140

JavaFX will match the style property center-x to the Circle.centerX property. The CSS
parser substitutes the - and the following letter with an uppercase letter to form a camel-case
notation. So, the style property arc-width maps to the node property arcWidth , and so
forth. If you do not like the style property name with the dash, you can use the actual node's
property name as the style name as follows:
var circle = Circle {
style:"centerX:100,centerY:100"
}
The runtime module will set the circle's centerX and centerY property to 100.
Because the CSS parser maps node property names to style properties, as of version 1.2 of
the SDK, you can use style declarations to set pretty much all node properties of type Number
and Integer , String , Paint , and Font . At this time, other value types will cause a
parsing exception.
Styling Text nodes with CSS
Font style names for the Text node do not map directly to properties attached to the Text
class. Recall that text is styled as follows:
var txt = Text {
content: "Hello!"
font: Font {name: "Helvetica" size:12}
}
In order to support the semantics of the W3C's guidelines, the JavaFX CSS parser provides
shortcuts which apply the CSS style properties for font directly to the Text instance. Hence,
the following code will format and apply font styles to the text:
var txt = Text {
content: "Hello!"
style: "font-family:\"Helvetica\";"
"font-size:24pt;"
"font-weight:heavy;"
}
Two things that you should notice with this declaration:
1. The Text node does not have an instance of Font{} attached to it. However, Text still
receives font styles from the CSS declaration.
2. The Text node does not have the properties fontFamily , fontSize , and
fontWeight . The CSS engine figures out how to apply the font styles to the
text node directly.