Creating a User Interface in JavaFX - JavaFX 8: A Definitive Guide to Building Desktop, Mobile, and Embedded Java Clients - page 52

sceneRef.getStylesheets().clear();
sceneRef.getStylesheets().addAll("/"+radioButtonText);
});
In this snippet, the stylesheets property of the Scene is initialized to the location of the onTheScene.css file,
which in this case is the root directory. Also shown in the snippet is the assignment of the CSS files to the Scene
as the appropriate buttons are clicked. The text of the RadioButton instances is equal to the names of the style sheets,
hence we can easily set the corresponding style sheet to the scene. Take a look at Listing 2-3 to see the style sheet
that corresponds to the screenshot in Figure 2-6 . Some of the CSS selectors in this style sheet represent the nodes
whose id property is either "stageX" or "stageY" . There is also a selector in this style sheet that represents nodes
whose styleClass property is "emphasized-text" . In addition, there is a selector in this style sheet that maps to
the ChoiceBox UI control by substituting the camel-case name of the control to a lowercase hyphenated name
(choice-box). The properties in this style sheet begin with “ -fx ”, and correspond to the type of node with which they
are associated. The values in this style sheet (e.g., black, italic, and 14pt) are expressed as standard CSS values.
Listing 2-3. onTheScene.css
#stageX, #stageY {
-fx-padding: 1;
-fx-border-color: black;
-fx-border-style: dashed;
-fx-border-width: 2;
-fx-border-radius: 5;
}
.emphasized-text {
-fx-font-size: 14pt;
-fx-font-weight: normal;
-fx-font-style: italic;
}
.choice-box:hover {
-fx-scale-x: 1.1;
-fx-scale-y: 1.1;
}
.radio-button .radio {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border,
-fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 1.0em;
-fx-padding: 0.333333em;
}
.radio-button:focused .radio {
-fx-background-color: -fx-focus-color, -fx-outer-border,
-fx-inner-border, -fx-body-color;
-fx-background-radius: 1.0em;
-fx-background-insets: -1.4, 0, 1, 2;
}
Listing 2-4 is the style sheet that corresponds to the screenshot in Figure 2-7 . For more information on CSS style
sheets, see the Resources section at the end of this chapter.