The 2 Ways to Write JavaFX Programs 5

Learn to Code!

Yes, that’s right –  there are 2 VERY different approaches to writing a JavaFX Application which makes learning it a bit more of a tricky process.  When I first started taking a look at JavaFx I was confused because the examples I came across were showing completely different approaches to the same programs.  Once I realized it you have 2 options when you write a program in JavaFx I became interested in learning both approaches so I could get a firmer grasp on the whole ‘JavaFx experience’.  Moving forward, I expect that I will continue to provide my examples in both formats for a while.  I am using NetBeans for all examples on JavaFxTutorials as well as SceneBuilder as a drag-and-drop interface designer for FXML.

The Layout Of All JavaFX Programs

JavaFxScreenLayoutRegardless of which technique you use to write your JavaFX program, they BOTH conform to the same overall layout.  The 3 main Objects that get the program on the screen are (from outer to inner):

The Stage – This is the outer shell of your application and contains the entire program

The Scene – The object directly contained by the stage.  Think of watching a play (on a stage) and when something is happening you are watching a scene.  When the story changes, the play goes to a NEW scene.  In the program when you want to switch to another view you can also have the Stage change to a different Scene.

The Root Pane/Container – This object holds all the parts of the application, like buttons, labels, textfields, etc.  Depending on how you want to layout your application, the root container can be represented by a number of JavaFX containers such as the StackPane, GridPane, BorderPane, FlowPane, plus many more.  These different types of containers go beyond the scope of this simple lesson, but if you have a Swing background these should be very familiar to you.  In both examples I will be using a basic container called a “StackPane”.  Now let’s look at the 2 ways you can get a new program started in JavaFX.

In This Corner – Hello World in Pure Java Code

Screen Shot 2015-01-04 at 7.04.47 AMI don’t have a better name for this method other than to call it ‘Pure Java Code’ because in this technique you are writing ALL the code to create the interface AND the logic of the interface – both in the same class.  Now, in more advanced programs you are likely going to have different classes to describe various objects you are using, but it IS possible to get the job done entirely in 1 class.  When you launch NetBeans you will choose the following – “JavaFX Application” and give it a name. When you do you will get back some starting code for your Hello World” application.  With a bit of re-writing I modified “Hello World” using a new type of Java expression called a LAMBDA for the button-click code.  This way I can write a separate method called “btn_click” and connect it to my button with 1 simple line of code:

Screen Shot 2015-01-04 at 7.14.23 AM

When you run the program you will see this, and the button will print a message every time you click it.  I made the application small at 200 by 50 when I created the Scene object Screen Shot 2015-01-04 at 7.14.09 AM

In This Corner – Hello World FXML

When I first encountered FXML I was both intrigued and scared at the same time.  I felt like I was learning Java all over again but the Scene Builder tool looked so cool and so powerful that I had to press on and figure it out.  We won’t get into the SceneBuilder part in this example but I WILL show you the FXML document that gets generated, along with the 2 (yes that’s right 2) other classes.  In NetBeans, choose the following: Screen Shot 2015-01-04 at 8.03.19 AM
With that, you get a total of 3 files – but before you freak out like I did, lets go through them one at a time. Screen Shot 2015-01-04 at 8.05.23 AM

The 3 Files in the FXML Application

FXML Document

fxmlLayoutThis is very much like HTML and you can write code to “describe” the layout of the application.  No code is written here, but there IS a place to point this file to the java class that CONTAINS the code.

Controller Class

This document contains the code needed to run when the user interacts with the program.  As a simple example, when the user clicks the button, the code for that button will be in this class.  Thisis where you will spend the most amount of time CODING your application.  (You will also spent a lot of time in either the FXML document or SceneBuilder to work on the interface design)

Main Application / Startup Class

Although it has the important job of LAUNCHING the application, nothing else much goes on in here at this point.  This gets generated for you by NetBeans and you can leave it as is.  This class will load up a scene from the FXML document and put it on the stage.

 FXML Document – A Closer Look

This is the code that is generated by NetBeans.  If you are familiar with HTML, it looks a little familiar.  You can actually write your own code in here to modify the interface, which I found very strange coming from a Swing / coding background.  I added some ‘html-style’ comments for you to read to gain a better understanding of how this document works:

Screen Shot 2015-01-04 at 8.16.19 AM

The Controller Class – A Closer Look

This class contains the code for the 1 object you will interact with in the FXML document – the button.  It also makes reference to the label found in the FXML document since you will be printing text to it

Screen Shot 2015-01-04 at 8.11.52 AM

The Application Class – A Closer Look

Like I mentioned earlier, all FXML documents need an opening “Scene” and a “Stage” to put it on.  This document does just that.  Notice the scene is being made from the FXML document which gets loaded into a Parent object.  A “Parent” is another very generic object which can represent any of the different types of containers mentioned earlier.  By the way, the FXML document defines another type of container called an “AnchorPane” which is from the same family as the “StackPane” shown in the first example:

Screen Shot 2015-01-04 at 8.10.41 AM

Scene Builder – If You Don’t Have It, Get It

As I mentioned at the beginning, I am using SceneBuilder to design the FXML interface. You can download SceneBuilder here.  Once you have it, Netbeans will automatically open it up as the editing tool when you are working with the FXML document.  Here is what the FXML document looks like when you are editing it in Scene Builder.  More specific details about SceneBuilder will be covered in another post. Screen Shot 2015-01-04 at 8.18.27 AM

The Finished Product

Here is what the FXML version looks like.  From the end-user point of view there is really NO DIFFERENCE – both programs produce a simple window with a button on it.  The FXML version also prints to a label but that is something you can easily do with pure Java code too.

Screen Shot 2015-01-04 at 8.19.03 AM

In Conclusion

I will admit that even if you have experience working with pre-java-fx, there is a learning curve to FXML and it took me a while to get comfortable with it.  I don’t think this article will convince anyone to start using it right away but after spending time getting to know it, I believe it is well worth the effort.  For smaller projects it may still be better to write the whole thing in Java but as you get bigger SceneBuilder will save you a lot of time in designing the interface.  Plus it truly separates the “view” from the “controller” and you could even assign the “view” part to a non-programmer or designer if you wanted to.

What are your thoughts about the 2 approaches?  Do you already prefer one over the other – or if you are just starting out, do you plan on spending time getting more comfortable with FXML and SceneBuilder?  Let me know.

5 thoughts on “The 2 Ways to Write JavaFX Programs

  • Devanand Singh

    You are right! It is scary, but I intend to learn it. I spent months getting comfortable with Swing and started writing my software with it. Now JavaFX is on the scene (pun intended). I have been trying to use Scene Builder but either I can’t figure some stuff out as yet or JavaFX is still too young for certain things like centering an image inside a button. I figure I have to go dig up all those css tutorials to fine tune to what I want.
    My only comfort is that I was just as clueless when I started learning pre-FX Java, so I just got to stick with it and it’ll come. Plus I believe it is the wave of the future (being html compatible and all).

  • admin Post author

    Hang in there Devanand – It takes a while but if you have some Swing background it should start to make sense. Try my Math FXML program to get your feet wet, its a gentle start to FXML

  • JPassos

    Greetings, it is a good article.
    It is possible to make an article by making a menu and this menu commands call all other screens (XML) so that they all appear at the same location (within the main window).

  • admin Post author

    Yes, that will be coming in the future. The best way to do that is to use a BorderPane and set the Center to a new FXML document

Comments are closed.