The NetBeans IDE provides tools to help you work with JavaFX Content File (FXZ) graphics that are exported through Production Suite.

View JavaFX Graphics and Source Code

By bringing an FXZ file into a NetBeans JavaFX project, you can work with it in the following ways:

• In the Projects window, you can view the hierarchical structure of the FXZ file, in terms of the component files that it contains.
  
  

  Figure 1: NetBeans Projects Window

  Tip: Add the FXZ file to a NetBeans project to view it. If you open an FXZ file by using the Open File command in NetBeans, you will not be able to see the structure of the FXZ file in the Projects window. If the graphic was saved from Adobe Illustrator CS4 with the Use Artboards feature, you will not be able to view the source code for individual FXD files.
  
  
• You can view the source code for the graphic in the Source Editor. If the graphic was saved from Adobe Illustrator CS4 with the Use Artboards feature, you can view the description of the graphic in each individual FXD file by selecting a choice from the Scene list in the Source toolbar.
  
  

  Figure 2: NetBeans Source Editor Displaying FXD Data

• You can preview the graphic. If the graphic was saved from Adobe Illustrator CS4 with the Use Artboards feature, you can preview each artboard separately.
  
  

  Figure 3: NetBeans Preview of a JavaFX Graphic

• You can change the magnification of the graphic by clicking icons in the Preview toolbar.
  
  

  Figure 4: Preview Magnification Tools in NetBeans Toolbar

• If you double-click individual graphic objects, the NetBeans Source Editor will switch to Source view to display the source code for that object.
  
  

  Figure 5: Source Code for a Graphic Object

  Note: If your graphic includes individual artboards, ensure that you have selected the correct artboard so that you can select the graphic objects in the Preview window.
  
  

  Figure 6: NetBeans FXD File Selection List in the Source Editor Toolbar for Graphics Preview Mode

• After you select an object in the preview, you can move to another element by clicking the available arrow in the Preview toolbar. You can move to the previous element selected, the next element selected, or the parent element.
  
  

  Figure 7: Selection Arrows in NetBeans Toolbar

• You can change options when selecting graphic objects by toggling the tooltip and highlighting icons in the Preview toolbar.
  
  

  Figure 8: Toggle Tooltips and Highlighting of Object Selection

• The Navigator window displays a hierarchy of the object instances and their variables in the code for the selected FXD file:
  
  

  Figure 9: NetBeans Navigator Window

Generate 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 extends the UiStub class and 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 mediaplayer.fxz, the stub file is named mediaplayerUI.fx. The class that is generated also has the name mediaplayerUI.

A UI stub file does not need to be generated to use an FXZ graphic in a JavaFX application. For an example of an application that does not use a UI stub file, see the 15 Puzzle sample in the /Samples folder in the JavaFX Production Suite installation directory.

To generate a UI stub file:

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.

Related Links

• What Do I Need to Know About JavaFX Graphics Format?