Ernest Duodu Ernest is a Java developer. Outside programming, he also enjoys a wide variety of hobbies which includes sky-diving, photography, exercising and listening to music.

How to Create a JavaFX GUI using Scene Builder in NetBeans

3 min read

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.

Screen Shot 2015-05-13 at 17.21.33

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

Screen Shot 2015-05-13 at 17.54.54
Select the path to where Scene Builder is installed then click Apply.

Now open NetBeans and create a new JavaFX FXML Application.

Screen Shot 2015-05-13 at 17.59.45
Give you project a name and click Finish

Screen Shot 2015-05-13 at 18.02.36
At this stage your project should be looking like this.

Screen Shot 2015-05-13 at 18.14.08
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.

Screen Shot 2015-05-13 at 18.24.58
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.

Screen Shot 2015-05-13 at 18.44.34
Now lets give our AnchorPane a nice rectangular shape. This can be done by dragging to bottom right corner of the AnchorPane.

Screen Shot 2015-05-13 at 20.40.34
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.

Screen Shot 2015-05-13 at 20.52.13
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.

Screen Shot 2015-05-13 at 21.20.25

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.

Screen Shot 2015-05-13 at 21.37.56
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.

Screen Shot 2015-05-13 at 21.45.30
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.

Screen Shot 2015-05-13 at 22.15.29
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;

Screen Shot 2015-05-13 at 22.40.16

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

Screen Shot 2015-05-13 at 23.30.24

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.

Screen Shot 2015-05-13 at 23.19.46
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);
    }
    
}

Screen Shot 2015-05-13 at 23.22.35
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

Screen Shot 2015-05-16 at 19.11.28
We can now drag and drop an button and text field to the VBox respectively and style it to preferred style and save.

Screen Shot 2015-05-16 at 20.10.13
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.

Screen Shot 2015-05-17 at 10.44.53
Now clean and build your project and run it. Well done!! You have designed a calculator using the Scene Builder.

Screen Shot 2015-05-17 at 10.58.51
Hopefully you have found this quick guide useful.



Our software libraries allow you to

Convert PDF files to HTML
Use PDF Forms in a web browser
Convert PDF Documents to an image
Work with PDF Documents in Java
Read and write HEIC and other Image formats in Java
Ernest Duodu Ernest is a Java developer. Outside programming, he also enjoys a wide variety of hobbies which includes sky-diving, photography, exercising and listening to music.

12 Replies to “How to Create a JavaFX GUI using Scene Builder…”

  1. Thanks for this! I’m looking forward to coming to a clear understanding of how nodes are linked to class instances, and other things such as collections, in JavaFX.

  2. Hi Ernest,

    I have errors when trying to run the calculator with those 2 lines
    Scene scene = new Scene(root.Color.TRANSPARENT); error: can not find symbol Color, symbol variable Color, location: variable root of type parent
    stage.initStyle(StageStyle.TRANSPARENT); error: can not find symbol, StageStyle
    Can you help?
    Thanks,

    Jean-Marie

    1. Hey Jean-Marie,
      Have you check your imports? make sure you have “import javafx.scene.paint.Color; and import javafx.stage.StageStyle;” in your import statements.
      Also reading your code i noticed that yo u have Scene scene = new Scene(root.Color.TRANSPARENT); instaed of Scene scene = new Scene(root,Color.TRANSPARENT);. You typed root.Color.TRANSPARENT but should be root, Color.TRANSPARENT.
      Lastly make sure you are running JAVA8. you can find out by typing java -version from command and you should get something like 1,8.

      Hope this helps

  3. Thank You !!! I have spent two weeks of most nights trying to get Scene Builder to function. I am a total newbe with Java and am going through more learning curves then I did with fortran or pascal (yes, it has been a while) This nice simple example has enabled me to now start and “play” and learn a bit more.

    Thank You Big Time !!!

  4. good tutorial , could you give me information how javafx run in browser? because im new for javafx

  5. How can i have custom buttons? like if i want to create a windows 10 calculator where the i have transparent buttons for example

Comments are closed.