Installing IntelliJ IDEA

While you are not forced to use IntelliJ over Eclipse or any other IDE, it is recommended that you use IntelliJ in conjunction with the SceneBuilder if you plan on following along with this tutorial.

1. Navigate to the official site for IntelliJ IDEA.
2. Download the free community edition.
3. Wait about 5 seconds the download to start, and then run the executable after it is finished downloading.
4. It is recommended you check all the boxes when asked to configure your installation.
5. Click Next, move to the next screen, and click Install.
6. In order to finish the installation, you will have to restart your computer. You might as well do that right now, so save all of your work elsewhere.
7. Launch IntelliJ.
8. If you are installing IntelliJ for the first time, you can choose Do not import settings and then click OK.
9. Customize your IntelliJ accordingly.

Installing JavaFX Scene Builder

1. Navigate to the official site for the JavaFX Scene Builder.
2. In the middle of the page, click the download button for your respective operating system.
3. This will take you to a page labeled 'Thanks.' Your download will begin in about 5 seconds; you can ignore each of the green buttons on the page.
4. Run the Scene Builder installer.
5. Accept the terms and click Install.
6. 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 within CSCE 361 -> examples -> JavaFX SceneBuilder Examples.

Using SceneBuilder with IntelliJ IDEA

1. Open IntelliJ.
2. Click Create New Project.
3. Create a new JavaFX application.
4. Give it a name, and a location.
5. Now that your project has been created, click on File in the upper-left corner of the screen.
6. Go to Languages & Frameworks.
7. Click on JavaFX.
8. Set the path to SceneBuilder.exe. Assuming you installed it to the default location, it should be located at C:\Program Files\SceneBuilder\SceneBuilder.exe.
9. Click OK.
10. IntelliJ should have generated three files within the src directory of your project, within a package called sample.
11. Rename this sample package to app.
    • Make sure all occurrences are renamed to app.
12. Find the file entitled sample.fxml, and rename it to home.fxml.
13. 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.

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. Add a Label to the center of the page, and three Button elements on the left, right, and bottom of our label.
5. 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  
8      private Label middle;  
9  
10     public void clickLeftButton() {  
11         middle.setText("The button the left was clicked.");  
12     }  
13   
14     public void clickRightButton() {  
15         middle.setText("The button the right was clicked.");  
16     }  
17   
18     public void clickBottomButton() {  
19         middle.setText("This is the starter text.");  
20     }  
21  }

On line 8 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 {  
    Parent parent = FXMLLoader.load(getClass().getResource("secondScreen.fxml"));  
    Scene scene = new Scene(parent);  
  
    Stage window = (Stage)((Node)event.getSource()).getScene().getWindow();  
  
    window.setScene(scene);  
    window.show();  
}

• First, the function finds the resource that you are trying to link to: in this case, it is secondScreen.fxml.
• Rather than handle the contents of the function within a try...catch, we just tell the function to throw an exception in the case it cannot find the file you are trying to link to, because there is not anything to even do if the window can't be opened properly.
• 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!