How to Create a JavaFX GUI using Scene Builder in NetBeans

At IDR Solutions I spend alot of time working with our JavaFX PDF Viewer and our NetBeans PDF Plugin. 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.

<!--?xml version="1.0" encoding="UTF-8"?-->
 
<!--?import java.lang.*?-->
<!--?import java.util.*?-->
<!--?import javafx.scene.*?-->
<!--?import javafx.scene.control.*?-->
<!--?import javafx.scene.layout.*?-->
 
 
 
 
        <button></button>
        <label></label>

Edit it so it looks like this

<!--?xml version="1.0" encoding="UTF-8"?-->
 
<!--?import java.lang.*?-->
<!--?import java.util.*?-->
<!--?import javafx.scene.*?-->
<!--?import javafx.scene.control.*?-->
<!--?import javafx.scene.layout.*?-->

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 AhorPane 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 anf Frame.To do this , open the FXCalculator.java and add this line of codestage.initStyle(StageStyle.TRANSPARENT); and also change the scene code toScene 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.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (Twitter, Facebook and Google+) or the Blog RSS.

Related Posts:

The following two tabs change content below.

Ernest Duodu

Developer at IDRSolutions
Ernest is a developer at IDRSolutions. He focuses mainly on our JavaFX PDF Viewer implementation. He was a speaker at JavaOne 2014, where he did a joint session titled "Lessons learnt developing a NetBeans PDF viewer plugin in JavaFX". Aside programming, he also enjoys a wide variety of hobbies which includes sky-diving, photography, exercising and listening to music.
Ernest

About Ernest Duodu

Ernest is a developer at IDRSolutions. He focuses mainly on our JavaFX PDF Viewer implementation. He was a speaker at JavaOne 2014, where he did a joint session titled "Lessons learnt developing a NetBeans PDF viewer plugin in JavaFX". Aside programming, he also enjoys a wide variety of hobbies which includes sky-diving, photography, exercising and listening to music.

11 thoughts on “How to Create a JavaFX GUI using Scene Builder in NetBeans

  1. Adrian

    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. RICARDO PÉREZ MARTÍNEZ

    I like the article!

  3. thanks Ernest! this tutorial is very comprehensive.

  4. Jean-Marie Piens

    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

    • Ernest Duodu

      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

      • Jean-Marie Piens

        It works fine now.
        Thanks.

  5. Bobby

    This calculator lacks some buttons! But very good article if you are new to JavaFX

  6. Chris

    Thank you, great a tutorial; it is just right to give me an idea what can be done in Java FX.

  7. Jim Sterling

    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 !!!

  8. ariesta

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>