Getting Started With JavaFX Production Suite

JavaFX Production Suite is a set of tools for designers that facilitates the process of incorporating rich graphic assets into JavaFX applications.

This tutorial shows designers how to export graphics from Adobe Illustrator or Adobe Photoshop, and how to view exported JavaFX graphics. It also provides some useful information about Production Suite.

JavaFX Production Suite enables designers to convert graphics to JavaFX format so that the individual graphic objects can be manipulated by developers in JavaFX applications. For example, the 15 Puzzle, one of the samples included in the JavaFX application, is based on a single graphic, but the objects have been manipulated programmatically so that the user can move them around on the screen. The game is shown in the following screenshot.

The following tutorial uses the artwork from the 15-Puzzle sample to show you how to export JavaFX Graphics from either Adobe Photoshop or Adobe Illustrator and how to view the exported graphic. Following the tutorial, there is more information about JavaFX Production Suite, with tips on how to maximize the efficiency of your interaction with developers.

Tutorial: Export and View Your First JavaFX Graphic

1. Launch Adobe Illustrator or Adobe Photoshop

Open Adobe Illustrator or Adobe Photoshop .

2. Open the 15-Puzzle Sample Graphic

1. Open one of the 15-puzzle sample graphics.
   
   
   • If you are using Adobe Photoshop, open fifteen.psd, shown in Figure 1.
     
     This file is also located in the art/ps directory after you unzip the sample, located in the /Samples/puzzle15 folder of the Production Suite installation.
     
     
   • If you are using Adobe Illustrator, open fifteen.ai, shown in Figure 2.
     
     This file is also located in the art/ai directory after you unzip the sample, located in the /Samples/puzzle15 folder of the Production Suite installation.
   
   
   
2. Make a note of the names of the graphic objects in the graphic, particularly those with a jfx: prefix.
   
   The names of the graphic objects that are prefixed with jfx: are the ones that will be manipulated as objects in the JavaFX application. Note that these graphics objects have the same names in both the Adobe Photoshop and Adobe Illustrator artwork, as shown in Figures 1 and 2 respectively, . Even though the graphics look very different, as long as the graphic object names are the same, the two graphics can be used interchangeably in the application.
   
   

   Figure 1: 15-Puzzle Artwork in Adobe Photoshop

   Figure 2: 15-Puzzle Artwork in Adobe Illustrator

3. Select one of the following two procedures, depending on whether you are using Adobe Photoshop or Adobe Illustrator.

3a. Export from Adobe Photoshop to JavaFX

1. Choose File > Automate > Save for JavaFX.
   
   The Export Options screen opens. This might take some time, depending on the size of the graphic.
   
   

   Figure 3: Adobe Photoshop JavaFX Export Options Dialog Box

2. Select Show Preview.
   
   For more information about the Save and Preview options in this dialog box, see Save and Preview Options During Export.
   
   
3. Click Save, choose a location for the JavaFX graphic, and click Save again.

3b. Export from Adobe Illustrator to JavaFX

1. Choose File > Save for JavaFX.
   
   The Export Options screen opens. This might take some time, depending on the size of the graphic.
   
   

   Figure 4: Adobe Photoshop JavaFX Export Options Dialog Box

2. Select Show Preview.
   
   For more information about the Save and Preview options in this dialog box, see Save and Preview Options During Export.
   
   
3. Click Save, choose a location for the JavaFX graphic, and click Save again.

4. View the Exported File in JavaFX Graphics Viewer

If you accept the default file name, the JavaFX graphic is saved as fifteen.fxz. You can view FXZ files using JavaFX Graphics Viewer, as shown in the following figure:

Figure 5: JavaFX Graphics Viewer

Open fifteen.fxz in JavaFX Graphics Viewer by double-clicking the FXZ file. You can use the toolbar to zoom in, zoom out, fit to screen, or change the magnification. You can also preview the graphic as it will appear in desktop or mobile applications. If you used the artboards feature when exporting from Adobe Illustrator CS4, you can view individual artboards by choosing which FXD file to view.

Save and Preview Options During Export

When you export a graphic from Adobe Photoshop or Illustrator, you have a number of preview and save options:

For more detailed information about the save and preview options, see the Production Suite online help.

Production Suite Workflow Tips

Designers should produce a rough sketch containing at minimum the graphic objects that will be manipulated programmatically. This gives developers something use as a placeholder in their applications while waiting for the final artwork. For example, the 15-Puzzle sample includes an Adobe Illustrator file that contains a rough drawing of the puzzle, as shown in the following figure. Note that the names of the graphic objects that will be used by the developer have already been created in the rough drawing. This early agreement on object names is a critical part of the designer-developer interaction.

Figure 6: 15-Puzzle Rough Drawing in Adobe Illustrator

Designers and developers work closely throughout the project to make sure they agree on what graphic objects will be manipulated in the application and what the names of those graphic objects will be. As the visual design evolves, developers can drop new versions of the artwork into their application. Frequent testing of the graphic is important to maintain an efficient designer-developer workflow.

Because the names of graphic objects are used as ID values in the JavaFX graphic, it is important to following naming conventions. You should also review the list of supported effects and features in Adobe Photoshop or Illustrator. Mobile applications have some additional constraints in terms of what mobile devices will support. For more information about these topics, see the Production Suite online help.

Production Suite SVG Graphics Converter

If you work with SVG format, Production Suite includes an SVG conversion tool, which converts SVG files to JavaFX format. As shown in Figure 7, you enter the path to the source SVG file and the destination path for the JavaFX graphics file. You can choose whether to create JavaFX IDs for all elements, or only those which have a jfx: prefix.

Figure 7: JavaFX Production Suite SVG Convertor

Production Suite Components

Production Suite contains the following tools and aids:

In this tutorial, you used the plugins for Adobe Illustrator and Adobe Photoshop to save JavaFX graphics files, and the JavaFX Graphics Viewer to view the result.The following sections describe the other tools in more detail.

Where to Go Next

Check Out the Production Suite Online Help

The Production Suite online help contains procedures, best practices, and tips for creating effective graphics for JavaFX applications. To access the online help system, go to the /Help folder of the Production Suite installation directory and open index.html.

Check Out Artwork in Other Production Suite Samples