Using the new CSS Analyzer in JavaFX Scene Builder
- by Jerome Cambon
As you know, JavaFX provides from the API many properties that you can set to customize
or make your components to behave as you want. For instance, for a
Button, you can set its font, or its max size.Using Scene
Builder, these properties can be explored and modified using the
inspector.
However, JavaFX also
provides many other properties to have a fine grained customization
of your components : the css properties. These properties are
typically set from a css stylesheet. For instance, you can set a
background image on a Button, change the Button corners, etc...
Using Scene Builder,
until now, you could set a css property using the inspector Style and
Stylesheet editors. But you had to go to the JavaFX
css documentation to know the css properties that can be applied
to a given component.
Hopefully, Scene
Builder 1.1 added recently a very interesting new feature : the CSS
Analyzer.It allows you to explore all the css properties
available for a JavaFX component, and helps you to build your css
rules.
A very simple example : make a Button rounded
Let’s take a
very simple example:you would like to customize your Buttons to
make them rounded.
First, enable the CSS
Analyzer, using the ‘View->Show CSS Analyzer’ menu.
Grow the main window, and the CSS Analyzer to get more room:
Then, drop a Button
from the Library to the ContentView: the CSS Analyzer is now showing
the Button css properties:
As you can see, there
is a ‘-fx-background-radius’ css property that allow to
define the radius of the background (note that you can get the
associated css documentation by clicking on the property name). You
can then experiment this by setting the Button style property from
the inspector:
As you can see in the
css doc, one can set the same radius for the 4 corners by a simple
number. Once the style value is applied, the Button is now rounded,
as expected.Look at the CSS Analyzer: the ‘-fx-background-radius’
property has now 2 entries: the default one, and the one we just
entered from the Style property. The new value “win”: it
overrides the default one, and become the actual value (to highlight
this, the cell background becomes blue).
Now, you will
certainly prefer to apply this new style to all the Buttons of your
FXML document, and have a css rule for this.To do this, save you
document first, and create a css file in the same directory than the
new document.Create an empty css file (e.g. test.css), and attach
it the the root AnchorPane, by first selecting the AnchorPane, then
using the Stylesheets editor from the inspector:
Add the corresponding
css rule to your new test.css file, from your preferred editor
(Netbeans for me ;-) and save it.
.button {
-fx-background-radius: 10px;}
Now, select your
Button and have a look at the CSS Analyzer. As you can see, the
Button is inheriting the css rule (since the Button is a child of the
AnchorPane), and still have its inline Style. The Inline style “win”,
since it has precedence on the stylesheet. The CSS Analyzer columns
are displayed by precedence order.Note the small right-arrow
icons, that allow to jump to the source of the value (either
test.css, or the inspector in this case).Of course, unless you
want to set a specific background radius for this particular Button,
you can remove the inline Style from the inspector.
Changing the color of a TitledPane arrow
In some cases, it can
be useful to be able to select the inner element you want to style
directly from the Content View .
Drop a TitledPane to
the Content View. Then select from the CSS Analyzer the CSS cursor
(the other cursor on the left allow you to come back to ‘standard’
selection), that will allow to select an inner element:
height: 62px;" align="LEFT" border="0">
… and select
the TitledPane arrow, that will get a yellow background:
… and the
Styleable Path is updated:
To define a new css rule, you can first copy
the Styleable path :
.. then paste it in
your test.css file. Then, add an entry to set the -fx-background-color to red. You should have
something like:
.titled-pane:expanded
.title .arrow-button .arrow { -fx-background-color : red;}
As soon as the
test.css is saved, the change is taken into account in Scene Builder.
You can also use the
Styleable Path to discover all the inner elements of TitledPane, by
clicking on the arrow icon:
More details
You can see the CSS Analyzer in action (and many other features) from the Java One BOF: BOF4279 - In-Depth Layout and Styling with the JavaFX Scene Builder
presented by my colleague Jean-Francois Denise.
On the right hand, click on the Media link to go to the video (streaming) of the presa.
The Scene Builder support of CSS starts at 9:20
The CSS Analyzer presentation starts at 12:50
