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.