X

Geertjan's Blog

  • September 17, 2011

From Adobe FXG to Java Swing (Part 1)

Geertjan Wielenga
Product Manager

Let's start here:

<?xml version="1.0" encoding="utf-8" ?>
<Graphic version="2.0" viewHeight="792" viewWidth="612" ai:appVersion="15.1.0.39" ATE:version="1.0.0" flm:version="1.0.0" d:using="" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008">
    <Library/>
    <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">
                <fill>
                    <SolidColor color="#FF0000"/>
                </fill>
            </Ellipse>
        </Group>
    </Group>
    <Private/>
</Graphic>

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 ("Star.java", 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."

Join the discussion

Comments ( 6 )
  • John O'Conner Sunday, September 18, 2011

    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.


  • Rajmahendra Sunday, September 18, 2011

    I am not much in Adobe :(

    I am still waiting for the Gradle plugin :)


  • Geertjan Sunday, September 18, 2011

    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.


  • guest Sunday, September 25, 2011

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


  • guest2 Saturday, November 5, 2011

    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).

    Thanks!


  • Geertjan Sunday, November 6, 2011

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


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.