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

Now open NetBeans and create a new JavaFX FXML Application.

At this stage you should see the Scene Builder open.

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.

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.

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);
    }
    
}

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.

Our software libraries allow you to