Pleasing Software: 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:

      [](http://pleasingsoftware.blogspot.com/2009/08/org.jdesktop.applet.util.JNLPAppletLauncher)[](http://pleasingsoftware.blogspot.com/2009/08/org.jdesktop.applet.util.JNLPAppletLauncher)

Some points of comparison:

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.

via pleasingsoftware.blogspot.com



Share on Hacker News
Share on LinkedIn


← Home


Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.

* indicates required

Please select all the ways you would like to hear from Krzysztof Kula:

You can unsubscribe at any time by clicking the link in the footer of my emails.

I use Mailchimp as a marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.