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.
Figure 7 Drag button control
Now that we have our button added to the Anchor Pane, we need to save our work. Under the “File” menu option, select “Save”. Here is where many people may stumble with their first attempt using Scene Builder. You would think saving your work in Scene Builder would update the associated files in your folder structure within Eclipse. However, this is not the case. When you go back to Eclipse, you must select the “File” menu option and then choose “Refresh” to update the files currently loaded in Eclipse. When you do this, you will notice a small amount of text added to your *.fxml file (refer to Figure 8).
Figure 8 Text added to *.fxml file
As you can see, we have a button tag added to our *.fxml file along with its position in relation to the Anchor Pane’s origin.
Time Well Spent
After successfully using this Drag and Drop feature, we can see the amount of time and effort that is saved! In the next article, we will discuss how to use the *.css file and some other helpful pointers!
References:
Main class or API from Oracle that links scene builder XML files to your application
https://docs.oracle.com/javafx/2/api/javafx/fxml/FXMLLoader.html
For downloading and configuring eclipse with scene builder
https://www.youtube.com/watch?v=Q9RmitNvVMY&t=1s
Website to just download scene builder
https://gluonhq.com/products/scene-builder/
Wiki page for JavaFX
https://en.wikipedia.org/wiki/JavaFX