Start your engines

My name is Josh Marinacci and I'm excited about JavaFX because I love GUIs. I love graphics, animation, video, audio, and anything else that creates a richer user experience. Ever since I wrote my first fractal on a black and white Timex Sinclair (taking 2 hours to render a single 20x40 1bit image), I've been a GUI guy. I'm addicted and there is no cure.

So why am I excited about JavaFX? Because it gives us the freedom to create beautiful and responsive interfaces like never before. This isn't to say you can't do it in plain Java. If you've been to any of the last 4 JavaOne's then you've seen great interfaces we've built. But these demos were a ton of work, and after we finished we knew there had to be a better way to build awesome interfaces. And now, with the first public release of the JavaFX SDK, we can. Vector graphics, shaped windows, and keyframe animation are super easy. We get the same user experience on all platforms, with the same APIs coming on mobile in the near future. And best of all, we don't have to give up our Java code. Any Java class or API can be used directly from JavaFX Script. This lets us leverage the huge ecosystem of existing Java libraries out there.

Of course, being a GUI guy, I can't finish this post without showing some pretty pictures. One thing I love about JavaFX is that it shrinks your code. Well, perhaps it doesn't actually shrink your code like a ray gun from some mid-50s scifi movie, but it does let you write less code. JavaFX Script is optimized for graphical user interfaces, so things which are common in GUIs are very easy to do and require little code. Things like drawing and animation. For example, below is a simple app which draws a bunch of shaded spinning squares outside of a window. It grows and shrinks every two seconds, then quits when you click on it (if you can catch it).


The code is 45 lines long, or about 30 if you don't count the imports and whitespace. This would have taken two to three times as many lines if written in Java. The core is a sequence of rectangles, each with a transform bound to the central angle variable. A timeline changes the angle over time, which automatically updates the squares and repaints the screen. Setting the Frame's style to TRANSPARENT turns off the background, creating a shaped window. It's a complex animation made easy. That's the value of having a programming language and runtime optimized for GUIs.

package blogdemo;  import javafx.scene.*; import javafx.scene.paint.*; import javafx.scene.geometry.*; import javafx.application.*; import javafx.scene.transform.*; import javafx.input.*; import javafx.animation.*; import java.lang.System;  var angle = 0.0;  Frame {     windowStyle: WindowStyle.TRANSPARENT  visible: true     width: 400 height: 400     stage: Stage {         fill: null         content: Group {             translateX: 100 translateY: 100             content: for(i in [0..10]) {                 // here is the magic with binding                 Rectangle {                     fill: Color.rgb(25*i,0,0, i/10.0)                     width: 100 height: 100 arcHeight: 10 arcWidth: 10                     stroke: Color.BLACK strokeWidth: 5                     transform: bind [                         Transform.rotate(-i*36+angle/2,50,50),                         Transform.translate(angle/4,0),                     ]                 }             }             onMousePressed: function(e:MouseEvent):Void { System.exit(0); }         }     } }  var anim = Timeline { keyFrames: [         KeyFrame { time: 0s values: angle => -360 tween Interpolator.EASEBOTH },         KeyFrame { time: 2s values: angle => 360 tween Interpolator.EASEBOTH },     ]     autoReverse: true     repeatCount: Timeline.INDEFINITE }; anim.start(); 

Now try the app yourself with JavaWebStart. Note, Java 1.6 is required.

Over the next few months you're going to see more blogs from me and other JavaFX developers, showing off tricks and waxing philosophic about graphical interfaces. And don't just think it's all eye candy. We've got lots of nutritional value here too. This is just the beginning of a great new platform for rich applications.

Gentlemen (and ladies).. start your engines.

Be the first to comment

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