JavaFX and FXML

Introduction

In the last post I was showing how to create a window and put some buttons on it. Now let's imagine that we want to put some more elements on the window like TextField"s and some ChoiceBox'es and TableView's and get closer to a RCA. We have to choices:

1. Manually: We have to design and think before how and which container we have to use to design our UI. After doing that or during we hard code every element into our code. This method is of course for really small projects enough. For bigger projects I think everyone knows that it is a pane if we have to change or add something which makes everything inflexible and hard to support.
2. "Automated" Using FXML files and SceneBuilder. Every aspect of UI is done with the SceneBuilder. We see immediately how it will look like. After saving it as an FXML file we can load the scene with the FXMLLoader class.

FXML and SceneBuilder

So I assume that we have installed SceneBuilder 1.1 and it is ready to use. We create the design of our UI using SceneBuilder 1.1 and saving it as the FXML file which can be loaded in a JavaFX application. With all that we can create UI's in seconds for our applications.
OK, let's start. Here the same application like in the first post but this time using a FXML file.

package javafx.tutorials;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Tutorial2 extends Application {

 @Override
 public void start(Stage stage) throws Exception {
  FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("Tutorial2.fxml"));
  fxmlLoader.load();
  AnchorPane root = fxmlLoader.getRoot();

  Scene scene = new Scene(root);
  stage.setScene(scene);
  stage.show();
  
 }

 public static void main(String[] args) {
  Application.launch(args);
 }

 @FXML
 public void onClickMe(ActionEvent event) {
  System.out.println("You clicked me.");
 }
 @FXML
 public void onClickMeToo(ActionEvent event) {
  System.out.println("You clicked me too.");
 }

}

So what do we do in the code above? First we have to call the Application's static method "launch" in the main() function.
In the start(Stage stage) function we use the FXMLLoader class to parse the FXML file.  We get the root object using the FXMLLoader::getRoot() method. This root is the root of our scene. 

Open SceneBuilder, create a new AnchorPane FXML project. If you just select "New" in the "File" menu it will do that automatically. If you wanna use another root container select "New with Root Container" and you'll see 3 choices. Select the AnchorPane one hahahahahaaa ... :D
Select the AnchorPane on the left side in the "Hierarchy" section. On the right side in the "Code" section you'll see the "Controller class" field, write "javafx.tutorials.Tutorial2" which is the name of our main JavaFX class.
Now put a VBox into the AnchorPane. In the "Hierarchy"section select the VBox node. Right click your mouse and select "Fit to Parent" or go to the "Modify" menu and select "Fit to Parent". This fill stretch out the VBox to the whole AnchorPane area. Now put 2 Buttons into the VBox field. Rename the buttons on the right side in the "Properties" section in the "Text" field.

On the right side of SceneBuilder in the Inspector column, select the Code Section. Click the first button and you see a field called "On Action". In that field we write the function name we will use in our class. As you can see in the code above I used onClickMe

Now click the second button and type in the "On Action" field "onClickMeToo"

Now save it under Tutorial2.fxml. Actually that's it. Easy right :D. Now if we run our JavaFX code we will see the window and if we click the buttons we have the same behavior like in the first tutorial code what we did in the first post. That's it. If you want to learn more about SceneBuilder check out the Internet, there are enough descriptions to understand.