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.
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).
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.
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/
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.
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.
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.
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.
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.
8 thoughts on “Handy Tools for JavaFX Development”
Pingback: Java desktop links of the week, October 12 « Jonathan Giles
Pingback: JavaFX links of the week, October 12 // JavaFX News, Demos and Insight // FX Experience
I’m would like you to information about another NetBeans IDE plugin for JavaFX which I will release in the next days. Here the plugin description:
The NetBeansIDE-AfterburnerFX-Plugin is a NetBeans IDE plugin which supports the file generation in convention with the library afterburner.fx in a JavaFX project.
The following files [prefix].fxml, [prefix]Presenter.java, [prefix]View.java and optional [prefix].css and [prefix].properties will be created in a new wizard where [prefix] is your choosen file and package name.
More information about the plugin can be found under:
Very Cool! I’ll send out a tweet about this tomorrow.
An addition for eclipse users: e(fx)clipse is the name of the plugin you need to get eclipse ready for JavaFX development. Unfortunately it is not part of the default package you can download at eclipse.org.
I’m glad to inform you that the NetBeansIDE-AfterburnerFX-Plugin v1.0 is released. The plugin can be downloaded here (https://github.com/Naoghuman/NetbeansIDE-AfterburnerFX-Plugin/releases) or here (http://plugins.netbeans.org/plugin/60847/netbeanside-afterburnerfx-plugin). It’s also possible to install the plugin directly over the Update Center in NetBeans IDE.
More informations about the installation procedure can be found in the section ‘Installation’ from the ‘ReadMe’ (https://github.com/Naoghuman/NetBeansIDE-AfterburnerFX-Plugin).
Awesome, thanks Peter!
Pingback: JavaFX links of the week, October 12 – My Worlds