Hello Math – A Tale of 2 Programs


Learn to Code!


Screen Shot 2015-01-05 at 7.38.05 AMLet’s just skip over Hello World and get straight to Hello Math – a primitive calculator done up twice:  once by coding the screen directly with a single class file and once by using FXML Scene Builder (click here to see that version)  – try both and then you can judge which approach you like better.  If you are not sure what the difference is, be sure to read my post about that topic here

The Java Code Approach – New JavaFX Document

 As we go to build this, we will be using a GridPane as our root container.  Try to visualize the application like this, with rows and columns starting at 0,0. I have also labelled a few of the controls for your reference.  mathlayout
 We start by declaring the controls we will need at the top of the Application.  This goes above “start”  Screen Shot 2015-01-05 at 7.38.40 AM
Next we create each control and give it a label.Notice how we style the answer label using css-like syntax to attach a border and padding.  Very cool  Screen Shot 2015-01-05 at 7.38.50 AM
Now that we have the controls we add them to a new GridPane.  The GridPane uses a column-row system where you tell it which cell you want to add the control to.  Notice that last 2 controls span across 2 columns.  We also set the pane to the middle of the scene (which we will make later)  Screen Shot 2015-01-05 at 7.39.07 AM
To layout the app nicely I went to each control and told it how wide to be.  To keep things clean in the ‘start’ method I added a separate method called ‘setWidths’.  I also needed to tell each button what to do when it gets clicked, so again a separate method is used to attach the code to the buttonThe ‘start’ method then finishes with the usual code that NetBeans provides for you.  Screen Shot 2015-01-05 at 7.39.24 AM
The set-width method is repetitive, but it shows you how much control you can have over each item on your screen.  There are other things you can do to control size and space but I wanted to keep this as simple as possible.  This does the job.  Screen Shot 2015-01-05 at 7.39.37 AM
The attach-code method tells each button to run the same method when it gets clicked on.  If we send in ‘e’ to the btn-code method, we can use it to tell us which button was pressed.  That way we can use 1 method for all 5 buttons.  Screen Shot 2015-01-05 at 7.39.45 AM
Here is the first part of method that runs whenever a button is clicked.  If we click the clear button we will erase the text in the textfields and put a ? in the labelReturn prevents if from going any further.  Screen Shot 2015-01-05 at 7.39.57 AM
Here is the REST of the btn-code method.  We start by reading in 2 integer numbers from the 2 text fields (this can throw an error which I am not catching).  Depending on the button clicked it will either add, subtract, divide or multiply to get an answer.  I also use a char variable to represent the kind of calculation I am doing.Then I put the answer together in the label along with the symbol.  Screen Shot 2015-01-05 at 7.40.08 AM

To see the same program done using an FXML approach click here.

The Complete Source Code


YouTube Video

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