By the end of this blog entry, you’ll understand the basics of Scene Builder for JavaFX. Before we jump into this material it’s important to note the following points:

  • This is a Drag and Drop interface
  • You need Eclipse to operate Scene Builder alongside this article
  • If you are new to Eclipse take a look at this link

Scene Builder can be used with the NetBeans or the Eclipse Integrated Development Environment (IDE). As for JavaFX, it can be implemented as “a single source code base to create applications for the desktop, iOS, and Android devices.” If you are experienced in Java, you may have used components of Swing for building Graphical User Interfaces (GUI). This was replaced with JavaFX in 2008. This update should be used with newer Java applications. Scene Builder, originally supported by Oracle, is now supported by Gluon.

Want to Save Your Time?

If you are familiar with Swing, then you will find that Scene Builder too, allows you to create a GUI without manually typing any code. That means you don’t have to take part in the tedious task of creating “children” elements to the user interface.

It is recommended that you do learn the manual implementation of this process. This way you understand what the program is doing in depth, which can help you later in your career when dealing with details and complexities.  You never know when you will be asked to work on code that was not created with Swing or Scene Builder. It also enables you to better appreciate the convenience of the Drag and Drop features!

How is the Code Created?

You may be wondering how, exactly, this time-saving feature works. All of the code from the Scene Builder feature is generated in a *.fxml file when you drag an element onto your GUI. The API that allows this to work in the background is the FXMLLoader class. Once a JavaFX project is created, the following folder pops up for you in Eclipse:

Figure 1 JavaFX folder Structure

As pictured above, a Java class is created called Main and a CSS file created called application. Using JavaFX projects in Eclipse allows you to use the *.css file. This enables you to add style to elements on the GUI in a similar manner when developing web pages.

How to Style Elements On a GUI

Elements can be styled using CSS attributes in Scene Builder, used to make JavaFX applications more appealing. In order to use Scene Builder, you first need a *.fxml file to open within Scene Builder.

Figure 2 Getting the *.fxml file

As pictured above, to create the *.fxml file you need to right-click on your package named “application” and then select “New” at the top of your listed options in Eclipse. Next select “Other”. This will open another window as shown below.

Figure 3 Create your *.fxml file

From here, find the “JavaFX” folder and select this folder. Then select the option “New FXML Document”. Click on the “Next >” button and name the file whatever you want. Then select “Finish”. You will now see your *.fxml file under your package named “application” (refer to Figure 4). The file in the example is named “AddressMain.fxml”.

Figure 4 *.fxml file

With the *.fxml file open, Scene Builder can be used. Select your *.fxml file and right click on the file. Select the option “Open with Scene Builder”. This will open your file using Scene Builder. This process may take a few seconds for Scene Builder to open, refer to Figure 5.

Figure 5 Scene Builder

Figure 5 is the window you will see when Scene Builder first opens. The center of the screen may appear to be empty. You just need to select the Anchor Pane item on the left-hand side, and then set the preferred width and height on the right-hand side under the Layout options. Once you see your Anchor Pane in the middle, you can now drag controls from the left-hand side of Scene Builder onto your Anchor Pane. You may notice that nothing happens when you select the “Controls” section on the left-hand side. This is because you need to drag the “Document” section down until you start to see the different control options you may use in Scene Builder (refer to Figure 6).

Figure 6 Show controls

Now you may click on the control you want to use (the Button is used as an example).  Once you have selected your control, drag it onto the Anchor Pane (refer to Figure 7). The red lines help you line up controls on your GUI. In Figure 7, they help to align the button in the middle of the Anchor Pane.