JavaFX Content File Loading
Once you export your graphic assets from the Adobe Photoshop or Illustrator, you will need to load it to the JavaFX. Here are the various ways loading it depending on what you want to do.
1) Synchronous Load
JavaFX content file (FXZ) or data file (FXD) can be loaded synchronously by using the following approaches. As FX event thread will be blocked until synchronous loading is completed, this approach maybe good for the local loading only.
|
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. |
| Example 1: insert FXDLoader.load("{__DIR__}fxsample.fxz") into scene.content; |
|
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: Example 2: |
2) Asynchronous Load
JavaFX content file (FXZ) or data file (FXD) can be loaded asynchronously as well by using the following approaches. This approach is recommended for the network loading.
|
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. |
| Example 1: var loader:FXDLoader = FXDLoader { onDone: function() { if(loader.succeeded) { scene.content = loader.content.getRoot(); } } } FXDLoader.loadOnBackground("{__DIR__}fxsample.fxz", loader); PauseTransition { duration: 3s action: function() { FXDLoader.loadOnBackground("{__DIR__}fifteen.fxz", loader); } }.play(); |
|
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: |
2) Configurable Synchronous/Asynchronous Load
FXDNode can be configured to load synchronously or asynchronously by using the following
approaches. NetBeans IDE has a special support to create a UI class that extends FXDNode for the selected FXZ file. This approach is preferred in most of usecases.
|
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. |
| Example 1: scene.content = FXDNode { url: "{__DIR__}fxsample.fxz" backgroundLoading: false placeholder: Text{ x:10 y: bind scene.height-50 content: "Loading graphics..." fill: Color.YELLOW} } |
|
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: |
|
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
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: NetBean generated fxsampleUI.fx: import java.lang.*; public class fxsampleUI extends FXDNode { |
To be continued...






