FX

Learn how Production Suite facilitates the designer-developer workflow and how developers can integrate graphics exported from Production Suite into their JavaFX applications.

What is JavaFX Production Suite?

JavaFX Production Suite is a separately downloadable part of the JavaFX platform. It contains plugins to convert graphics from Adobe Illustrator and Photoshop to JavaFX format, a converter for SVG graphics, a viewer that displays the exported graphics, samples, and documentation. For a complete description of the JavaFX Production Suite tools and aids, see Installing JavaFX Production Suite. The NetBeans IDE for JavaFX also includes a graphics preview and displays the source description of the exported graphic.

What's the Advantage of Graphics Exported from JavaFX Production Suite?

Using graphics exported from JavaFX Production Suite, developers can manipulate individual objects within the graphic (groups, layers, and some effects) in a JavaFX application. For example, the 15 Puzzle, one of the samples included with JavaFX Production Suite, is based on a single graphic exported from either Adobe Photoshop or Adobe Illustrator. The tiles are moved programmatically, and the Congratulations banner appears on successful completion of the game.

The game is shown in the following screenshot.

How does JavaFX Production Suite Help Me Work with Designers?

Designers and developers collaborate to create an application, as shown in Figure 1. The designers are focused on creating beautiful and effective user experiences, while the developer is focused on making the application function. Because an RIA application's success hinges on its functional abilities and its aesthetic appeal, there is an intense collaboration between the designer and the developer.

Figure 1: Collaborative Context for Applications with Rich Graphic Assets

JavaFX Production Suite was designed from the ground up to support this highly iterative workflow in the following ways:

• It enables designers to work with their tools of choice to create compelling visuals.
• It simplifies the process of importing graphic objects.
• It enables developers to manipulate individual graphic objects within a visual asset.
• It enables developers to drop in new versions of visual assets with no change to the code.

Because the JavaFX environment creates a separation between graphic assets and business logic, designers can modify their designs frequently, and as long as the agreed-upon graphic object names do not change, modified graphics can be dropped into the JavaFX application with no change to the business logic. Graphic objects can even be moved to a new position in the graphic without affecting the business logic. For example, the Media Player sample in the JavaFX Production Suite installation contains original Adobe Illustrator artwork for two graphic skins, which can be switched in the application by substituting the new file name in one line of code. The two skins are shown in Figure 2. Note that no change to the code is required to accommodate the new location of the buttons.

Figure 2: Two Skins for the Media Player Sample in JavaFX Production Suite

For a more detailed description of the iterative workflow between designers and developers, see the topic JavaFX Application Development Workflow.

What Do I Need to Know About JavaFX Graphics Format?

When a graphic is converted to JavaFX format, a compressed file is produced with an FXZ extension. This compressed file contains the following files:

• At least one file with an FXD extension. FXD is a textual format and uses a subset of the JavaFX Script object literal syntax.
  
  
• Embedded assets, such as image files or TrueType fonts, depending on the type of export.

For a more detailed description and examples of JavaFX graphics format, see the topic JavaFX Graphics Files (FXZ, FXD).

Why Was a New Graphics Format Necessary?

There are several reasons why it made sense to create a new format. First, FXD descriptions map one-to-one to the FX scene graph APIs. Other formats, such as SVG, would not provide this direct match. For example, not all of the elements in JavaFX are present in SVG (such as advanced filter effects), and not all SVG features can be easily represented in JavaFX (such as defs and the use mechanism).

Second, FXD format was designed to map one-to-one with JavaFX classes and JavaFX Script syntax. This would not be feasible with SVG and other graphics formats, For example, in SVG, group is specified as the 'g' element, and to make a one-to-one mapping work with JavaFX classes, the group class in JavaFX would have to be named 'g' as well.

Third, an existing format would not scale as more advanced features continue to be added to JavaFX. In SVG, the advanced features would have to exist in a different namespace, which would be ignored by tools that work directly with SVG.

How Do I Manipulate Graphic Objects?

Names of graphic objects are converted to ID values in the JavaFX graphic. If these graphic object names remain the same during the design process, developers can build their applications based on rough sketches with these ID values, while designers work on the final graphics. Graphic objects without IDs can still be accessed by scanning in the individual items in each group as a sequence in the application.

For example, Figure 3 shows the Adobe Photoshop graphic that is included with the 15-Puzzle sample.

Figure 3: Adobe Photoshop Artwork Included with the 15-Puzzle Sample

Each graphic object that is prefixed with jfx: will be assigned an ID value when the graphic is converted to JavaFX format. Although it is possible to assign an ID value to every object in the graphic, it makes more sense to limit ID values to those that developers need to manipulate programmatically.

Using the NetBeans IDE for JavaFX, you can generate a UI stub for the objects with IDs in a JavaFX graphic. The UI stub file contains a custom class with an instance variable for each ID value in the JavaFX graphic, with get and set methods. Generating a UI stub file is convenient in some cases but not necessary. Instead of generating a UI stub file to load the graphic objects, developers can use the FXDLoader.loadContent function to load the graphic objects, as demonstrated in the 15-Puzzle sample. For information about how to create a UI stub file, see the topic Generate a UI Stub File for a JavaFX Graphic in the NetBeans IDE.

In the JavaFX SDK, the javafx.fxd package contains classes that handle loading the content, setting up a bridge between the graphic objects and the application code, extracting the topmost node to insert it into a scene graph, and duplicating graphic nodes.

How Can I View JavaFX Graphics and Their Descriptions?

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.