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
October 2012 »