Hello Math – FXML Style 2

Learn to Code!

Start by creating a new FXML document – this will create the 3 files in Netbeans (FXML document, controller and launcher).  See my post on the 2 different approaches to writing a program if you need more background on this.  I will also assume that you have NetBeans installed along with SceneBuilder.  See the other version of this program for links on installing those programs if needed.

Double-click the FXML document – this will load the “Hello World” scene.  In the bottom-left you will see the Document Hierarchy.  Delete the button and label that you are given to start with.  Screen Shot 2015-01-05 at 9.12.50 AM
 Attach a grid pane to the anchor pane instead (this can be found in the Containers section at the top-left)  Screen Shot 2015-01-05 at 9.13.33 AM
 Modify -> Fit to Parent to spread it out over the entire AnchorPane  Screen Shot 2015-01-05 at 9.13.47 AM
 If you right-click a row you can add additional rows until you get 5 as shown here  Screen Shot 2015-01-05 at 9.14.40 AM
 In the Controls panel you will find Buttons, Labels and TextFields  Screen Shot 2015-01-05 at 9.14.57 AM
 Drag out the controls we need into the different cells  Screen Shot 2015-01-05 at 9.16.10 AM
Modify the properties of the controls.  The first thing you need to change for ALL button and label controls is the Text property.  Go to each one and set them up like we used them in the other version of the Math Application.  Screen Shot 2015-01-05 at 9.17.02 AM
Set the H-alignment to center for all controls and preferred width for all but the label and the clear button to 75.You will also have to set the Max Width for the textfields to 75 as well to force the issue.  Screen Shot 2015-01-05 at 9.17.52 AM
 The bottom label and clear button also have to have their Column Span set to 2.The answer label also needs to have its Node-Alignment set to Center  Screen Shot 2015-01-05 at 9.22.03 AMScreen Shot 2015-01-05 at 9.22.35 AM
 The label Style can be set by adding the border and padding options as drop-downs (yes its that easy)  Screen Shot 2015-01-05 at 9.26.15 AM
 Lastly, we need to set the gap for the GridPane to 10 to spread out the controls  Screen Shot 2015-01-05 at 9.23.49 AM
 You can preview the screen in SceneBuilder if you go toPreview->Show Preview in Window  Screen Shot 2015-01-05 at 9.26.32 AM
 Meanwhile, in the controller we need to declare each control as seen here, 1 line at a time with @FXML in front of it.This is crucial as we will need to go back to the FXML screen and attach each PHYSICAL control with its corresponding DECLARED control listed here.IMPORTANT – save this document before going back to the FXML document Screen Shot 2015-01-05 at 9.38.21 AM
 Go back to the FXML document, and in the code section you can drop-down the fx:id and choose the matching id.Also – for buttons, you will need to drop-down the OnAction and select the method the buttons will run when clicked on.  Do this for ALL buttons.  Screen Shot 2015-01-05 at 9.34.26 AM
 Believe it or not – that’s it!Yes, we need code for the handleButtonAction but if you did the other version of this program you can copy and paste the code into here.  The method has a different name in the other program so it has been changed, and I also changed the ActionEvent variable name from ‘event’ to ‘e’ but that’s it.If you did NOT try the other version you can get the complete method and source code from that page.  Screen Shot 2015-01-05 at 9.38.38 AM

YouTube Video

If you want to follow along with my video from YouTube, you can view it here: