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](https://www.jetbrains.com/idea/download/#section=windows) 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](https://gluonhq.com/products/scene-builder/#download) 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 folder called `sample`.
11. Find the file entitled `sample.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 `sample.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.
5. Paste the following stub in your `Controller.java`; we will talk about the different parts of it in a moment.
```
1 package sample;
2
3 import javafx.fxml.FXML;
4 import javafx.scene.control.Label;
5
6 public class Controller {
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 `sample.Controller` - 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.
