Josh Marinacci
Fun with CSS
This example shows you how to use CSS to dynamically style your applications at runtime. It uses three CSS files: default.css, clean.css, and dark.css. These files contain information about different user interface attributes, such as color, font, and shape. Click the Default, Clean, or Dark button to change the style.
Understanding the Code
A typical css file is shown here. The css file has style attributes specified for Rectangle, Circle, and Text.
Scene {
fill: #ffffff;
}
.bg {
fill: #ccccff;
stroke: #333399;
}
Rectangle {
arcWidth: 10;
arcHeight: 10;
}
Circle {
stroke: #ffffcc;
strokeWidth: 10;
}
Text {
font-family: "Helvetica, Arial";
font-size: 20pt;
}
#styleText {
font-size: 30pt;
font-style: italic;
font-family: "Georgia";
}
Now the previous style sheet needs to be associated with the scene. You achieve this result by associating the style sheet path with the stylesheets attribute of Scene.
var stylesheets : String = "{__DIR__}default.css";
Stage {
scene: Scene {
stylesheets: bind stylesheets
You can associate the individual class selector with Node by using the styleClass attribute.
Rectangle {
x: 10 y: 70 width: 200 height: 50 fill: Color.RED
styleClass: "bg"
}
You can associate the id selector with Node by using the id attribute.
Text {
x: 70 y: 160 content: "Style"
id:"styleText"
}
The style sheet associated with the Scene is updated when the Default, Clean, or Dark button is clicked, as the following code shows.
SwingButton {
text: "Default"
action: function() {
stylesheets = "{__DIR__}default.css";
}
},
SwingButton {
text: "Clean"
action: function() {
stylesheets = "{__DIR__}clean.css";
}
},
SwingButton {
text: "Dark"
action: function() {
stylesheets = "{__DIR__}dark.css";
}
}