Set up an interface design

- [Voiceover] Another advantage to JavaFX is the ability to build the user interface separate from the application logic. Similar to styling the app using CSS. For this, we use FXML which is an XML-based language. Where XML stands for extensible markup language. This course does not include and in-depth discussion of XML, but you can refer to XML Essential Training by Joe Marini for a refresher on the XML language. For our example, we will re-do the login application using FXML. Let's get started. We'll start by creating a new project in NetBeans. File. New Project. This time the categories stays JavaFX, but under Projects, choose the type JavaFX FXML Application. Click Next and we'll give it a name. We'll call it Login With FXML. And click Finish. The first thing you probably noticed was that NetBeans actually created three files: an FXML file, a controller .java file, and a .java file. We'll take a look at each one of these a little more closely. But first before we make any changes, let's run the program. As you can see, the template code launches a window that does not have a title but has a button that says "Click Me!". Let's click the button. As you can see, it puts the words "Hello World!" back in the window but did you also notice in the output window it says "You clicked me!". If I click it again, you'll see it prints "You clicked me!" again. Alright, let's close this. And I'm going to close my output window, just so you can see more code. At this point, make sure that you have the main Java file, the login with FXML .java file. Let me scroll down a little bit, so you can see all the code. As you can see, there is not much here. The one thing you might have noticed is that there's definitely no definition of any buttons here. Buttons and other controls are separated from the application, The button will be added through the FXML file and the event handlers are in the document controller. There is one change in the main that you might have noticed, on line 22, when we define our root node we're actually setting it equal to the FXML document .FXML. We'll be making changes to both the .FXML and the controller .java file. But in the main, let's go ahead and set the size of our window by adding, comma 300, comma 275. Next, let's add a title to the stage. That's it for our main file. Now, let's look at the FXML file. The default layout generated by NetBeans contains an AnchorPane layout for this type of application, but we want to use the grid layout. We will also want to add text objects and use the insets provided by the geometry library. So, we need to import two more libraries. Let's do that first. Next, I'm going to delete the AnchorPane and add my GridPane. Notice the attributes of the GridPane layout. First, is the fx:controller which is required when you want to use controller-based event handlers in your markup. Also, the xmlns:fx attribute is always required and specifies the FX pane space. The other part you should recognize is the alignment and spacing of the GridPane. Now, we'll add the login text, text box, and username and password fields. The code must be included inside of the GridPane tag. I'm actually going to copy and paste this code. Here, we add a text field for the word login. We add a label for user name. A text field, which allows the user to enter in text. Another label for password, and a password field. Finally, we need to add the button and action target text. I do want to point out that we're actually creating a second layout, a horizontal box, on line 35 to put the button into that layout so I can align it to the right, and then I put the box into the GridPane. For this program I'm going to handle the button event in my document controller, but it is possible to use a scripting language to handle events. So let's go to the document controller next. In my document controller, I need to add my text for the action target. So, I'm gonna do @FXML, this refers back to the FXML. I'm gonna do private, text, actiontarget. Since this is something the user will enter, this is something we'll set in the program. I need to rename my method to be handlSubmitButtonAction, and I'm gonna change the logic to say actiontarget .setText, sign in button was pressed. Now the last thing we need to do is add the import library to resolve the text error that we're getting. So, I'm gonna left-click on the light bulb and say add import for JavaFX .scene .text .text. At this point, we've made all the changes, let's go ahead and run the program. As you can see, it works the same way but this time we separated the UI logic from the main application using FXML.