How to Get Started (FAST!) With JavaFX 2 and Scene Builder

Guest Author
A question I hear all too often is "How do I get started with JavaFX and/or Scene Builder?" Like most tools/toolsets, there are as many ways to use these implements as there are developers...but shouldn't there be an easy way to "hit the ground running"? While casting about for an end-to-end example, demo, or video, I found a wealth of useful information, but I couldn't find anything that took someone from start to finish, quickly and easily. JavaFX is easy and fun. But don't take my word for it; let's give it a try!

Before we begin, you'll need to visit this page to download and install all the necessary goodies. Click the download link to go to the current downloads page, then download and install JavaFX (NOTE: if you already have a JDK installed that includes JavaFX, you can omit this step), then download and install the JavaFX Scene Builder. Specific instructions for those steps are located on that page. Go ahead, I'll wait right here.  :-)

Back now? Great! Let's get started!

First, let's fire up Scene Builder just to make sure it works. If not, you'll want to revisit the installation instructions on the downloads page. Once that's working, we're ready to roll...assuming you're running NetBeans 7.2 or higher, of course. You are running NetBeans, right? If not, you owe it to yourself to download it - it's free, and as you're about to see, it's pretty amazing. NetBeans and Scene Builder are loosely-but-effectively integrated, and using both greatly simplifies things and makes your life easier.

Okay, here's the fun part: we're going to actually create a simple JavaFX application, create/modify a window using Scene Builder, and successfully test it in under 15 minutes. Don't believe me? Buckle up friend, here we go!


We start this fun frenzy with NetBeans. Choose File, New Project, JavaFX, then JavaFX FXML Application. This creates a very simple JavaFX app that includes a main application class, a controller class to provide the actual backing logic for the window defined in Scene Builder, and the FXML file containing our window definition (XML) code. I used the name "EasyJavaFX" for our project.

Here's a quick summary of these three files:

EasyJavaFX.java contains the main application class. We won't really do anything with this class for this example, as its primary purpose in life is to load the window definition code contained in the FXML file and then show the main stage/scene. You'll keep the JavaFX terms straight with ease if you relate them to the theater: a platform holds a stage, which contains scenes. Simple. :-)

SampleController.java is our controller class that provides the "brains" behind the graphical interface. If you open the SampleController, you'll see that it includes a property and a method tagged with @FXML. This tag enables the integration of the visual controls and elements you define using Scene Builder. Let's take a look at that next.

Sample.fxml is the definition file for your sample window. You can right-click and Edit the filename in the tree to view the underlying XML - and you may need to do that if you change filenames or properties by hand - or you can double-click on it to open it in Scene Builder. Let's do that next, but first a quick look at our little project:

Scene Builder

Opening Sample.fxml in Scene Builder results in the display of a very spartan window.

Let's rework it a little. For a complete tour of Scene Builder, please visit this page, but here's the nickel tour: stuff and navigation to the left, picture in the middle, and properties on the right. :-) We'll make some small modifications like so:

First, we click on the Button in the Hierarchy panel (bottom left), which selects it in the middle Content panel. We'll move it down and over a bit to make room for another button.

Next, let's drag another button from the Library panel and drop it onto the canvas, lining it up with the other button using the red positioning lines that appear while dragging it.

Once the button is positioned, we turn our attention to the Properties panel. We'll assign our new button an fx:id of exitButton, change the text to Exit, and tab out of the field to see our changes dynamically applied. Next, we click on the other button to change its fx:id and text to clickmeButton and "Click Me for an Important Announcement", respectively. Finally, we click the Exit button and resize it to be a bit wider. Who likes to hunt for tiny Exit buttons?

We're nearly done with our first round with Scene Builder. To finish, we select the Label in the Hierarchy panel at the bottom left - that's often the quickest way to locate "hidden" visual controls - and then resize it using the sizing handles on the canvas, again using the red lines to line up with edges and buttons. Once we're done, things should look something like this:

Click File, Save to save our changes, and Scene Builder confirms with a brief message at the top of the Content panel. Leaving Scene Builder open for convenience, return to NetBeans for the next step.

Back to NetBeans

Let's make a few changes to the controller class. Opening SampleController.java, let's start with the only method we (currently) have. Since we now have two buttons, we will need to keep two methods straight. Renaming handleButtonAction to something like handleClickmeButtonAction is a good start. And to add something of significance to read when the button is clicked, we'll replace the wonderfully traditional "Hello World!" with "Space... the Final Frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before." For those reading this who aren't Star Trek fans, please feel free to substitute your own, slightly less-interesting text.  :-)

Next, we'll create a method for our Exit button by either copying the other method and renaming it or hand-jamming it. Either way, be sure you have the @FXML tag to allow for integration with our window definition/Scene Builder. Putting the following line in our new handleExitButtonAction method will give us a quick escape hatch for our demo app:


To fix the error shown by NetBeans, click on the light bulb to the left of the code line and allow it to import javafx.application.Platform. After a quick click on the Save All button, we're good to go from the NetBeans side. Now to go back to Scene Builder to wrap things up.

And Back to Scene Builder

In order for our buttons to tie to our new methods, we need to connect them to the names we gave those methods in our SampleController class. First, we'll select the top Button (clickmeButton) in the Hierarchy panel. Next we turn our attention to the Properties panel on the right. At the bottom of the right side is a collapsed section labeled "Code: Button". Clicking that line opens the Code properties window so we can update the OnAction property. Notice it still points to the method formerly known as handleButtonAction. Click the dropdown, select handleClickmeButtonAction, tab out of the field, and we're done with that button.

We repeat some of the same steps with the other (Exit) button, although since we already have the Code properties panel open, selecting the button takes us directly there. Choosing handleExitButtonAction from its OnAction dropdown and tabbing out of the field concludes our work with Exit. But there is one more thing, purely cosmetic though it may be...

Since we added quite a lot of text to our label (see the handleClickmeButton method in the SampleController class), we may want to change the default behavior of our display label. Labels default to using an ellipsis when the length of text to display exceeds the space available, but we want to see the text in its entirety! Clicking the "Wrap" checkbox in the label's Properties panel fixes that up nicely and concludes our work in Scene Builder. Click File, Save, and then back to NetBeans for our maiden voyage!

And Now Back to NetBeans for the Big Finale!

Right-clicking the project in the Projects window to the left and clicking Run provides these satisfying results:

Clicking the "Click Me" button displays the following:

And clicking the Exit button closes the application.

Start to finish, you just developed a JavaFX application using Scene Builder in less time than it takes to drink a cup of coffee...while learning your way around in the process. Fast, fun, and productive: THAT is JavaFX.

All the best,


P.S. - There isn't much to the code, but I'll post it to GitHub if anyone wants it. Just let me know.
P.P.S. - If there is any interest in a video, please let me know that as well by commenting below. No promises, but if enough people ask and I can find some free time...

Join the discussion

Comments ( 12 )
  • sutarno Monday, July 30, 2012

    I have install netbeans-7.2-ml-javaee-windows and jdk-7u5-windows-x64 in windows 7 64 bit.

    i double clik sample.fxml, i don't see Scene Builder

  • Mark Heckler Monday, July 30, 2012

    Hi Sutarno,

    It sounds like you have all of the pieces (JDK, JavaFX) except for Scene Builder. To download that, just visit http://www.oracle.com/technetwork/java/javafx/downloads/devpreview-1429449.html#sb and scroll to the bottom of the page. The Windows 64-bit .msi is located there.

    Hope this helps. Happy Scene Building!


  • guest Monday, July 30, 2012

    I'd love to see a video with some more variations. thanks

  • Mark Heckler Monday, July 30, 2012

    It may take me a while to get it done, but I'll work that in and report back here when I get it posted. Thanks for the interest!

    All the best,


  • sutarno Tuesday, July 31, 2012

    Hi Mark,

    in swing, i always use JFrame and JInternalFrame

    inHalloInternalframe frame= new inHalloInternaframe();



    in javafx, how to botton click show another file.fxml, and i want like JInternalFrame in the JFrame


  • sutarno Wednesday, August 1, 2012

    in swing, i always use JInternalFrame in the JFrame

    demoInternalFrame frame= new demoInternalFrame();



    in javafx, how to sample.fxml run another file fxml


  • Mark Heckler Wednesday, August 1, 2012

    Hi Sutarno,

    If I understand correctly what you're asking, you'll probably want to look at something along the following:

    1. Create your app as above, using a primary FXML file for your main window.

    2. Create an additional (empty) FXML file, pointing to the existing controller class or a different one. If you're looking at a small informational popup with limited functionality, using the existing controller is fine.

    3. Edit it in Scene Builder.

    4. Create a new stage, set modality (if desired), and display it. Here is a quick, very basic example just to give you the general idea:


    private void handleButtonAction(ActionEvent event) throws IOException {

    Stage puStage = new Stage();


    Parent root = FXMLLoader.load(getClass().getResource("Popup.fxml"));

    Scene scene = new Scene(root);




    Please ignore the passed IOException for this quick example. :-O

    Hope this helps! Have fun with JavaFX!


    P.S. - For future reference, you could also explore Popup/PopupWindow for certain uses. All the best!

  • guest Thursday, August 2, 2012

    Hi Mark,

    i want show data in the TableView, this is my code :

    private void handleButtonAction(ActionEvent event) {

    ObservableList<Users> users = FXCollections.<Users>observableArrayList();



    TableColumn firstnameCol = new TableColumn("First Name");

    firstnameCol.setCellValueFactory( new PropertyValueFactory<Users,String>("firstname"));

    TableColumn lastnameCol = new TableColumn("Last Name");

    lastnameCol.setCellValueFactory( new PropertyValueFactory<Users,String>("lastname"));

    TableColumn idCol = new TableColumn("Id");

    idCol.setCellValueFactory(new PropertyValueFactory("id"));



    when i click button, TableView show data

    firstname lastname id (one blank column)

    and i click button again

    firstname lastname id firstname lastname id

    i want show firstname lastname id only

    Sorry my english not good

    many thanks

  • Dr. Josef A. Brocks Tuesday, August 7, 2012

    Very good!

    A question: what to do, if I wanted to call this or onother JavaFx- routine from my above 'Gallerie'?


    J. A. Brocks

  • Sam Tuesday, August 14, 2012

    Very nice tutorial. Thanks. It would also be helpful to get instructions on how to add a JavaFX frame to an existing Swing application using NetBeans 7.2.

  • Mark Heckler Tuesday, August 14, 2012

    Thanks everyone for the kind words. I plan to put a great deal more JavaFX material out here; the limiting factor is time! If you're interested in future posts, please subscribe via RSS or follow me on Twitter for updates. More soon, I hope! :-D

    All the best,


  • Miha Tuesday, March 12, 2013

    Thanks, you saved me. I was really panicked, but your tutorial is great.

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.