Inkscape and JavaFX - Almost there

I was recently on a panel at JavaONE and a developer ask about support for open source tools and JavaFX. He was interested in exporting JavaFX content from Inkscape and possibly GIMP. Of course this is a perfectly reasonable idea. At the time, no one on the panel had a good answer for him. I did a little looking after the conference and found that Inkscape allows content to be saved in a format that JavaFX can work with, but with a number of limitations. Here are the details:

Requirements
I am on a Mac, so the instructions are Mac specific, but the basics steps should help anyone interested.

1) Install Macports
While Inkscape has an OS X installer, we require the devel version of inkscape and macports makes it easy to install the devel version. Here is a link for macports.

2) Install Inkspace
Open up a terminal and install Inkscape with macports.
sudo /opt/local/bin/port install inkscape-devel

(My installation of macports is at /opt/local/bin, yours might be different)

3) Launch Inkscape
On my machine Inkscape can be launched from the terminal by typing:
/opt/local/bin/inkscape

4) Install Netbeans
In case you are not set up for JavaFX develoment you can download and install Netbeans with the JavaFX pluging here.

Creating Content
Once Inkscape is open draw some basics shapes. The following screen shot shows some sample content which uses a few different types of objects and gradients.



Go ahead and save the content in Inkscape's flavor of SVG. Inkscape crashed a few times on me, so it is a good idea to save your work in format Inkscape is going to be happy with. Also save a copy of your content as a *.fx file. This file contains a javafx class which can be used in your JavaFX application. Here is a screen shot of my content.fx file open in Netbeans.
Look at all the errors!
[Update: Check the comments for an update on the status of the exported JavaFX code]

It seems that Inkscape is exporting a version of JavaFX which is no longer supported. It looks like some pre 1.0 version to me. Anyway, here are some basic tips to get the class to compile against JavaFX 1.2:

1. Remove all bad import statements.
2. Add the import statement 'import javafx.scene.shape.*;'
3. Rename your class to start with a capital letter and make sure it is in the package you want it in.
4. Remove the keyword 'private' from any method that uses it.
   
5. change CurveTo to CubicCurveTo.
6. Remove the Frame at the end of the file.
7. Add the keyword 'override' to the function create().
8. Change the property 'transform' to 'transforms' for the class Group.
   

Once the class compiles create a script to display the content, mine looks like this:
Stage {
title: "Application title"
width: 640
height: 480
scene: Scene{ content: [Content{}] }
}
And here is a screen shot:


That's not even close!

Looks like a number of features are yet to be implemented, the stroke paint was not honored, the radial gradient is missing and the stokeWidth did not get set.

But in all honesty, this is a really good start, and it is excellent to see JavaFX included in Inkscape at all. If there are any developers who are familiar with JavaFX and the Inkscape code base, this would be a really nice feature have improved.

Space Attack!!

I have released my first iPhone game recently, called Space Attack!! Please check it out.

Developing this game in my spare time took me about two months longer then I expected. Between Xcode, Objective-C, OpenGL I had a lot to learn and there is almost no example code online. That is starting to change now as more and more iPhone developers are free to talk about their work. This is pretty exciting, working with Apple's development tools is painful, but you get the feeling there are some really powerful tools that you are missing.

Core Animation is one of those tools I missed on the first game. I have started working on a second (and third, fourth...) game and have decided to use Core Animation for it. It is for a lot more then just animation, it should be thought of as a scene graph API, where you assemble a hierarchy of objects and then Core Animation renders them to the screen. By adding CAAnimations to objects, the scene is animated. This is excellent.

After my 3 frantic weeks working on a JavaFX project for the release, I starting thinking in the JavaFX way, and I think is has spoiled me. Things are so easy in JX and are so hard in other languages/APIs. Core Animation is part of the way there, thankfully, but I really wish I could bind things. that would be excellent.

JavaFX and Adobe Illustrator

JavaFX is Sun's attempt at capturing the Rich Internet Application market. Currently the king of the RIA domain is Adobe with it's Flex and AIR products. Adobe is king not because their flash run-time is excellent or because Flex is such an excellent language to work with. It is king because it integrates its creative tools, such as illustrator, into the development process. This integration has made Adobe's products the go-to option for the vast majority of web content developers. Sure there are a few great applets out there, so great, people often assume they are flash applications.

Sun has recently released a preview SDK of JavaFX which includes plugins for a hand full of creative products, including Adobe's Illustrator. The following is a review and critique of how these new tools address the development process.

The required downloads are Netbeans 6.1 with JavaFX and Project Nile. Project Nile is a collection of plugins so designers can export content from their favorite design applications as long as they are either Illustrator or Photoshop.











The installation of both of these components is simple enough and a quick inspection of Illustrator shows that, yes indeed, JafaFX files can be exported.














There seems to be no real guide as to how to set up a JavaFX project for development. Creating a new project in Netbeans sounds like a good place to start, create a project of type JavaFX.












Once a project is created it is worth spending some time to checkout what Netbeans provides. There seems to be a Main class created automatically, there is also the JavaFX Library, please note in the image that the JavaFX SDK is actually running on Java 6, not 1.5, there was some configuration issues leading to this typo.

















Now in Illustrator, create some content. It should be simple to have it displayed in a Java application.

Export the file and save in the same folder as the Main.fx file from the Netbeans project created earlier. Be sure to use Java class capitalization for the file name, as the name of the file you select will be the name of class that is created.













As can be seen a class with the same name is the exported file. The Font used in the content is also exported, which is very handy. The next step is to actually display this content, this is done by editing the Main.fx file to display an instance of this exported class.

Here is the code to actually display the content in a JFrame:

package fxtest;

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.paint.*;

var content:Content;

Frame {
var stageRef:Stage;
visible: true
stage:
stageRef = Stage {
fill: Color.WHITE
content: [
content = new Content()
]
}
}

First is the output from Java and the second is a close up of what is displayed in Illustrator.








There are some obvious fidelity issues, the blacks are not exactly the same, and worse yet, the text layout is messed up in the Java version.

There are also some issue where not all content in Illustrator is exported, try using the "symbol spray" tool to add some tasteful blue birds and export it again. Rerun the Java application and notice there are no birds displayed. Also, notice that the export dialog did not remember which directory you last exported in, this is super annoying.


Pros
It is excellent to be able to produce content in Illustrator, it would simply take forever to create even the simplest content if this has to be done by witting code.

Netbeans is an excellent IDE and a pleasure to work with.

Cons
The development cycle is not well thought out. With Flex, the designers and the coders work from the same source code. This makes things like version control a snap. Flex also allows coders and designer to work with the same tool, enabled by eclipse. It is not clear how an iterative development process will deal with the current system.

The fidelity of the export, coupled with some content not being exported at all, is worrisome. It will be difficult for the designers to produce good content when they can not trust the WYSIWYG tool they are using.


Conclusion
A good start, this is a preview release after all. The cons listed above simply have to be addressed, especially if one accepts the premise that Adobe's RIA technologies are the leaders because of their tool support.