Flex 4 vs JavaFX 1.2: Dance Battle

I make it a point to follow Chet Hass on his Codedependent blog. He always has something interesting to say about features in Flex. Even though I rarely use Flex, he often demonstrates interesting animations or visual effects.

His latest post talks about the new transform effects in the upcoming Flex 4. Specifically he uses move (translate), rotate, and scale transforms to manipulate a control and make it twirl gracefully across the screen. Ok, that's a stretch, but I had to work the dance thing in here somewhere. You may want to watch his demonstration video now.

When I saw the MXML code that Chet was using for his demo, I was struck by how similar it is to the way I would accomplish the same thing in JavaFX. Below is Chet's Flex 4 demo code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:d="http://ns.adobe.com/fxg/2008/dt"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Declarations>
        <s:Parallel id="transformer" target="{button}">
            <s:Move xFrom="50" xTo="150" autoCenterTransform="true"/>
            <s:Rotate angleFrom="0" angleTo="360" autoCenterTransform="true"/>
            <s:Scale scaleXFrom="1" scaleXTo="2" autoCenterTransform="true"/>
        </s:Parallel>
    </fx:Declarations>

    <s:Button id="button" x="50" y="100" label="Transform Me"
        click="transformer.play()"/>
</s:Application>

And here is the same thing in JavaFX 1.2 formatted to emphasize the similarity:

import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.animation.transition.*;

var transformer:ParallelTransition;

def button = Button { layoutX: 50, layoutY: 100, text: "Transform Me"
    action: function() { transformer.playFromStart() }
}

transformer = ParallelTransition {
    node: button
    content: [
        RotateTransition { fromAngle: 0, toAngle: 360 }
        TranslateTransition { fromX: 0, toX: 100 }
        ScaleTransition { fromX: 1, toX: 2 }
    ]
}

Scene {
    width: 400
    height: 300
    content: button
}

And here is the JavaFX application:

Some points of comparison:

• MXML and XAML always lose me at xmlns. I'll take import statements any day, although most IDEs will manage XML namespaces and import statements for you. In general I simply prefer writing my declarative code in a programming language rather than a data interchange format - no matter how Flex-ible it is.
• Deployment in a browser: Flex wins. Period. The deployment team at Sun has done a lot of work to narrow this particular gap, but Flash is still everywhere and it just works. I fully expect some significant number of people to have trouble running the applet above. And applets still flicker when the browser scrolls. Not serious, just annoying.
• Flex has a slight edge in brevity, I think. But in return for some extra characters, you get all the benefits of static typing. The JavaFX compiler can catch syntax errors for you and IDEs will flag them immediately without having to run the program first. IDEs can also support much more robust refactoring and code completion (at least in theory, hopefully the Netbeans JavaFX plugin will finally get some more attention soon).
• It seems odd that previous versions of Flex couldn't display text on a rotating control. And even these new transform effects have some gotchas to watch out for; like having to set autoCenterTransform on all the effects since they manipulate the same data under the covers. Not that JavaFX doesn't have some gotchas, but for the most part the foundation is solid. This kind of thing always surprises me when I hear about it. Flex is supposed to be way more mature, after all.
• The JavaFX code above works on mobile devices (like the HTC Touch Diamond shown to the right) as well as on the desktop and in a browser. I'm just saying.

Twirling controls aside, you obviously can't make a definitive comparison of two competing technologies based on such a simple piece of sample code. I found it interesting how similar the code actually was between the two platforms. Hopefully you did too.

Steve at the SDForum

My good friend and co-author Stephen Chin has posted a screencast and slides from a talk he gave recently at the SDForum. Here is the link.

By the way, if you want to reproduce his greeting to the group using MigLayout, the code would look like this:

ResizableScene {
    width: 400
    height: 100
    fill: Color.GRAY
    content: MigLayout {
        constraints: "fill"
        content: [
            ResizableRectangle {
                effect: DropShadow{}
                fill: LinearGradient {
                    stops: [
                        Stop { color: Color.PURPLE }
                        Stop { color: Color.BLACK, offset: 1 }
                    ]
                }
                layoutInfo: nodeConstraints( "pos 20 20 container.x2-20 container.y2-20" )
            }
            Text {
                content: "Welcome SDForum Java SIG"
                font: Font.font( null, FontWeight.BOLD, 18 )
                fill: Color.WHITE
                layoutInfo: nodeConstraints( "center" )
            }
        ]
    }
}

No need for a Deck or a Border, MigLayout is all you need in this case. You can just use absolute positioning to create the 20 pixel border around the purple rectangle. And thanks to the container-relative positioning of MigLayout, the rectangle will resize with the scene just as in Steve's original demo.

Great presentation, Steve!