Thursday Jan 08, 2009

JavaFX - Samples + Usages.

Ah, finally I got JNLP working on my blog, thanks to Sergey and Vikram. I am posting some of my samples with JNLP as we can use as repository for JavaFX samples :). These all are old samples but just with JNLP, so that we can run and see the effect. 

1. Spring Motion : We can create n no. of instance of Spring class. Detail is here. This example deals with Motion, Gradient and Physics Equations.

2. 3D Button Effect:  This example is about PressButton and 3D shadow effect. Detail is here. Basic deals with Shadow Effect, Gradient, and Animation.

3. Glowing Stars in Sky: This example I have created with JavaFX Production Suite. So, we made a home in Photoshop and imported that in JavaFX and then star animation is written in JavaFX. Detail is here. This sample deals with JavaFX Production Suite, Animation, Timelines and Shapes.

4. Colliding Balls: This we have blogged some 4-5 days back. This is again a physics motion with a transparent window. Detail is here. Sample deals with Motion, Equation, Timelines and Gradient. Initial positions and colors are random, so can be wired at sometime + style: StageStyle.TRANSPARENT has been used, so we will not see any frame and so close button will be missing, please press Ctrl + F4 to close the application :). I guess, the good practice is to write esc. key event and call FX.exit().

5. Image Depth support in JavaFX:  Image depth setting or in some language we call it Z-Ordering is supported in JavaFX too. Last to last blog is about that, so here is detail. This sample basically deals with toFront and toBack API of Node and Animation(nothing cool in terms of Animation :D). 

6. Pendulum Motion with Gravity Controller: This is just the last blog. Detail is here. This sample deals with Motion, Gradient and Complex Equations, Binding Feature. I have changed the code little from the prev. blog. Now, it is transparent, so it will give us a better look :)

Feel free to share your experience. I hope all JNLP should work, if not please let me know. Some more I will add soon, actually all these are older samples, just tried to make repoistory, so that easy to find :).

Friday Dec 26, 2008

Colliding Balls + JavaFX

Here is an example of one more physics system - Colliding Balls. This is one of the most common examples we find everywhere. I have written this on transparent window. And so, if we increase the width and height of the stage + width, height variable in MotionBall.fx, it will give us a feeling like FlyingSaucer which keep on running all the way on Desktop. Here it looks on top of my code :D.

So, the netbeans window on back and application is running on top of it. Actually dragged out of the browser and running. Just for adding information, we can run an application from netbeans on browser by Properties -> Run -> Run in Browser. Remeber to set the size of applet correct else the application display will not full.

Initially position in this application has been generated randomly + Damping motion has been applied. So, in sometime all the balls will settle down on base. These all parameters can be adjusted in the file. Ball Effect has been generated as usual by Gradient Effect. Some variable may be unused because of future plan :D.

Here goes the code:

MotionBall.fx :

package collidingballs; import java.lang.\*; import javafx.scene.CustomNode; import javafx.scene.Group; import javafx.scene.Node; import javafx.scene.paint.\*; import javafx.scene.shape.\*; var spring : Number = 0.05; var gravity : Number = 0.05; var width : Number = 240; var height: Number = 320; var start: Number = 0; public class MotionBall extends CustomNode {     public var x: Number;     public var y: Number;     public var velocityX: Number;     public var velocityY: Number;     public var mass: Number;     public var radius: Number;     public var color: Color;     public function collision( balls: MotionBall[]) {         for(ball in balls) {             var dx : Number = ball.x - x;             var dy : Number = ball.y - y;             var distance : Number = Math.sqrt( dx \* dx + dy \* dy );             var minDist : Number = ball.radius + radius;             if( distance < minDist ) {                 var angle : Number = Math.atan2( dy, dx );                 var tx : Number = x + Math.cos( angle ) \* minDist;                 var ty : Number = y + Math.sin( angle ) \* minDist;                 var ax : Number = ( tx - ball.x ) \* spring;                 var ay : Number = ( ty - ball.y ) \* spring;                 velocityX -= ax;                 velocityY -= ay;                 ball.velocityX += ax;                 ball.velocityY += ay;             }         }     }     public function move(balls: MotionBall[]) {         velocityY += gravity;         x += velocityX;         y += velocityY;         if( x + radius >= width ) {             x = width + start - radius;             velocityX \*= - 0.9;         }         if( x - radius <= start ) {             x = start + radius;             velocityX \*= -0.9;         }         if( y + radius >= height ) {             y = height - radius;             velocityY \*= -0.9;         }         if( y - radius <= 40 ) {             y = 40 + radius;             velocityY \*= -0.9;         }     }     public override function create(): Node {         return Group {             content: [                 Circle {                     centerX: bind x,                     centerY: bind y,                     radius: bind radius                     fill: bind RadialGradient {                         centerX: 0.25                         centerY: 0.25                         proportional: true                         stops: [                             Stop {                                 offset: 0.0                                 color: color },                             Stop {                                 offset: 1.0                                 color: Color.BLACK },                         ]                     }                 }             ]         };     }

Main.fx :

package collidingballs; import collidingballs.MotionBall; import java.util.Random; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.stage.Stage; import javafx.stage.StageStyle;

var balls: MotionBall[]; var rnd : Random = new Random(); for( i in [1..5] ) {     insert MotionBall {         x: rnd.nextInt( 240 ),         y: rnd.nextInt( 320 ),         radius: 30         color: Color.rgb(rnd.nextInt(255),rnd.nextInt(255),rnd.nextInt(255))     } into balls; } // timeline for colliding balls var t_collide = Timeline {     repeatCount: Timeline.INDEFINITE     keyFrames: [         KeyFrame {             time: 30ms             action: function() {                 for(ball in balls) {                     ball.collision(balls);                     ball.move(balls);                 }             }         }     ] }; Stage {     title: "Collding Balls"     style: StageStyle.TRANSPARENT     width: 240     height: 320     scene: Scene {         fill: Color.TRANSPARENT         content: [             balls         ]     } }

Friday Dec 19, 2008

Designer + Developer + JavaFX

Here is the little discussion on Designer + Developer workflow in JavaFX. Powered with Project Nile, we can export data from PhotoShop or Illustrator. Actually the complete production suite is awesome and provide developer and designer to work in parallel. Here how it is :

So, Developer can work on the business logic and till that time designer can design the actually content for developer. Finally it will merge in a great style. 

 Basic Requirement to do :

1. JavaFX Production Suite : Download from the start section of

2. For Designer : Any tool, either PhotoShop CS3 or Illustrator CS3. Officially CS3 is the supported platform but it works for CS4 as well.

3. For Developer : Java FX SDK: Download from the start section of

Now, I am going ahead with PhotoShop. Copy the plugin from JavaFX production suite to PhotoShop. Run the PhotoShop, in export it will give you a save option in JavaFX, which basically saves the file in fxz format(a new format, why Sun need a new format, there is a lot of discussion and Jeet has pointed some reason in his blog).

Alright, so work started : 

I was watching the batman movie, so decide to take his awesome car, which is here :

In photoshop, I have changed the hue and exported all in fxz format.

Then I made a Netbeans Project, Copy the fxz file into the project space. We can now click on fxz file, we can see the preview and code as well. Right now, if we put some of the complex features of PhotoShop, I am afaird to say JavaFX will not catch those changes.

So, my fxz file(JavaFX.fxz) looks like this :

 \* Generated by JavaFX plugin for Adobe Photoshop.
 \* Created on Fri Dec 19 19:17:33 2008
//@version 1.0

Group {
    clip: Rectangle { x:0 y:0 width:576 height:432 }
    content: [
        ImageView {
            opacity: 1.0
            x: 0
            y: 0
            image: Image {
                url: "{__DIR__}Background.png"

Actually in my case there was nothing, so it generated a simple code :).

Now, I have made another file, calling it CarRotate.fx :

package psfx;

import java.lang.\*;
import javafx.fxd.FXDLoader;
import javafx.scene.\*;
import javafx.scene.input.\*;
import javafx.scene.paint.Color;
import javafx.scene.shape.\*;
import javafx.stage.\*;

var group = Group {
    content: []
var fxdContent = FXDLoader.load("{__DIR__}JavaFX.fxz"); // loads the content
insert fxdContent into group.content; // inserts the fxd content into the group

Stage {
    title: "JavaFX Invaders"
    resizable: true
    width: 700
    height: 700
    onClose: function() { 
        System.exit (0);

    scene: Scene {
        content: [
            Rectangle {
                x: 330,
                y: 500
                width: 60,
                height: 30
                fill: Color.GRAY
                onMouseClicked: function( e: MouseEvent ):Void {
                    fxdContent.rotate = 90;

Some part of the code is point of interest :
  var group = Group {

    content: []


var fxdContent = FXDLoader.load("{__DIR__}JavaFX.fxz"); // loads the content

insert fxdContent into group.content; // inserts the fxd content into the group

Here I have loaded the .fxz file into var fxdContent which is a node and node means things are in our hand. I have simply written a rotate equation on a button click which is working nicely.

We can see the rotated car and hue which is the asset of PhotoShop in Green color. Huh, finally its done. Sorry, for posting bad example.

Sunday Dec 14, 2008

If you are in JavaFX and looking for more samples, please visit :

You can see nice projects like RSSReader, GameScreenFlow and many more. Welcome to the party :).

Friday Jul 18, 2008

New JavaFX and Netbeans 6.1

Ah, in last 7 days I had written few examples of Java FX and it's nothing of use. I have installed the new plugin of JavaFX on Netbeans6.1. Quite a cool plugin, with FX builder, debugger and many more features. But all with these, the API of JavaFX also got changed. And none of the old code is running on new API base.

Anyway it takes sometime to get acquainted with it but whatever be the changes, new one looks cool. Have a look at the new builder of JavaFX :

How to learn Java FX with new API - Best is to go and check the Netbeans examples which are quite awesome. Knowing about the API's and Attributes. Check this path:

There are some issues I have seen with the ImageViewer feature in Netbeans. It crashes sometime, ok be honest, most of the time. So, the best way to handle it, run the ImageViewer only when you are done with the code. Close it, if you are changing the code. Open it again when you are done with changes. I guess, the subsequent patched will make it stable.

Tuesday Jul 15, 2008

JavaFX small Examples. is one of my loving sites, yes because I got all types of code on this site. And the best part it will show you different view of codes like API based, Application based and many more. Don't know how a JFileChooser works!! Just go on the site and check for the smallest code for JFileChooser. It contains code of Java, C++, .Net, JavaScript, HTML, Python... whatever language I heard of:-). 

I have not seen any repository regarding JavaFX, probably because of being very new. I proposed the site owner to add JavaFX codes as well. For adding the support of JavaFX, I have started writing small JavaFX code. Small means very small. 

Here are some of the codes I have written. Please have a look and feel free to use it.

1. MapNavigation_MouseEvent.fx:  It will navigate into the map. I have not yet checked the boundary condition. Simple 14-15 line of code.

2. CarAcrossRoad.fx: Running car across road with easeboth style. This is different from linear motion. This motion smooth the object at the end. Have a look ! Some 10-11 lines of code.

3. PolygonInsideFrame.fx: Shapes are easy to make in JavaFX. I have just made one polygon(Octagone) inside a frame. Actually, I wanted to make the STOP symbol of traffic light. 

4. RotatingImage.fx: Rotation of Image or any transformation is very easy in JavaFX. This example depicts a normal image rotation.

5. MoreComponentsInFrame.fx: This example will show how to add components like Button, CheckBox, RadionButton and many more inside Frame of JavaFX.

6. FullScreenExample.fx: How to run a application in full screen. There is a feature of making undecorated value : true which remove the frame border,close button in the application. It can give you a feeling like the start up screen of Netbeans. This example is for full screen but we can manage the frame size anytime. It gives you a nice look for startup. I have used the same in first navigation example.

All these examples are very trivial but I guess can help for someone who is getting started with JavaFX like me.


Vaibhav Hi, I am Vaibhav Choudhary working in Oracle with JDK team. This blog is all about simple concept of Java, JVM and JavaFX.


« June 2016