JavaFX Form Creation, Layout and ActionEvent

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.

JavaFX Button Event Handling

We are done on the layout of elements on our form. Now we have to add functionality on the event when the button is pressed. We are expecting that if we press the button, tax incurred will be calculated using the value input on the text field that we have already put on our JavaFX form. Add the following code block just before the primaryStage.setScene(scene);

The code fragment above basically the action taken when the button is pressed. It calculate sthe tax incurred and display it on the taxMessage Text element. Since we are getting and parsing the values of the textField totalField and percentField, we need to make the declaration final. Please see below the full source code of JavaFX Tax Calculator.

Tax Calculator JavaFX Source Code

Running the Source Code Above will display the following Desktop Application

JavaFX Tax Calculator

JavaFX Tax Calculator

Comments are closed