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