Baechul's Weblog

A) FXDLoader.load():Node

The simplest form. It is useful when the content of the FXZ file is ready for use as it is, that is, no need of manipulation such as scaling, adding effects, etc from JavaFX code. The returned node is actually a Group node whose parent is null. It can be directly added to another branch of the scene. 

B) FXDLoader.loadContent():FXDContent

This approach is usually used when the content of the FXZ file needs some touch-up from JavaFX code such as scaling, adding effects, etc. Note that all other getter functions except getRoot() return a child node whose parent is already set to the top level Group in the FXZ content. Since a node with a non-null parent can not be reused in a different parent, the node should be removed from the old parent or its clone should be used. The Duplicator class comes in place for this purpose.

 Example 1:
 var fxdContent:FXDContent = FXDLoader.loadContent("{__DIR__}fxsample.fxz");
 scene.content = fxdContent.getRoot();

 Example 2:
var fxdContent:FXDContent = FXDLoader.loadContent("{__DIR__}fxsample.fxz");
 scene.content = Duplicator.duplicate(fxdContent.getNode("atom"));

C) FXDLoader.loadOnBackground(url, loader):FXDLoader

This is useful when you want to reuse the same loader to load more than 1 FXZ file as illustrated in the example.

D) FXDLoader.createLoader(url):FXDLoader

FXDLoader is extended from javafx.async.Task. If you are familiar with the FX async framework, the following approach should make you feel at home. Please see my other blog about FX Async Operation for details.

 Example 1:
var loader:FXDLoader = FXDLoader.createLoader("{__DIR__}fxsample.fxz");
loader.onDone = function() {
    if(loader.succeeded) {
        insert loader2.content.getRoot() into scene.content;
    }
}
loader.start();

e) FXDNode {backgroundLoading: false} - Synchronous Loading

As in the next case, a loader can be attached only for listening events such as onStart, onDone, etc.

f) FXDNode {backgroundLoading: true} - Asynchronous Loading

A loader can be attached but it is only for listening events such as onStart, onDone, etc. Note that loader.source and loader.content don't have what you might be expecting but null values.

Example 1:
var loader: FXDLoader;
scene.content = FXDNode {
    url: "{__DIR__}fxsample.fxz"
    backgroundLoading: true
    placeholder: Text{ x:10 y: bind scene.height-50 content: "Loading graphics..." fill: Color.YELLOW}
    loader: loader = FXDLoader {
        onStart: function() {
            println("onStart");
        }
        onDone: function() {
            println("onDone: {loader.source}");             // onDone: null
            println("onDone: {loader.content.getRoot()}");  // onDone: null
        }
    }
}

g) Generating a UI Stub File for a JavaFX Graphic in the NetBeans IDE

When a JavaFX Content File (FXZ) is included in a NetBeans project, developers can generate a UI Stub file, which enables them to easily access the graphical elements from JavaFX applications. This UI Stub file defines variables for all of the graphic objects with an ID value. The UI stub file that is generated has the same name as the JavaFX graphic plus a UI suffix. For example, if the JavaFX graphic is named fxsample.fxz, the stub file is named fxsampleUI.fx. The class that is generated also has the name fxsampleUI.

1. In the NetBeans IDE, open the project for your JavaFX application.
2. Locate the JavaFX Content File (FXZ) in the Projects pane.
3. Right-click (or Control-click on the Mac) the JavaFX Content File (FXZ) and select Generate UI stub.

Note that the generated UI class extends FXDNode so its usage is same as above. It's convenient to access the enclosed graphic assests.

Example 1:
var loader: FXDLoader;
var fxdNode:fxsampleUI = fxsampleUI {
    url: "{__DIR__}fxsample.fxz"
    backgroundLoading: true
    placeholder: Text{ x:10 y: bind scene.height-50 content: "Loading graphics..." fill: Color.YELLOW}
    loader: loader = FXDLoader {
        onDone: function() {
            delete fxdNode.atom from fxdNode.getRoot().content;
            scene.content = fxdNode.atom;
        }
    }
}

NetBean generated fxsampleUI.fx:

import java.lang.*;
import javafx.scene.Node;
import javafx.fxd.FXDNode;

public class fxsampleUI extends FXDNode {

    override public var url = "{__DIR__}fxsample.fxz";

    public-read protected var atom: Node;
    public-read protected var background: Node;

    override protected function contentLoaded() : Void {
        atom=getNode("atom");
        background=getNode("background");
    }

    /**
     * Check if some element with given id exists and write
     * a warning if the element could not be found.
     * The whole method can be removed if such warning is not required.
     */
    protected override function getObject( id:String) : Object {
        var obj = super.getObject(id);
        if ( obj == null) {
            System.err.println("WARNING: Element with id {id} not found in {url}");
        }
        return obj;
    }
}