Components and Skinning - JavaFX 1.2 Application Development - page 142

Using CSS files to apply styles
As your application grows beyond a few GUI components, you will find it cumbersome and
impractical to use inline CSS directives to apply styles. Similar to HTML documents, the JavaFX
platform provides the necessary mechanism to externalize style declarations in one or more CSS
files. In this recipes we will explore how to create and attach a CSS file to your applications.
Getting ready
Before you go through this recipe, you should have an idea of what CSS is and how it is used.
Review the previous recipe Styling your applications with CSS to get an idea of how JavaFX
CSS works. You will create a simple application and an accompanying stylesheet file. We will
examine how the elements are styled using the declared styles in the CSS file.
How to do it...
For this recipe, we are going to create a simple application.
1. The following is the code for the application that will be styled. The full listing of the
code for the application can be found in ch04/source-code/src/styling/
ExternalCssDemo.fx .
def w = 400;
def h = 200;
def panel = VBox {
width:w height:h nodeHPos:HPos.CENTER spacing:10
content:[
Text{content:"External CSS" id:"titleText"}
HBox{
width:w height:h nodeVPos:VPos.CENTER spacing:5
content:[
Circle{radius:50}
Rectangle{
width:100 height:70 styleClass :"broad"
}
Line{startX:0 endX:100 styleClass :"broad"}
]}
Text{
content:"Pay Attention!"
styleClass :"specialText"
}