Last year, with the release of version 2.0, JavaFX finally started to gain attention at the big conferences and there seemed for the first time to be a shift in developer perception now that Oracle addressed the issues that kept Java developers from using this new UI technology.
There's the following issues that have now been resolved:
- Swing integration
- JavaFX will be Open Source,
- JavaFX can be legally deployed with your application
- There's a roadmap for Mac and Linux support
- It's part of the latest JVM/JDK shipped by Oracle and might become an official part of the JDK in Java 9.
So, there's basically no excuse anymore not to use it ;-), and with competitors Flash and Silverlight losing support from its creators, it was high time to give developers the tooling to play with JavaFX.
January 5th, 2012, the NetBeans Team released version 7.1 of the popular IDE. The most significant changes are support for JavaFX 2.0, a UI Debugger for JavaFX and Swing and a new Batch-Refactoring tool for bulk changes in Java projects. Besides that many components have been updated, e.g. Java EE support, PHP projects and there have been some improvements in supported Code Versioning Systems. In this article we'll have a closer look at the JavaFX support.
Image 1:A JavaFX Demo Application shipped with NetBeans
JavaFX 2.0 Project Types
After dumping JavaFX Script (which lives on outside Oracle and has broadened its scope as project Visage) and moving to plain Java and FXML all existing tools were rendered useless. The support for JavaFX had to be recreated from scratch based on Java Projects. After years of refactoring the JavaFX support over and over, it must have been a relief for the NetBeans team that there'll be no more weekly random language changes to the JavaFX Script Spec. Still it's a bit sad that so much work had to be wasted that could have gone into other parts of the IDE. And some people still feel that the Script language was actually not a bad idea at all.
NetBeans 7.1 adds three ANT-based project types for JavaFX: "JavaFX Application", "JavaFX Preloader", and "JavaFX FXML Application". JavaFX Application basically is a standard ANT project with enabled JavaFX capabilities. During project creation it will check for a JavaFX-enabled JDK, and if there isn't one registered, it will help you add JavaFX support to a standard JDK. The project enables you to build, run and debug your application. The only difference to this in a JavaFX FXML Application is the generated code you can use to start with. In the latter case the code for loading the UI from an example FXML file will be generated. There's still nothing that keeps you from using FXML in a standard JavaFX Application.
A JavaFX Preloader project creates a Preloader, a small application that can run before the actual application during the applications startup process. It's especially useful in JNLP-based deployments and can be used to show progress (splash screen). The project will create the code for a simple Preloader Window containing a ProgressBar:
Using it as a splash screen for a JavaFX Application is simple. Right-click your JavaFX Application project and choose "Properties". In the Properties Dialog switch to the "Run" Tab. Using the "Browse" Button next to the disabled Preloader section, you can then select a JAR-File or a NetBeans project to register the Preloader. At the next start, your application will display the Preloader. There's a nice tutorial describing how you can create and register your Preloader using NetBeans in more detail.
NetBeans 7.1 adds support for FXML, the new XML Format for specifying the UI. When creating a new FXML-Template, either by creating the project as described above, or by creating it using the "New File" Wizard, the IDE will automatically create controller class for you. That's nice, because even though Controllers are optional, it's good architecture to use them in order to separate behavior from the design and encapsulate it in a dedicated class.
One of the problems of the FXML format is that unfortunately there's no schema/DTD. As a result the default XML-support will not be able to give you any help like Code-completion, etc.. So while NetBeans supports editing FXML files, it doesn't provide help beyond checking the correctness of your opening and closing tags.
Nevertheless I'd expect a graphical tool for editing FXML files anyway, and I assume that it's on the TODO list for the next release. Until then I personally don't use FXML too much, because I feel that XML is simply too verbose and the need of opening and closing tags to define an object hierarchy are getting in the flow of programming. The Eclipse Project for supporting JavaFX development e(FX)clipse has even invented their own DSL fxgraph, which is later converted to FXML in order to work around these problems. A smart idea and a better alternative for hand-coding UIs declaratively.
Debugging UI Snapshots
Other than that the JavaFX support works very nicely and it adds one extremely cool feature: graphical debugging. During a debugging session you now can take UI snapshots, that will show up in the IDE. In the screenshot you can now select the individual components and explore their properties using the Properties Window. You can explore the component hierarchy in the Navigator and there's a new "Events" Tab in the Output Area listing Listeners attached to the controls and even allowing to attach logging listeners. The events window is a bit hard to find though. It can be opened from the context menu of a component in the Navigator. That new tool is very cool and helpful, but so far I only got this feature to work with Swing applications on my Mac, not for JavaFX; maybe a bug of the Beta OS X JavaFX version.
Styling applications with CSS
My favorite feature of JavaFX 2.0 is CSS support for styling. NetBeans 7.1 now supports that by adding CSS3 support, so controls can easily be customized using this approach. For more details have a look at my recent article on DZone showing an example of this technique. Unfortunately the CSS-support does not yet provide code completion for JavaFX-specific properties, or at least I wasn't able to invoke it. Also the CSS-Stylebuilder and the preview seem to only work with the default (HTML) properties. So there's still room for improvement here.
Samples and other stuff
NetBeans shipped with more than 30 sample JavaFX applications demonstrating different aspects of JavaFX. They cover everything from Charts, FXML, Transitions, Animation, Key- and MouseEvents, Media, etc. and are a great resource for learning.
When it comes to deployment, all proposed deployment models, Applets, Desktop and Webstart are now supported by the IDE and there's support for Preloaders that make it possible to customize and improve the loading experience of a JavaFX application, another thing developers have been asking for a long time. You can configure these settings very comfortably in the Projects Properties.
I used the JavaFX support in NetBeans IDE quite a bit in the past weeks in the NetBeans IDE Release Candidates, and it's definitely usable and helpful. So I'm hoping for some graphical tools that make it easy to define UIs either as part of the IDE or as accompanying tools.