JavaFX Production Suite is a set of tools that helps visual designers work more efficiently with developers to incorporate rich graphic assets into JavaFX applications. This tutorial shows designers how to convert export graphics from Adobe Illustrator or Adobe Photoshop, how to convert graphics from SVG format, and how to view exported JavaFX graphics, while demonstrating the designer-developer workflow.

The following applet is based on the popular 15 puzzle. You can play the game by clicking tiles to move them into the empty spaces. The application is based on a single image that was converted to JavaFX format using JavaFX Production Suite.

JavaFX Production Suite enables designers and developers to collaborate more efficiently to use visually rich graphics in JavaFX applications by offering the following advantages:

• Designers can convert a single image that developers can break down into individual graphic objects. This means that designers do not need to spend time saving each graphic object as a separate asset.
  
  
• Designers can assign a jfx prefix to object names that are of interest to developers. This enables developers to load the image and more easily write code for the objects that they intend to manipulate programmatically.
  
  
• As long as the names of the objects remain the same, designers can change the visual look of their images and even the placement of the objects without affecting the application code.

JavaFX Production Suite contains the following tools:

• Plugins for Adobe Illustrator and Adobe Photoshop to assist in converting graphics to JavaFX format.
• An SVG conversion tool, to convert graphics from SVG to JavaFX format
• JavaFX Viewer, which displays graphics that have been converted to JavaFX format

The Designer-Developer Workflow

Here's a hypothetical story about how the 15 puzzle application was developed.

The designer and developer met to discuss the requirements of the application. The designer drew a quick mockup of the image in Adobe Illustrator, shown in Figure 1, and converted it to JavaFX format for the developer to try out.

Figure 1: 15-Puzzle Mockup in Adobe Illustrator

The developer liked the mockup. She wanted to move individual number tiles and wanted to display the Congratulations banner at the end of the game, so the designer assigned a jfx prefix to all of the tiles and the banner, as shown in Figure 2. When the graphic was converted to JavaFX format again, the objects with jfx prefixes were assigned ID values that were based on the layer or group name.

Figure 2: 15-Puzzle Rough Drawing in Adobe Illustrator

The developer used this mockup image to create a prototype JavaFX application, while the developer created a more sophisticated image in Adobe Illustrator, keeping the jfx: object names consistent, as shown in Figure 3.

Figure 3: 15-Puzzle Artwork in Adobe Illustrator

The designer converted the new Illustrator image to JavaFX format, and the developer dropped the new image into the application, which ran with no change to the code. When the application was reviewed, the team decided to change the color to brown, make the frame appear to be made of wood, and make the image slightly smaller. The designer switched to Adobe Photoshop and produced the design shown in Figure 4, once again keeping the jfx-prefixed object names the same.

Figure 4: 15-Puzzle Artwork in Adobe Photoshop

The developer once again dropped the converted JavaFX graphic into the application, which ran without needing any code changes.

Tutorial 1: Convert an Adobe Illustrator File to JavaFX Format

1. Open fifteen.ai in Adobe Illustrator.
   Note that the graphic objects with a jfx: prefix are ones that are assigned an ID value in the JavaFX graphic, so that developers can work with them programmatically.
   
   
2. Select File > Save for JavaFX.
   The JavaFX Export window opens.
   
   
3. Click Preview to display the JavaFX graphic, as shown in Figure 5. The View options toolbar at the top of the window enable you to move and resize the image view. These changes do not affect how the image is saved.

   Figure 5: Adobe Illustrator JavaFX Export Dialog Box

4. Click Save and choose a location for the JavaFX graphic.
   The file is saved with an FXZ extension.

Tutorial 2: Convert an Adobe Photoshop File to JavaFX Format

1. Open fifteen.psd in Adobe Photoshop.
   
   
2. Select File > Automate > Save for JavaFX.
   The JavaFX Export window opens.
   
   
3. Click Preview to display the JavaFX graphic, as shown in Figure 6. The View options toolbar at the top of the window enable you to move and resize the image view. These changes do not affect how the image is saved.
   

   Figure 6: Adobe Photoshop JavaFX Export Dialog Box

4. Select Export Effects from the Save options to the right of the preview pane.
   This choice saves effects such as gradients and drop shadows.
   
   
5. Click Save and choose a location for the JavaFX graphic.
   The file is saved with an FXZ extension.

View the Exported File in JavaFX Viewer

Open the JavaFX graphics file in JavaFX Viewer by double-clicking the FXZ file. The viewer displays the JavaFX graphic, as shown in Figure 7.

Figure 7: JavaFX Viewer Displaying fifteen.fxz

View Options

In JavaFX Viewer and the JavaFX Export window, you have access to a toolbar with View options, shown in Figure 8 and described below.

Figure 8: JavaFX View Options

• Pan: Changes the cursor to a hand so you can move the image around inside the preview window.
  
  
• Zoom In: Enlarges the preview image. Click the button, then click the image to enlarge.
  
  
• Zoom out: Makes the preview image smaller. Click the button, then click the image to decrease size.
  
  
• Fit Window: Sizes the preview image to fit the preview window.
  
  
• Reset: Sizes the image to actual size.

Save Options During Export

When you convert graphics from Adobe Illustrator or Photoshop, you have several Save options.

Adobe Illustrator Save Options

Figure 9: Save Options for Adobe Illustrator Conversion

• Preserve "JFX:" IDs only: Selecting this option assigns an ID only to graphic objects whose names in Illustrator have a jfx: prefix. Clearing this option assigns an ID to every graphic object that is converted to an element. For more information, see the topic on naming conventions in the related links.
  
  
• Use Artboards: If you select this option, a master FXD content file is created, with separate FXD sub-files for each artboard. This option enables developers more freedom to work with the objects in a single artboard. The FXD sub-files can be viewed individually in JavaFX Viewer and the NetBeans IDE.
  
  
• Embed Fonts: This option is only enabled when the option is selected to create FXD descriptions of Illustrator text layers. If you select this option, all TrueType, Type1 and Open Type fonts used in the converted artwork are stored as TrueType (TTF) font files. The font files for system fonts (Arial, SansSerif and Times Roman) are not embedded, because they should be available on all systems. Embedded font files are included in the JavaFX Content File (FXZ). Mobile applications use a font that is embedded in the mobile SDK, and font information in the graphic are ignored. If the graphic is used in both desktop and mobile applications, checking this box affects only desktop applications. If the graphic is used only in mobile applications, checking this box has no effect.
  
  
• Drop all effects/Drop unknown effects/Rasterize unknown effects/Rasterize all effects. You must select one of these options. Make your decision according to the following table and the considerations listed below.
  
  

  Save Option	Description
  Drop all effects	All effects are ignored.
  Drop unknown effects (default)	All effects that cannot be converted to FXD descriptions are ignored. Gradients are considered an effect. For a list of effects that can be converted to FXD descriptions, see Supported Features for Conversion From Adobe Illustrator to JavaFX.
  Rasterize unknown effects	All effects that cannot be converted to FXD descriptions are rasterized. A PNG file is created for each unknown effect and added to the JavaFX Content File (FXZ).
  Rasterize all effects	All effects are rasterized into individual PNG files.

There are several considerations that affect how you choose to save effects:

• Rasterized effects (stored as PNG files) provide the best copy of the original and are much faster to render than effects described in FXD.
  
  
• Rasterized effects cannot be used dynamically in a JavaFX application, because they cannot change. For example, if graphic text for "nice" has a rasterized drop shadow, and the JavaFX application changes the text value to "ugly," the rasterized drop shadow does not change to suit the new word. On the other hand, if the drop shadow is saved as an FXD description, the effects recompute to match the new text value.
  
  
• Since mobile devices do not support dynamic effects (for example, text that changes in the UI when a value is changed in the JavaFX application). If the application is intended only for mobile devices, choosing the option to drop all effects results in a slightly smaller FXZ file. You can preview the file size by selecting Show Preview and choosing various save options then checking the statistics in the lower right corner of the preview window.
  
  
• If the application is being developed for both RIch Internet Applications (RIAs) and mobile devices, you can select any option to save effects, since effects are ignored on the mobile platform.

For a list of features that is supported for conversion from Adobe Illustrator, see Supported Features for Conversion From Adobe Illustrator to JavaFX.

Adobe Photoshop Save Options

You can choose from the following Save options when saving the Photoshop graphic to JavaFX format, as shown in the following image and described below.

Figure 10: Save Options for Adobe Photoshop Conversion

• Preserve "JFX:" IDs only: Selecting this option assigns an ID only to graphic objects whose names in Photoshop have a jfx: prefix. Clearing this option assigns an ID to every graphic object that is converted to an element. For more information, see the topic on naming conventions in the related links.
  
  
• Export Effects: Selecting this option exports Photoshop layer styles attached to a layer, such as Drop Shadow. Gradients are also considered effects. Clearing this option does not export any Photoshop layer effects. Mobile applications do not display JavaFX effects, so it is a good idea to keep this checkbox cleared if the JavaFX application is only deployed as a mobile application.
  
  
• Rasterize Vector Masks: Selecting this option creates a PNG file for each Photoshop vector mask. Clearing this option creates an FXD description of the vector mask.
  
  
• Rasterize Texts: Selecting this option creates a PNG file for each Photoshop text layer. Clearing this option creates a Text element in the FXD description for each Photoshop Text layer. Converting to an FXD description of text enables developers to modify its properties, such as content, size font, color, and placement.
  
  
• Embed Fonts: This option is only enabled when the option is selected to create FXD descriptions of Photoshop text layers. If you select this option, all TrueType, Type1 and Open Type fonts used in the converted artwork are stored as TrueType (TTF) font files. The font files for system fonts (Arial, SansSerif and Times Roman) are not embedded, because they should be available on all systems. Embedded font files are included in the JavaFX Content File (FXZ). Mobile applications use a font that is embedded in the mobile SDK, and font information in the graphic is ignored. If the graphic is used in both desktop and mobile applications, checking this box affects only desktop applications. If the graphic is used only in mobile applications, checking this box has no effect.

For a list of features that is supported for conversion from Adobe Photoshop, see Supported Features for Conversion From Adobe Photoshop to JavaFX.

Production Suite SVG 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 11: JavaFX Production Suite SVG Converter

For a list of features that is supported for conversion from Adobe Illustrator, see Supported Features for Conversion From SVG to JavaFX.

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