Install and Setup

If you dont have Scene Builder already installed it can be downloaded from Gluon's website here -> Scene Builder Download Page. Run through the installation wizard to complete the install,

In order to start using Scene Builder with Eclipse you will need to install e(fx)clipse. This can be easily installed by using the Eclipse Market found in Help -> Eclipse Marketplace... Once the Eclipse Marketplace is open search for JavaFX, and install e(fx)clipse.

Once installed in order to easily open FXML files in Scene Builder you will need to navigate to Window -> Preferences -> JavaFX. In the provided file path field direct it to your installation of Scene Builder. The default install location for Scene Builder is C:\Users(YOUR USER PROFILE HERE)\AppData\Local\SceneBuilder\SceneBuilder.exe. Once that is done installation is complete!

JavaFX best practices (MVC)

Our Raider Planner implements an Model, View, Controller paradigm or MVC for short. With MVC applications are split up into three main sections. The first section being the model. The Model section contains all of the objects specific to our Raider Planner such as our person, book, and room objects. The second section is the view section, the view contains all of the FXML files which create the GUI. The last section being the Controller classes. The Controller classes contain the code that control how the GUI responds to input.

Opening FXML Files in Scene Builder

There are two ways to open the FXML files found in our view package in Scene Builder. The first being from Eclipse it's self by right clicking on the FXML file you would like to open, and near the top of the right click menu an option titled "Open with SceneBuilder". Click that will open the target FXML file in Scene Builder.

The second way to open your FXML files is to open Scene Builder and going to File -> Open -> "Your Eclipse Project Directory"

Example adding functionality to a GUI element.

So let's say we want to add a button to our Settings menu (Settings.fxml) to restart the application. In the corresponding controller class found in the Controller package called SettingsController.java you will want to create the button object in the controller with the @FXML tag above. This will allow Scene Builder to see the object.

ex.) @FXML Button exampleButton = new Button(“DoStuffButton”);

To create the code the button will execute when pressed you will want to create a method to handle the buttons actions. This can be done by adding the @FXML tag directly above the method similar to the above.

ex.) @FXML private void handleDoStuffButton(){ }

Now that the coding part in the controller is done it can be all brought together in Scene Builder by first checking that the Controller -> Controller Class field is directed towards the correct controller class. Once this is set select the button you have placed on the screen and go into the code section you are able to select the FXID we created above (exampleButton), and below the "On Action" field where we can select the method we created above (handleDoStuffButton). Scene Builder will handle all of the FXML work needed to position, set the FXID, and what the button will do when pressed.

External examples

Another great tutorial I found while self learning JavaFX, and Scene Builder earlier this year can be found here Code Makery JavaFX Tutorail.