Thursday Apr 18, 2013

New documentation : Using Scene Builder with Java IDEs

Based on one of my previous blog, the new doc: Using Scene Builder with Java IDEs has just been published on

The IntelliJ IDEA section has been rewritten, thanks to the new JavaFX plugin in IntelliJ IDEA 12.1 :-)
One can now -among other nice features- very easily create a JavaFX project, and edit an fxml file with Scene Builder.

Thanks Cindy for this nice doc !

Wednesday Nov 21, 2012

Using the new CSS Analyzer in JavaFX Scene Builder

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

Wednesday Oct 17, 2012

Integrating JavaFX Scene Builder in the IDEs

I experienced recently using Scene Builder from Netbeans, Eclipse and IntelliJ IDEA.

As you may know, Scene Builder is a standalone tool, that can be used independently of any IDE. But it can be very convenient to use it with your favorite IDE, for instance start it by double-clicking on an FXML file, or run samples delivered with Scene Builder.

 I'm sharing here with you few tweaks that I had to do for a better integration.

Scene Builder 1.1 Developer Preview should be installed before doing the tweaks.

The steps below have been done on Windows 7. It should be very similar on both Mac OS and Linux. Please tell me if you find any issue on one of these 2 platforms.

Netbeans 7.3

Netbeans 7.3 can be downloaded from here.

Creating a New FXML project

Part of the JavaFx projects, Netbeans allows to create a 'JavaFX FXML Application', that creates a JavaFx project based on FXML description.
The FXML file will be editable with Scene Builder.

Starting Scene Builder from Netbeans

If SceneBuilder 1.1 is installed, Netbeans will discover it automatically.
In case of issue, one can open the Options panel, Java section, JavaFx tab. Scene Builder home should appear here.

You can then either Open the FXML file with Scene Builder, or edit it with the Netbeans FXML editor :

When 'Open' is selected, Scene Builder appears on top of the Netbeans window :

When 'Edit' is selected, the FXML is opened in the Netbeans FXML editor, which support syntax highlighting and completion :

Using Scene Builder Samples

Scene Builder provides Netbeans projects, that can be opened/run directly :

Eclipse 4.2.1 + e(fx)clipse 0.1.1

JavaFX integration in Eclipse has been done with the e(fx)clipse plugin.

A distribution bundle containing Eclipse and e(fx)clipse is provided here.

Creating New FXML project

All the JavaFX-related projects can be found in 'Other' section :

First create a new JavaFX project:

Enter the project name (Test here). JavaFX delivery will be found in the JRE.

Then, create a 'New FXML Document':

Enter the FXML file name (Sample here). You may also want to choose the FXML document root element (AnchorPane by default).
Dynamic root is for advanced users which want to manage custom types.

Starting Scene Builder from Eclipse

Once created, you can then either Open the FXML file with Scene Builder, or Open it in the Eclipse FXML editor :

Using Scene Builder Samples from Eclipse

To use Scene Builder samples, first create a new JavaFX Project (from 'Other' section):

Then, on the next panel, 'Link additionnal source':

… and select the source directory of a Scene Builder example : HelloWorld here (the parent directory of the java package should be selected).
Then, choose a 'Folder name' for your sample:

You can now run the Scene Builder example by right-clicking the source file:

IntelliJ IDEA 11.1.3

IntelliJ IDEA Community Edition can be downloaded from here.

IntelliJ IDEA has no specific JavaFX integration.

Creating New IntelliJ project from existing source

Since IntelliJ has no JavaFX project knowledge, we are using the Scene Builder samples as a starting point.

We are going to create a new Java project from the HelloWorld sample:

Then, click twice on 'Next' (nothing to change), then 'Finish'. The 'HelloWorld' project is created.

Starting Scene Builder from IntelliJ

We need to tell the IDE that FXML files are opened with an external application. Then, the OS file association will be used.

To do this, open the File->Settings panel. Then, select 'File Types' and 'Files opened in associated applications'. And add a new wildcard : '*.fxml' :

Now, from the HelloWorld project, you can double-click on HelloWorld.fxml : Scene Builder window appears on top of the IntelliJ window :

Using Scene Builder Samples from IntelliJ

We need to tell IntelliJ that the fxml files must be copied in the build directory.
To do that, from the HelloWorld directory, open the 'idea' section, and edit the 'compiler.xml' file. We need to add an '*.fxml' entry:

Then, you can run the sample from HelloWorld project, by right-clicking the Main class:


Jerome Cambon is a member of the JavaFX Scene Builder development team.


Top Tags
« July 2016