JavaFX [1.3] – Save As Image

JavaFX – Save As Image code updated to be compatible with JavaFX 1.3
Please refer to JavaFX13Utils.fx for more information. You will need to update only if you are using internal APIs as mentioned in this forum thread.

For Applet mode, click on above image

For standalone mode

Try it out and let me know feedback


JavaFX – Printing

Bookmark and Share

There were many queries related to saving and printing of JavaFX nodes. Users can capture the node as image following the approach outlined in one of previous blog and use ImageIO APIs to save the image to file. For printing, we can use 2D printing – java.awt.print.PrinterJob and java.awt.print.Printable. Implement print method in Printable interface and draw the image onto Graphics object. Another approach is to directly print the image using javax.print.PrintService.

Below sample demonstrates use of ImageIO and PrintService to print the Chart

To launch click on above image or

The chart node is captured in BufferedImage. Refer to toBufferedImage method in Utils.fx. The image is then streamed to a ByteArrayOutputStream using ImageIO API. A PrintService instance which supports DocFlavor.INPUT_STREAM.PNG is obtained using lookupPrintServices method in PrintServicesLookup. Refer to print method in for more information.

Try it out and let me know feedback..

JavaFX – Z-order of Nodes

Z-order is an ordering of overlapping two-dimensional objects, such as windows in a graphical user interface (GUI) or shapes in a vector graphics editor. One of the features of a typical GUI is that windows may overlap, so that one window hides part or all of another. When two windows overlap, their Z-order determines which one appears on top of the other. courtesy: wikipedia

JavaFX provides toFront() and toBack() methods in Node to change the Z-order. But users may want more control on how to order the nodes.

For Applet mode, click on above image

For standalone mode

In above sample, the Rectangles are stacked. The node is brought to top when user clicks on it. ActionScript provides DisplayObjectContainer.setChildIndex(child, index). Silverlight provides ZIndexProperty which can be set using SetValue method. Looks like its two different approach, one is done on Container and another on Node. So what is best way to address this in JavaFX? Here is an attempt…

In JavaFX, a sequence of Node is added to Group. So we could change the Z-order by sorting the sequence. This may be done using utility method – sort – available in javafx.util.Sequences.

The sort method is expecting an instance of java.lang.Comparable, for this we can create a CustomNode which implements Comparable and implement compareTo method. Also we can add an additional attribute zOrder. The comparison can be done based on this zOrder attribute. Please refer to NodeZ implementation for more information.

Now we can manipulate the Z-order by updating UI with node array returned by Sequences.sort(). The comparator may also be implemented based on various other attributes such as scale, translate, opacity etc. Yes, there may be some concern regarding updating of content in Group for every sort. What will be its implications? I need to perform some analysis on that, will try to share some info soon..

Try it out and let me know feedback and other options..

var dzone_style = ‘2’;

JavaFX – Save As Image

There was a question on forum related to saving of node as image. JavaFX sample – EffectsPlayground had this feature. It uses internal APIs, so its broken in JavaFX 1.2. Community has identified a solution. Thanks to Chris Jensen for pointing me to this.

If you are using internal APIs as mentioned in forum thread, you will have to update your code to use 1.3 internal APIs. Please refer to JavaFX [1.3] – Save As Image post for update related to JavaFX 1.3.

Since it uses internal APIs, it may again break in next release. May be most of users just want to save a set of nodes displayed on screen. In that case we may get the top level container and draw the contents on to an image. Yes, draw back is that it will draw all nodes, so we may have to selectively hide nodes before we save the image.

For Applet mode, click on above image

For standalone mode

First we get the instance of top level container which may be an Applet or Frame.

public function getContainer() : Container {

    var container : Container;

    if("{__PROFILE__}" == "browser") { // Applet
        container = FX.getArgument("javafx.applet"as Applet;
    else // Standalone
        var frames = Frame.getFrames();
        // We may improve this logic so as to find the
        // exact Stage (Frame) based on its title
        container = (frames[0as JFrame).getContentPane();

    return container;

Now we can save the contents of the Container as Image

function save(container : Container, bounds : Bounds, file : File) {

    var bufferedImage = new BufferedImage(
        bounds.width, bounds.height, BufferedImage.TYPE_INT_ARGB);
    var graphics = bufferedImage.getGraphics();
    graphics.translate(-bounds.minX, -bounds.minY);

    ImageIO.write(bufferedImage, "png", file);

Yes, it captures the entire scene. So user has to hide the nodes which are not required before saving as image. For this I have created two groups. One group will hold all nodes that needs to be captured. Other group contains nodes which are not required (such as Button). Before taking saving as image, hide the node which contains controls etc, so that they won’t appear in saved image.

Try it out and let me know feedback

var dzone_url = “”;
var dzone_style = ‘2’;