This post is just a collection of my observations after watching a talk at JavaOne by Jean-François Denise about the JavaFX scenebuilder application.
One word summary: Wow!!
Two word summary: This rocks!
Scenebuilder is a GUI application for editing FXML files (an XML format for defining user interfaces in JavaFX). It provides a drag and drop canvas for placing components in a scene. It really is almost as easy as photoshop when it comes creating pretty UI designs. In fact, it may be an effective tool for mocking up UIs. You can drag images directly out of finder onto a scene and then start resizing it, rotating it, etc.. right on the stage.
I was particularly impressed by how well it uses CSS for customizing the look of an interface. The CSS works just like normal CSS in the web, except it has its own directives prefixed by “-fx”. CSS stylesheets can be added at any level of the DOM. You can attach a stylesheet to the whole stage, or to a single panel, or even a single button. You can also add inline CSS styles to an individual tag. Two differences from HTML CSS is that JavaFX also allows you to define a theme and bean properties to style elements. The order of precedence is:
1. Inline
2. CSS Stylesheets
3. Bean properties (e.g. properties set in the node inspector).
4. Themes
Scenebuilder luckily keeps the styles sorted out so that you can don’t have to pull your hair out trying to find out where the “effective” style is defined. If you have overridden a bean property in a stylesheet, the bean inspector will no longer allow you to edit the property, but rather will link to the exact part of the stylesheet where the property is set.
There is also a powerful CSS analyzer that allows you to see all of the CSS properties for each node, and where they are defined. If you make a change to a CSS file, the preview of your UI will be updated instantly.
Denise briefly showed a demonstration of how to add a custom type to the scene builder, although apparently there is still work going on in this area to make it easier to add custom components. Currently you can only use the set of built-in components – and there are some notable components still lacking.
So far I’ve only played around with Scenebuilder and JavaFX briefly and sparsely. However I am looking forward to digging in.