How to Create a JavaFX GUI using Scene Builder in NetBeans

At IDR Solutions I spend some of my time working with JPedal (our PDF Viewer which uses both Swing and JavaFX to provide some sophisticated viewing modes). Using my expertise and knowledge I decided that I will show you how to use a Scene Builder in conjunction with the NetBeans IDE to create a JavaFX GUI.

Scene Builder by default does not come with the NetBeans IDE. You can get Scene Builder from here. You can also get the NetBeans IDE from here if you do not already have it.

Objective: We are going to design a simple calculator to look like the figure below.

Linking Scene Builder to NetBeans.

Since Scene Builder does not come bundled with NetBeans, we need to link it to NetBeans in order for it to work.

To do this,

• On Windows go to Tools -> Options -> Java -> JavaFX
• On MAC go to NetBeans -> Preferences -> Java -> JavaFX

See fig Below

Select the path to where Scene Builder is installed then click Apply.

Now open NetBeans and create a new JavaFX FXML Application.

Give you project a name and click Finish

At this stage your project should be looking like this.

Now right click on the FXMLDocument.fxml and click Open. This should open the Scene Builder. The FXMLDocument.fxml file is a representation of the Scene Builder. This Scene builder is like the Swing Matisse. When we drag and drop items on the Scene Builder and hit save, the FXMLDocument.fxml file automatically gets Updated just like using the Swing Matisse.

At this stage you should see the Scene Builder open.

We do not want the Label and Button generated so lets delete them. We can do this by deleting them in the Scene Builder or deleting them in the FXMLDocument file. To show how the FXMLDocument and Scene Builder works together we will delete if from the FXMLDocument and save. This will update the Scene Builder.

Double click on the FXMLDocument file and edit it as below.
This is how the document should look.

Edit it so it looks like this

Now save the document. Your Scene Builder should be looking like this.

Now lets give our AnchorPane a nice rectangular shape. This can be done by dragging to bottom right corner of the AnchorPane.

Now lets add four horizontal boxes to our AnchorPane so we can lay out buttons horizontally. To do this drag the HBox from the Containers at the top left of the Scene Builder.

It is very difficult to see where you have positioned you HBoxes as they are the same colour with the AnchorPane. Lets temporary change the background colour of the VBoxes.Click on HBox below the AnchorPane at the bottom right of the Scene Builder then on the left side of the Scene Builder, you will see a Style TextArea. Paste the code in the TextArea
-fx-background-color:black; and save.

See the JavaFX CSS Reference guide for details.

Time to add the buttons to the Calculator.

As we added the the the HBoxes to the AnchorPane, same will we add the buttons to the HBoxes.Drag One Button from the Control Panel to the HBox.Size it to your preferred size by dragging the button left corner of the button. Once done right click on the button and select duplicate. Do this to all four HBoxes.

We now have the buttons stack to each other. Lets add some spacing between the buttons. Click on one of the HBoxes below the AnchorPane then on the left side of the Scene Builder, change the spacing.

Now let’s change the text, colours and font size of our buttons.
Click on the button you want to edit, on the left side of the Scene Builder, select properties and edit the button properties as preferred.

Once done, we are in the position to style our AnchorPane. Click on the AnchorPane and add this code to the style TextArea.

-fx-background-color:black;
-fx-background-radius: 25;
-fx-padding: 10;


Let’s now style out our Zero and Add buttons. Click on the Zero button and add the code to the style textArea -fx-background-radius: 0 0 0 25;. Add this to the Add button-fx-background-radius: 0 0 25 0;
Your calculator should be looking like this

Now we are in a position run our program. Save your design in Scene Builder and lets dive into NetBeans.
In your FXMLDocument.fxml you can see the generated code from the Scene Builder. Clean and Build your project and run it. you should see something like this.

Now we want to get rid of the background and Frame.To do this , open the FXCalculator.java and add this line of codestage.initStyle(StageStyle.TRANSPARENT); and also change the scene code to Scene scene = new Scene(root,Color.TRANSPARENT); so your class look like this

public class FXCalculator extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        stage.initStyle(StageStyle.TRANSPARENT);
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        
        Scene scene = new Scene(root,Color.TRANSPARENT);
        
        stage.setScene(scene);
      
        stage.show();
    }

    /**
     * @param args the command line arguments
     */    public static void main(String[] args) {
        launch(args);
    }
    
}

Now that we’ve made our Stage transparent, we cannot close our application. In order to resolve this, let’s add a close button.We will also add a text field to display our numbers. Let’s drag and drop a VBox to the top part of the calculator. In the properties of the VBox, set alignment to TOP_RIGHT

We can now drag and drop an button and text field to the VBox respectively and style it to preferred style and save.

Now lets code our button to close the calculator when it is being clicked. In our FXMLDocumentController class, we will create new method called exitCalculator() this method will be called every time the close button is clicked. we will link this method to the button in the scene builder.

package fxcalculator;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;

public class FXMLDocumentController implements Initializable {
    
   
    
    @FXML
    private void handleButtonAction(ActionEvent event) {
        
    }
    
    @FXML
    private void exitCalculator(){
       System.exit(1);
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
    }    
    
}

In our scene builder, we will reference this method to the close button. To do this, click on the close button. On the code section on the right side of the scene builder select exitCalculator in the On Action drop down and save.

Now clean and build your project and run it. Well done!! You have designed a calculator using the Scene Builder.

Hopefully you have found this quick guide useful.