From Adobe FXG to Java Swing (Part 1)

Let's start here:

<?xml version="1.0" encoding="utf-8" ?>
<Graphic version="2.0" viewHeight="792" viewWidth="612" ai:appVersion="" ATE:version="1.0.0" flm:version="1.0.0" d:using="" xmlns="" xmlns:ATE="" xmlns:ai="" xmlns:d="" xmlns:flm="">
    <Group ai:seqID="1" d:layerType="page" d:pageHeight="792" d:pageWidth="612" d:type="layer" d:userLabel="Artboard 1">
        <Group ai:seqID="2" d:type="layer" d:userLabel="Layer 3">
            <Ellipse width="100" height="100" ai:seqID="3">
                    <SolidColor color="#FF0000"/>

Thanks to random blog found via Google, above you see an FXG file, i.e., output from Adobe products. And the previous sentence is absolutely everything I know about FXG.

Now I install a new plugin, which I created today after meeting Gerrit Grunwald, into NetBeans IDE, integrating Gerrit's FXG Converter:

In the above space, I drag the FXG file defined at the start of this blog entry, i.e., I drag and drop it from outside the IDE. Now I see a preview, i.e., a small red circle:

Instead of "export file", I choose to view a preview and I select "Java2D" in the list of radio buttons above. Then I click "Convert" and then I see this, i.e., Gerrit's "Code Frame", which I'll replace later with the NetBeans Java Editor:

Next, I tweak the generated Java code slightly, since there's one or two places where things have not been generated correctly. Then I drop the newly created Java class ("", since my original file was named "Star.fxg") into a NetBeans project and I can immediately drag it, from the Projects window, into a JFrame in the Matisse GUI Builder:

I.e., what this means is that I have gone directly from Adobe to Java Swing and, as you can see from the screenshots above, I could also be converting to Android, among others.

Cool, for development. But I'm setting my target a step further: production! Just think about it. A designer uses Adobe products to design a window (i.e., not a single JComponent, but an entire TopComponent, i.e., a NetBeans Platform window). There'd need to be a bit of metadata included, e.g., what should be in the Lookup, for example? Then an FXG file is generated and dropped into the running application, where the sources of a  NetBeans module are generated in a temp file, turned into an NBM file (only downside is the end user would need the JDK and Ant locally, which would not always be the case), after which the NBM would be installed directly into the application. In other words, turning an Adobe image into a TopComponent at runtime!

You laugh now, but just you wait and see.

In other news. The converter above, by Gerrit Grunwald, will be shown at JavaOne in a technical session. Gerrit's session title is "Custom Swing Components the Easy Way", on Wednesday, 01:00 PM, Hotel Nikko, with this abstract: "Even in the era of rich internet applications, JavaFX, Flash, and Silverlight, Java Swing still has its place. The powerful Java 2D API makes it possible to create good-looking components, and with the right tools, it's possible to convert drawings from design software such as Adobe Illustrator or Adobe Fireworks into Java 2D code. This presentation shows a possible workflow for creating custom Java Swing components by converting Adobe FXG files into Java 2D code. As an example, it shows the creation of components from the open source SteelSeries Java Swing library."


That's pretty amazing actually. You might have to share or point us to instructions on how to create a plugin like this. I'm really impressed with NetBeans ability to pull in these type of external file types.

Posted by John O'Conner on September 17, 2011 at 07:20 PM PDT #

I am not much in Adobe :(

I am still waiting for the Gradle plugin :)

Posted by Rajmahendra on September 17, 2011 at 07:24 PM PDT #

John, well, the plugin is simply the integration of a tool by Gerrit Grunwald. NetBeans doesn't really come into it. I.e., Gerrit's JFrames are now TopComponents, that's all.

And, Raj, yes, Gradle plugin is still blocked. Cannot continue currently since the Gradle daemon messes up the NetBeans editor.

Posted by Geertjan on September 17, 2011 at 07:45 PM PDT #

Can FXG be used in designing a J2ME user interfaces efficiently. What mobile phone devices is it compatible with.

Posted by guest on September 25, 2011 at 11:59 AM PDT #

This is pretty great for me, I'm a Fireworks user that writes a little java sometimes. Very promising. But, I've installed the NB plugin, and it shows up as installed and active. How do I actually open it up/run it, as in your screen capture. I don't see any reference to it anywhere (except the plugin list).

Posted by guest2 on November 05, 2011 at 03:20 PM PDT #

Did you look at the picture on the plugin page? Take another look.

Posted by Geertjan on November 05, 2011 at 06:43 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« July 2016