Sunday, 1 November 2009

JavaFX; the empire really strikes back?

Year 1996 was the introduction of Java Applets with a dancing duke animation which was something quite unusual for web pages of that time. Very soon many web sites had applets running in them, for menu interactions, forms, animations and much more.. and not very soon after those websites stop using applets because of version and jre plugin problems.

In 2006 I attented an Adobe meeting where I had seen Flex2 beta. The introduction was quite simple Adobe was saying we have Flash player in 98% of the clients which is all you need to run Flex applications. However (as a developer loyal to Java), I was thinking at least that many of the clients should also have JRE on their computers but the reality was different, applets had problems with versioning, plugin upgrade and plugin installiation. Even though Java started the revoluion of Rich Internet Applications, it has been left out of the play.

JavaFX is out to change that, it was first announced under the name F3 and very soon to support it, consumer JRE was announced. JRE was too big to download and to hard to upgrade for an end user which was a main reason for applets to fail. With the new JRE update, Sun let the end users to upgrade and install the JRE in a painless way.

So, what is JavaFX? JavaFX is an expressive scripting language built on Java Runtime. If you are familiar with competitive platforms such as Flex and Silverlight, JavaFX differs in the decleration syntax where others use XML based declerations, JavaFX follows a more CSS style.

With update 1.1 JavaFX also has built in mobile support which is a good plus compared to others. A JavaFX application runs on mobile platforms with the same set of components as long as you don't use wrapped swing components which is a great plus when compared to Flex which has totaly new and different components for mobile development.

If you are new to JavaFX development JavaFX site is a nice one stop source, actually other links you will come up with may contain deprecated packages and class (such as i did before). Also you may prefer to watch a screencast i published long before.

IDE support for JavaFX is still in progress, Currently Netbeans is the best supported and uptodate IDE for JavaFX, however, Eclipse has also became quite stable and usable. On eclipse there are two alternatives, official Sun version of the eclipse plugin can be downloaded from here , also Exadel has a very promising JavaFX plugin for eclipse. Also if you intend to code animations there is a suprisingly successful visual tool to generate JavaFX code just like using Flash CS which can be used as a webstart application. So enough about IDEs lets deep dive into coding...

JavaFX brings a similar approach to Flash-Flex couple with one major difference. Since there is no GUI and design tool like Flash, you have the control of the Flash counterpart of Stage and Timeline directly in the code.

If you create a new JavaFX application in Netbeans or Eclipse, it will create something like the following class;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

Stage {
title: "Application title"
width: 250
height: 80
scene: Scene {
content: [
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
]
}
}


Stage is your main window where you can declare your properies in CSS like style, the scene property of the stage has Scene object which holds an array of visual contents. The output should be something similar to this;

Picture 1

Suprisingly to run the same application on mobile does not need any further steps than choosing the mobile profile to run;

Picture 2

By deafult JavaFX applications would run on mobile as long as you prefer JavaFX visual components instead of wrapped Swing components.

To animate the text we previously add, drag n drop a timeline after the stage.

Picture 3

The Timeline should not be in the Stage since its not a visual component. Timeline controls the behaviours of the visual components according to time. Timeline's each KeyFrame has a values property where you can declare the changes you want to see on your pomponents properties. The text field we had declared does not have an instance id (since it was created inline). So lets add tweak our code and take the text components decleration out of the stage.


var text=Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
Stage {
title: "Application title"
width: 300
height: 200
scene: Scene {
content: [
text
]
}
}


By declaring our text property out of the stage, now we have class wide access by instance name. Developers of Flex and Silverlight must have noticed the syntax and approach differences so far. JavaFX syntax targets components and transitions to be handled decleratively since JavaFX mostly targets coders and it does not have a GUI tool like Flash CS. However the result is a platform where you can create transtions and animations easily by decleration.

Lets continue to add more KeyFrames and animate our Text. Just like adding the timeline you can drag and drop KeyFrames in the TimeLine. However its not much diffrent than typing since there is code assist both in eclipse and netbeans. Change the first Keyframe's time to 0 and initial values as translate values. Next add another KeyFrame with time value of 5s and add new translate and scale values. Translate values will be used to move the text object on x and y axis with the value given, where the scale values scale the component with the multiplier of the given value (2 in this case). Notice TimeLine has '.play()' call which starts the animation.


Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
time : 0s
values: [text.translateX =>10,
text.translateY =>30]
}
KeyFrame {
time : 5s
values: [text.translateX =>15,
text.translateY =>60,
text.scaleX =>2,
text.scaleY =>2]
}
]
}.play();


Finally run the JavaFX application and watch your text enlarging while moving. This transitions can be applied to any property of an object. JavaFX also has predefined animations like ScaleTransition, RotateTransition, FadeTransition... etc.

Transitions can be used to create timeline animation on desired effects. Also multiple transactions can be run parallel or sequentially. To add a FadeTransaction on our text component;


FadeTransition{
node: text
duration: 5s
fromValue: 1
toValue: 0.3
repeatCount: Timeline.INDEFINITE
autoReverse:true
}.play();


Run the application and add more keyframes or tweak the values. Animations and transitions is a powerful feature of JavaFX which has out of box compability with mobile applications.