On this section of my series of JavaFX tutorial, we will be showing on the form creation which is very common in developing a desktop application. We will be showing on how to layout the form, add controls, and events.

Creating a Form in JavaFX

For the rest of all my javafx tutorial, I will be using mostly netbeans thus if you have not installed it yet, please do so. If you have not yet created your first application in JavaFX, it would be better to start in Hello World tutorial first which serves as the foundation in creating more advanced application.

A good example for demonstration is a simple tax calculator. It would have labels, textbox, and button. Pressing the button will calculate the tax and will display the result as a message on the form. Please follow these simple steps

  1. Create a new JavaFX Project and named it TaxCalculator.
  2. A TaxCalculator.java will be generated automatically and it will show the hello world template.
  3. Remove all the codes on the start method
  4. Now first and foremost set the title of the form “JavaFX Tax Calculator” which will appear at the left top most part of the form
  5. And make the stage visible using the command
  6. The code that we have as this moment would be able to generate the following if you try to run it
    JavaFX Tax Calculator Blank Form

    JavaFX Tax Calculator Blank Form

JavaFX Panel Layout

Now we have to decide what to use as a layout on our form. Since the GridPane Layout provides a flexible grid of rows and columns which we need in layouting the controls. Moving back on our TaxCalculator form perform the following after the setTitle on start method.

  1. Initialize the Form Layout by declaring the following
  2. Set the alignment
  3. Set the gap between controls
  4. Set the padding. Make a note that the padding are spaces around the edges of the GridPane. The Insets follow this order; top,right, bottom, left. Let’ set 25 pixels on every side.
  5. Now initialize the scene and also its size.

Adding the Tax Calculator Form Elements

Now we can populate the scene with the necessary controls

  1. First and foremost we have to add a welcome text by adding the following after the initialization of scene and before the setScene code.
  2. After adding the title text, we have to add the label Income and it’s corresponding textField. Make a note that we are adding these elements using the pane.add(element,column,row). The counting of rows and columns starts at 0.
  3. Now that we have the fields layout on our scene, we now add the control button to Calculate the Tax incurred.
  4. Add the message text where the result (tax incurred) would be displayed.