JavaFX – Hands On

The JavaFX 1.0 release was launched in December 2008 after
years of development. So what is it? Sun markets JavaFX as a
Rich Internet Application (RIA) platform and a tools suite aimed
both for developers and UI designers. In this sense JavaFX can be
compared with Adobe Flash and Microsoft Silverlight.

With JavaFX a new programming language called JavaFX Script
was introduced. In this article we’ll take a closer look at this new
language.

JavaFX will be able to run on PCs, mobile devices and TV screens. Things have
been moving pretty fast with JavaFX 1.1 released just two months after 1.0
and in early June 2009 a 1.2 version was released. The modifications have been
substantial affecting both the API and the language syntax. It seems that Sun is
using the opportunity to fix early mistakes in JavaFX before it is stabilized. This
seems like a very good idea to avoid mistakes like those that will forever haunt
standard Java.

HelloWorld

Let’s start with the traditional HelloWorld example. As you may have guessed
JavaFX Script is very closely related to Java. In fact JavaFX scripts are compiled
into standard Java .class files by the java fx compiler. A major advantage of this
approach is that the JVM, which is available for many platforms, can be used.
Now let’s see some code. Create a new file called helloworld.fx with following
contents:

Compile the file with the javafxc compiler

The javafxc compiler have created a standard java class file:

Now what happens if we try to run the program with java?

That’s not quite the intended result… To run a JavaFX script the javafx tool is used. It is a java launcher that configures the runtime environment so that the classes used by JavaFX are included:

This time the output shouldn’t surprise anyone:

A Closer Look

In the simple hello world example we didn’t declare a class or a main function.
A JavaFX script can contain any number of classes or loose statements. JavaFX
script is a statically typed language just like the Java language.

Variables

A variable is declared with the var keyword and can optionally specify a type.
Unlike Java all types (even primitives) are backed by classes so you can call
methods on them.

Classes

Classes in JavaFX differs from Java class. Lets have a look at simple example.

You may have noticed that the the Person class didn’t have a constructor. Objects
in JavaFX are created with the initialization arguments named. Also note that
the keyword new is missing:

Sequences

Sequences is a kind of Java arrays on steroids. They are used in many places in
the language and can contain zero or more elements of a type.

Duration

The Duration type is very handy for calculations regarding time:

Function Types

Functions are first class objects in JavaFX. In the example below the
timesNWithBonus function returns another function that has access to the
argument n and the variable bonus. The variable timesTenWithBonus holds a
reference to the returned function and the reference is later used to invoke the
function and print the result.

Binding

Binding makes it possible connect or bind a variable value to some some
expression.

Calling Home

It’s easy to use Java objects from JavaFX. In this example we use the java.util.
Random class but the syntax would be the same if you were to use your own
existing Java libraries.

As shown in the last line you can use braces in a string to evaluate an expression.

Graphics in JavaFX

One of the main goals with JavaFX is to make it easy to create an application’s
UI. To accomplish this goal a declarative approach is used. This has the benefit
that the structure of JavaFX script code can be kept similar to what is actually
drawn on the screen. To give an idea of how this works we will walk through the
creation of a simple application showing a circle and a text.

Preparing the Stage

The application window is referred to as a stage. To open a window you simply
state that there should be one and it will be opened for you when the application
starts. The following code opens a window with …well really nothing inside:

As you can see in the code a scene is declared inside the stage. The scene is the
area that you can draw on inside the application window. JavaFX will draw all
graphical objects placed inside a scene; however the example’s content is empty
so the result is a black background.

Making a Scene

To make the application more interesting we add a circle and some text to the
scene. This is done by simply adding them to the scene’s content variable:

The Text and Circle classes inherit from the Node class which contains basic graphical stuff like positioning, scaling and rotating. Graphical objects are
organized in a tree structure of Node objects called a scene graph in which the
scene is the root. Now that we have both a circle and a text, what more could
you possibly want?

Effects

If you have used image effects in Java you know that quite a lot of code is
required to achieve effects like reflections. In JavaFX this has been addressed by
image filters providing effects like blur, shadow lighting and glow. In our example
we want the circle and text to have a reflection. To treat multiple nodes as one
when applying an effect a Group is needed. A Group has a content attribute
in which you place the nodes that should be treated together, so the circle and
text is moved inside it. Following the content we declare that a reflection effect
should be applied on it:

Animations Step One – Binding Variables

Combining the declarative UI and data binding is very useful for creating
animations. In this example we want to modify the circle’s color and radius so
therefore declare two variables:

To bind the circle’s color and radius to the new variables it is modified to use
the bind expression:

Let’s also modify the text to show the circle’s radius and align its y-position with
the circle:

When the variables circleRadius or fancyColor change JavaFX will automatically
redraw the circle using the new values.

Animations Step Two – Let’s Get Moving

Animations are controlled by a Timeline which can be started and stopped. The
time line contains a sequence of key frames, but lets start with an empty time
line:

A key frame contains information about what the scene should look like at a
specific point in time, typically the end and beginning of the animation. First we
add the animation’s start to the keyFrames sequence:

The syntax used for the values sequence may look strange but is easy to read
when you get used to it:

To make an animation look smooth acceleration and deceleration is used to
prevent changes from appearing jerky. JavaFX provides built in support for this
using Interpolator.EASEBOTH. In a similar way we define what the color and
radius values should be at 5 seconds:

The application is now complete with an animated circle and radius readout.
The images below show the shrinking circle, but don’t worry it comes back
again ;).

Radius

Example Code

The complete example code (excluding import statements) is shown below to
give a better overview:

Conclusion

First of all JavaFX is fun to play with! We really think you should download it
and try it out to see for yourself. The new syntax does take some time to get used
to but the Netbeans IDE gives good support to get started.

You can tell that JavaFX is still an early version, the documentation isn’t complete
and the tools for designers do not yet match competing tools like Adobe Flash.
Sun is currently addressing these shortcomings and when JavaFX reaches a more
mature level it may well become the default choice for creating rich Internet
applications that it strives to be.

Per Böckman
Mattias Lindskog

References

Originally published in JayView.

This Post Has One Comment

  1. At least some bloggers can still write. My thanks for this piece of writing..

Leave a Reply

Close Menu