If you are building an application with JavaFx there are a few tools that will make your life a whole lot easier and save you a lot of time.


Scene Builder

The WYSIWYG drag-n-drop design tool for JavaFx will build an FXML representation of the UI which can then be loaded by a JavaFx application.  Scene Builder helps to enforce the MVC pattern, keeping business logic out of the code that describes the UI. (More on this below).

SceneBuilder1

Scene builder also has a nice "CSS Analyzer" feature which will show you the full CSS path to a component that is selected in the tool.  This has come in handy when attempting to figure out what the CSS path for a component is when attempting to determine where to apply a CSS style .  I wish I had known about this when I first began using JavaFx, as it was previously a trial-and-error process for me to get a component styled correctly.

SceneBuilder2

Gluon, Inc. has taken over the build and release of the Scene Builder installer packages which can be obtained at the following link: http://gluonhq.com/open-source/scene-builder/


NetBeans

Of course you will need a good IDE for developing the remaining, and NetBeans provides a number of features which helps out with developing with JavaFX.

The first is the autocomplete feature when working with the FXML files that are generated by Scene Builder.  The IDE will generate a list of possible values when inserting or modifying nodes.

NetbeansFx

There is also support when working with the JavaFX CSS files that will be loaded by the application.  In the example below, NetBeans generates a list of possible colors for the -fx-background-color property.

NetbeansFxCss

Finally, there is a code generator plugin which will generate getter and setter methods for JavaFX properties in a POJO class.  The normal Getter/Setter functionality would return a StringProperty object for the name variable (below), when ideally I would want the class me to return the actual String that the property represents.  A screen shot below shows the "Generate" popup menu item with the "JavaFx Props Getters & Setters".  Once selected, the following screenshot illustrates the code that is generated.

The plugin is available at the link below.

https://github.com/rterp/JavaFxPropertyHelperNBPlugin/releases/download/1.0.0/JavaFxPropertyHelperNBPlugin-1.0.0.nbm

Ubuntu1

NetbeansFx2


Scenic View

Scenic View is another helpful tool when developing and debugging JavaFX applications.  It is a stand alone GUI application which will attach to a JavaFX application, and display all the nodes in the scene graph in a collapsable tree.  On the right side of the UI it will display various properties about the selected node.  ie min height, max height, location, css styles, etc.  In the screenshot below Scenic View is in front on the right side of the screen, and the application being debugged is behind Scenic View on the left side of the screen.  The selected button on the app is highlighted yellow, and Scenic View has selected this button in its tree view and is displaying its properties in the table on the right.

Scenic View can be downloaded at the FxExperience website.

ScenicView


MvvMFxLogo

Finally, MvvmFX is a framework for implementing the Model-View-ViewModel (MVVM) pattern in JavaFX.  This pattern allows you to separate any business logic related to the UI from the UI data and state, meaning that the business logic behind the UI can be unit tested without creating any UI components.  Since the view model doesn't know about the view, it makes it possible to replace the view without requiring modifications to the view model.

An instance of the view model is injected into the view, which is just a JavaFx controller for a component.  An example view/controller class is shown below.

NetbeansFxMvvM

twitter: @RobTerpilowski
LinkedIn: Profile