Hyperlink in JavaFX

It's a long time being blogging. Actually not done anything new from long time :). Here is one simple concept which some guys asked me. We have provided hyperlink API in JavaFX 1.2 but some of us struggled to open a URL using hyperlink API.

Hmm, 2 ways to do it actually.

No1 : Use the Desktop API of JDK6. It's simple to use. One example is here.

So, very basic code will go like this :

  
package sample2;

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.*;
import java.net.*;

Stage {
    title: "HyperLink to URL"
    width: 240
    height: 320
    scene: Scene {
        content: [
            Hyperlink{
                translateY: 160
                translateX: 40
                width: 150
                text: bind "Visit javafx Samples! "
                action: function():Void{
                    java.awt.Desktop.getDesktop().browse(new URI("http://javafx.com/samples"));
                }
            }
        ]
    }
}

So, 2 things for running this code. First,Desktop API has been added in JDK6, so this code won't run on JDK5. Second, Add rt.jar(rt.jar of JDK6) file in the Libraries if you are using Netbeans

No2 : For only JavaFX code, we can use AppletStageExtension like this :

package sample1;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.stage.AppletStageExtension;

Stage {
    title: "Hyperlink to URL"
    width: 250
    height: 80
    scene: Scene {
        content: [
            Hyperlink {
                text: "JavaFX Samples !"
                action: function() {
                       AppletStageExtension.showDocument("http://javafx.com/samples");
                }
            }
        ]
    }
} 

In this case, you cant send hyperlink from Desktop Application, but it will work fine for applet or Browser application. So, best is to use this and then use our normal funda : if {__PROFILE__}" != "browser") --> use the Desktop API code. What you say :).

Please let me know if there is any issue in the code ! Or also if there is any better way to do this.

Z-Order is supported in JavaFX !

While writing some of the samples in which we have to play with images, we sometimes has to manage the depth of the images. Like for the Carousel example, every image has a depth. In that example, actually images are not overlapping with each other, so we never need to write the Z-Order concept. But if someone want to write a Carousel or some application in which Images are residing over other images, we need to set the Z-order of Images. Z-Order in literal term means depth-ness of images. JavaFX gracefully provide API's to set the Z-order of images. With a simple call, you can set the images toFront or toBack features.

In this example, I have taken 3 images and try to set the depth-ness of images on the event of Buttons.

First Image on Top Second Image on Top

Third Image on Top

Here is the code to set the Z-Order :

package zorder;

import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.ext.swing.SwingButton;

var im1 = ImageView {
    x: 100
    y: 100
    image: Image {
        url: "{__DIR__}im1.PNG"
    }
    opacity: 0.8
        };

var im2 = ImageView {
    x: 130
    y: 130
    image: Image {
        url: "{__DIR__}im2.PNG"
    }
    opacity: 0.8
        };

var im3 = ImageView {
    x: 160
    y: 160
    image: Image {
        url: "{__DIR__}im3.PNG"
    }
    opacity: 0.8
        };

var gp = Group {
    content:[
        im1, im2,im3
    ]

}
Stage {
    title: "Application title"
    width: 400
    height: 400
    scene: Scene {
        fill: Color.BLACK
        content: [
            gp,
            SwingButton {
                translateX: 10
                translateY: 10
                text: "Image 1"
                action: function() {
                    im1.toFront();
                }
            }
            SwingButton {
                translateX: 90
                translateY: 10
                text: "Image 2"
                action: function() {
                    im2.toFront();
                }
            }
            SwingButton {
                translateX: 170
                translateY: 10
                text: "Image 3"
                action: function() {
                    im3.toFront();
                }
            }
        ]
    }
}

From next blog, I will use applet or JNLP in place of images, as suggested by Dmitry in last blog. Pictures make it bulky and uneasy to load. But I was getting some problem in deploying the application on Sun blog which will be rectified soon.

JavaFX production Suite - How it work

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 javafx.com.

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 javafx.com

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: [
            group
            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.

JavaFX - Developer and Designer work !

One more example of JavaFX production Suite. Though the complete thing can be done in Photoshop alone but I am just giving an example. I have made a house in Photoshop, which is not very good :(, but fair enough. And I animated the star effect in JavaFX.

So, here is my home in photoshop :

Actually this is funny, I was following a tutorial to make house and in temptation, I made shadow as well, but there is no meaning of shadow in night :). Now, I filled star sparking effect in this from JavaFX.

Filling star effect need same which we have written for sparkling glasses. Just some changes here and there. In the last blog we have already discussed how to import work from Photoshop.

Here are the things to download:

1. House in fxz format .

2. Code (Main.fx, Star.fx)

Lot many things can be done. But I don't know Photoshop.

Physics Motion - Spring In JavaFX

3 weeks back, we were thinking of some cool application to make. I am a guy who has seen very less outside world, so coming up with some great idea is always tough for me. So, deciding that, I went back to my tenth class physics book and saw some of the cool physics motion. Its one of the tough subject and always screw me in exam. Searching some of the easy equation, I though to make one spring motion. Meantime, I though there is some spring motion residing in our repository. Actually one of the Josh applications do it in awesome way, but still we were missing the actual feel of Spring motion because of the gig-gag and spiral stuff attached to the wall and spring is going up and down in it, with a complete view of awesomeness :). This is what finally we achieve from this blog :



I can still bet this can be 3 times much better than what you are seeing here. So, little of good news here that this sample can be executed on mobile



Regret to say, ball will not look like a real 3D ball in FX Mobile because of Bug ID: RT-2205, which basically speaks that Mobile Runtime don't understand Radial Gradient, hoping this will be fixed soon.

Here are the code files :

1. Main file.

2. Spring file.

3. SpringEquation file.

Enjoy FX'ing !

3D E'FX's in JavaFX

Me and Vikram was looking today some of the cool flash examples and I have seen the button effect at some place, when you press the button it really goes like inside and coming out. But that was an effect achieved by the images(two different images, one unpressed button and one pressed button) and then we thought to simulate this effect by code. Somehow we are able to do that in FX, here is the final outcome:

What we have tried to do is pressing one button will put the other in unpressed mode and vice-versa. This has been achieved by some of the cool API's of JavaFX. And we have used the DistantLight effect of JavaFX which gives a lighting effect in its awesome way. Actually this can be more cooler but I left that for developer to modify it according to their need :). But this is a modular code and can be used in any of the button place.

Here is the simple code for the same(again code is not written in the most optimized way but in the best way for understanding) :

package lighteff;

import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var factor = 5;
var scale = 1.0;
var factor1 = 10;
var scale1 = 0.85;

Stage {
  title: "Control Panel"
  width: 290
  height: 180
  style: StageStyle.UNDECORATED
  scene: Scene {
      fill: Color.BLACK
      content: [
          Group {
              effect: Lighting {
                  light: DistantLight {
                      azimuth: 90
                      elevation: 60
                  }
                  surfaceScale: bind factor
              }
              content: [
                  Circle {
                      centerX: 100,
                      centerY: 100
                      radius: 40
                      fill: Color.RED


                      onMousePressed: function( e: MouseEvent ):Void {
                          scale = 0.85;
                          factor = 10;
                          scale1 = 1.0;
                          factor1 = 5;
                      }
                  },
                  Text {
                      fill: Color.WHITE
                      scaleX: bind scale
                      scaleY: bind scale
                      font: Font {
                          size: 24
                      }
                      x: 71,
                      y: 105
                      content: "Press"
                  }
              ]
          },
          Group {
              effect: Lighting {
                  light: DistantLight {
                      azimuth: 90
                      elevation: 60
                  }
                  surfaceScale: bind factor1
              }
              content: [

                  Circle {
                      centerX: 200
                      centerY: 100
                      radius: 40
                      fill: Color.BLUE
                      onMousePressed: function( e: MouseEvent ):Void {
                          scale1 = 0.85;
                          factor1 = 10;
                          scale = 1.0;
                          factor = 5;
                      }
                  },
                  Text {
                      fill: Color.WHITE
                      scaleX: bind scale1
                      scaleY: bind scale1
                      font: Font {
                          size: 24
                      }
                      x: 171,
                      y: 105
                      content: "Press"
                  }
              ]
          }
      ]

  }
}  

Scene to Scene in JavaFX

Any middle or big application demands to change one window to other at some point of time. A window type of thing in JavaFX is represented by Scene and its each to switch between scene or to run multiple scenes.

Here is a small application in which clicking on image will put you in another window, written "Hello World"

package sample6;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;

var s_new:Scene;
var s = Scene {
   content: [
       Text {
           font: Font {
               size: 24
           }
           x: 10,
           y: 30
           content: "HelloWorld"
       }
   ]
};

var s1 = Scene {
   content: [
       ImageView {
           image: Image {
               url: "{__DIR__}im2.PNG"
           }
           onMouseClicked: function( e: MouseEvent ):Void {
               s_new = s;
           }
       }
   ]
};

s_new = s1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: bind s_new
}

So, its simple, on mouse click, I have bind a scene variable with a new scene. That's it !

Moving image from MouseDrag

So, we got a discussion here. Last week we(me, Subrata and Vikram, both my office colleagues) are discussing about dragging an image with mouse pointer in JavaFX.

So, this was the first code. Point is to drag an image from the same place where we first hit the mouse, like it happens when we drag a folder :

package sample5;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import java.lang.System;

var x: Number;
var y: Number;

var im = Image {
       url: "{__DIR__}im2.PNG"
   };

var temp1:Number = 0;
var temp2: Number = 0;
var count: Integer = 1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: Scene {
       content: [
           ImageView {
               x: bind x - temp1
               y: bind y - temp2
               image: Image {
                   url: "{__DIR__}im2.PNG"
               }
               onMouseDragged: function( e: MouseEvent ):Void {
                   x = e.x;
                   y = e.y;
                   if(count <= 1) {
                       temp1 = e.x;
                       temp2 = e.y;
                   }
                   count++;
              }
            }
       ]

   }
}

You can see those patches of counts and flags which makes the code so unstable. And a bug, when you leave the mouse once, it cant grip the image from your mouse point again.

Subrata has written a cleaner code which works correct and here it is :

 
package mousedrag;
  
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
  
/**
* @author Subrata Nath
*/
  
var imgX : Number = 20;
var imgY : Number = 20;
var startX : Number;
var startY : Number ;
var distX : Number;
var distY : Number ;
  
    Stage {
        title: "Mouse smooth drag"
        width: 250
        height: 280
        scene: Scene {
            content: [
                ImageView {
                    x : bind imgX

                    y : bind imgY
                    image: Image {url: "{__DIR__}Mail.png"
                    }
                    onMousePressed: function( e: MouseEvent ):Void {
                        startX = e.x;

                        startY = e.y;
         // Calculate the distance of the mouse point from the image top-left corner
         // which will always come out as positive value
                        distX = startX - imgX;

                        distY = startY - imgY;
                    }
                    onMouseDragged: function( e: MouseEvent ):Void {
                        // Find out the new image postion by subtracting the distance part from the mouse point.

                        imgX = e.x - distX;
                        imgY = e.y - distY;
                    }
                }
            ]
  
        }
}

Sparkling Glass

What to achieve: A sparkling glass(beer glasses are clean and shiny before beer get served) like this.

So, our aim is to make those sparkling effect on glass. Here is the code in JavaFX(things are little hard coded but better for understanding):

 
package sample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.input.MouseEvent;
import javafx.scene.transform.Rotate;
import javafx.scene.shape.Polygon;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Circle;
import  javafx.scene.Group;
/**
 * @author Vaibhav
 */

var r = 0.0;
var t = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                r => 360.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t.play();
var op = 1.0;
var t1 = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                op => 0.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t1.play();

Stage {
    title: "Sparkling on Glass"
    width: 250
    height: 480
    scene: Scene {
        fill: Color.BLACK
        content: [
            ImageView {
                image: Image {
                    url: "{__DIR__}wineglass.png"
                }
            }
            Polygon {
                rotate: bind r;
                translateX: 130
                translateY: 100
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 130
                translateY: 100
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 50
                translateY: 50
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 50
                translateY: 50
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 30

                translateY: 120
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 30
                translateY: 120
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
        ]

    }
}

Same animation in flash is here : http://www.entheosweb.com/Flash/sparkling_effect.asp

JavaFX Presentation

Today we had a good BOJUG meet at Thoughtworks. I have presented my small JavaFX slides. Followed to that, Sathish has given a presentation on Bean Binding and Bean Validation. He talked about JSR 295 + JSR 303. Quite a handsome presentation. After this, Sriram has taken the presentation on Tomcat internal and it seems he really went into internal. He talked about how to write own ClassLoader in tomcat + how to provide a webapps on fly, many more. It was a nice presentation without presentation slides :-).

Here is my presentation. Please feel free to comment.

Filling eyes effect in JavaFX

This is one simulation of Golden Eyes :-D(with an ugly face). I tried to make one use of Gaussian Blur which is applied in the white color of eyes. Adding this spot in the eyes gives a real simulation.



package eyes;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Arc;
import javafx.scene.geometry.*;
import javafx.scene.paint.Color;
import javafx.scene.paint.*;
import javafx.scene.effect.*;

var y: Number = 150;
Frame {
title: "Golden Eyes"
width: 500
height: 500
closeAction: function() { java.lang.System.exit( 0 );
}
visible: true

stage: Stage {
fill: Color.GRAY;
content: [

Circle {
centerX: 160, centerY: y
radius: 23
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 1.0
endY: 0.0
proportional: true
stops: [
Stop { offset: 0.0 color: Color.GOLD },
Stop { offset: 1.0 color: Color.BLACK }
]
}
opacity: 0.9
},

Circle {
centerX: 160, centerY: y
radius: 10
fill: Color.BLACK
},
Circle {
centerX: 166, centerY: y - 5
radius: 5
fill: Color.WHITE;
effect : GaussianBlur {
radius: 6
}
},
Circle {
centerX: 250, centerY: y
radius: 23
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 1.0
endY: 0.0
proportional: true
stops: [
Stop { offset: 0.0 color: Color.BLACK },
Stop { offset: 1.0 color: Color.GOLD }
]
}
opacity: 0.2
},


Circle {
centerX: 250, centerY: y
radius: 10
fill: Color.BLACK
},
Circle {
centerX: 244, centerY: y - 5
radius: 5
fill: Color.WHITE;
effect : GaussianBlur {
radius: 6
}
},
Circle {
centerX: 200, centerY: 180
radius: 100
fill: Color.SIENNA
opacity: 0.1

},
Polyline {
stroke:Color.BLACK
points: [
200,160,
220.0,220.0,
180.0,220.0
]
},
Path {
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 1.0
endY: 0.0
proportional: true
stops: [
Stop { offset: 0.0 color: Color.BLACK },
Stop { offset: 1.0 color: Color.RED }
]
}
elements: [
MoveTo { x: 160 y: 240 },
ArcTo { x: 250 y: 240 radiusX: 100 radiusY: 100},

]
},

]
}
}

JavaFX Reflection Game !

On the way to exploring little more API of JavaFX, I reached to a fair animation. That is reflection. Here is the output of "crying baby".
Here is the code:

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.effect.*;

Frame {
title: "Crying Baby"
width: 400
height: 700
closeAction: function() { java.lang.System.exit( 0 );
}
visible: true

stage: Stage {
fill: Color.WHITE
content: [
ImageView {
x: 100
y:10
image: Image {
url: "http://www.powermixradio.com/GGG-SAD-CARTOON.jpg"
}
effect: Reflection {
bottomOpacity:0.1
fraction: 1
topOffset: 50
}
},
ImageView {
x:0
y:300
image: Image {
url: "http://www.toyotapartsstore.com/images/71111_2_%20mirror_8CE1.jpg"
}
opacity:0.5
}
]
}
}

Things to watch:

1. Effect: Reflection -

bottomOpacity:0.1 - set the opacity of image in reflection.

fraction: 1 - set how much part of the image should come in reflection.

topOffset: 50 - How far image from the focus. There are some more useful parameters in this.

2. Opacity of second Imageview allow me to see the reflection of first image, else it will cover the reflection.

On the way to make some moving animation, but I don't know what happened to the support of gif image. gif image works like static image, don't know why ?

Navigation Code in JavaFX

So finally I am able to write a small code with the new Java FX API and Builder provided in NB 6.1. I have also seen one bug got fixed (maybe initially it was handled on a different way). Initially when we make any FX project in Netbeans, it basically store the *.fx code into classes folder as well. There is no way one can find the .class file of the .fx file, which is not a problem now.

I have written one small navigation code of map from key control. Which moves the map left, right, up and down from the corresponding key. And the most part of the code line is to handle the boundary condition like the image should not move left when it is already in left most region and so on. Thanks to Vikram for helping me out in writing boundary condition, this is always confusing for me :-D. Here is the small code:

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.paint.Color;
import javafx.input.KeyEvent;
import javafx.input.KeyCode;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.input.MouseEvent;
import javafx.scene.transform.Translate;
import java.lang.*;
import javafx.scene.geometry.Line;

var x1 : Number = 0;
var y1 : Number = 0;
//var myImage = Image { url: "{__DIR__}/./earth-map-big.jpg" };
var myImage = Image { url: "http://arstechnica.com/reviews/4q00/macosx-pb1/images/earth-map-big.jpg" };
var line: Line;

Frame {
title: "MyApplication"
width: 500
height: 500
resizable: false

closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
stage: Stage {
fill:Color.BLACK
content: [
ImageView {
image : myImage
transform : [
Translate { x : bind x1, y : bind y1 }
]
onKeyPressed: function( e: KeyEvent ):Void {
System.out.println(x1 + " " + y1);
if(
e.getKeyText() == "Left")
{
if(x1 < 0) {
System.out.println(x1);
x1+=50;
}
}
if(
e.getKeyText() == "Right")
{
if(Math.abs(x1 - 500) < myImage.width) {
System.out.println(x1);
x1-=50;
}
}
if(
e.getKeyText() == "Down")
{
if(Math.abs(y1 - 500) < myImage.height) {
System.out.println(y1);
y1-=50;
}
}
if(e.getKeyText() == "Up")
{
if(y1 < 0) {
System.out.println(y1);
y1+=50;
}
}
}
opacity:1
}
]
}
}

I am loading the image from URL itself, so it will take sometime(because Image size is 3200 X 1600). Rest all is mathematics :-). Still lot more fancy job to do !

Original Post

Small Java FX example

OK, nothing to laugh. I know my animation sense is little poor. But here I tried to move a ship, in the way they show in movies -D. Nothing like that, I have tried to give a sinusoidal movement of a ship. In the comment section, you can see there is a sea image as well. Animation was looking little ugly with sea, so I removed it :-). But point to note, you can give any animation to a image based on any mathematical methods. And if you have a complex equation, you can fit that in, in place of my simple sin curve. Here is the code:

package move;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.paint.Color;
import java.lang.Math;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

var time : Number = 0.0;


var timeline : Timeline = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames :
KeyFrame {
time : 5ms
action: function() {
time += 0.02;
}
}
};
Frame {
title: "MyApplication"
width: 1200
height: 500
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true

stage: Stage {
fill: Color.AQUA
content: [
/* ImageView {
image: Image {
url: "http://birdblog.merseyblogs.co.uk/sea21206.jpg"
}
},
*/
ImageView {
x:bind(100 + time * 10)
y:bind(100 + Math.cos(time) * 10)
image: Image {
url: "http://lal.cas.psu.edu/Research/visualiz/images/boat.gif"
}
}
]

}
}
timeline.start();


Just 3-4 drags from Netbeans 6.1 FX viewer :

1. One Timeline and an action inside it.

2. One Frame.

3. One Image.

Thats it ! Set the code logic and rest leave all the work on binding :-). Quite simple, just that I am not able to make some good animation out of it !

Originally posted on http://blogs.sun.com/vaibhav

JavaFX + Java

Tough to understand the code conversion :). I have seen the Java code of corresponding JavaFX code. Though its tough to map but we can see the correct correspondence. Let see this :

import javafx.ui.*;

Frame {
title: "Hello World JavaFX"
width: 200
content: Label {
text: "Hello World"
}
visible: true
}

and the corresponding Java Code:

import com.sun.javafx.runtime.Entry;
import com.sun.javafx.runtime.FXObject;
import com.sun.javafx.runtime.InitHelper;
import com.sun.javafx.runtime.Public;
import com.sun.javafx.runtime.Static;
import com.sun.javafx.runtime.location.AbstractVariable;
import com.sun.javafx.runtime.location.BooleanVariable;
import com.sun.javafx.runtime.location.DoubleVariable;
import com.sun.javafx.runtime.location.ObjectVariable;
import com.sun.javafx.runtime.sequence.Sequence;
import javafx.ui.Frame;
import javafx.ui.Frame.Intf;
import javafx.ui.Label;
import javafx.ui.Label.Intf;

public class Hello
implements Hello.Intf, FXObject
{
@Public
@Static
public static Object javafx$run$(Sequence paramSequence)
{
Frame localFrame = new Frame(true);
localFrame.get$title().setFromLiteral("Hello World JavaFX");
localFrame.get$width().setAsDoubleFromLiteral(200.0D);
Label localLabel = new Label(true);
localLabel.get$text().setFromLiteral("Hello World");

localLabel.initialize$(); localFrame.get$content().setFromLiteral(localLabel);

localFrame.get$visible().setAsBooleanFromLiteral(true);

localFrame.initialize$(); return localFrame; }
public void initialize$() { addTriggers$(this); userInit$(this); postInit$(this); InitHelper.finish(new AbstractVariable[0]); }
public static void addTriggers$(Hello.Intf paramIntf) { }
public Hello() { this(false); initialize$(); }
public static void userInit$(Hello.Intf paramIntf) { }
public static void postInit$(Hello.Intf paramIntf) { }
public static void main(String[] paramArrayOfString)
throws Throwable { Entry.start(Hello.class, paramArrayOfString);
}
}

This I have done by generating the class file and then de-compiled the class file.

Frame of JavaFX - Frame localFrame = new Frame(true);
title and text of JavaFX
- localFrame.get$title().setFromLiteral(”Hello World JavaFX”);
- localLabel.get$text().setFromLiteral(”Hello World”);

Visibility of JavaFX - localFrame.get$visible().setAsBooleanFromLiteral(true);

Lot of code is written to support JavaFX environment, which is completely justifiable. Don’t able to get why methods are written with $. If any clue, please let us know also.