Create Rich Internet Apps With Java Fx

It took almost a year and a half for JavaFX 1.0 to be released ever since Sun
announced their new Rich Internet Apps (RIA) framework, JavaFX, way back in May
'07. It has been available as beta preview before its first release on 4th
Decemeber '08, and we have already done an article on developing apps using
JavaFX Script in Feb 08 issue. With the release of JavaFX 1.0, it's interesting
to see how it will reshape the RIA space. Today, web has evolved into a very
dynamic and high value media. And Sun has always been lamented for not having a
platform that would enable Java developers to create media rich applications,
even though Swing had always been there as a set of GUI components that enabled
creation of a front-end for desktop applications. With JavaFX, developers would
be able to integrate high value media services into their RIAs, be it a browser
based or a desktop application.

JavaFX advantage

The RIA space is already occupied by Adobe's AIR and Microsoft's Silverlight.
AIR enables Flex and DHTML developers to build applications for the desktop,
while Silverlight allows developers to create rich media applications that run
on browsers. Competing with these two in the RIA space, JavaFX framework enables
developers to build rich UIs for their applications. It is meant for creating
and delivering rich Internet experience across various device platforms, be it a
browser, a desktop, a mobile phone or other devices that support Java Runtime.
JavaFX framework does not need any additional plug-in as it is fully integrated
with Java Runtime and therefore a JavaFX application can run on any device that
has the Java Runtime Environment.

JavaFX platform empowers developers to focus on creativity rather than coding.
The platform comprises of JavaFX Script, which is a declarative and statically
typed scripting language. It is implemented in Java and is intended to simplify
the creation of rich user interfaces for Java applications. It uses Java APIs
for 2D and 3D graphics as well as UI controls. As it supports a declarative
syntax, it is somewhat similar to the ones used by Microsoft in XAML and Adobe
in MXML, but it's not XML; it's a complete programming language and not just a
markup tool. With JavaFX Script one can write an entire application. Where
developers had to use Swing to create the interface for the Java applications,
now even designers would be able to build rich UIs for Java applications and
even use the Swing support of the JavaFX platform.

When we last wrote about JavaFX Script, it was still in beta and hadn't
integrated IDE support. Now with the release of JavaFX 1.0, not only is there a
standalone SDK but NetBeans 6.5 IDE with full-fledged support for JavaFX is also
available. With JavaFX 1.0, a mobile emulator in beta preview is also available
which can be used for development of mobile RIAs using JavaFX platform.

Getting started

With this month's PCQLinux DVD we have distributed the NetBeans 6.5 with
JavaFX support and also the standalone SDK of JavaFX 1.0. Once you have
installed the IDE, you can start building applications for JavaFX. In this demo,
we will use animation features of the JavaFX Script.

Start a new project in NetBeans and from the wizard select JavaFX in the
Categories pane, and then JavaFX Script application in the Projects pane, and
click on Next. In the Name and Location window of the wizard, name the Project
as DemoTest and ensure that the option for Create Main file is checked. Once you
clicked on Finish, a project is created and a skeleton of the Main file is also
made. The code included in the default Main.fx includes objects like Stage,
Scene, etc. Stage is the top-level container window for any JavaFX application,
while Scene is the drawing surface for the graphical content of the application.
The Scene instance has a content variable that holds JavaFx graphical elements
and defines the graphical content of the application. We will add ImageView and
Text elements to the content, as shown in the following code snippet:

To add a Timeline object, drag the Timeline element from the Animation section of the Palette and drop it on the code before Stage block.

Stage {

title: "JavaFX Animation Demo"

width: 350,

height: 150

visible: true

scene: Scene{

fill: Color.LIGHTSKYBLUE

content:<

ImageView {

image: Image {

url: "{__DIR__}/2009/images/pcquest_logo.gif"

}

translateX: bind x

translateY: 15

}

Text {

font: Font {

size: 24

}

x: 0,

y: 75

translateX: bind x

translateY: 15

textAlignment: TextAlignment.CENTER

content:"PCQ\nJavaFX Demo"

fill: Color.RED

}

>

}

onClose: function() {

java.lang.System.exit(0);

} }

To add animation, we intend to move the contents from left to right and
then in reverse. The animations occurs along a timeline. To add a Timeline,
expand the animation section in the Palette window and drag the Timeline icon
just above the Stage code block. The Timeline contains key frames, which define
the time at which the animation has to be performed. We will define two
instances of time, one for start of the animation and other for ending it. The
time instance variable defines the elapsed time at which the associated values
will be set within a single cycle of the Timeline object. The code snippet for
the Timline is as follows:

The application output can be seen in desktop mode or as a browser application. Animated elements of the application move from left to right.

Timeline {

keyFrames: <

KeyFrame{

time: 0s

values: x => 0.0

},

KeyFrame{

time: 7s

values: x => 210.0 tween Interpolator.LINEAR

} >

}.play();

Right click on the DemoTest project node and select Run Project. The IDE
will compile the project and prepare files necessary to run the application
using the Desktop execution model. When the project has been compiled
successfully, PCQuest logo and text will traverse left to right and then reverse
on your screen. By right clicking on the project node and selecting Preferences,
you can change the Run mode to Browser mode. The application in has been shown
in the visual in both modes.

So, now you would agree that building animated interfaces becomes easy with
JavaFX and it also allows you to have a Java application with a rich GUI.