Integrating JavaFX Scene Builder in the IDEs
- by Jerome Cambon
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
Main.java 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:
