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.