Installing JavaFX Scene Builder

1. Navigate to the official site for the JavaFX Scene Builder.

2. At the bottom of the of the page, under "Download Scene Builder for Java 8," click the download button for your respective operating system. Do not download Scene Builder for Java 11. The project starter code we provide instructs your IDE to build applications to the Java 8 stable release; we don't know if the .fxml files generated by Scene Builder for Java 11 will function correctly with Java 8 code.
   • If you have already installed Scene Builder for Java 11, we welcome your experience report.
3. This will take you to a page labeled 'Thanks.' Your download will begin in about 5-10 seconds automatically; you can ignore each of the green buttons on the page.
   • If you are installing on macOS, this will download a .pkg file - and then you can just walk through the installation upon clicking on the .pkg file.
   • Otherwise, if you are on Windows, walk through the executable installer.
4. It will install almost instantly. No need to restart your computer or anything; you can start using the Scene Builder now!

Using the JavaFX Scene Builder

This tutorial will walk you through creating a basic JavaFX application. The end-product of this tutorial, along with other example works, can be found on gitlab.

Using SceneBuilder with IntelliJ IDEA

1. Open IntelliJ.
2. Click Create New Project.
3. Create a new JavaFX application.
4. Now that your project has been created, click on File in the upper-left corner of the screen.
5. Click Settings, and then Languages and Frameworks.
   • If you are running IntelliJ IDEA on a Mac, you instead go to IntelliJ IDEA -> Preferences -> Languages and Frameworks.
6. Click on JavaFX.
7. Set the path to where your SceneBuilder.exe (on Windows) or SceneBuilder.app (on macOS) is installed at.
8. Click OK.
9. IntelliJ should have generated three files within the src directory of your project, within a package called sample.
10. Rename this sample package to app.
    • Make sure all occurrences are renamed to app.
11. Find the file entitled sample.fxml, and rename it to home.fxml.
12. Right click on the file, and click the option that says Open In SceneBuilder.
    • This is the file that holds all of the code for the look of your application. Now that you've opened it up directly, whenever you make changes within the SceneBuilders, those changes will also be reflected with home.fxml whenever you click save.

Using JavaFX Scene Builder with Eclipse

Eclipse does not natively support the JavaFX Scene Builder "out of the box" like IntelliJ IDEA does. To get around this, you are going to have to manually install the JavaFX plugin for Eclipse.

1. Open Eclipse.
2. Go to Help in the navigation bar.
3. Click Install New Software.
4. In the 'Work With' text box, paste in the following link: http://download.eclipse.org/efxclipse/updates-released/3.6.0/site
5. Click Add..., and give it the following name: e(fx)clipse.
6. Click OK, and and now select both of the shown checkboxes.
7. Click Next >, and wait for e(fx)clipse to finish installing.
8. Click Finish.
9. When the installation is finished, Eclipse will prompt you for a restart. Do that.
10. Now, you will be able to create new JavaFX project from the 'New Project' wizard of Eclipse. Create a new JavaFX project.
11. Within the src directory of your new project, a package called application will have been generated. Main.java is the driver code. Create a new file called home.fxml within this package.
12. Right-click your newly created file and click Open with SceneBuilder.
    • If Eclipse tells yo u that opening the file with SceneBuilder failed, here are the steps to fix that:
    • Go to Window in the navigation bar, and then Preferences.
    • Go to JavaFX, and then set the SceneBuilder executable to wherever your SceneBuilder.exe is saved at. Apply and Close.
    • Now, you should be able to open SceneBuilder from Eclipse!

Using JavaFX Scene Builder with other IDEs (or without an IDE)

JavaFX Scene Builder will function as a standalone application. You can use the standalone application to prepare the .fxml files and your IDE (or a non- integrated editor) to prepare the .java files.

Building your first application

1. Now that the SceneBuilder is open, we can talk about the different components of it:
   • The gray rectangle in the middle is your GUI. Currently, it's empty, aside from GridPane element.
   • You can delete this GridPane element by right-clicking it in the lower-left corner of your screen, and choosing Delete.
   • Now, the blank canvas in the middle is telling you Drag Library items here....
   • All available JavaFX items are shown in the upper-left corner of the screen, in the Library panel. You can either search for certain elements, or click through the panel bar to find exactly what you are looking for.
   • The entire right panel is the Inspector. This panel is responsible for tweaking attributes of selected elements - such as hiding them, disabling them, changing their styling, etc.
2. Let's start creating our sample application by adding a BorderPane element to our canvas.
   • The BorderPane element is located within Containers and is similar to a standard webpage layout.
   • Containers should almost always be the first element that goes onto a page.
   • And, you can put containers inside of containers to make really fancy pages!
3. Add a MenuBar to the top of the BorderPane. You can do this one of two ways:
   • Drag the element right onto the canvas. SceneBuilder will show you the different areas of the BorderPane that you can drop it in.
   • You can also drag the element into the Document Hierarchy located directly below the Library.
4. Put an AnchorPane in the middle of the page, and then a Label anywhere within there.
5. Add three Button elements on the left, right, and bottom of our AnchorPane.
   • When appending containers, you can place elements anywhere within AnchorPanes. With other containers, such as the BorderPane, you are confined to certain positions within the container. Specifically with the BorderPane, we are confined to placing items within the 5 regions of the pane.
6. You can double-click on any of these elements and start typing to change their inner text. Alternatively, you can click the element once and change the text from within the Inspector.

Registering Event Handlers

Now that we have three buttons for input and a label with starter text in it, let's create some basic events to change the text of the label when the buttons are clicked.

1. To begin, the Label that is going to be changed on different button clicks is going to need an ID to be referenced by.
2. Open up the Inspector for the middle Label.
3. Open up the Code panel, and under Identity, set the fx:id to middle, or whatever else you might want to name it.
4. We are also going to have to write some code to change the text. The code that controls everything happening on the GUI should all go into the automatically-created Controller.java class.
   • But let's rename that to HomeController.java.
5. Paste the following stub in your HomeController.java; we will talk about the different parts of it in a moment.

1   package app;  
2  
3   import javafx.fxml.FXML;  
4   import javafx.scene.control.Label;  
5
6   public class HomeController {    
7      @FXML private Label middle;  
8  
9      public void clickLeftButton() {  
10         middle.setText("The button the left was clicked.");  
11     }  
12   
13     public void clickRightButton() {  
14         middle.setText("The button the right was clicked.");  
15     }  
16   
17  }

On line 7 we are declaring a Label object entitled middle, and it is annotated by a @FXML. This annotation is basically what is telling the controller, "match up this Label called middle with another Label called middle in the FXML file." Because they are the same name, and have been annotated accordingly, the code will know that you are referencing a specific element and will be able to use that element. So, these functions will work exactly as intended - once we set up the actual event handlers.

6. Now that you have the stub code pasted in, navigate back to the SceneBuilder.
7. Click on the left button, and go to the Code panel in the Inspector.
8. In the Main subgroup, under On Action, type in the name of the function you wish to be called when the button is clicked - in this case, it's just clickLeftButton.
9. Do the same for the other two buttons and their respective functions.
10. In order to actually test out your new program, you are going to have to link the GUI to the controller - so on the bottom-left portion of your page, open up the Controller panel.
11. In Controller Class, type in app.HomeController - that's the package name followed by the name of the Controller class.
12. Now that everything is linked together, you can run the program out of Main and see that the label text changes on each button press, exactly as intended.
    • You may want to change the resolution of the scene within Main, as it is probably a bit too small currently.

Switching Between Screens (Scenes)

Everything you did just previously was all within the same screen. In many cases, applications are made up of different screens that display different information and have different functionality. As of right now, we have exactly one controller for one view. In order to create an application with multiple screens, or scenes as they are referred to by JavaFX, we are going to need to create new views and new controllers to represent these.

1. Create two new files: secondScreen.fxml and SecondScreenController.java.
2. Open up secondScreen.fxml in the SceneBuilder, and replace the AnchorPane with a SplitPane.
   • The SplitPane will start off holding two AnchorPanes within them - these elements are essentially open containers that allow you to move elements around with ease, anchoring them to their positions.
3. Put a Label in the top pane and a Button in the bottom.
4. With AnchorPanes, one really useful thing you can do is fit elements to the size of the parent, the AnchorPane being the parent. Right click both of the elements you just placed and fit them to their parents.

Now to link these two screens together...

5. Go back to your HomeController and paste the following snippet in: we'll walk through it again in a second.

public void switchScreen(javafx.event.ActionEvent event) throws IOException {  
    FXMLloader loader = new FXMLLoader();
    loader.setLocation(getClass().getResource("secondScreen.fxml"));
    Parent parent = loader.load();

    Scene scene = new Scene(parent);
    Stage window = (Stage)((Node)event.getSource()).getScene().getWindow();  

    window.setScene(scene);  
    window.show();  
}

• First, we initialize the FXMLLoader resource.
• Next, we send a file for the loader to locate and (hopefully) run. In our case, it is secondScreen.fxml.
• We tell the function to simply throw an IOException in the case it can't find the file, as there is nothing more to be done in the case the file cannot be find, perhaps due to a typo.
• It creates a scene using that file, and then we do a lot of casting in order to create a window out of the file to pass a scene into. Then we show the new screen.

6. IntelIiJ is smart enough to see that you've just now tried to use a lot of different things without importing them first. Import all the new classes you just used.
7. Change out the Reset button for a Switch Screens button, and point its action to this new switchScreen function.
8. Run the application and verify that you can switch screens by pressing the button.
9. Now, copy and paste the same function into the new SecondScreenController, changing out secondScreen.fxml for home.fxml.
10. Link secondScreen.fxml to the SecondScreenController as we did previously in Step 11 of "Registering Event Handlers."
11. You should be able to move back and forth between the two scenes now!

Passing Data Between Scenes

As of right now, our application doesn't have any data confined to it, nor does it do anything of interest. Let's throw some data onto the initial screen, and learn how to transfer that data around to other scenes in the application so that it does something a little bit more interesting.

1. Open up home.fxml again.
2. Add three checkboxes to the center of the AnchorPane, and label them as whatever you want.
3. Assign each of these checkbox an ID, something simple like checkbox1, checkbox2, etc...
4. Make you sure you create the @FXML private CheckBox checkbox[number] to correspond with each of the created elements in your HomeController.java, and import the necessary class (javafx.scene.control.CheckBox).
5. In the Properties tab of the Inspector, let's set the first checkbox to be auto-selected.
6. placeholder
7. Open up secondScreen.fxml.
8. Remove the Label from the AnchorPane on top, and add 4 new Labels:
   • First Label should say 'Selected Items:'
   • The next three labels should all be blank.