Steve On Java - JavaFX

JavaFX 1.3 has just gone live on JavaFX.com.  This release is deceptively small, but has an enormous number of changes under the hood.  In this post I will take you through the Top 10 major features, giving you background information I learned from working with the JavaFX team, and flooding you with details on interesting tidbits you might otherwise miss.

JavaFX 1.3 Top 10 Features

1. New Controls

JavaFX 1.3 comes with several new controls that are extremely useful when designing user interfaces.  For building forms you have the new PasswordBox, ChoiceBox, and Separator classes.  The PasswordBox is similar to the TextBox control, except it automatically hides input as it is typed.  The ChoiceBox control is long overdue, but surprisingly simple to use.  The interface is similar to the ListView control, both of which take a sequence of items.

Speaking of the ListView, this control has received a serious upgrade.  This includes the ability to render horizontally or vertically as well as customizable cell renderers via a cellFactory closure.

In addition, there is a new ScrollView class that simplifies the task of creating a simple scrollable viewport surrounding a collection of nodes.  This has been a feature in JFXtras for a while, so it is nice to see that the JavaFX team thought it was useful enough to add to the core libraries.

Finally, all controls now take a Tooltip that will be displayed on rollover.

To bring it all together, here is a simple example that demonstrates all the new controls in action:

And here is the source code:

import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.geometry.Insets;

var list = ["apples", "bananas", "oranges", "pears", "cabbage"];

ScrollView {
  width: 250
  height: 250
  managed: false
  node: VBox {
    padding: Insets {top: 10, left: 10, bottom: 10, right: 10}
    spacing: 10
    content: [
      PasswordBox {promptText: "enter password"}
      Separator {}
      ChoiceBox {
        items: list
      }
      ListView {
        vertical: false
        items: list
      }
    ]
  }
}

2. Layout Enhancements

Layout has undergone some serious changes as a result of this release, including the following:

• LayoutInfo and Resizable now include settings for fill, grow, and shrink.  Fill will allow you to specify whether the contents of a layout stop at their preferredSize or take up the maximum allowable space.  Grow and shrink are hints to the container about the relative priority for different nodes to get the available space.
• LayoutInfo also includes a new margin feature, which makes it very easy to add visual padding around your Nodes in a layout!  This is in addition to padding, which appears on all the built-in layouts.
• Container has a new snapToPixel boolean that allows you to create pixel-perfect alignments to avoid unwanted aliasing effects.
• There is a new autoSize feature on Groups. Children will be automatically resized to their preferred width and height, preventing layout bugs when uninitialized components return the wrong bounds initially. You can still disable this feature, but it is strongly recommended that you fix your application to make use of preferred widths and heights instead of setting Node width and height manually.
• Resizable classes automatically have layoutBounds set to [0, 0, width, height], avoiding an additional required declaration.
• New support for baseline layouts via the TextOrigin class.
• The Tile class now automatically sizes the tileWidth and tileHeight by default.
• HPos and VPos have boolean for fillHeight and fillWidth, which rarely should be changed, but allow you to default back to the pre 1.3 behavior.

For the most part, the JavaFX team has done an amazing job of keeping the layout changes backwards compatible.  However, to fully take advantage of the new layout features you will have to update your code.

The layout changes are significant enough that I can’t do them justice in this short blurb.  However, either myself or Amy Fowler (whoever makes it first) will do an in depth article on just this one topic!

3. Performance

There have been some very significant changes in performance in the JavaFX 1.3 release all the way down to the compiler generated code.

Some areas you will notice the largest performance improvement in include:

• Bind performance – All binds in the language are now lazy by default, which means that they will get marked as dirty immediately, but only get re-evaluated when needed (if at all).
• General code performance – With the compiler rewrite, a level of indirection on variable access has been removed, which will significantly improve the overall performance of any application.
• Layout performance – The layout code has been optimized to reduce the number of passes required on each layout cycle, greatly improving the perceived responsiveness of applications.
• Text performance – With the change to logical rather than physical layout bounds, any applications that heavily use Text elements will see a dramatic improvement in overall performance.
• CSS performance – The CSS support has been rewritten from the ground up, greatly improving performance of applied styles.

4. Enhanced CSS

The CSS support in JavaFX 1.3 has been rewritten from the ground up.  This includes some greatly enhanced functionality, especially for the Control classes, and also has a dramatic improvement on performance.

Because the changes are so significant, you may find that a lot of your previous styles do not work correctly on the 1.3 release.  The full set of CSS changes and supported tags is such a large topic that I will provide a link to the full JavaFX CSS specification once it is made available.

Dean Iverson has done an excellent writeup of some of the new CSS capabilties here: Advanced JavaFX Control Styling

5. 3D Support

Via the new, experimental Prism graphics stack you can start experimenting with 3D graphics in your JavaFX applications.  Some of the new APIs that you will see throughout the JavaFX documentation for working with 3D graphics include:

• New Camera classes for changing the viewing perspective of the Scene, including a ParallelCamera that does orthographic projections and a PerspectiveCamera that can be used to see things in full 3D
• Transition changes to accept a three dimensional axis on RotationTransition, ScaleTransition, and TranslateTransition
• A completely revamped set of transform classes that accept z coordinates
• A new Point3D class as well as changes to BoundingBox and Bounds to accept a third dimension
• The addition of rotationAxis, scaleZ, and translateZ on all scene graph Nodes

To use 3D in your applications you will need to enable the prism graphics stack with the following JVM argument:

-Xtoolkit prism

Runtime you can validate whether 3D is enabled or not using the new Platform and ConditionalFeature classes like this:

Platform.isSupported(ConditionalFeature.3D);

The best example of JavaFX 3D in action is Jim Weaver’s new 3D Calendar Cube post.

6. TV Emulator

For the first time, JavaFX 1.3 includes a TV Emulator as part of the distribution.  This gives you the chance to compile and test your applications against the new TV profile, and sometime in the near future deploy it to the big screen!

The easiest way to change your application to run against the TV profile is to select the “Run in TV Emulator” option in the NetBeans Properties dialog.  From the command line you can accomplish the same thing by passing in “-profile TV” to both the compiler and JavaFX runtime.

Here is a screenshot of the TV Emulator in action:

The biggest change you will notice is the different icon in the upper-left hand corner of the screen.  From a development perspective, it feels very similar to the desktop experience, but you need to keep in mind the following constraints:

• Screen Distance – Your end users will be sitting 5 to 6 feet away from the screen, so your entire application has to be designed to be visually distinctive at a distance.
• Remote Interaction – TV viewers do not typically sit on their couches with full QWERTY keyboards, so your UI will need to be designed to be fully operational from a common remote control.  This can make navigation, selection, and text input much more challenging.

If you are interested to see a live demonstration of JavaFX TV, join us in person or for the live web stream of our June SvJugFX meeting with Mikhail Gorshenev from the JavaFX TV development team.

7. Conditional Features

I mentioned a little bit about conditional features in the 3D section above.  However, having conditional features is itself an extremely important feature.

In previous release of JavaFX if you wanted to make use of certain features, such as effects, that were only in the desktop profile, you were required to remove these from your code to compile against mobile.  With the addition of conditional features you can now safely include these features in your application and they will be silently ignored if they are not supported on your platform.

This takes the concept of write once, run anywhere to a new level in JavaFX, greatly simplifying development on platforms that only support the common profile!

Here is a short program that will print out whether or not each of the conditional features is enabled for your platform:

import javafx.runtime.*;

println("Effect enabled: {Platform.isSupported(ConditionalFeature.EFFECT)}");
println("Input Method enabled: {Platform.isSupported(ConditionalFeature.INPUT_METHOD)}");
println("Scene 3D enabled: {Platform.isSupported(ConditionalFeature.SCENE3D)}");
println("Shape Clip enabled: {Platform.isSupported(ConditionalFeature.SHAPE_CLIP)}");

8. Custom Cursors

You are no longer limited to the set of default cursors defined on the Cursor class.  Using the new ImageCursor class you can take any JavaFX Image and turn it into a mouse cursor.

This capability was recently released as a part of the JFXtras 0.6 Release thanks to the hard work of Jeff Friesen, but is a very welcome addition to the core API!  Now all that is needed is an implementation of Jeff’s custom paints.

9. Faster Animation

JavaFX 1.3 has a new cacheHint option on Nodes that allows you to degrade performance while animations are taking place.  Perceptually it is hard for the user to notice the loss of quality, but it can have a very big difference in performance of your application.  This is a staple of other JavaFX scene graph technologies like Piccolo2D, so it is good to see progress on this in the JavaFX 1.3 release.

There is a great example of how to use this new capability right in the JavaFX Node API docs (duplicated here for convenience):

 expensiveNode.cache = true;
 expensiveNode.cacheHint = CacheHint.QUALITY;
 ...
 // Do an animation
 expensiveNode.cacheHint = CacheHint.SPEED;
 Timeline {
     keyFrames: [
         KeyFrame {
             time: 2s
             values: [
                 expensiveNode.scaleX => 2.0,
                 expensiveNode.scaleY => 2.0,
                 expensiveNode.rotate => 360,
                 expensiveNode.cacheHint => CacheHint.QUALITY
             ]
        }
     ]
 }.play();

10. Preview Features

In addition to the public API, JavaFX 1.3 contains a number of top secret new features!  These are features that are not final, but are very usable if you are willing to live with future API changes.  All of the preview features are grouped under the com.javafx.preview package, and include the following:

• Grid – A Grid layout that makes it much simpler to layout nodes in perfectly aligned rows and columns.  The original layout code was donated by the JFXtras team, and productized by the amazing layout skills of Amy Fowler.
• MenuBar/PopupMenu – This is the completed version of Jonathan Giles very popular Menu control.  He is now a core member of the JavaFX Control Team, and plugging away at bringing this and other great controls to the hands of JavaFX developers.
• TreeView – A full implementation of a hierarchical tree in JavaFX complete with TreeItems and TreeCells.
• ToolBar – A palette-like control that lets you create rows of tool buttons with icons and text.  This is the handiwork of Paru Somashekar.

In a future post I will go into more detail on usage of these preview features, which greatly extend the power of JavaFX!

Other Noteworthy Features

Besides the major features mentioned above, there are also thousands of little changes that have made it in to the 1.3 release.  While I don’t have time (or room) to cover all of them in detail, here are some other noteworthy features that you can take advantage of in your applications:

• New Amble font – JavaFX now includes its own high fidelity fonts that are consistent across all platforms.  Since this is the new default font, you may notice that the spacing and alignment of your existing applications may be slightly off.
• Timelines can now be paused.  There is also an evaluateKeyValues that allows you to reevaluate the value portion of your animation (whatever is on the right side of the =>) on demand (normally the value is evaluated once before the first Timeline execution).
• You can get exceptions that occur while processing JSON/XML via the new exception variable on Event.
• PullParsers can now be run asynchronously using the new ParserTask class.
• FXD now supports node selection via an XPath-like syntax and has metadata support on nodes, which is exposed as a map to the application.
• There is a new Bounds class for representing widths and heights.
• Builtins has a new isReadOnly function, which tells you if a variable is bound.  No more catching AssignToBoundException!
• Durations are now Comparable, have new constants for one and zero, and a new static TYPE_INFO variable.
• CustomNode now has a publicly exposed children sequence.  This makes it much easier to work with scenegraph navigation.  It also solves a potentially perplexing issue with object initialization order.  You should definitely make use of the new children sequence rather than overriding the old create function.
• The infernal scene graph warning is gone!  You can now move a node around the scenegraph without worrying about removing it from the previous parent.  Stuart Marks has a great blog post about this.
• Node has a new pickOnBounds variable that lets you change the active hit region to be the logical rather than the physical bounds.
• All container nodes (Group, CustomNode, Container, Control) now extend Parent and have a children sequence, greatly simplifying scene graph traversal.
• Text supports logical and physical bounds.  Big performance improvement with the new default of logical!
• Improved charts…  background lines, shading, and cleaner text.  Here is a before and after picture:

Additional Resources

The JavaFX team did a great job of documenting the new features and migration to JavaFX 1.3 in the following articles:

• What’s New in JavaFX 1.3
• JavaFX 1.3 Migration Guide

And not to be outdone, Jim Weaver had the very first external post about the 1.3 release emphasizing the new 3D capabilities:

• Your Calendar PWN3D: Leveraging the JavaFX SCENE3D ConditionalFeature

Since this post first appeared, some excellent resources have come up:

• Advanced JavaFX Control Styling by Dean Iverson

As additional resource become available, I will continue to update this section.

Conclusion

I hope you enjoyed this whirlwind tour through all the new features of the JavaFX 1.3 release.  There is a lot of goodness here, some of which I might have missed, so please comment on any features of the 1.3 release that you enjoy using!