Thursday Apr 23, 2009

JavaFX - Animation

JavaFX provides animation support based on Timeline API. Timeline has a set of KeyFrame which get processed based on the time attribute of KeyFrame.

<script src=""></script><script src="/rakeshmenonp/resource/Animation/Animation.js"></script>

For Applet mode, click on above image

For standalone mode

Example, in order to change value of opacity we can create a Timeline as shown below

var timeline:Timeline = Timeline {
    repeatCount: 1
    autoReverse: true
        KeyFrame {
            time: 2s
            values: opacity => 1.0 tween Interpolator.EASEOUT 

Above code will change the value of opacity to 1.0 over a period of 2 seconds using values calculated by specified interpolator. There are many built-in interpolators such as DISCRETE, EASEBOTH, EASEIN, EASEOUT and LINEAR.

This may look a bit complicated for just changing the opacity value. The actual power of Timeline will be visible only when used for complex animations. For simple animations which involve just changing some attributes of Node we can use transition APIs.

javafx.animation.transition package has animation APIs specific to various attributes of Node.

PathTransition is already covered by JavaFX Sample - PathAnimation. Please refer to sample for more information.

FadeTransition can be used as shown below. We associate the node for which the opacity is to be changed to FadeTransition using node attribute. Then we specify the fromValue and toValue for opacity. The animation is started using play method.

var fadeTransition = FadeTransition {
    duration: 2s
    node: node
    fromValue: 1.0
    toValue: 0.1
    repeatCount: 2
    autoReverse: true

RotateTransition is used for rotating a node. The node is associated with RotateTransition and fromAngle and toAngle is specified in degrees.

var rotateTransition = RotateTransition {
    duration: 2s
    node: node
    fromAngle: 0
    toAngle: 360
    repeatCount: 2
    autoReverse: true

ScaleTransition is used for scaling node along x and y axis. The node is associated with ScaleTransition and attributes fromX, toX, fromY, toY specified to indicate the percentage of change - 0.0 to 1.0.

var scaleTransition = ScaleTransition {
    duration: 2s
    node: node
    fromX: 1.0
    toX: 0.5
    fromY: 1.0
    toY: 0.5
    repeatCount: 2
    autoReverse: true

TranslateTransition can be used for moving a node over x and y coordinates. The node is associated with TranslateTransition and range for fromX, fromY, toX and toY attributes are specified so as to move the node from source (fromX, fromY) point to destination point (toX, toY).

var translateTransition = TranslateTransition {
    duration: 2s
    node: node
    fromX: 0
    toX: 100
    repeatCount: 2
    autoReverse: true

Hope this helps as a good starting point. For more information please refer to JavaFX API Documentation


<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>

Tuesday Apr 14, 2009

JavaFX - WebServices

JavaFX provides API to perform asynchronous HTTP request and also utilize RESTful webservices. It also provides parsers for XML and JSON data formats.

Related Posts:

HttpRequest class provides way to specify a location (HTTP URL) and transfer data via InputStream and OutputStream.

def httpRequest = HttpRequest {
    location: ""
    method: HttpRequest.GET
    onInput: function(in: {
        try {
            // Read the content from this InputStream
            // Pass the InputStream to parser 
        finally {

The InputStream obtained from HttpRequest can be parsed using PullParser API. It can parse both XML and JSON data type.

def parser = PullParser {
    documentType: PullParser.XML
    input: <InputStream obtained from HttpRequest>
    onEvent: function(event: Event) {
        // Handle events triggered for each node
        // and retrieve the data

Now we can utilize these APIs to enhance the existing Image Viewer sample so as to retrieve the photos dynamically from Flickr. Source code for PhotoPullParser.fx and Photo.fx are copied directly from InterestingPhotos sample.

For Applet mode, click on above image

For standalone mode

There are many samples at JavaFX Samples website which uses HttpRequest and PullParser APIs. You can refer to those source code for more information.


Saturday Apr 11, 2009

JavaFX - Loading Images

JavaFX provides many features which can be utilized while loading large images. Image has an attribute backgroundLoading which can be set to true, so that image loads in a background thread without freezing the UI. A placeholder image (thumbnail) can be shown using placeholder attribute. The approximate percentage of image's loading that has been completed can be determined from progress attribute.

Now lets see how to use these attributes. In below code we have set backgroundLoading to true and specified placeholder image.

// Load specified image in background thread
var imageView = ImageView {
    image: Image {
        url: "<image url>"
        backgroundLoading: true
        placeholder: Image {
            url: "<thumbnail url>"

Now we can directly get the progress of image loading using imageView.image.progress or we can bind this value to another attribute as shown below

// Bind to Image.progress and print the progress
var progress = bind imageView.image.progress on replace {
    println("progress {progress}");

The same progress attribute can be bound to actual progress bar. In this sample we are binding this progress to width of a Rectangle. So that the width of rectangle is proportional to the progress of image loading as shown below.

Rectangle {
    x: 11
    y: (sceneHeight - 9)
    // Change width of rectangle proportional to image progress
    width: bind ((sceneWidth - 20\* progress)/100.0
    height: 3
    arcWidth: 5
    arcHeight: 5
    fill: Color.RED

Launch Sample -


Wednesday Apr 01, 2009

JavaFX - Book Panel

A new JavaFX sample is released which simulates the flipping pages of book. In various conference and booth many were interested in understanding the logic and wanted to use it in their application. The sample is developed by Chris Campbell and is available at JavaFX - Samples website along with source.

<script src=""></script><script src="/rakeshmenonp/resource/BookPanel/BookPanel.js"></script>

For Applet mode, click on above image

For standalone mode

Try it out! Have fun!

Friday Mar 20, 2009

"Can JavaFX speak my language?"

An attempt to answer two simple questions...
  • Can JavaFX speak my language?
  • How to load custom fonts in JavaFX?

There are many languages for which Java does not provide built-in support. Also you may want to use some nice custom font instead of the logical font. You may also want to ensure that the application looks fine across platforms and does not render boxes or look ugly on some platforms.

JavaFX allows you to package your font along with the application. So that you can use the font with your application and its guaranteed that the application looks fine on all platforms. Here I'll try to render some characters using my mother tongue - Malayalam. Oh! Yes! its a palindrome.

First I downloaded Malayalam font from Indix website. I'll use RRRaghuMalayalam.ttf in my application.

I copied the RRRaghuMalayalam.ttf font file under src/fontttf/fonts/ directory. fontttf is package name of the application. Next I created a mapping file - under src/META-INF/. In mapping file I specified a name for the font and the location of font as shown below. I named the font as Malayalam Font.

Malayalam\\ Font = /fontttf/fonts/RRRaghuMalayalam.ttf

Now the directory structure looks as shown below.

Now lets use this new font in our application. That is simple!. We can just specify the font name as "Malayalam Font". No additional settings required.

Text {
    font: Font {
        name: "Malayalam Font"
        size: 40
    content: "\\u0d2e\\u0d32\\u0d2f\\u0d3e\\u0d33\\u0d02"

<script src=""></script><script src="/rakeshmenonp/resource/FontTTF/FontTTF.js"></script>

For Applet mode, click on above image

For standalone mode

Cool! Now JavaFX can speak my language! Can it speak your language?
You need to try it out!


<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>
<script type="text/javascript"> digg_skin = 'compact'; digg_window = 'new'; </script>


The views expressed on this blog are my own and do not necessarily reflect that of my organization


« February 2017